From bc6e02f980b9959b13a7c3dfc8e2d7c54411fae1 Mon Sep 17 00:00:00 2001 From: qilei0529 Date: Thu, 1 Apr 2021 01:02:52 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BE=8E=E5=8C=96=20=E4=B8=BB=E7=95=8C?= =?UTF-8?q?=E9=9D=A2=20=E8=8A=82=E7=82=B9=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/common/baseCell/behavior.ts | 36 +++++++------ packages/core/src/common/baseCell/branch.ts | 51 ++++++++---------- packages/core/src/common/baseCell/start.ts | 40 ++++++++------ .../src/mods/flowChart/createFlowChart.ts | 2 +- .../core/src/mods/flowChart/index.module.less | 52 +++++++++++++++++++ 5 files changed, 119 insertions(+), 62 deletions(-) diff --git a/packages/core/src/common/baseCell/behavior.ts b/packages/core/src/common/baseCell/behavior.ts index 489a1ec..9e70930 100644 --- a/packages/core/src/common/baseCell/behavior.ts +++ b/packages/core/src/common/baseCell/behavior.ts @@ -3,16 +3,20 @@ import { Shape } from '@antv/x6'; const schema = { base: Shape.Rect, shape: 'imove-behavior', - width: 80, - height: 40, + width: 60, + height: 30, label: '处理', attrs: { body: { - fill: '#AACCF7', - stroke: '#5E9CEE', + fill: '#BCD0FF', + stroke: '#6B8CD7', + rx: 4, + ry: 4, }, label: { fill: '#333', + fontSize: 13, + fontWeight: 500, textWrap: { width: '100%' }, }, }, @@ -22,10 +26,10 @@ const schema = { position: 'top', attrs: { circle: { - r: 3, + r: 2.5, magnet: true, - stroke: '#666', - strokeWidth: 1, + stroke: '#4E68A3', + strokeWidth: 2, fill: '#fff', }, }, @@ -34,10 +38,10 @@ const schema = { position: 'right', attrs: { circle: { - r: 3, + r: 2.5, magnet: true, - stroke: '#666', - strokeWidth: 1, + stroke: '#4E68A3', + strokeWidth: 2, fill: '#fff', }, }, @@ -46,10 +50,10 @@ const schema = { position: 'bottom', attrs: { circle: { - r: 3, + r: 2.5, magnet: true, - stroke: '#666', - strokeWidth: 1, + stroke: '#4E68A3', + strokeWidth: 2, fill: '#fff', }, }, @@ -58,10 +62,10 @@ const schema = { position: 'left', attrs: { circle: { - r: 3, + r: 2.5, magnet: true, - stroke: '#666', - strokeWidth: 1, + stroke: '#4E68A3', + strokeWidth: 2, fill: '#fff', }, }, diff --git a/packages/core/src/common/baseCell/branch.ts b/packages/core/src/common/baseCell/branch.ts index 17680e1..bf72337 100644 --- a/packages/core/src/common/baseCell/branch.ts +++ b/packages/core/src/common/baseCell/branch.ts @@ -3,24 +3,25 @@ import { Shape } from '@antv/x6'; const schema = { base: Shape.Polygon, shape: 'imove-branch', - width: 80, - height: 40, + width: 40, + height: 30, attrs: { body: { strokeWidth: 2, - stroke: '#333', - fill: '#FFFC7C', + stroke: '#FFB96B', + fill: '#FFF6D1', refPoints: '0,10 10,0 20,10 10,20', }, label: { refX: 0.5, - refY: 0.5, + refY: 1, text: '判断', fill: '#333', - fontSize: 14, + fontSize: 13, + fontWeight: 500, textAnchor: 'middle', - textVerticalAnchor: 'middle', - textWrap: { width: '100%' }, + textVerticalAnchor: 'bottom', + transform: 'matrix(1,0,0,1,0,-6)', }, }, ports: { @@ -29,23 +30,22 @@ const schema = { position: 'top', attrs: { circle: { - r: 3, + r: 2.5, magnet: true, - stroke: '#666', - strokeWidth: 1, + stroke: '#DD7500', + strokeWidth: 2, fill: '#fff', }, }, }, right: { - zIndex: 999999999, position: 'right', attrs: { circle: { - r: 3, + r: 2.5, magnet: true, - stroke: '#666', - strokeWidth: 1, + stroke: '#DD7500', + strokeWidth: 2, fill: '#fff', }, }, @@ -54,14 +54,13 @@ const schema = { }, }, bottom: { - zIndex: 999999999, position: 'bottom', attrs: { circle: { - r: 3, + r: 2.5, magnet: true, - stroke: '#666', - strokeWidth: 1, + stroke: '#DD7500', + strokeWidth: 2, fill: '#fff', }, }, @@ -73,26 +72,22 @@ const schema = { position: 'left', attrs: { circle: { - r: 3, + r: 2.5, magnet: true, - stroke: '#666', - strokeWidth: 1, + stroke: '#DD7500', + strokeWidth: 2, fill: '#fff', }, }, }, }, items: [ - { - id: 'top', - group: 'top', - }, { id: 'right', group: 'right', attrs: { text: { - text: '是', + text: '', }, }, }, @@ -101,7 +96,7 @@ const schema = { group: 'bottom', attrs: { text: { - text: '否', + text: '', }, }, }, diff --git a/packages/core/src/common/baseCell/start.ts b/packages/core/src/common/baseCell/start.ts index bd2aa0b..77f4578 100644 --- a/packages/core/src/common/baseCell/start.ts +++ b/packages/core/src/common/baseCell/start.ts @@ -3,17 +3,19 @@ import { Shape } from '@antv/x6'; const schema = { base: Shape.Circle, shape: 'imove-start', - width: 80, - height: 80, + width: 60, + height: 60, label: '开始', attrs: { body: { - fill: '#333', - strokeWidth: 1, - stroke: '#333', + fill: '#6B8CD7', + strokeWidth: 2, + stroke: '#4E68A3', }, label: { fill: '#FFF', + fontSize: 13, + fontWeight: 500, textWrap: { width: '100%' }, }, }, @@ -21,48 +23,52 @@ const schema = { groups: { top: { position: 'top', + zIndex: 10, attrs: { circle: { - r: 3, + r: 2.5, magnet: true, - stroke: '#666', - strokeWidth: 1, + stroke: '#4E68A3', + strokeWidth: 2, fill: '#fff', }, }, }, right: { position: 'right', + zIndex: 10, attrs: { circle: { - r: 3, + r: 2.5, magnet: true, - stroke: '#666', - strokeWidth: 1, + stroke: '#4E68A3', + strokeWidth: 2, fill: '#fff', }, }, }, bottom: { position: 'bottom', + zIndex: 10, attrs: { circle: { - r: 3, + r: 2.5, magnet: true, - stroke: '#666', - strokeWidth: 1, + stroke: '#4E68A3', + strokeWidth: 2, fill: '#fff', }, }, }, left: { position: 'left', + zIndex: 10, attrs: { circle: { - r: 3, + r: 2.5, magnet: true, - stroke: '#666', - strokeWidth: 1, + stroke: '#4E68A3', + strokeWidth: 2, fill: '#fff', }, }, diff --git a/packages/core/src/mods/flowChart/createFlowChart.ts b/packages/core/src/mods/flowChart/createFlowChart.ts index d7a205f..fa78646 100644 --- a/packages/core/src/mods/flowChart/createFlowChart.ts +++ b/packages/core/src/mods/flowChart/createFlowChart.ts @@ -144,7 +144,7 @@ const createFlowChart = ( rubberband: true, movable: true, strict: true, - showNodeSelectionBox: true, + showNodeSelectionBox: false, }, // https://x6.antv.vision/zh/docs/tutorial/basic/snapline snapline: { diff --git a/packages/core/src/mods/flowChart/index.module.less b/packages/core/src/mods/flowChart/index.module.less index 8447223..6447ac4 100644 --- a/packages/core/src/mods/flowChart/index.module.less +++ b/packages/core/src/mods/flowChart/index.module.less @@ -29,4 +29,56 @@ min-width: 200px; box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !important; } +} + +// add global for x6 +:global { + .x6-widget-transform{ + border-color:rgba(0, 0, 0, 0.3); + border-style: dashed; + background-color: rgba(0, 0, 0, 0.14); + border-radius: 0; + padding: 6px; + margin: -7px 0 0 -7px; + .x6-widget-transform-resize{ + width: 6px; + height: 6px; + border-radius: 0; + border-color:rgba(0, 0, 0, 0.3); + // border: 0 none; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); + } + .x6-widget-transform-cursor-nw{ + top: -6px; + left: -6px; + } + .x6-widget-transform-cursor-n{ + margin-left: -3px; + top: -6px; + } + .x6-widget-transform-cursor-ne{ + top: -6px; + right: -6px; + } + .x6-widget-transform-cursor-e{ + margin-top: -3px; + right: -6px; + } + .x6-widget-transform-cursor-se{ + right: -6px; + bottom: -6px; + } + .x6-widget-transform-cursor-s{ + margin-left: -3px; + bottom: -6px; + } + .x6-widget-transform-cursor-sw{ + left: -6px; + bottom: -6px; + } + .x6-widget-transform-cursor-w{ + left: -6px; + margin-top: -3px; + } + } } \ No newline at end of file