fix: sync the minZoom and maxZoom in drag-canvas and graph; feat: initial x and y for combo data.

CHANGELOG.md

@@ -3,7 +3,9 @@
 #### 3.5.10
 - fix: fitView and fitCenter with animate in the initial state;
 - fix: dulplicated edges in nodeselectchange event of brush-select;
-- fix: triple click and drag canvas problem.
+- fix: triple click and drag canvas problem;
+- fix: sync the minZoom and maxZoom in drag-canvas and graph;
+- feat: initial x and y for combo data.
 
 #### 3.5.9
 - fix: multiple animate update shape for combo;

src/behavior/zoom-canvas.ts

@@ -6,8 +6,8 @@ export default {
   getDefaultCfg(): object {
     return {
       sensitivity: 2,
-      minZoom: 0.2,
-      maxZoom: 10,
+      minZoom: undefined,
+      maxZoom: undefined,
       enableOptimize: false,
       optimizeZoom: 0.7
     };
@@ -34,33 +34,35 @@ export default {
       ratio = 1 + DELTA * sensitivity;
     }
     const zoom = ratio * graph.getZoom();
-    if (zoom > this.get('maxZoom') || zoom < this.get('minZoom')) {
+    const minZoom = this.get('minZoom') || graph.get('minZoom');
+    const maxZoom = this.get('maxZoom') || graph.get('maxZoom');
+    if (zoom > maxZoom || zoom < minZoom) {
       return;
     }
 
     const enableOptimize = this.get('enableOptimize')
-    if(enableOptimize) {
+    if (enableOptimize) {
       const optimizeZoom = this.get('optimizeZoom')
 
       const currentZoom = graph.getZoom()
-      if(currentZoom < optimizeZoom) {
+      if (currentZoom < optimizeZoom) {
         const nodes = graph.getNodes()
         const edges = graph.getEdges()
         nodes.map(node => {
-          if(!node.destroyed) {
+          if (!node.destroyed) {
             const children = node.getContainer().get('children')
             children.map(shape => {
-              if(!shape.destoryed && !shape.get('isKeyShape')) {
+              if (!shape.destoryed && !shape.get('isKeyShape')) {
                 shape.hide()
               }
             })
           }
         })
-  
+
         edges.map(edge => {
           const children = edge.getContainer().get('children')
           children.map(shape => {
-            if(!shape.get('isKeyShape')) {
+            if (!shape.get('isKeyShape')) {
               shape.hide()
             }
           })
@@ -71,23 +73,23 @@ export default {
         nodes.map(node => {
           const children = node.getContainer().get('children')
           children.map(shape => {
-            if(!shape.get('visible')) {
+            if (!shape.get('visible')) {
               shape.show()
             }
           })
         })
-  
+
         edges.map(edge => {
           const children = edge.getContainer().get('children')
           children.map(shape => {
-            if(!shape.get('visible')) {
+            if (!shape.get('visible')) {
               shape.show()
             }
           })
         })
       }
     }
-    
+
     graph.zoom(ratio, { x: point.x, y: point.y });
     graph.emit('wheelzoom', e);
   },

src/graph/controller/item.ts

@@ -130,8 +130,8 @@ export default class ItemController {
       const children: ComboTree[] = (model as ComboConfig).children;
 
       const comboBBox = getComboBBox(children, graph);
-      model.x = comboBBox.x || Math.random() * 100;
-      model.y = comboBBox.y || Math.random() * 100;
+      model.x = comboBBox.x || model.x || Math.random() * 100;
+      model.y = comboBBox.y || model.y || Math.random() * 100;
 
       const comboGroup = parent.addGroup();
       comboGroup.setZIndex((model as ComboConfig).depth as number);

stories/Combo/component/default-combo.tsx

@@ -130,6 +130,11 @@ const data: GraphData = {
     }, {
       id: 'E',
       // type: 'rect'
+    }, {
+      id: 'empty',
+      label: 'empty',
+      x: 300,
+      y: 300
     }]
 };
 
@@ -216,7 +221,7 @@ const DefaultCombo = () => {
         height: 800,
         groupByTypes: false,
         modes: {
-          default: ['drag-canvas']
+          default: ['drag-canvas', 'drag-combo']
         },
         // layout: {
         //   type: 'comboForce'

stories/Interaction/component/drag-canvas.tsx

@@ -69,8 +69,9 @@ const DragCanvas = () => {
         container: container.current as string | HTMLElement,
         width: 800,
         height: 500,
+        minZoom: 0.001,
         modes: {
-          default: ["drag-canvas"]
+          default: ["drag-canvas", 'zoom-canvas']
         },
         plugins: [grid]
       });