From fead2cdd9623fbcb25dd5279688676a7033ff528 Mon Sep 17 00:00:00 2001 From: zhandouxiaojiji Date: Thu, 22 Oct 2020 13:10:10 +0800 Subject: [PATCH] load svg with file-loader --- package-lock.json | 45 +++++++++++++++++++++++++++++++++++++- package.json | 1 + render-process/index.tsx | 45 ++++++++++++-------------------------- static/icons/Action.svg | 1 + static/icons/Composite.svg | 1 + static/icons/Condition.svg | 1 + static/icons/Decorator.svg | 1 + static/icons/Other.svg | 1 + webpack.config.js | 1 + 9 files changed, 65 insertions(+), 32 deletions(-) create mode 100644 static/icons/Action.svg create mode 100644 static/icons/Composite.svg create mode 100644 static/icons/Condition.svg create mode 100644 static/icons/Decorator.svg create mode 100644 static/icons/Other.svg diff --git a/package-lock.json b/package-lock.json index 4fa988b..376c639 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 5cba907..4121155 100644 --- a/package.json +++ b/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", diff --git a/render-process/index.tsx b/render-process/index.tsx index 397aa58..8ce817f 100644 --- a/render-process/index.tsx +++ b/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) { diff --git a/static/icons/Action.svg b/static/icons/Action.svg new file mode 100644 index 0000000..198ca72 --- /dev/null +++ b/static/icons/Action.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/Composite.svg b/static/icons/Composite.svg new file mode 100644 index 0000000..dc5a425 --- /dev/null +++ b/static/icons/Composite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/Condition.svg b/static/icons/Condition.svg new file mode 100644 index 0000000..2429354 --- /dev/null +++ b/static/icons/Condition.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/Decorator.svg b/static/icons/Decorator.svg new file mode 100644 index 0000000..1333ef5 --- /dev/null +++ b/static/icons/Decorator.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/Other.svg b/static/icons/Other.svg new file mode 100644 index 0000000..0d68e05 --- /dev/null +++ b/static/icons/Other.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 9a0b60c..b581c9e 100644 --- a/webpack.config.js +++ b/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$/,