fix: xml node state style not correct (#1916)

* feat: using style from cfg into xml node

* fix: node style not rollback with the style

* fix: remove unused var

* feat: xml node using single-node setState methods

src/shape/shape.ts

@@ -199,7 +199,7 @@ export default class Shape {
 
     if (typeof nodeDefinition === 'string' || typeof nodeDefinition === 'function') {
       const autoNodeDefinition = createNodeFromXML(nodeDefinition);
-      shapeObj = Object.assign({}, ShapeFramework, autoNodeDefinition);
+      shapeObj = Object.assign({}, shapeFactory.getShape('single-node'), autoNodeDefinition);
     } else {
       const extendShape = extendShapeType ? shapeFactory.getShape(extendShapeType) : ShapeFramework;
       shapeObj = Object.assign({}, extendShape, nodeDefinition);

src/shape/xml.ts

@@ -455,15 +455,6 @@ export function createNodeFromXML(gen: string | ((node: any) => string)) {
 
       return keyshape;
     },
-    setState(name, value, node) {
-      const cfg = Object.assign({}, node.get('model') || {});
-      // 根据状态构造style
-      if (value && cfg.style && cfg.style[name]) {
-        cfg.style = { ...cfg.style, ...cfg.style[name] }
-      }
-      // 根据上下文更新
-      this.update(cfg, node);
-    },
     update(cfg, node) {
       if (!structures[cfg.id]) {
         structures[cfg.id] = []
@@ -493,7 +484,8 @@ export function createNodeFromXML(gen: string | ((node: any) => string)) {
           switch (target.action) {
             case 'change':
               if (targetShape) {
-                targetShape.attr(target.val.attrs);
+                const originAttr = node.getOriginStyle() || {};
+                targetShape.attr({ ...originAttr, ...target.val.attrs });
               }
               break;
             case 'add':

stories/Shape/component/xml.tsx

@@ -83,11 +83,18 @@ const XML = () => {
         width: 1000,
         height: 800,
         defaultNode: {
-          type: "test",
+          type: "test"
         },
         modes: {
           default: ['drag-node', 'drag-canvas']
         },
+        nodeStateStyles: {
+          hover: {
+            fill: 'blue',
+            stroke: 'green',
+            lineWidth: 3
+          }
+        },
         defaultEdge: {
           style: {
             stroke: "#1890ff",
@@ -97,6 +104,13 @@ const XML = () => {
       });
       graph.data(data);
       graph.render();
+      graph.on('node:mouseenter', evt => {
+        graph.setItemState(evt.item, 'hover', true)
+      })
+
+      graph.on('node:mouseleave', evt => {
+        graph.setItemState(evt.item, 'hover', false)
+      })
     }
 
     return () => {