Browse Source

Merge pull request #38 from imgcook/0.3.x

chore: remove unused dependencies
master
狼叔 4 years ago
committed by GitHub
parent
commit
d22ac1a119
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 18
      .babelrc
  2. 3
      .gitignore
  3. 3
      .prettierrc
  4. 46
      package.json
  5. 3
      packages/compile-code/.babelrc
  6. 5
      packages/compile-code/package.json
  7. 4
      packages/compile-code/rollup.config.js
  8. 3
      packages/core/.babelrc
  9. 11
      packages/core/package.json
  10. 35
      packages/core/src/components/codeEditor/index.tsx
  11. 144
      packages/core/src/components/codeEditor/theme-monokai.ts
  12. 10
      packages/core/src/components/xIcon/index.less
  13. 3
      packages/core/src/components/xIcon/index.tsx
  14. 23
      packages/core/src/mods/flowChart/createFlowChart.ts
  15. 43
      packages/core/src/mods/settingBar/components/code/index.tsx
  16. 29
      packages/core/src/mods/settingBar/components/json/index.tsx
  17. 3
      packages/core/src/mods/toolBar/widgets/index.tsx
  18. 162
      packages/core/src/mods/toolBar/widgets/nodeAlign.tsx
  19. 3
      packages/plugin-store/.babelrc
  20. 8
      packages/plugin-store/package.json
  21. 4
      packages/plugin-store/rollup.config.js
  22. 8
      rollup.config.js

18
.babelrc

@ -1,18 +0,0 @@
{
"presets": [
[
"@babel/preset-env",
{
"loose": true,
"modules": false
}
],
"@babel/preset-react",
"@babel/typescript"
],
"plugins": [
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread",
"@babel/plugin-transform-runtime"
]
}

3
.gitignore

@ -27,3 +27,6 @@ example/src/.umi
example/src/.umi-production example/src/.umi-production
example/src/.umi-test example/src/.umi-test
example/.env.local example/.env.local
# eslint
.eslint-error.log

3
.prettierrc

@ -1,10 +1,7 @@
{ {
"endOfLine": "lf", "endOfLine": "lf",
"semi": true, "semi": true,
"singleQuote": true,
"tabWidth": 2, "tabWidth": 2,
"printWidth": 100,
"trailingComma": "es5",
"singleQuote": true, "singleQuote": true,
"trailingComma": "all", "trailingComma": "all",
"printWidth": 80, "printWidth": 80,

46
package.json

@ -6,7 +6,7 @@
"test": "jest --coverage", "test": "jest --coverage",
"e2e": "cypress open", "e2e": "cypress open",
"doc": "dumi dev", "doc": "dumi dev",
"example": "concurrently \"APP_ROOT=example umi dev\" \"imove -d\"", "example": "concurrently \"lerna run watch --parallel\" \"cross-env APP_ROOT=example umi dev\" \"imove -d\"",
"postinstall": "lerna init && lerna bootstrap && npm link packages/cli" "postinstall": "lerna init && lerna bootstrap && npm link packages/cli"
}, },
"jest": { "jest": {
@ -18,56 +18,36 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.9.0",
"@babel/plugin-external-helpers": "^7.8.3",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.9.5",
"@babel/plugin-transform-runtime": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.9.0",
"@rollup/plugin-commonjs": "^11.0.2", "@rollup/plugin-commonjs": "^11.0.2",
"@rollup/plugin-json": "^4.0.3", "@rollup/plugin-json": "^4.0.3",
"@rollup/plugin-node-resolve": "^7.1.3", "@rollup/plugin-node-resolve": "^7.1.3",
"@rollup/plugin-strip": "^1.3.2", "@rollup/plugin-strip": "^1.3.2",
"@rollup/plugin-url": "^4.0.2", "@rollup/plugin-url": "^4.0.2",
"@svgr/rollup": "^5.3.1",
"@types/jest": "^26.0.16", "@types/jest": "^26.0.16",
"@typescript-eslint/eslint-plugin": "^2.29.0", "@typescript-eslint/eslint-plugin": "^2.29.0",
"@typescript-eslint/parser": "^2.29.0", "@typescript-eslint/parser": "^2.29.0",
"concurrently": "^5.3.0", "concurrently": "^5.3.0",
"cypress": "^6.0.0", "cross-env": "^7.0.3",
"cypress": "^6.2.0",
"dumi": "^1.0.38",
"eslint": "^6.8.0", "eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.1",
"eslint-config-standard": "^14.1.1", "eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.20.2", "eslint-plugin-prettier": "^3.3.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^3.0.0",
"eslint-plugin-standard": "^5.0.0", "eslint-plugin-standard": "^5.0.0",
"lerna": "^3.22.1", "lerna": "^3.22.1",
"less": "^3.12.2",
"lowdb": "^1.0.0", "lowdb": "^1.0.0",
"prettier": "^2.0.4", "ora": "^4.1.1",
"postcss": "^8.2.1",
"rollup": "^2.6.1", "rollup": "^2.6.1",
"rollup-plugin-babel": "^4.4.0", "rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-size-snapshot": "^0.11.0", "rollup-plugin-size-snapshot": "^0.11.0",
"rollup-plugin-typescript": "^1.0.1",
"snazzy": "^9.0.0", "snazzy": "^9.0.0",
"standard": "^16.0.3", "standard": "^16.0.3",
"ts-jest": "^26.4.4", "ts-jest": "^26.4.4",
"typescript": "^3.8.3" "typescript": "^4.1.3",
}, "umi": "^3.3.3",
"dependencies": { "watch": "^1.0.2"
"@babel/runtime": "^7.9.2",
"@babel/runtime-corejs3": "^7.9.2",
"@umijs/preset-react": "1.x",
"@umijs/test": "^3.2.2",
"antd": "^4.4.3",
"dumi": "^1.0.37",
"lint-staged": "^10.0.7",
"ora": "^4.0.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"umi": "^3.2.2"
} }
} }

3
packages/compile-code/.babelrc

@ -1,3 +0,0 @@
{
"extends": "../../.babelrc"
}

5
packages/compile-code/package.json

@ -34,8 +34,5 @@
"dependencies": { "dependencies": {
"@antv/x6": "^1.5.1" "@antv/x6": "^1.5.1"
}, },
"devDependencies": { "devDependencies": {}
"rollup": "^2.7.3",
"watch": "^1.0.2"
}
} }

4
packages/compile-code/rollup.config.js

@ -1,5 +1,6 @@
import path from 'path'; import path from 'path';
import rollupBaseConfig from '../../rollup.config'; import rollupBaseConfig from '../../rollup.config';
import typescript from 'rollup-plugin-typescript';
import pkg from './package.json'; import pkg from './package.json';
export default Object.assign(rollupBaseConfig, { export default Object.assign(rollupBaseConfig, {
@ -13,5 +14,8 @@ export default Object.assign(rollupBaseConfig, {
file: pkg.module, file: pkg.module,
format: 'es', format: 'es',
}, },
],
plugins: [
typescript(),
] ]
}); });

3
packages/core/.babelrc

@ -1,3 +0,0 @@
{
"extends": "../../.babelrc"
}

11
packages/core/package.json

@ -39,13 +39,12 @@
"@ant-design/icons": "^4.0.6", "@ant-design/icons": "^4.0.6",
"@antv/x6": "^1.3.0", "@antv/x6": "^1.3.0",
"@imove/compile-code": "^0.0.1", "@imove/compile-code": "^0.0.1",
"ace-builds": "^1.4.12", "@monaco-editor/react": "^3.7.4",
"antd": "^4.5.3", "antd": "^4.5.3",
"axios": "^0.21.0", "axios": "^0.21.0",
"jszip": "^3.5.0", "jszip": "^3.5.0",
"lodash.merge": "^4.6.2", "lodash.merge": "^4.6.2",
"query-string": "^6.13.7", "query-string": "^6.13.7",
"react-ace": "^9.1.3",
"react-color": "^2.18.1", "react-color": "^2.18.1",
"react-json-view": "^1.19.1" "react-json-view": "^1.19.1"
}, },
@ -53,13 +52,7 @@
"@types/lodash.merge": "^4.6.6", "@types/lodash.merge": "^4.6.6",
"@types/react": "^16.9.34", "@types/react": "^16.9.34",
"@types/react-color": "^3.0.4", "@types/react-color": "^3.0.4",
"@types/react-dom": "^16.9.7", "@types/react-dom": "^16.9.7"
"awesome-typescript-loader": "^5.2.1",
"less": "^3.12.2",
"rollup": "^2.6.1",
"rollup-plugin-postcss": "^3.1.3",
"rollup-plugin-typescript": "^1.0.1",
"watch": "^1.0.2"
}, },
"peerDependencies": { "peerDependencies": {
"@ant-design/icons": "^4.0.6", "@ant-design/icons": "^4.0.6",

35
packages/core/src/components/codeEditor/index.tsx

@ -0,0 +1,35 @@
import React, {useMemo} from 'react';
import {
monaco,
ControlledEditor,
ControlledEditorProps
} from '@monaco-editor/react';
import monokaiTheme from './theme-monokai';
monaco.init().then((monaco) => {
monaco.editor.defineTheme('monokai', monokaiTheme);
});
const CODE_EDITOR_OPTIONS = {
fontSize: 14
};
export const CodeEditor: React.FC<ControlledEditorProps> = (props) => {
const {options, ...rest} = props;
const editorOptions = useMemo(() => {
return Object.assign({}, CODE_EDITOR_OPTIONS, options);
}, [options]);
return (
<ControlledEditor
theme={'monokai'}
language={'javascript'}
options={editorOptions}
{...rest}
/>
);
};
export default CodeEditor;

144
packages/core/src/components/codeEditor/theme-monokai.ts

@ -0,0 +1,144 @@
export default {
"base": "vs-dark",
"inherit": true,
"rules": [
{
"background": "272822",
"token": ""
},
{
"foreground": "75715e",
"token": "comment"
},
{
"foreground": "e6db74",
"token": "string"
},
{
"foreground": "ae81ff",
"token": "constant.numeric"
},
{
"foreground": "ae81ff",
"token": "constant.language"
},
{
"foreground": "ae81ff",
"token": "constant.character"
},
{
"foreground": "ae81ff",
"token": "constant.other"
},
{
"foreground": "f92672",
"token": "keyword"
},
{
"foreground": "f92672",
"token": "storage"
},
{
"foreground": "66d9ef",
"fontStyle": "italic",
"token": "storage.type"
},
{
"foreground": "a6e22e",
"fontStyle": "underline",
"token": "entity.name.class"
},
{
"foreground": "a6e22e",
"fontStyle": "italic underline",
"token": "entity.other.inherited-class"
},
{
"foreground": "a6e22e",
"token": "entity.name.function"
},
{
"foreground": "fd971f",
"fontStyle": "italic",
"token": "variable.parameter"
},
{
"foreground": "f92672",
"token": "entity.name.tag"
},
{
"foreground": "a6e22e",
"token": "entity.other.attribute-name"
},
{
"foreground": "66d9ef",
"token": "support.function"
},
{
"foreground": "66d9ef",
"token": "support.constant"
},
{
"foreground": "66d9ef",
"fontStyle": "italic",
"token": "support.type"
},
{
"foreground": "66d9ef",
"fontStyle": "italic",
"token": "support.class"
},
{
"foreground": "f8f8f0",
"background": "f92672",
"token": "invalid"
},
{
"foreground": "f8f8f0",
"background": "ae81ff",
"token": "invalid.deprecated"
},
{
"foreground": "cfcfc2",
"token": "meta.structure.dictionary.json string.quoted.double.json"
},
{
"foreground": "75715e",
"token": "meta.diff"
},
{
"foreground": "75715e",
"token": "meta.diff.header"
},
{
"foreground": "f92672",
"token": "markup.deleted"
},
{
"foreground": "a6e22e",
"token": "markup.inserted"
},
{
"foreground": "e6db74",
"token": "markup.changed"
},
{
"foreground": "ae81ffa0",
"token": "constant.numeric.line-number.find-in-files - match"
},
{
"foreground": "e6db74",
"token": "entity.name.filename.find-in-files"
}
],
"colors": {
"editor.foreground": "#F8F8F2",
"editor.background": "#272822",
"editor.selectionBackground": "#49483E",
"editor.lineHighlightBackground": "#3E3D32",
"editorCursor.foreground": "#F8F8F0",
"editorWhitespace.foreground": "#3B3A32",
"editorIndentGuide.activeBackground": "#9D550FB0",
"editor.selectionHighlightBorder": "#222218"
}
}

10
packages/core/src/components/xIcon/index.less

@ -0,0 +1,10 @@
#icon-align-top,
#icon-align-left,
#icon-align-vertical-center,
#icon-align-horizontal-center,
#icon-align-bottom,
#icon-align-right {
path {
fill: currentColor;
}
}

3
packages/core/src/components/xIcon/index.tsx

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { createFromIconfontCN } from '@ant-design/icons'; import { createFromIconfontCN } from '@ant-design/icons';
import './index.less';
interface IconFontProps { interface IconFontProps {
type: string; type: string;
@ -7,7 +8,7 @@ interface IconFontProps {
} }
const XIcon: React.SFC<IconFontProps> = createFromIconfontCN({ const XIcon: React.SFC<IconFontProps> = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2024452_02tul6sizoy9.js', scriptUrl: '//at.alicdn.com/t/font_2024452_zgg5gvivois.js',
}); });
export default XIcon; export default XIcon;

23
packages/core/src/mods/flowChart/createFlowChart.ts

@ -3,6 +3,7 @@ import { Cell, Edge, Graph, Node } from '@antv/x6';
import { MIN_ZOOM, MAX_ZOOM } from '../../common/const'; import { MIN_ZOOM, MAX_ZOOM } from '../../common/const';
import baseCellSchemaMap from '../../common/baseCell'; import baseCellSchemaMap from '../../common/baseCell';
import previewCellSchemaMap from '../../common/previewCell'; import previewCellSchemaMap from '../../common/previewCell';
import { getSelectedEdges } from '../../utils/flowChartUtils';
import { registerServerStorage } from './registerServerStorage'; import { registerServerStorage } from './registerServerStorage';
import MiniMapSimpleNode from '../../components/miniMapSimpleNode'; import MiniMapSimpleNode from '../../components/miniMapSimpleNode';
@ -34,6 +35,26 @@ const registerEvents = (flowChart: Graph): void => {
} }
} }
}); });
flowChart.on('edge:selected', (args) => {
args.edge.attr('line/stroke', '#feb663');
args.edge.attr('line/strokeWidth', '3px');
});
flowChart.on('edge:unselected', (args) => {
args.edge.attr('line/stroke', '#333');
args.edge.attr('line/strokeWidth', '2px');
});
flowChart.on('edge:mouseover', (args) => {
args.edge.attr('line/stroke', '#feb663');
args.edge.attr('line/strokeWidth', '3px');
});
flowChart.on('edge:mouseleave', (args) => {
const { edge } = args;
const selectedEdges = getSelectedEdges(flowChart);
if (selectedEdges[0] !== edge) {
args.edge.attr('line/stroke', '#333');
args.edge.attr('line/strokeWidth', '2px');
}
});
}; };
const registerShortcuts = (flowChart: Graph): void => { const registerShortcuts = (flowChart: Graph): void => {
@ -87,7 +108,7 @@ const createFlowChart = (container: HTMLDivElement, miniMapContainer: HTMLDivEle
multiple: true, multiple: true,
rubberband: true, rubberband: true,
movable: true, movable: true,
showNodeSelectionBox: true, showNodeSelectionBox: true
}, },
// https://x6.antv.vision/zh/docs/tutorial/basic/snapline // https://x6.antv.vision/zh/docs/tutorial/basic/snapline
snapline: { snapline: {

43
packages/core/src/mods/settingBar/components/code/index.tsx

@ -4,29 +4,27 @@ import 'antd/es/modal/style';
import 'antd/es/button/style'; import 'antd/es/button/style';
import styles from './index.module.less'; import styles from './index.module.less';
import AceEditor from 'react-ace'; import { Graph } from '@antv/x6';
import { Button, Modal } from 'antd'; import { Button, Modal } from 'antd';
import { Graph } from '@antv/x6'; import CodeEditor from '../../../../components/codeEditor';
import 'ace-builds/src-noconflict/theme-dracula';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/snippets/javascript';
import 'ace-builds/src-noconflict/ext-language_tools';
interface IProps { interface IProps {
value: any; value: any;
name: string; name: string;
title: string; title: string;
onValueChange: (value: string) => void;
flowChart: Graph; flowChart: Graph;
onValueChange: (value: string) => void;
} }
const Code: React.FC<IProps> = (props) => { const Code: React.FC<IProps> = (props) => {
const { title, value, onValueChange, flowChart } = props; const { title, value, onValueChange, flowChart } = props;
const [visible, setVisible] = useState<boolean>(false); const [visible, setVisible] = useState<boolean>(false);
flowChart.on('cell:dblclick', (args) => { useEffect(() => {
onClickEdit() flowChart.on('node:dblclick', () => {
}); onClickEdit();
});
}, []);
// events // events
const onClickEdit = (): void => { const onClickEdit = (): void => {
@ -65,15 +63,6 @@ interface IEditorModalProps {
onCancel: () => void; onCancel: () => void;
} }
const CODE_EDITOR_STYLE = {
width: '100%',
height: 600,
};
const CODE_EDITOR_OPTIONS = {
fontSize: 14,
useWorker: false,
};
const EditModal: React.FC<IEditorModalProps> = (props) => { const EditModal: React.FC<IEditorModalProps> = (props) => {
const { visible, title, value, onOk, onCancel } = props; const { visible, title, value, onOk, onCancel } = props;
const [code, setCode] = useState<string>(value); const [code, setCode] = useState<string>(value);
@ -93,7 +82,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
const onClickOk = (): void => { const onClickOk = (): void => {
onOk(code); onOk(code);
}; };
const onChangeCode = (newCode: string): void => { const onChangeCode = (ev: any, newCode: string | undefined = ''): void => {
if (newCode !== code) { if (newCode !== code) {
setCode(newCode); setCode(newCode);
} }
@ -110,18 +99,10 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onClickOk} onOk={onClickOk}
onCancel={onCancel} onCancel={onCancel}
> >
<AceEditor <CodeEditor
style={CODE_EDITOR_STYLE}
tabSize={2}
value={code} value={code}
focus={true} width={'100%'}
theme={'dracula'} height={'600px'}
mode={'javascript'}
name={'code-editor'}
enableSnippets={true}
enableLiveAutocompletion={true}
enableBasicAutocompletion={true}
setOptions={CODE_EDITOR_OPTIONS}
onChange={onChangeCode} onChange={onChangeCode}
/> />
</Modal> </Modal>

29
packages/core/src/mods/settingBar/components/json/index.tsx

@ -5,14 +5,10 @@ import 'antd/es/button/style';
import 'antd/es/message/style'; import 'antd/es/message/style';
import styles from './index.module.less'; import styles from './index.module.less';
import AceEditor from 'react-ace';
import JsonView from 'react-json-view'; import JsonView from 'react-json-view';
import { Button, Modal, message } from 'antd'; import { Button, Modal, message } from 'antd';
import { safeParse } from '../../../../utils'; import { safeParse } from '../../../../utils';
import 'ace-builds/src-noconflict/mode-json'; import CodeEditor from '../../../../components/codeEditor';
import 'ace-builds/src-noconflict/theme-dracula';
import 'ace-builds/src-noconflict/snippets/json';
import 'ace-builds/src-noconflict/ext-language_tools';
interface IJsonProps { interface IJsonProps {
value: any; value: any;
@ -70,14 +66,6 @@ interface IEditorModalProps {
onCancel: () => void; onCancel: () => void;
} }
const CODE_EDITOR_STYLE = {
width: '100%',
height: 400,
};
const CODE_EDITOR_OPTIONS = {
useWorker: false,
};
const EditModal: React.FC<IEditorModalProps> = (props) => { const EditModal: React.FC<IEditorModalProps> = (props) => {
const { visible, title, value, onOk, onCancel } = props; const { visible, title, value, onOk, onCancel } = props;
const [json, setJson] = useState<string>(''); const [json, setJson] = useState<string>('');
@ -103,7 +91,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
console.log('save failed, the error is:', error.message); console.log('save failed, the error is:', error.message);
} }
}; };
const onChangeJson = (newJson: string): void => { const onChangeJson = (ev: any, newJson: string | undefined = ''): void => {
if (newJson !== json) { if (newJson !== json) {
setJson(newJson); setJson(newJson);
} }
@ -119,17 +107,10 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onClickOk} onOk={onClickOk}
onCancel={onCancel} onCancel={onCancel}
> >
<AceEditor <CodeEditor
style={CODE_EDITOR_STYLE}
tabSize={2}
value={json} value={json}
focus={true} width={'100%'}
mode={'json'} height={'600px'}
theme={'dracula'}
name={'json-editor'}
enableSnippets={true}
enableBasicAutocompletion={true}
setOptions={CODE_EDITOR_OPTIONS}
onChange={onChangeJson} onChange={onChangeJson}
/> />
</Modal> </Modal>

3
packages/core/src/mods/toolBar/widgets/index.tsx

@ -13,6 +13,7 @@ import FontSize from './fontSize';
import TextColor from './textColor'; import TextColor from './textColor';
import LineStyle from './lineStyle'; import LineStyle from './lineStyle';
import Underline from './underline'; import Underline from './underline';
import NodeAlign from './nodeAlign';
import FitWindow from './fitWindow'; import FitWindow from './fitWindow';
import BringToTop from './bringToTop'; import BringToTop from './bringToTop';
import BringToBack from './bringToBack'; import BringToBack from './bringToBack';
@ -30,7 +31,7 @@ const tools: React.FC<IProps>[][] = [
[FontSize, Bold, Italic, Underline], [FontSize, Bold, Italic, Underline],
[TextColor, BgColor, BorderColor, LineStyle], [TextColor, BgColor, BorderColor, LineStyle],
[HorizontalAlign, VerticalAlign], [HorizontalAlign, VerticalAlign],
[BringToTop, BringToBack], [NodeAlign, BringToTop, BringToBack],
]; ];
export default tools; export default tools;

162
packages/core/src/mods/toolBar/widgets/nodeAlign.tsx

@ -0,0 +1,162 @@
import React, { ReactElement } from 'react';
import 'antd/es/menu/style';
import { Menu } from 'antd';
import { Cell, Graph } from '@antv/x6';
import XIcon from '../../../components/xIcon';
import makeDropdownWidget from './common/makeDropdownWidget';
import { getSelectedNodes } from '../../../utils/flowChartUtils';
interface IProps {
flowChart: Graph;
}
interface AlignItem {
text: string;
icon: ReactElement;
handler: (selectedNodes: Cell[]) => void;
}
const MenuItem = Menu.Item;
const ALIGN_MAP: { [key: string]: AlignItem } = {
left: {
text: '左对齐',
icon: <XIcon type={'icon-align-left'} />,
handler(selectedNodes: Cell[]) {
let minLeftValue = Infinity;
selectedNodes.forEach(node => {
const { x } = node.getProp<{ x: number, y: number }>('position');
if (x < minLeftValue) {
minLeftValue = x;
}
});
selectedNodes.forEach(node => node.setProp({ position: { x: minLeftValue } }));
}
},
horizontalCenter: {
text: '水平居中',
icon: <XIcon type={'icon-align-horizontal-center'} />,
handler(selectedNodes: Cell[]) {
let minLeftValue = Infinity;
let maxRightValue = -Infinity;
selectedNodes.forEach(node => {
const { x } = node.getProp<{ x: number, y: number }>('position');
const { width } = node.getProp<{ width: number, height: number }>('size');
if (x < minLeftValue) {
minLeftValue = x;
}
if (x + width > maxRightValue) {
maxRightValue = x + width;
}
});
const centerValue = (minLeftValue + maxRightValue) / 2;
selectedNodes.forEach(node => {
const { width } = node.getProp<{ width: number, height: number }>('size');
node.setProp({ position: { x: centerValue - width / 2 } });
});
}
},
right: {
text: '右对齐',
icon: <XIcon type={'icon-align-right'} />,
handler(selectedNodes: Cell[]) {
let maxRightValue = -Infinity;
selectedNodes.forEach(node => {
const { x } = node.getProp<{ x: number, y: number }>('position');
const { width } = node.getProp<{ width: number, height: number }>('size');
if (x + width > maxRightValue) {
maxRightValue = x + width;
}
});
selectedNodes.forEach(node => {
const { width } = node.getProp<{ width: number, height: number }>('size');
node.setProp({ position: { x: maxRightValue - width } })
});
}
},
top: {
text: '顶部对齐',
icon: <XIcon type={'icon-align-top'} />,
handler(selectedNodes: Cell[]) {
let minTopValue = Infinity;
selectedNodes.forEach(node => {
const { y } = node.getProp<{ x: number, y: number }>('position');
if (y < minTopValue) {
minTopValue = y;
}
});
selectedNodes.forEach(node => node.setProp({ position: { y: minTopValue } }));
}
},
verticalCenter: {
text: '垂直居中',
icon: <XIcon type={'icon-align-vertical-center'} />,
handler(selectedNodes: Cell[]) {
let minTopValue = Infinity;
let maxBottomValue = -Infinity;
selectedNodes.forEach(node => {
const { y } = node.getProp<{ x: number, y: number }>('position');
const { height } = node.getProp<{ width: number, height: number }>('size');
if (y < minTopValue) {
minTopValue = y;
}
if (y + height > maxBottomValue) {
maxBottomValue = y + height;
}
});
const centerValue = (minTopValue + maxBottomValue) / 2;
selectedNodes.forEach(node => {
const { height } = node.getProp<{ width: number, height: number }>('size');
node.setProp({ position: { y: centerValue - height / 2 } });
});
}
},
bottom: {
text: '底部对齐',
icon: <XIcon type={'icon-align-bottom'} />,
handler(selectedNodes: Cell[]) {
let maxTopValue = -Infinity;
selectedNodes.forEach(node => {
const { y } = node.getProp<{ x: number, y: number }>('position');
const { height } = node.getProp<{ width: number, height: number }>('size');
if (y + height > maxTopValue) {
maxTopValue = y + height;
}
});
selectedNodes.forEach(node => {
const { height } = node.getProp<{ width: number, height: number }>('size');
node.setProp({ position: { y: maxTopValue - height } })
});
}
}
};
const NodeAlign: React.FC<IProps> = makeDropdownWidget({
tooltip: '对齐',
getIcon() {
return ALIGN_MAP['left'].icon;
},
getOverlay(flowChart: Graph, onChange: (data: any) => void) {
return (
<Menu onClick={({ key }) => onChange(key)}>
{Object.keys(ALIGN_MAP).map((alignType) => (
<MenuItem key={alignType}>
{ALIGN_MAP[alignType].icon}
<span>{ALIGN_MAP[alignType].text}</span>
</MenuItem>
))}
</Menu>
);
},
handler: (flowChart: Graph, value: any) => {
const selectedNodes = getSelectedNodes(flowChart);
ALIGN_MAP[value].handler(selectedNodes);
},
disabled(flowChart: Graph) {
const selectedNodes = getSelectedNodes(flowChart);
return selectedNodes.length < 2;
},
});
export default NodeAlign;

3
packages/plugin-store/.babelrc

@ -1,3 +0,0 @@
{
"extends": "../../.babelrc"
}

8
packages/plugin-store/package.json

@ -36,10 +36,6 @@
"bugs": { "bugs": {
"url": "https://github.com/suanmei/iMove/issues" "url": "https://github.com/suanmei/iMove/issues"
}, },
"devDependencies": { "devDependencies": {},
"rollup": "^2.7.3", "dependencies": {}
"watch": "^1.0.2"
},
"dependencies": {
}
} }

4
packages/plugin-store/rollup.config.js

@ -1,5 +1,6 @@
import path from 'path'; import path from 'path';
import rollupBaseConfig from '../../rollup.config'; import rollupBaseConfig from '../../rollup.config';
import typescript from 'rollup-plugin-typescript';
import pkg from './package.json'; import pkg from './package.json';
export default Object.assign(rollupBaseConfig, { export default Object.assign(rollupBaseConfig, {
@ -13,5 +14,8 @@ export default Object.assign(rollupBaseConfig, {
file: pkg.module, file: pkg.module,
format: 'es', format: 'es',
}, },
],
plugins: [
typescript(),
] ]
}); });

8
rollup.config.js

@ -3,8 +3,6 @@ import commonjs from '@rollup/plugin-commonjs';
import strip from '@rollup/plugin-strip'; import strip from '@rollup/plugin-strip';
import url from '@rollup/plugin-url'; import url from '@rollup/plugin-url';
import json from '@rollup/plugin-json'; import json from '@rollup/plugin-json';
import babel from 'rollup-plugin-babel';
import svgr from '@svgr/rollup';
import { sizeSnapshot } from 'rollup-plugin-size-snapshot'; import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
const input = './src/index.tsx'; const input = './src/index.tsx';
@ -16,15 +14,9 @@ export default {
resolve({ extensions, preferBuiltins: true }), resolve({ extensions, preferBuiltins: true }),
commonjs(), commonjs(),
json(), json(),
babel({
extensions,
exclude: 'node_modules/**',
runtimeHelpers: true,
}),
url({ url({
limit: 10 * 1024, limit: 10 * 1024,
}), }),
svgr(),
strip({ debugger: true }), strip({ debugger: true }),
sizeSnapshot({ printInfo: false }), sizeSnapshot({ printInfo: false }),
], ],

Loading…
Cancel
Save