feat: jsx node extend config support and next style (#2092)

* feat: register node from xml string or xml string genrator * feat: add register xml node to interface and stroy book * fix: merge register to node & basic props back to shape options * fix: delete unused static function on shape * feat: xml node update when setState * feat: simple template renderer on xml * feat: simple template renderer on xml * fix: xml node update state style error * chore: remove lodash dependency * fix: remove xml html node after compile * feat: support loose json and object wrapped with {{ }} * feat: add test for new xml parser * feat: using style from cfg into xml node * 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 * feat: register node from xml string or xml string genrator * feat: add register xml node to interface and stroy book * fix: merge register to node & basic props back to shape options * fix: delete unused static function on shape * feat: xml node update when setState * feat: simple template renderer on xml * feat: simple template renderer on xml * fix: xml node update state style error * chore: remove lodash dependency * fix: remove xml html node after compile * feat: support loose json and object wrapped with {{ }} * feat: add test for new xml parser * feat: using style from cfg into xml node * 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 * fix: update & state * fix: {{}} replace bug and only keyshape inherit origin attrs * lint: fix line problem in xml * fix: xml node parse error and origin style only used on keyshape (#1942) * 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 * fix: {{}} replace bug and only keyshape inherit origin attrs * lint: fix line problem in xml * fix: test xml node * fix: fix image node problem * doc: add xml node examples * feat: add jsx key for node extend * feat: add next key to keep shape display inline * fix: xml json parse bug cause boolean not supported * fix: lint problem * fix: coveage fix Co-authored-by: Moyee <576375879@qq.com>
2024-11-30 02:38:20 +08:00 · 2020-09-18 17:18:11 +08:00 · 2020-09-18 17:18:11 +08:00 · 93e9fa854c
commit 93e9fa854c
parent fc463ba266
1 changed files with 84 additions and 0 deletions
--- a/examples/item/customNode/demo/xmlNode.js
+++ b/examples/item/customNode/demo/xmlNode.js
@ -0,0 +1,84 @@
+import G6 from '@antv/g6';
+
+/**
+ *  Custom a xml node
+ *  by Dominic Ming
+ *
+ */
+
+
+/**
+ * Register a XML Node
+ */
+
+G6.registerNode('rect-xml', (cfg) => `
+<group>
+  <rect style={{
+    width: 200,
+    height: 75,
+  }}>
+    <rect style={{
+      width: 150,
+      height: 20,
+      fill: ${cfg.color},
+      radius: [6, 6, 0, 0],
+      cursor: 'move'，
+      stroke: ${cfg.color}
+    }} draggable="true">
+      <text style={{ 
+        marginTop: 2, 
+        marginLeft: 75, 
+        textAlign: 'center', 
+        fontWeight: 'bold', 
+        fill: '#fff' }}>{{label}}</text>
+    </rect>
+    <rect style={{
+      width: 150,
+      height: 55,
+      stroke: ${cfg.color},
+      fill: #ffffff,
+      radius: [0, 0, 6, 6],
+    }}>
+      <text style={{ marginTop: 5, marginLeft: 3, fill: '#333', marginLeft: 4 }}>描述: {{description}}</text>
+      <text style={{ marginTop: 10, marginLeft: 3, fill: '#333', marginLeft: 4 }}>创建者: {{meta.creatorName}}</text>
+    </rect>
+  </rect>
+  <circle style={{
+    stroke: ${cfg.color},
+    r: 10,
+    fill: '#fff',
+    marginLeft: 75,
+    cursor: 'pointer'
+  }} name="circle">
+    <image style={{ img: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png', width: 12, height: 12,  marginLeft: 70,  marginTop: -5 }} />
+  </circle>
+</group>
+`)
+
+const data = {
+  nodes: [{
+    x: 150,
+    y: 150,
+    "description": "ant_type_name_...",
+    "label": "Type / ReferType",
+    "color": '#2196f3',
+    "meta": {
+      "creatorName": "a_creator"
+    },
+    "id": "test",
+    type: 'rect-xml'
+  }],
+};
+
+const width = document.getElementById('container').scrollWidth;
+const height = document.getElementById('container').scrollHeight || 500;
+const graph = new G6.Graph({
+  container: 'container',
+  width,
+  height,
+  // translate the graph to align the canvas's center, support by v3.5.1
+  fitCenter: true,
+});
+
+graph.data(data);
+graph.render();