support G6 3.5.0

.fatherrc.js

@@ -0,0 +1,8 @@
+export default {
+  entry: './src/index.tsx',
+  esm: 'babel',
+  cjs: 'babel',
+  replace: {
+    'process.env.GG_EDITOR_VERSION': JSON.stringify(require('./package.json').version),
+  },
+};

package.json

@@ -9,10 +9,11 @@
     "flow",
     "mind"
   ],
-  "main": "lib/index.js",
-  "unpkg": "dist/index.js",
+  "main": "dist/index.js",
+  "browser": "lib/index.js",
   "module": "es/index.js",
   "types": "lib/index.d.ts",
+  "unpkg": "dist/index.js",
   "files": [
     "dist",
     "lib",
@@ -21,7 +22,12 @@
   ],
   "scripts": {
     "start": "npm run docs:start",
-    "build": "node ./scripts/build.js",
+    "build:old": "node ./scripts/build.js",
+    "build": "npm run clean && father-build && npm run replace:cjs && npm run replace:es && npm run build:umd",
+    "build:umd": "webpack --config webpack.config.js --mode production",
+    "clean": "rimraf es esm lib dist",
+    "replace:cjs": "node ./scripts/cjs-replace.js",
+    "replace:es": "node ./scripts/es-replace.js",
     "docs:start": "dumi dev",
     "docs:build": "dumi build",
     "lint": "eslint --cache --ext .ts,.tsx ./src",
@@ -63,6 +69,7 @@
     "@babel/preset-env": "^7.7.6",
     "@babel/preset-react": "^7.7.4",
     "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-json": "^4.0.3",
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@rollup/plugin-replace": "^2.3.1",
     "@types/lodash": "^4.14.149",
@@ -71,6 +78,7 @@
     "@typescript-eslint/eslint-plugin": "^2.4.0",
     "@typescript-eslint/parser": "^2.4.0",
     "antd": "^3.24.2",
+    "babel-loader": "^8.1.0",
     "babel-plugin-lodash": "^3.3.4",
     "conventional-changelog-cli": "^2.0.31",
     "cz-conventional-changelog": "^3.0.2",
@@ -79,6 +87,7 @@
     "eslint-config-prettier": "^6.4.0",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react": "^7.16.0",
+    "father-build": "^1.18.0",
     "husky": "^3.0.9",
     "less": "^3.10.3",
     "prettier": "^1.18.2",
@@ -91,8 +100,12 @@
     "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-typescript2": "^0.24.3",
     "signale": "^1.4.0",
+    "ts-loader": "^7.0.5",
     "tscpaths": "^0.0.9",
-    "typescript": "^3.7.2"
+    "typescript": "^3.7.2",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "worker-loader": "^2.0.0"
   },
   "config": {
     "commitizen": {

scripts/build.js

@@ -7,13 +7,17 @@ const rollup = require('rollup');
 const resolve = require('@rollup/plugin-node-resolve');
 const replace = require('@rollup/plugin-replace');
 const commonjs = require('@rollup/plugin-commonjs');
+const json = require('@rollup/plugin-json');
 const typescript = require('rollup-plugin-typescript2');
 const babel = require('rollup-plugin-babel');
 const { terser } = require('rollup-plugin-terser');
 const { exec } = require('child_process');
 const { version, dependencies = {}, peerDependencies = {} } = require('../package.json');
 /* eslint-enable */
 
+console.log(version);
+console.log(JSON.stringify(dependencies));
+
 const makeExternalPredicate = externalArray => {
   if (!externalArray.length) {
     return () => false;
@@ -52,13 +56,19 @@ async function build() {
           },
         }),
         babel({
-          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+          exclude: 'node_modules/**',
+          extensions: ['.ts', '.tsx'],
+          plugins: [['@babel/plugin-transform-runtime', { useESModules: false }]],
+          runtimeHelpers: true,
         }),
         terser(),
+        json(),
       ],
-      external: makeExternalPredicate([...Object.keys(peerDependencies)]),
+      external: makeExternalPredicate([...Object.keys(dependencies), ...Object.keys(peerDependencies)]),
     });
 
+    console.log('umd done');
+
     await umdBundle.write({
       name: 'GGEditor',
       file: 'dist/index.js',
@@ -73,10 +83,12 @@ async function build() {
     signale.success('Build umd success');
   } catch (error) {
     signale.error(error);
+    console.log(error);
   }
 
   // Build cjs
   try {
+    console.log('do cjs');
     const cjsBundle = await rollup.rollup({
       input: 'src/index.tsx',
       plugins: [

scripts/cjs-replace.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+
+/* eslint-disable */
+const signale = require('signale');
+const { exec } = require('child_process');
+
+// Replace absolute paths to relative paths
+exec(`tscpaths -p ./tsconfig.cjs.json -s ./lib`, error => {
+  if (error) {
+    signale.error(error);
+  }
+});

scripts/es-replace.js

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+
+/* eslint-disable */
+const signale = require('signale');
+const { exec } = require('child_process');
+
+// Replace absolute paths to relative paths
+exec(`tscpaths -p ./tsconfig.es.json -s ./lib`, error => {
+  if (error) {
+    signale.error(error);
+  }
+});

src/common/interfaces/index.ts

@@ -22,7 +22,7 @@ import {
   BehaviorOption as IBehaviorOption,
   IG6GraphEvent as IGraphEvent,
 } from '@antv/g6/lib/types';
-import { GraphOptions as IGraphOptions } from '@antv/g6/lib/interface/graph';
+import { GraphOptions as IGraphOptions } from '@antv/g6/lib/types';
 import { ShapeOptions as IShapeOptions } from '@antv/g6/lib/interface/shape';
 import { INode, IEdge } from '@antv/g6/lib/interface/item';
 

src/components/Flow/behavior/dragAddEdge.ts

@@ -1,11 +1,14 @@
-import isPlainObject from 'lodash/isPlainObject';
+import { isPlainObject, merge } from 'lodash';
 import { guid } from '@/utils';
 import { ItemType, ItemState, GraphType, AnchorPointState } from '@/common/constants';
-import { Node, Edge, Behavior, GraphEvent, EdgeModel, AnchorPoint } from '@/common/interfaces';
+import { Node, Edge, Behavior, GraphEvent, EdgeModel, AnchorPoint, ShapeStyle, Graph } from '@/common/interfaces';
 import behaviorManager from '@/common/behaviorManager';
 
 interface DragAddEdgeBehavior extends Behavior {
   edge: Edge | null;
+  animateAnchor: Node | null;
+  targetId: string | null;
+  targetAnchorIndex: number | null;
   isEnabledAnchorPoint(e: GraphEvent): boolean;
   isNotSelf(e: GraphEvent): boolean;
   canFindTargetAnchorPoint(e: GraphEvent): boolean;
@@ -32,8 +35,28 @@ interface DefaultConfig {
   ): AnchorPointState;
 }
 
+type GetAnchorPointStyle = (item: Node, anchorPoint: number[]) => ShapeStyle;
+
+const getAnchorPointDefaultStyle: GetAnchorPointStyle = (item, anchorPoint) => {
+  const { width, height } = item.getKeyShape().getBBox();
+
+  const [x, y] = anchorPoint;
+
+  return {
+    x: width * x,
+    y: height * y - 3,
+    r: 3,
+    lineWidth: 2,
+    fill: '#FFFFFF',
+    stroke: '#5AAAFF',
+  };
+};
+
 const dragAddEdgeBehavior: DragAddEdgeBehavior & ThisType<DragAddEdgeBehavior & DefaultConfig> = {
   edge: null,
+  animateAnchor: null,
+  targetId: null,
+  targetAnchorIndex: null,
 
   graphType: GraphType.Flow,
 
@@ -136,10 +159,13 @@ const dragAddEdgeBehavior: DragAddEdgeBehavior & ThisType<DragAddEdgeBehavior &
       type: edgeType,
       source: sourceNodeId,
       sourceAnchor: sourceAnchorPointIndex,
+      target: sourceNodeId,
+      /*
       target: {
         x: e.x,
         y: e.y,
       } as any,
+      */
     };
 
     this.edge = graph.addItem(ItemType.Edge, model);
@@ -167,38 +193,88 @@ const dragAddEdgeBehavior: DragAddEdgeBehavior & ThisType<DragAddEdgeBehavior &
   handleMouseMove(e) {
     const { graph, edge } = this;
 
-    if (!edge) {
+    if (edge === null) {
       return;
     }
 
+    if (this.targetId && this.targetAnchorIndex !== null) {
+      const item = (graph as Graph).findById(this.targetId);
+      if (item) {
+        const targetAnchor = (item as Node).getLinkPointByAnchor(this.targetAnchorIndex);
+        if (targetAnchor && Math.abs(targetAnchor.x - e.x) < 5 && Math.abs(targetAnchor.y - e.y) < 5) return;
+      }
+    }
+
     if (this.canFindTargetAnchorPoint(e)) {
       const { item, target } = e;
 
-      const targetId = item.getModel().id;
-      const targetAnchor = target.get('anchorPointIndex');
+      this.targetId = (item as Node).getModel().id as string;
+      this.targetAnchorIndex = target.get('anchorPointIndex') as number;
+      const targetAnchor = (item as Node).getLinkPointByAnchor(this.targetAnchorIndex);
+
+      if (!!this.animateAnchorCfg && !this.animateAnchor) {
+        this.animateAnchor = graph.addItem(
+          'node',
+          merge(this.animateAnchorCfg, {
+            id: guid(),
+            x: targetAnchor.x,
+            y: targetAnchor.y,
+          }),
+        );
+      }
 
+      /*
       graph.updateItem(edge, {
         target: targetId,
         targetAnchor,
       });
+      */
     } else {
-      graph.updateItem(edge, {
-        target: {
-          x: e.x,
-          y: e.y,
-        } as any,
-        targetAnchor: undefined,
-      });
+      if (this.animateAnchor !== null) {
+        setTimeout(() => {
+          if (this.animateAnchor !== null) graph.removeItem(this.animateAnchor);
+          this.animateAnchor = null;
+        }, 1000);
+      }
+
+      this.targetId = null;
+      this.targetAnchorIndex = null;
+
+      try {
+        graph.updateItem(edge, {
+          target: {
+            x: e.x,
+            y: e.y,
+          } as any,
+          targetAnchor: undefined,
+        });
+      } catch (err) {
+        //ignore
+      }
     }
   },
 
   handleMouseUp() {
     const { graph, edge } = this;
 
-    if (!edge) {
+    if (edge === null) {
       return;
     }
 
+    if (this.animateAnchor !== null) {
+      graph.removeItem(this.animateAnchor);
+      this.animateAnchor = null;
+    }
+
+    if (this.targetId !== null && this.targetAnchorIndex !== null) {
+      graph.updateItem(edge, {
+        target: this.targetId,
+        targetAnchor: this.targetAnchorIndex,
+      });
+      this.targetId = null;
+      this.targetAnchorIndex = null;
+    }
+
     if (!this.shouldAddRealEdge()) {
       graph.removeItem(this.edge);
     }

src/components/Graph/command/remove.ts

@@ -106,6 +106,7 @@ const removeCommand: BaseCommand<RemoveCommandParams> = {
         return;
       }
 
+      //@ts-ignore
       (graph as TreeGraph).addChild(model, parent);
     } else {
       const { nodes, edges } = this.params.flow;

src/components/Graph/index.tsx

@@ -45,6 +45,10 @@ class GraphComponent extends React.Component<GraphProps, GraphState> {
     this.bindEvent();
   }
 
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.changeWidth);
+  }
+
   componentDidUpdate(prevProps: GraphProps) {
     const { data } = this.props;
 
@@ -63,6 +67,15 @@ class GraphComponent extends React.Component<GraphProps, GraphState> {
     graph.focusItem(id);
   }
 
+  changeWidth = () => {
+    setTimeout(() => {
+      const { containerId } = this.props;
+      const { clientWidth = 0, clientHeight = 0 } = document.getElementById(containerId) || {};
+
+      this.graph.changeSize(clientWidth, clientHeight);
+    }, 200);
+  };
+
   initGraph() {
     const { containerId, parseData, initGraph, setGraph, commandManager } = this.props;
     const { clientWidth = 0, clientHeight = 0 } = document.getElementById(containerId) || {};
@@ -99,6 +112,10 @@ class GraphComponent extends React.Component<GraphProps, GraphState> {
       commandManager.register(name, commands[name]);
     });
 
+    window.addEventListener('resize', this.changeWidth);
+
+    this.changeWidth();
+
     // 发送埋点
     if (global.trackable) {
       const graphType = isMind(this.graph) ? GraphType.Mind : GraphType.Flow;

src/components/Mind/command/fold.ts

@@ -22,6 +22,7 @@ const foldCommand: BaseCommand<FoldCommandParams> = {
     const selectedNode = selectedNodes[0];
     const selectedNodeModel = selectedNode.getModel();
 
+    //@ts-ignore
     if (!selectedNodeModel.children || !selectedNodeModel.children.length) {
       return false;
     }

src/components/Mind/command/unfold.ts

@@ -19,6 +19,7 @@ const unfoldCommand: BaseCommand<UnfoldCommandParams> = {
     const selectedNode = selectedNodes[0];
     const selectedNodeModel = selectedNode.getModel();
 
+    //@ts-ignore
     if (!selectedNodeModel.children || !selectedNodeModel.children.length) {
       return false;
     }

src/shape/nodes/bizNode.ts

@@ -124,7 +124,8 @@ const bizNode: CustomNode = {
     const text = model.label;
     const font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
 
-    shape.attr('text', optimizeMultilineText(text, font, 2, width - WRAPPER_HORIZONTAL_PADDING * 2));
+    //@ts-ignore
+    shape.attr(text, optimizeMultilineText(text, font, 2, width - WRAPPER_HORIZONTAL_PADDING * 2));
   },
 
   update(model, item) {