From 93e9fa854cd9d50b38928c38a6098994b7c6696b Mon Sep 17 00:00:00 2001
From: Dominic Ming <xuzhi.mxz@antfin.com>
Date: Fri, 18 Sep 2020 17:18:11 +0800
Subject: [PATCH] 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>
---
 examples/item/customNode/demo/xmlNode.js | 84 ++++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 examples/item/customNode/demo/xmlNode.js

diff --git a/examples/item/customNode/demo/xmlNode.js b/examples/item/customNode/demo/xmlNode.js
new file mode 100644
index 0000000000..03fa8a8ae2
--- /dev/null
+++ 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();