x6自定义节点样式

自定义节点

• 官方的示例如下自定义节点示例（由于自动布局示例的要素过多，暂以倒数第二个示例来看）
• 要素：
  • markup:markup官方文档

    指定了渲染节点/边时使用的 ```SVG/HTML``` 片段，使用 ```JSON ```格式描述。例如 ```Shape.Rect``` 节点的```markup``` 定义如下。

            - tagname:
            通过```tagname```指定需要创建的```SVG/HTML```元素
            - selector:
            ```SVG/HTML```元素的唯一标识，可以在```attrs```中通过```selector:'name'```的```name```属性修改样式
            - className:
            该```SVG/HTML```元素的```css```样式名
            - style：
            该```SVG/HTML```元素的内联样式
        - attrs:
            定制节点样式的选项,是一个复杂的对象```key:{value...}```,```key```是节点中的```selector```值，```value```是该元素的```SVG```属性值
    
    
    ### 注册自定义节点样式
    ```javascript
    //'diy-shape'自定义节点样式名
    //{} 自定义节点构成，包含markup,attrs等属性
    //true 允许覆盖重写样式，方便在节点中添加修改样式
    Graph.registerNode('diy-shape',{
        width:200,    //节点宽度200px
        height:60,    //节点高度60px
        markup:[
            {
                tagName:'rect',    //指定元素为rect形状
                selector:'body',    //元素命名为body
            }，
            {
                tagName:'image',    //指定元素为image
                selector:'avatar'    //元素命名为avatar
            }，
            {
                tagName: 'text',    
                selector: 'rank',
            },
            {
                tagName: 'text',
                selector: 'name',
            },
        ],
        //自定义样式
        attrs:{    
            //对名为body的元素样式修改
            body: {
                refWidth: '100%',
                refHeight: '100%',
                fill: '#ffffff',
                stroke: '#000000',
                rx: 10,
                ry: 10,
                PointerEvent: 'visiblePainted',
            },
            avatar: {
                width: 48,
                height: 48,
                refX: 8,
                refY: 6,
            },
            rank: {
                refX: 0.9,
                refY: 0.2,
                fontFamily: 'Courier New',
                fontSize: 14,
                textAnchor: 'end',
            },
            name: {
                refX: 0.9,
                refY: 0.6,
                fontFamily: 'Courier New',
                fontSize: 14,
                fontWeight: '800',
                textAnchor: 'end',
            },
        }
    },true)

    添加自定义节点

    //注册节点到侧边栏
    id:'diy-shape1',
    shape:'diy-shape',    //通过shape选项使用前面自定义的节点
    attrs: {    //重新定义了许多样式。如果在注册形状时，第三个参数不填或为False，则会报错
        body: {
            fill: '#7c68fd',
            stroke: 'none',
        },
        avatar: {
            opacity: 0.7,
            'xlink:href':'自定义图片链接或base64',    //使用外链或base64放图片，
            width: '50px',
            height: '50px',
        },
        rank: {
            text: 'Step 0',
            fill: '#f1f1f1',
            wordSpacing: '-5px',
            letterSpacing: 0,
        },
        name: {
            text: '完成',
            fill: '#f1f1f1',
            fontSize: 13,
            fontFamily: 'Arial',
            letterSpacing: 0,
        },
        //添加之前定义的连接桩，不添加不能连其他节点
        ports: { ...ports }, //连接桩
    
    },

    自定义连线

    注册连线样式

    Graph.registerEdge(
      'diy-edge',
      {
        zIndex: -1,
        attrs: {
          line: {
            fill: 'none',
            strokeLinejoin: 'round',
            strokeWidth: '2',
            stroke: '#4b4a67',
            sourceMarker: null,
            targetMarker: null,
          },
        },
      },
      true
    );

使用自定义连线

在data的edges中声明shape

{
    source: 'Step1-Vasp晶格常数-GeoOpt', // String，必须，起始节点 id
    target: 'Step2-结果收敛判断脚本', // String，必须，目标节点 id
    fileDependencies: [
    {
        targetAppFile: '08d88153-6397-4136-8c09-7052f740dc87',
        dependencyAppFile: '08d85499-af1c-428c-867c-b78a8fde4597',
        dependencyType: 'appFile',
    },
    {
        targetAppFile: '08d88153-76de-435d-8c4d-477393c28d95',
        dependencyAppFile: '08d85499-d4aa-4580-880e-d1dfab86e2cd',
        dependencyType: 'appFile',
    },
    ],
    // attrs: edgeAttrs,
    shape: 'diy-edge',
    zIndex: 1,
},