From 237a07c0eddfe6e4659e9e69017bf8c2ac8a7296 Mon Sep 17 00:00:00 2001 From: qilei0529 Date: Thu, 1 Apr 2021 01:02:08 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20=E4=BE=A7?= =?UTF-8?q?=E8=BE=B9=E6=A0=8F=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 --- .../core/src/common/previewCell/behavior.tsx | 6 +- .../core/src/common/previewCell/branch.tsx | 15 ++--- .../src/common/previewCell/index.module.less | 57 +++++++++++-------- .../core/src/common/previewCell/start.tsx | 6 +- 4 files changed, 46 insertions(+), 38 deletions(-) diff --git a/packages/core/src/common/previewCell/behavior.tsx b/packages/core/src/common/previewCell/behavior.tsx index 67ca80b..119b803 100644 --- a/packages/core/src/common/previewCell/behavior.tsx +++ b/packages/core/src/common/previewCell/behavior.tsx @@ -9,8 +9,10 @@ interface IProps { const Cell: React.FC = (props) => { const { title = '处理', ...rest } = props; return ( -
- {title} +
+
+ {title} +
); }; diff --git a/packages/core/src/common/previewCell/branch.tsx b/packages/core/src/common/previewCell/branch.tsx index 2fac1f2..c69b9d6 100644 --- a/packages/core/src/common/previewCell/branch.tsx +++ b/packages/core/src/common/previewCell/branch.tsx @@ -8,18 +8,15 @@ interface IProps { const Cell: React.FC = (props) => { const { title = '判断', ...rest } = props; + const z = (n: any) => n * 1.2; return ( -
- +
+ diff --git a/packages/core/src/common/previewCell/index.module.less b/packages/core/src/common/previewCell/index.module.less index b73ca2a..e993714 100644 --- a/packages/core/src/common/previewCell/index.module.less +++ b/packages/core/src/common/previewCell/index.module.less @@ -1,41 +1,48 @@ -.circle { +.box { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; - border-radius: 30px; - font-size: 11px; - color: #FFF; - background-color: #333; -} - -.rect { - display: flex; - justify-content: center; - align-items: center; - width: 60px; - height: 30px; - font-size: 11px; - color: #333; - background-color: #AACCF7; - border: 2px solid #5E9CEE; -} - -.diamond { + background-color: #f2f2f2; position: relative; - width: 60px; - height: 30px; - font-size: 11px; - + cursor: pointer; .text { z-index: 1; position: absolute; - top: 0; + top: 15px; left: 0; width: 100%; height: 100%; + font-size: 11px; + height: 30px; line-height: 30px; text-align: center; + font-weight: 500; } +} + +.circle { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + border-radius: 30px; + color: #FFF; + background-color: #6B8CD7; + border: 2px solid #4E68A3; +} + +.rect { + display: flex; + justify-content: center; + align-items: center; + width: 52px; + height: 30px; + font-size: 12px; + color: #333; + border-radius: 4px; + background-color: #BCD0FF; + border: 2px solid #6B8CD7; } \ No newline at end of file diff --git a/packages/core/src/common/previewCell/start.tsx b/packages/core/src/common/previewCell/start.tsx index b32fd69..1b42f0a 100644 --- a/packages/core/src/common/previewCell/start.tsx +++ b/packages/core/src/common/previewCell/start.tsx @@ -9,8 +9,10 @@ interface IProps extends React.HTMLProps { const Cell: React.FC = (props) => { const { title = '开始', ...rest } = props; return ( -
- {title} +
+
+ {title} +
); }; From bc6e02f980b9959b13a7c3dfc8e2d7c54411fae1 Mon Sep 17 00:00:00 2001 From: qilei0529 Date: Thu, 1 Apr 2021 01:02:52 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E7=BE=8E=E5=8C=96=20=E4=B8=BB?= =?UTF-8?q?=E7=95=8C=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