From 2dafd0dd324c7e1e0541b903e5dc4681b4c7f290 Mon Sep 17 00:00:00 2001 From: Yanyan-Wang Date: Thu, 2 Jul 2020 15:23:07 +0800 Subject: [PATCH] fix: sync the minZoom and maxZoom in drag-canvas and graph; feat: initial x and y for combo data. --- CHANGELOG.md | 4 ++- src/behavior/zoom-canvas.ts | 28 ++++++++++--------- src/graph/controller/item.ts | 4 +-- stories/Combo/component/default-combo.tsx | 7 ++++- stories/Interaction/component/drag-canvas.tsx | 3 +- 5 files changed, 28 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c60e062be6..a0d3f4529c 100644 --- a/CHANGELOG.md +++ b/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; diff --git a/src/behavior/zoom-canvas.ts b/src/behavior/zoom-canvas.ts index c9c0aa82a9..e78982c570 100644 --- a/src/behavior/zoom-canvas.ts +++ b/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); }, diff --git a/src/graph/controller/item.ts b/src/graph/controller/item.ts index c1d65a8a7d..518b07c27b 100644 --- a/src/graph/controller/item.ts +++ b/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); diff --git a/stories/Combo/component/default-combo.tsx b/stories/Combo/component/default-combo.tsx index 8ec821e2f0..21ba645719 100644 --- a/stories/Combo/component/default-combo.tsx +++ b/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' diff --git a/stories/Interaction/component/drag-canvas.tsx b/stories/Interaction/component/drag-canvas.tsx index 3cd25df922..b2863cf51c 100644 --- a/stories/Interaction/component/drag-canvas.tsx +++ b/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] });