bug修复

src/Model/modelConstructor.ts

@@ -158,7 +158,7 @@ export class ModelConstructor {
                 // 若没有指针字段的结点则跳过
                 if(!pointerData) continue;
 
-                let id = name + '#' + (Array.isArray(pointerData)? pointerData.join('-'): pointerData),
+                let id = name + '.' + (Array.isArray(pointerData)? pointerData.join('-'): pointerData),
                     pointer = this.createPointer(id, name, pointerData, element);
 
                 pointerContainer[name].push(pointer);
@@ -176,9 +176,14 @@ export class ModelConstructor {
     private createElement(sourceElement: SourceElement, elementName: string): Element {
         let elementOption = this.engine.elementOptions[elementName],
             element: Element = undefined,
-            label = elementOption.label? this.parserElementContent(sourceElement, elementOption.label): '';
+            label = elementOption.label? this.parserElementContent(sourceElement, elementOption.label): '',
+            id =  elementName + '.' + sourceElement.id.toString();
 
-        element = new Element(elementName, sourceElement);
+        if(label === null || label === undefined) {
+            label = '';
+        }
+
+        element = new Element(id, elementName, sourceElement);
         element.initProps(elementOption);
         element.set('label', label);
         element.sourceElement = sourceElement;
@@ -251,7 +256,7 @@ export class ModelConstructor {
         element: Element, 
         linkTarget: LinkTarget
     ): Element {
-        let elementName = element.name,
+        let elementName = element.modelName,
             elementList: Element[], 
             targetId = linkTarget,
             targetElement = null;
@@ -277,7 +282,7 @@ export class ModelConstructor {
             return null;
         }
         
-        targetElement = elementList.find(item => item.id === targetId);
+        targetElement = elementList.find(item => item.sourceId === targetId);
         return targetElement || null;
     }
 };

src/Model/modelData.ts

@@ -17,6 +17,7 @@ export interface G6NodeModel {
     labelCfg: ElementLabelOption;
     externalPointerId: string; 
     modelType: string;
+    modelName: string;
 };
 
 
@@ -35,8 +36,8 @@ export interface G6EdgeModel {
 
 export class Model {
     id: string;
-    name: string;
-    type: string;
+    modelName: string;
+    modelType: string;
 
     props: G6NodeModel | G6EdgeModel;
     shadowG6Item;
@@ -45,7 +46,7 @@ export class Model {
 
     constructor(id: string, name: string) { 
         this.id = id;
-        this.name = name;
+        this.modelName = name;
         this.shadowG6Item = null;
         this.renderG6Item = null;
         this.G6Item = null;
@@ -148,17 +149,20 @@ export class Model {
 
 
 export class Element extends Model {
-    type = 'element';
+    modelType = 'element';
     sourceElement: SourceElement;
+    sourceId: string;
 
-    constructor(type: string, sourceElement: SourceElement) {
-        super(sourceElement.id.toString(), type);
+    constructor(id: string, type: string, sourceElement: SourceElement) {
+        super(id, type);
 
         Object.keys(sourceElement).map(prop => {
             if(prop !== 'id') {
                 this[prop] = sourceElement[prop];
             }
         });
+
+        this.sourceId = this.id.split('.')[1];
     }
 
     protected defineProps(option: ElementOption) {
@@ -174,7 +178,8 @@ export class Element extends Model {
             style: Util.objectClone<Style>(option.style),
             labelCfg: Util.objectClone<ElementLabelOption>(option.labelOptions),
             externalPointerId: null,
-            modelType: this.type
+            modelType: this.modelType,
+            modelName: this.modelName
         };
     }
 };
@@ -182,7 +187,7 @@ export class Element extends Model {
 
 
 export class Link extends Model { 
-    type = 'link';
+    modelType = 'link';
     element: Element;
     target: Element;
     index: number;
@@ -216,7 +221,9 @@ export class Link extends Model {
             targetAnchor,
             label: option.label,
             style: Util.objectClone<Style>(option.style),
-            labelCfg: Util.objectClone<LinkLabelOption>(option.labelOptions)
+            labelCfg: Util.objectClone<LinkLabelOption>(option.labelOptions),
+            modelType: this.modelType,
+            modelName: this.modelName
         };
     }
 };
@@ -224,7 +231,7 @@ export class Link extends Model {
 
 
 export class Pointer extends Model {
-    type = 'pointer';
+    modelType = 'pointer';
     target: Element;
     label: string | string[];
 
@@ -250,7 +257,8 @@ export class Pointer extends Model {
             style: Util.objectClone<Style>(option.style),
             labelCfg: Util.objectClone<ElementLabelOption>(option.labelOptions),
             externalPointerId: null,
-            modelType: this.type
+            modelType: this.modelType,
+            modelName: this.modelName
         };
     }
 };

src/RegisteredShape/linkListNode.ts

@@ -56,7 +56,9 @@ export default G6.registerNode('link-list-node', {
     getAnchorPoints() {
         return [
             [0, 0.5],
-            [5 / 6, 0.5]
+            [5 / 6, 0.5],
+            [5 / 6, 0],
+            [5 / 6, 1]
         ];
     }
 });

src/RegisteredShape/twoCellNode.ts

@@ -0,0 +1,63 @@
+import * as G6 from "./../Lib/g6.js";
+
+
+
+export default G6.registerNode('two-cell-node', {
+    draw(cfg, group) {
+        cfg.size = cfg.size || [30, 10];
+
+        const width = cfg.size[0],
+              height = cfg.size[1];
+
+        const wrapperRect = group.addShape('rect', {
+            attrs: {
+                x: width / 2,
+                y: height / 2,
+                width: width,
+                height: height,
+                stroke: cfg.style.stroke,
+                fill: 'transparent'
+            },
+            name: 'wrapper'
+        });
+
+        group.addShape('rect', {
+            attrs: {
+                x: width / 2,
+                y: height / 2,
+                width: width / 2,
+                height: height,
+                fill: cfg.style.fill,
+                stroke: cfg.style.stroke
+            },
+            name: 'left-rect',
+            draggable: true
+        });
+
+        if (cfg.label) {
+            const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
+            group.addShape('text', {
+                attrs: {
+                    x: width * (3 / 4), 
+                    y: height,
+                    textAlign: 'center',
+                    textBaseline: 'middle',
+                    text: cfg.label,
+                    fill: style.fill || '#000',
+                    fontSize: style.fontSize || 16
+                },
+                name: 'text',
+                draggable: true
+            });
+        }
+
+        return wrapperRect;
+    },
+
+    getAnchorPoints() {
+        return [
+            [0, 0.5],
+            [3 / 4, 0.5]
+        ];
+    }
+});

src/StructV.ts

@@ -5,6 +5,7 @@ import externalPointer from "./RegisteredShape/externalPointer";
 import * as G6 from "./Lib/g6.js";
 import linkListNode from "./RegisteredShape/linkListNode";
 import binaryTreeNode from "./RegisteredShape/binaryTreeNode";
+import twoCellNode from "./RegisteredShape/twoCellNode";
 
 
 export const SV = {
@@ -13,7 +14,7 @@ export const SV = {
     Bound: Bound,
     G6,
     registeredShape: [
-        externalPointer, linkListNode, binaryTreeNode
+        externalPointer, linkListNode, binaryTreeNode, twoCellNode
     ]
 };
 

src/View/behavior.ts

@@ -9,14 +9,15 @@ export class Behavior {
         this.engine = engine;
         this.graphInstance = graphInstance;
 
-        const interactionOptions = this.engine.interactionOptions;
+        const interactionOptions = this.engine.interactionOptions,
+              selectNode: boolean | string[] = interactionOptions.selectNode;
 
         if(interactionOptions.dragNode) {
             this.initDragNode();
         }
         
         if(interactionOptions.selectNode) {
-            this.initSelectNode();
+            this.initSelectNode(selectNode);
         }
     }
 
@@ -67,16 +68,27 @@ export class Behavior {
 
     /**
      * 初始化节/边选中
+     * @param selectNode
      */
-    private initSelectNode() {
+    private initSelectNode(selectNode: boolean | string[]) {
         let defaultHighlightColor = '#f08a5d',
             curSelectItem = null,
             curSelectItemStyle = null;
 
+        if(selectNode === false) {
+            return;
+        }
+
         const selectCallback = ev => {
             const item = ev.item,
+                  model = item.getModel(),
                   type = item.getType(),
-                  highlightColor = item.getModel().style.selectedColor;
+                  name = model.modelName,
+                  highlightColor = model.style.selectedColor;
+
+            if(Array.isArray(selectNode) && selectNode.find(item => item === name) === undefined) {
+                return;
+            }
 
             if(curSelectItem && curSelectItem !== item) {
                 curSelectItem.update({

src/View/layouter.ts

@@ -1,4 +1,3 @@
-import { Util } from "../Common/util";
 import { Engine } from "../engine";
 import { ConstructedData } from "../Model/modelConstructor";
 import { Element, Model, Pointer } from "../Model/modelData";
@@ -71,7 +70,7 @@ export class Layouter {
         modelList.forEach(item => {
             item.G6Item = item.shadowG6Item;
 
-            if(item.type === 'element' || item.type === 'pointer') {
+            if(item.modelType === 'element' || item.modelType === 'pointer') {
                 item.set('rotation', item.get('rotation'));
                 item.set({ x: 0, y: 0 });
             }

src/View/renderer.ts

@@ -37,28 +37,7 @@ export class Renderer {
 
         const enable: boolean = this.engine.animationOptions.enable === undefined? true: this.engine.animationOptions.enable,
               duration: number = this.engine.animationOptions.duration,
-              timingFunction: string = this.engine.animationOptions.timingFunction,
-              interactionOptions = this.engine.interactionOptions;
-
-        const modeMap = {
-            drag: 'drag-canvas',
-            zoom: 'zoom-canvas',
-            dragNode: {
-                type: 'drag-node',
-                shouldBegin: n => {
-                    // 不允许拖拽外部指针
-                    if (n.item && n.item.getModel().modelType === 'pointer') return false;
-                    return true;
-                }
-            }
-        },
-        defaultModes = [];
-
-        Object.keys(interactionOptions).forEach(item => {
-            if(interactionOptions[item] === true && modeMap[item] !== undefined) {
-                defaultModes.push(modeMap[item]);
-            }
-        });
+              timingFunction: string = this.engine.animationOptions.timingFunction;
 
         this.graphInstance = new SV.G6.Graph({
             container: DOMContainer,
@@ -71,7 +50,7 @@ export class Renderer {
             },
             fitView: this.engine.layoutOptions.fitView,
             modes: {
-                default: defaultModes
+                default: this.initBehaviors()
             }
         });
 
@@ -82,6 +61,54 @@ export class Renderer {
         this.animations = new Animations(duration, timingFunction);
     }
 
+    /**
+     * 初始化交互行为
+     * @returns 
+     */
+    private initBehaviors() {
+        const interactionOptions = this.engine.interactionOptions,
+              dragNode: boolean | string[] = interactionOptions.dragNode,
+              dragNodeFilter = node => {
+                  let model = node.item.getModel();
+
+                  if(node.item === null) {
+                      return false;
+                  }
+
+                  if(model.modelType === 'pointer') {
+                      return false;
+                  }
+
+                  if(typeof dragNode === 'boolean') {
+                      return dragNode;
+                  } 
+
+                  if(Array.isArray(dragNode) && dragNode.indexOf(model.modelName) > -1) {
+                      return true;
+                  }
+
+                  return false;
+              }
+
+        const modeMap = {
+            drag: 'drag-canvas',
+            zoom: 'zoom-canvas',
+            dragNode: {
+                type: 'drag-node',
+                shouldBegin: node => dragNodeFilter(node)
+            }
+        },
+        defaultModes = [];
+
+        Object.keys(interactionOptions).forEach(item => {
+            if(interactionOptions[item] && modeMap[item] !== undefined) {
+                defaultModes.push(modeMap[item]);
+            }
+        });
+
+        return defaultModes;
+    }
+
     /**
      * 对比上一次和该次 G6Data 找出新添加的节点和边
      * @param prevData 

src/engine.ts

@@ -102,7 +102,7 @@ export class Engine {
 
         this.layouter.layout(this.constructedData, modelList, this.layout);
         modelList.forEach(item => {
-            if(item.type === 'link') return;
+            if(item.modelType === 'link') return;
 
             let model = item.G6Item.getModel(),
                 x = item.get('x'),

src/options.ts

@@ -74,8 +74,8 @@ export interface AnimationOptions {
 export interface InteractionOptions {
     drag: boolean;
     zoom: boolean;
-    dragNode: boolean;
-    selectNode: boolean;
+    dragNode: boolean | string[];
+    selectNode: boolean | string[];
 };