load svg with file-loader

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "behavior3editor",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2316,6 +2316,49 @@
       "integrity": "sha1-tO7oFIq7Adzx0aw0Nn1Z4S+mHW4=",
       "dev": true
     },
+    "file-loader": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npm.taobao.org/file-loader/download/file-loader-6.1.1.tgz",
+      "integrity": "sha1-pvKd+z9ZM6HDULLbqiCsW+BTm6o=",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npm.taobao.org/json5/download/json5-2.1.3.tgz",
+          "integrity": "sha1-ybD3+pIzv+WAf+ZvzzpWF+1ZfUM=",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
+          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npm.taobao.org/schema-utils/download/schema-utils-3.0.0.tgz",
+          "integrity": "sha1-Z1AvaqK2ai1AMrQnmilEl4oJE+8=",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/file-uri-to-path/download/file-uri-to-path-1.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffile-uri-to-path%2Fdownload%2Ffile-uri-to-path-1.0.0.tgz",

package.json

@@ -20,6 +20,7 @@
   "homepage": "https://github.com/zhandouxiaojiji/behavior3editor#readme",
   "devDependencies": {
     "css-loader": "^4.3.0",
+    "file-loader": "^6.1.1",
     "source-map-loader": "^1.1.0",
     "style-loader": "^2.0.0",
     "ts-loader": "^8.0.4",

render-process/index.tsx

@@ -14,6 +14,7 @@ import G6 from '@antv/g6';
 
 import 'antd/dist/antd.dark.css';
 import './index.css';
+import './icons/iconfont.svg';
 import { ModelConfig, Item } from "@antv/g6/lib/types";
 
 const { Header, Sider, Content, Footer } = Layout;
@@ -109,11 +110,24 @@ export default class Main extends Component {
               y: -h / 2 + 2,
               lineHeight: 20,
               text: cfg.id,
+              textAlign: 'right',
               fill: 'black',
             },
             name: 'id-text',
           });
 
+          group.addShape('image', {
+            attrs: {
+              x: -w / 2 + 15,
+              y: -h / 2 + 2,
+              height: 16,
+              width: 16,
+              cursor: 'pointer',
+              img: './static/icons/Other.svg',
+            },
+            name: 'node-icon',
+          });
+
           // name text
           group.addShape('text', {
             attrs: {
@@ -205,37 +219,6 @@ export default class Main extends Component {
     }
   }
 
-  loadAllTrees() {
-    const workspace = this.state.workspace
-    if (workspace == '' || !fs.existsSync(workspace)) {
-      console.log("workspace not exist", workspace);
-      return;
-    }
-
-    const files = fs.readdirSync(workspace);
-    const list = []
-    files.forEach((filename) => {
-      console.log("load path", filename);
-      const stat = fs.statSync(path.join(workspace, filename))
-      if (stat.isFile()) {
-        let tree = this.loadTree(filename.slice(0, -5));
-        list.push(tree);
-        console.log("loaded", filename);
-      }
-    })
-  }
-
-  loadTree(name: string) {
-    const filename = this.state.workspace + '/' + name + '.json';
-    if (!fs.existsSync(filename)) {
-      return;
-    }
-    const str = fs.readFileSync(filename, 'utf8');
-    let tree: BehaviorTreeModel = JSON.parse(str);
-    tree.name = name;
-    return tree;
-  }
-
   renderJson() {
     const path = this.state.curPath;
     if (path) {

static/icons/Action.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603336764775" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6051" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M89.6 806.4h844.8V217.6H89.6v588.8zM0 128h1024v768H0V128z m242.816 577.536L192 654.72l154.304-154.368L192 346.048l50.816-50.816L448 500.352l-205.184 205.184z m584.32 13.248H512V640h315.072v78.72z" fill="#262626" p-id="6052"></path></svg>

static/icons/Composite.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603336841326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6824" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M213.312 682.688v170.624h469.312V768H1024v256h-341.312l-0.064-85.376H128v-256h85.312zM1024 384v256h-341.312l-0.064-85.376h-341.12V469.376h341.12V384H1024z m-85.312 85.312H768v85.376h170.688V469.312zM1024 0v256h-341.312l-0.064-85.376H213.312v170.688H128v-256h554.624V0H1024z m-85.312 85.312H768v85.376h170.688V85.312z m-170.688 768v85.376h170.688v-85.376H768z m-768-512h341.312v341.376H0V341.312z m85.312 85.376v170.624H256V426.688H85.312z" fill="#181818" p-id="6825"></path></svg>

static/icons/Condition.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603336850569" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6953" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 0l448 256v512l-448 256-448-256V256l448-256z m0 98.24l-362.88 207.36v412.8L512 925.76l362.88-207.36v-412.8L512 98.24z m224 200.448l64.64 37.312v74.688L736 448l-30.784-17.792-155.968 78.08v185.216l27.392 15.808v74.688L512 821.312l-64.64-37.312v-74.688l27.392-15.808V508.352L318.72 430.208 288 448l-64.64-37.312V336l64.64-37.312 64.64 37.312v27.712L512 443.52l159.36-79.872V336l64.64-37.312z" fill="#333333" p-id="6954"></path></svg>

static/icons/Decorator.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603336775409" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6180" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M195.776 194.688a448.064 448.064 0 0 1 760.768 261.312H846.08a336.064 336.064 0 0 0-569.408-181.12l182.08 180.672H183.488l-0.064 0.448H67.456l0.064-0.448H64V64l131.776 130.688z m632.448 634.624A448.064 448.064 0 0 1 67.456 568H177.92a336.064 336.064 0 0 0 569.408 181.12L565.248 568.384h275.264l0.064-0.448h115.968l-0.064 0.448H960V960l-131.776-130.688z" fill="#262626" p-id="6181"></path></svg>

static/icons/Other.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603336732180" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5922" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M85.312 85.312V384H384V85.312H85.312zM0 0h469.312v469.312H0V0z m0 554.688h469.312V1024H0V554.688zM85.312 640v298.688H384V640H85.312zM554.688 0H1024v469.312H554.688V0zM640 85.312V384h298.688V85.312H640zM554.688 554.688H1024V1024H554.688V554.688zM640 640v298.688h298.688V640H640z" fill="#262626" p-id="5923"></path></svg>

webpack.config.js

@@ -18,6 +18,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.tsx?$/, loader: "ts-loader" },
+      { test: /\.svg?$/, loader: "file-loader" },
       { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
       {
         test: /\.css$/,