massive refactoring, Svelte removing
This commit is contained in:
parent
aa6b5e4575
commit
ecf4feb870
22 changed files with 1123 additions and 563 deletions
|
|
@ -1,16 +0,0 @@
|
|||
{
|
||||
"configurations": [
|
||||
{
|
||||
"type": "npm",
|
||||
"name": "Diagram run dev",
|
||||
"command": "run",
|
||||
"scripts": "dev",
|
||||
},
|
||||
{
|
||||
"type": "npm",
|
||||
"name": "Diagram run preview",
|
||||
"command": "run",
|
||||
"scripts": "preview",
|
||||
}
|
||||
]
|
||||
}
|
||||
16
index.html
Normal file
16
index.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="./src/style.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>FSA Editor</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div id="instrument-form"></div>
|
||||
<div id="mechanism-form"></div>
|
||||
<div id="diagram"></div>
|
||||
<script type="module" src="./src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
667
package-lock.json
generated
Normal file
667
package-lock.json
generated
Normal file
|
|
@ -0,0 +1,667 @@
|
|||
{
|
||||
"name": "diagram-js",
|
||||
"version": "0.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "diagram-js",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"choices.js": "^11.0.3",
|
||||
"diagram-js": "^15.2.4",
|
||||
"min-dash": "^4.2.2",
|
||||
"tiny-svg": "^4.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^3.4.2",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^6.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@bpmn-io/diagram-js-ui": {
|
||||
"version": "0.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@bpmn-io/diagram-js-ui/-/diagram-js-ui-0.2.3.tgz",
|
||||
"integrity": "sha512-OGyjZKvGK8tHSZ0l7RfeKhilGoOGtFDcoqSGYkX0uhFlo99OVZ9Jn1K7TJGzcE9BdKwvA5Y5kGqHEhdTxHvFfw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"htm": "^3.1.1",
|
||||
"preact": "^10.11.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/darwin-x64": {
|
||||
"version": "0.24.2",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.2.tgz",
|
||||
"integrity": "sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.8",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
|
||||
"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/set-array": "^1.2.1",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.10",
|
||||
"@jridgewell/trace-mapping": "^0.3.24"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/resolve-uri": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
|
||||
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/set-array": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
|
||||
"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/source-map": {
|
||||
"version": "0.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
|
||||
"integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/gen-mapping": "^0.3.5",
|
||||
"@jridgewell/trace-mapping": "^0.3.25"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
|
||||
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@jridgewell/trace-mapping": {
|
||||
"version": "0.3.25",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
|
||||
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/resolve-uri": "^3.1.0",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/rollup-darwin-x64": {
|
||||
"version": "4.30.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.30.1.tgz",
|
||||
"integrity": "sha512-x78BavIwSH6sqfP2xeI1hd1GpHL8J4W2BXcVM/5KYKoAD3nNsfitQhvWSw+TFtQTLZ9OmlF+FEInEHyubut2OA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
]
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
|
||||
"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "22.10.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.7.tgz",
|
||||
"integrity": "sha512-V09KvXxFiutGp6B7XkpaDXlNadZxrzajcY50EuoLIpQ6WWYCSvf19lVIazzfIzQvhUN2HjX12spLojTnhuKlGg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~6.20.0"
|
||||
}
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.14.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
|
||||
"integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/buffer-from": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
|
||||
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/choices.js": {
|
||||
"version": "11.0.3",
|
||||
"resolved": "https://registry.npmjs.org/choices.js/-/choices.js-11.0.3.tgz",
|
||||
"integrity": "sha512-sn1oLUEcvjj7vSSIT0QyexmLIeD6PFGSWrUUXKShL2LUtVFXU3OAIY/smNIQg0OKav3yk1rFa+F56hZ/uYC4cg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fuse.js": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/component-event": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/component-event/-/component-event-0.2.1.tgz",
|
||||
"integrity": "sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/diagram-js": {
|
||||
"version": "15.2.4",
|
||||
"resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-15.2.4.tgz",
|
||||
"integrity": "sha512-8v0U8AY6a5Vd6Cys5MdN7+yYRhs294/Q4ixkER/3v2ZPSbVCnK9XfbeYbB5QQfoCMkBnY7WBbLbcjvRNHTxnpw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@bpmn-io/diagram-js-ui": "^0.2.3",
|
||||
"clsx": "^2.1.0",
|
||||
"didi": "^10.2.2",
|
||||
"inherits-browser": "^0.1.0",
|
||||
"min-dash": "^4.1.0",
|
||||
"min-dom": "^4.2.1",
|
||||
"object-refs": "^0.4.0",
|
||||
"path-intersection": "^3.0.0",
|
||||
"tiny-svg": "^3.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/diagram-js/node_modules/tiny-svg": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-3.1.3.tgz",
|
||||
"integrity": "sha512-9mwnPqXInRsBmH/DO6NMxBE++9LsqpVXQSSTZGc5bomoKKvL5OX/Hlotw7XVXP6XLRcHWIzZpxfovGqWKgCypQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/didi": {
|
||||
"version": "10.2.2",
|
||||
"resolved": "https://registry.npmjs.org/didi/-/didi-10.2.2.tgz",
|
||||
"integrity": "sha512-l8NYkYFXV1izHI65EyT8EXOjUZtKmQkHLTT89cSP7HU5J/G7AOj0dXKtLc04EXYlga99PBY18IPjOeZ+c3DI4w==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
}
|
||||
},
|
||||
"node_modules/domify": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/domify/-/domify-1.4.2.tgz",
|
||||
"integrity": "sha512-m4yreHcUWHBncGVV7U+yQzc12vIlq0jMrtHZ5mW6dQMiL/7skSYNVX9wqKwOtyO9SGCgevrAFEgOCAHmamHTUA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.24.2",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
|
||||
"integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"esbuild": "bin/esbuild"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@esbuild/aix-ppc64": "0.24.2",
|
||||
"@esbuild/android-arm": "0.24.2",
|
||||
"@esbuild/android-arm64": "0.24.2",
|
||||
"@esbuild/android-x64": "0.24.2",
|
||||
"@esbuild/darwin-arm64": "0.24.2",
|
||||
"@esbuild/darwin-x64": "0.24.2",
|
||||
"@esbuild/freebsd-arm64": "0.24.2",
|
||||
"@esbuild/freebsd-x64": "0.24.2",
|
||||
"@esbuild/linux-arm": "0.24.2",
|
||||
"@esbuild/linux-arm64": "0.24.2",
|
||||
"@esbuild/linux-ia32": "0.24.2",
|
||||
"@esbuild/linux-loong64": "0.24.2",
|
||||
"@esbuild/linux-mips64el": "0.24.2",
|
||||
"@esbuild/linux-ppc64": "0.24.2",
|
||||
"@esbuild/linux-riscv64": "0.24.2",
|
||||
"@esbuild/linux-s390x": "0.24.2",
|
||||
"@esbuild/linux-x64": "0.24.2",
|
||||
"@esbuild/netbsd-arm64": "0.24.2",
|
||||
"@esbuild/netbsd-x64": "0.24.2",
|
||||
"@esbuild/openbsd-arm64": "0.24.2",
|
||||
"@esbuild/openbsd-x64": "0.24.2",
|
||||
"@esbuild/sunos-x64": "0.24.2",
|
||||
"@esbuild/win32-arm64": "0.24.2",
|
||||
"@esbuild/win32-ia32": "0.24.2",
|
||||
"@esbuild/win32-x64": "0.24.2"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/fuse.js": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
|
||||
"integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/htm": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz",
|
||||
"integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/inherits-browser": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/inherits-browser/-/inherits-browser-0.1.0.tgz",
|
||||
"integrity": "sha512-CJHHvW3jQ6q7lzsXPpapLdMx5hDpSF3FSh45pwsj6bKxJJ8Nl8v43i5yXnr3BdfOimGHKyniewQtnAIp3vyJJw==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/min-dash": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/min-dash/-/min-dash-4.2.2.tgz",
|
||||
"integrity": "sha512-qbhSYUxk6mBaF096B3JOQSumXbKWHenmT97cSpdNzgkWwGjhjhE/KZODCoDNhI2I4C9Cb6R/Q13S4BYkUSXoXQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/min-dom": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/min-dom/-/min-dom-4.2.1.tgz",
|
||||
"integrity": "sha512-TMoL8SEEIhUWYgkj7XMSgxmwSyGI+4fP2KFFGnN3FbHfbGHVdsLYSz8LoIsgPhz4dWRmLvxWWSMgzZMJW5sZuA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"component-event": "^0.2.1",
|
||||
"domify": "^1.4.1",
|
||||
"min-dash": "^4.2.1"
|
||||
}
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.8",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
|
||||
"integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/object-refs": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/object-refs/-/object-refs-0.4.0.tgz",
|
||||
"integrity": "sha512-6kJqKWryKZmtte6QYvouas0/EIJKPI1/MMIuRsiBlNuhIMfqYTggzX2F1AJ2+cDs288xyi9GL7FyasHINR98BQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/path-intersection": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/path-intersection/-/path-intersection-3.1.0.tgz",
|
||||
"integrity": "sha512-3xS3lvv/vuwm5aH2BVvNRvnvwR2Drde7jQClKpCXTYXIMMjcw/EnMhzCgeHwqbCpzi760PEfAkU53vSIlrNr9A==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 14.20"
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.49",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
|
||||
"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/postcss"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.7",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/preact": {
|
||||
"version": "10.25.4",
|
||||
"resolved": "https://registry.npmjs.org/preact/-/preact-10.25.4.tgz",
|
||||
"integrity": "sha512-jLdZDb+Q+odkHJ+MpW/9U5cODzqnB+fy2EiHSZES7ldV5LK7yjlVzTp7R8Xy6W6y75kfK8iWYtFVH7lvjwrCMA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/preact"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier": {
|
||||
"version": "3.4.2",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
|
||||
"integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"prettier": "bin/prettier.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "4.30.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.30.1.tgz",
|
||||
"integrity": "sha512-mlJ4glW020fPuLi7DkM/lN97mYEZGWeqBnrljzN0gs7GLctqX3lNWxKQ7Gl712UAX+6fog/L3jh4gb7R6aVi3w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/estree": "1.0.6"
|
||||
},
|
||||
"bin": {
|
||||
"rollup": "dist/bin/rollup"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0.0",
|
||||
"npm": ">=8.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@rollup/rollup-android-arm-eabi": "4.30.1",
|
||||
"@rollup/rollup-android-arm64": "4.30.1",
|
||||
"@rollup/rollup-darwin-arm64": "4.30.1",
|
||||
"@rollup/rollup-darwin-x64": "4.30.1",
|
||||
"@rollup/rollup-freebsd-arm64": "4.30.1",
|
||||
"@rollup/rollup-freebsd-x64": "4.30.1",
|
||||
"@rollup/rollup-linux-arm-gnueabihf": "4.30.1",
|
||||
"@rollup/rollup-linux-arm-musleabihf": "4.30.1",
|
||||
"@rollup/rollup-linux-arm64-gnu": "4.30.1",
|
||||
"@rollup/rollup-linux-arm64-musl": "4.30.1",
|
||||
"@rollup/rollup-linux-loongarch64-gnu": "4.30.1",
|
||||
"@rollup/rollup-linux-powerpc64le-gnu": "4.30.1",
|
||||
"@rollup/rollup-linux-riscv64-gnu": "4.30.1",
|
||||
"@rollup/rollup-linux-s390x-gnu": "4.30.1",
|
||||
"@rollup/rollup-linux-x64-gnu": "4.30.1",
|
||||
"@rollup/rollup-linux-x64-musl": "4.30.1",
|
||||
"@rollup/rollup-win32-arm64-msvc": "4.30.1",
|
||||
"@rollup/rollup-win32-ia32-msvc": "4.30.1",
|
||||
"@rollup/rollup-win32-x64-msvc": "4.30.1",
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-support": {
|
||||
"version": "0.5.21",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
|
||||
"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"buffer-from": "^1.0.0",
|
||||
"source-map": "^0.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-support/node_modules/source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/terser": {
|
||||
"version": "5.37.0",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.37.0.tgz",
|
||||
"integrity": "sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==",
|
||||
"dev": true,
|
||||
"license": "BSD-2-Clause",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/source-map": "^0.3.3",
|
||||
"acorn": "^8.8.2",
|
||||
"commander": "^2.20.0",
|
||||
"source-map-support": "~0.5.20"
|
||||
},
|
||||
"bin": {
|
||||
"terser": "bin/terser"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-svg": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-4.1.3.tgz",
|
||||
"integrity": "sha512-OPXLrGkpdRxLBPV7RXkR9zFx6Zx5vXpHFnenaNhrLQbHxTdoU0T91nwFbIrAMiLr+XSpjt8S73qF7U9MP/Jhjg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.6.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
|
||||
"integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/undici-types": {
|
||||
"version": "6.20.0",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
|
||||
"integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.0.7",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.0.7.tgz",
|
||||
"integrity": "sha512-RDt8r/7qx9940f8FcOIAH9PTViRrghKaK2K1jY3RaAURrEUbm9Du1mJ72G+jlhtG3WwodnfzY8ORQZbBavZEAQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"esbuild": "^0.24.2",
|
||||
"postcss": "^8.4.49",
|
||||
"rollup": "^4.23.0"
|
||||
},
|
||||
"bin": {
|
||||
"vite": "bin/vite.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.0.0 || ^20.0.0 || >=22.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/vitejs/vite?sponsor=1"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
|
||||
"jiti": ">=1.21.0",
|
||||
"less": "*",
|
||||
"lightningcss": "^1.21.0",
|
||||
"sass": "*",
|
||||
"sass-embedded": "*",
|
||||
"stylus": "*",
|
||||
"sugarss": "*",
|
||||
"terser": "^5.16.0",
|
||||
"tsx": "^4.8.1",
|
||||
"yaml": "^2.4.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/node": {
|
||||
"optional": true
|
||||
},
|
||||
"jiti": {
|
||||
"optional": true
|
||||
},
|
||||
"less": {
|
||||
"optional": true
|
||||
},
|
||||
"lightningcss": {
|
||||
"optional": true
|
||||
},
|
||||
"sass": {
|
||||
"optional": true
|
||||
},
|
||||
"sass-embedded": {
|
||||
"optional": true
|
||||
},
|
||||
"stylus": {
|
||||
"optional": true
|
||||
},
|
||||
"sugarss": {
|
||||
"optional": true
|
||||
},
|
||||
"terser": {
|
||||
"optional": true
|
||||
},
|
||||
"tsx": {
|
||||
"optional": true
|
||||
},
|
||||
"yaml": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/yaml": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
|
||||
"integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"optional": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"yaml": "bin.mjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 14"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
22
package.json
Normal file
22
package.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "diagram-js",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^3.4.2",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^6.0.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"choices.js": "^11.0.3",
|
||||
"diagram-js": "^15.2.4",
|
||||
"min-dash": "^4.2.2",
|
||||
"tiny-svg": "^4.1.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,267 +0,0 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
create as svgCreate,
|
||||
append as svgAppend
|
||||
} from 'tiny-svg';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
let типОбъекта: 'Прибор' | 'ИсполнительныйМеханизм' = 'Прибор';
|
||||
let фиксация: 'НаМесте' | 'НаЩите' = 'НаМесте';
|
||||
let типПрибора: 'Величина' | 'Мультивеличина' = 'Величина';
|
||||
let величина: 'Напряжение' | 'Температура' = 'Напряжение';
|
||||
let уточнение: 'ИнтегрированиеСуммированиеПоВремени' | 'РазностьПерепад' | null = null;
|
||||
|
||||
interface Функция {
|
||||
тип: string;
|
||||
значение: string;
|
||||
}
|
||||
|
||||
let функции: Функция[] = [];
|
||||
|
||||
const функцииПоТипу = {
|
||||
ВыполняемаяФункция: [
|
||||
'Сигнализация',
|
||||
'АвтоматическоеРегулирование',
|
||||
'ВеличинаОтклоненияОтЗаданной',
|
||||
'Регистрация'],
|
||||
ФункциональныйПризнак: [
|
||||
'ЧувствительныйЭлемент',
|
||||
'Преобразование',
|
||||
'ПервичныйПоказывающийПрибор',
|
||||
'СтанцияУправления',
|
||||
'ВключениеОтключениеПереключение',
|
||||
'Преобразование',
|
||||
'VДополнительный',
|
||||
'ВспомогательныеКомпьютерныеУстройства',
|
||||
'ВспомогательныеВычислительноеУстройство',
|
||||
'ZДополнительный']};
|
||||
|
||||
function addFunction() {
|
||||
функции = [...функции, { тип: 'ВыполняемаяФункция', значение: 'Регистрация' }]
|
||||
}
|
||||
|
||||
function removeFunction(index: number) {
|
||||
функции = функции.filter((_, i) => i !== index);
|
||||
}
|
||||
|
||||
let являетсяПаз = false;
|
||||
let ручной = false;
|
||||
let направление: 'Открывается' | 'Закрывается' | 'ОстаётсяНаМесте' | null = null
|
||||
|
||||
export const data = writable({ value: svgCreate('g') });
|
||||
|
||||
|
||||
function handleSubmit() {
|
||||
data.update((_) => ({value: to_svg(0,0)}));
|
||||
}
|
||||
|
||||
export function to_svg(x, y):SVGElement {
|
||||
const r = svgCreate('g');
|
||||
if (типОбъекта === 'ИсполнительныйМеханизм') {
|
||||
var circle = svgCreate('circle',
|
||||
{
|
||||
cx: x,
|
||||
cy: y - 52,
|
||||
r: '2.5mm',
|
||||
fill: "none",
|
||||
stroke: "CanvasText",
|
||||
});
|
||||
|
||||
var lineAttrs: {
|
||||
x1: any;
|
||||
x2: any;
|
||||
y1: any;
|
||||
y2: number;
|
||||
stroke: string;
|
||||
"marker-start"?: string;
|
||||
"marker-end"?: string;
|
||||
} = {
|
||||
x1: x,
|
||||
x2: x,
|
||||
y1: y,
|
||||
y2: y - 42,
|
||||
stroke: "CanvasText",
|
||||
}
|
||||
|
||||
if (направление == "Открывается" || направление == "ОстаётсяНаМесте") {
|
||||
lineAttrs["marker-start"] = "url(#arrow)"
|
||||
}
|
||||
|
||||
if (направление == "Закрывается" || направление == "ОстаётсяНаМесте") {
|
||||
lineAttrs["marker-end"] = "url(#arrow)"
|
||||
}
|
||||
|
||||
const line = svgCreate("line", lineAttrs);
|
||||
svgAppend(r, circle)
|
||||
svgAppend(r, line)
|
||||
return r
|
||||
}
|
||||
|
||||
if (являетсяПаз) {
|
||||
const w = 10;
|
||||
const h = 10;
|
||||
const outer = svgCreate('polygon', {points: `${x},${y+h} ${x+w},${y} ${x},${y-h} ${x-w},${y}`, stroke:"CanvasText", fill:"Canvas"});
|
||||
svgAppend(r, outer);
|
||||
const rect = svgCreate('rect', {x: x-w/2, y: y-h/2, width:w, height: h, stroke:"CanvasText", fill:"Canvas"})
|
||||
svgAppend(r, rect);
|
||||
} else {
|
||||
const circle = svgCreate('circle', {x: x, y: y, r: "5mm", stroke:"CanvasText", fill:"Canvas"});
|
||||
svgAppend(r, circle);
|
||||
}
|
||||
if (фиксация == "НаЩите") {
|
||||
const h = svgCreate('line', {x0: x - 5, y0: y, x1: x + 5, y1: y, stroke:"CanvasText"})
|
||||
svgAppend(r, h);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
return r;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<label>
|
||||
<span>Тип объекта:</span>
|
||||
<select bind:value={типОбъекта}>
|
||||
<option value="Прибор">Прибор</option>
|
||||
<option value="ИсполнительныйМеханизм">Исполнительный механизм</option>
|
||||
</select>
|
||||
</label>
|
||||
<br/>
|
||||
|
||||
{#if типОбъекта === 'Прибор'}
|
||||
<label>
|
||||
<span>Фиксация:</span>
|
||||
<select bind:value={фиксация}>
|
||||
<option value="НаМесте">На месте</option>
|
||||
<option value="НаЩите">На щите</option>
|
||||
</select>
|
||||
</label>
|
||||
<br/>
|
||||
|
||||
<label>
|
||||
<span>Тип прибора:</span>
|
||||
<select bind:value={типПрибора}>
|
||||
<option value="Величина">Величина</option>
|
||||
<option value="Мультивеличина">Мультивеличина</option>
|
||||
</select>
|
||||
</label>
|
||||
<br/>
|
||||
|
||||
<label>
|
||||
<span>Величина:</span>
|
||||
<select id="choices-select" bind:value={величина}>
|
||||
<option value="A">Анализ, качество</option>
|
||||
<option value="B">Пламя, горение</option>
|
||||
<option value="C">Дополнительная величина</option>
|
||||
<option value="D">Дополнительная величина</option>
|
||||
<option value="E">Напряжение</option>
|
||||
<option value="F">Расход</option>
|
||||
<option value="G">Дополнительная величина</option>
|
||||
<option value="H">Ручное воздействие</option>
|
||||
<option value="I">Ток</option>
|
||||
<option value="J">Мощность</option>
|
||||
<option value="K">Время</option>
|
||||
<option value="L">Уровень</option>
|
||||
<option value="M">Дополнительная величина</option>
|
||||
<option value="N">Дополнительная величина</option>
|
||||
<option value="O">Дополнительная величина</option>
|
||||
<option value="P">Давление</option>
|
||||
<option value="Q">Количество</option>
|
||||
<option value="E">Радиоактивность</option>
|
||||
<option value="S">Скорость, частота</option>
|
||||
<option value="T">Температура</option>
|
||||
<option value="U">Разнородные величины</option> // несколько величин ТОЛЬКО здесь
|
||||
<option value="V">Вибрация</option>
|
||||
<option value="W">Вес</option>
|
||||
<option value="X">Дополнительная величина (нерекомендованная буква)</option>
|
||||
<option value="Y">Событие</option>
|
||||
<option value="Z">Размер</option>
|
||||
</select>
|
||||
</label>
|
||||
<br/>
|
||||
|
||||
<label>
|
||||
<span>Уточнение:</span>
|
||||
<select bind:value={уточнение}>
|
||||
<option value="ИнтегрированиеСуммированиеПоВремени">Интегрирование</option>
|
||||
<option value="РазностьПерепад">Разность</option>
|
||||
<option value={null}>Без уточнения</option>
|
||||
</select>
|
||||
</label>
|
||||
<br/>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={являетсяПаз} />
|
||||
<span>Является паз</span>
|
||||
</label>
|
||||
<br/>
|
||||
|
||||
<strong>Функции<button type="button" on:click={addFunction} class="simplebutton">+</button></strong>
|
||||
{#each функции as функция, i}
|
||||
<div class="функция-элемент" style="margin-bottom: 10px;">
|
||||
<label>
|
||||
Тип функции:
|
||||
<select bind:value={функция.тип}>
|
||||
<option value="ВыполняемаяФункция">Выполняемая функция</option>
|
||||
<option value="ФункциональныйПризнак">Функциональный признак</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Значение:
|
||||
<select bind:value={функция.значение}>
|
||||
{#if функция.тип === 'ВыполняемаяФункция'}
|
||||
{#each функцииПоТипу.ВыполняемаяФункция as val}
|
||||
<option value={val}>{val}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if функция.тип === 'ФункциональныйПризнак'}
|
||||
{#each функцииПоТипу.ФункциональныйПризнак as val}
|
||||
<option value={val}>{val}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
</label>
|
||||
<button type="button" on:click={() => removeFunction(i)} class="simplebutton">-</button>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
|
||||
{:else}
|
||||
<label>
|
||||
<span>Имеет ручное управление:</span>
|
||||
<input type="checkbox" bind:checked={ручной} />
|
||||
</label>
|
||||
<br/>
|
||||
|
||||
<label>
|
||||
<span>Направление:</span>
|
||||
<select bind:value={направление}>
|
||||
<option value="Открывается">Открывается</option>
|
||||
<option value="Закрывается">Закрывается</option>
|
||||
<option value="ОстаётсяНаМесте">Остаётся на месте</option>
|
||||
<option value={null}>Не указано</option>
|
||||
</select>
|
||||
</label>
|
||||
<br/>
|
||||
{/if}
|
||||
<br/>
|
||||
<button on:click={handleSubmit}>OK</button>
|
||||
<br/>
|
||||
</div>
|
||||
<style>
|
||||
.simplebutton {
|
||||
width: 40px; /* Ширина кнопки */
|
||||
height: 40px; /* Высота кнопки должна совпадать с шириной */
|
||||
border: 1px solid lightgray;
|
||||
margin-left: 5px;
|
||||
border-radius: 50%; /* Делает кнопку круглой */
|
||||
display: inline-flex; /* Для центрирования содержимого */
|
||||
justify-content: center; /* Горизонтальное центрирование */
|
||||
align-items: center; /* Вертикальное центрирование */
|
||||
cursor: pointer; /* Изменение курсора */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<script>
|
||||
import AddObjectForm from './AddObjectForm.svelte';
|
||||
import Diagram from './Diagram.svelte';
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<h1>FSA Editor</h1>
|
||||
<AddObjectForm/>
|
||||
<Diagram />
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import CustomGlobalConnectRules from './CustomGlobalConnectRules';
|
||||
|
||||
const CustomGlobalConnectRulesModule = {
|
||||
__init__: ['customGlobalConnectRules'],
|
||||
customGlobalConnectRules: ['type', CustomGlobalConnectRules]
|
||||
};
|
||||
|
||||
export default CustomGlobalConnectRulesModule;
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
import ElementFactory from "diagram-js/lib/core/ElementFactory";
|
||||
import Palette from "diagram-js/lib/features/palette/Palette";
|
||||
import LassoTool from "diagram-js/lib/features/lasso-tool/LassoTool";
|
||||
import Create from "diagram-js/lib/features/create/Create";
|
||||
import GlobalConnect from "diagram-js/lib/features/global-connect/GlobalConnect";
|
||||
|
||||
function PalettePlugin (create: Create,
|
||||
elementFactory:ElementFactory,
|
||||
globalConnect: GlobalConnect,
|
||||
lassoTool: LassoTool,
|
||||
palette: Palette) {
|
||||
palette.registerProvider({
|
||||
getPaletteEntries: () => ({
|
||||
'hand-tool': {
|
||||
group: 'tools',
|
||||
className: 'icon-hand-tool',
|
||||
title: 'Hand Tool',
|
||||
action: {
|
||||
click: function() {
|
||||
//console.log("Hello");
|
||||
}
|
||||
}
|
||||
},
|
||||
'lasso-tool': {
|
||||
group: 'tools',
|
||||
className: 'icon-lasso-tool',
|
||||
title: 'Lasso Tool',
|
||||
action: {
|
||||
click: function(event) {
|
||||
lassoTool.activateSelection(event as MouseEvent);
|
||||
}
|
||||
}
|
||||
},
|
||||
'tool-separator': {
|
||||
group: 'tools',
|
||||
separator: true,
|
||||
action: {}
|
||||
},
|
||||
'create-shape': {
|
||||
group: 'create',
|
||||
className: 'icon-create-shape',
|
||||
title: 'Create Shape',
|
||||
action: {
|
||||
click: function() {
|
||||
var shape = elementFactory.createShape({
|
||||
width: 100,
|
||||
height: 80,
|
||||
canStartConnection:true
|
||||
});
|
||||
console.log(shape.canStartConnection);
|
||||
create.start(event, shape);
|
||||
}
|
||||
}
|
||||
},
|
||||
'create-device': {
|
||||
group: 'create',
|
||||
className: 'icon-create-shape',
|
||||
title: 'Create Device',
|
||||
action: {
|
||||
click: function() {
|
||||
var shape = elementFactory.createShape({
|
||||
width: 100,
|
||||
height: 80,
|
||||
canStartConnection:true,
|
||||
type: 'custom:circle'
|
||||
});
|
||||
console.log(shape.canStartConnection);
|
||||
create.start(event, shape);
|
||||
}
|
||||
}
|
||||
},
|
||||
'create-connection': {
|
||||
group: 'create',
|
||||
className: 'icon-connect',
|
||||
title: 'Create Connection',
|
||||
action: {
|
||||
click: (event) => {
|
||||
globalConnect.start(event, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
__init__: [ 'palettePlugin' ],
|
||||
palettePlugin: [ 'type', PalettePlugin ]
|
||||
};
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import Canvas from "diagram-js/lib/core/Canvas";
|
||||
import ElementFactory from 'diagram-js/lib/core/ElementFactory';
|
||||
import Editor from './editor.ts'
|
||||
import 'diagram-js/assets/diagram-js.css';
|
||||
|
||||
let container: HTMLDivElement | null = null;
|
||||
|
||||
onMount(() => {
|
||||
if (container === null) return;
|
||||
const diagram = Editor({ container });
|
||||
const canvas = diagram.get<Canvas>("canvas");
|
||||
const elementFactory = diagram.get<ElementFactory>('elementFactory');
|
||||
var root = elementFactory.createRoot();
|
||||
canvas.setRootElement(root);
|
||||
});
|
||||
</script>
|
||||
|
||||
<svg>
|
||||
<defs>
|
||||
<marker
|
||||
id="arrow"
|
||||
refX="9"
|
||||
refY="5"
|
||||
fill="CanvasText"
|
||||
markerHeight="6"
|
||||
markerWidth="6"
|
||||
orient="auto-start-reverse"
|
||||
viewBox="0 0 297 210">
|
||||
<path d="M 0 0 L 10 5 L 0 10 z"></path>
|
||||
</marker>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 297mm;
|
||||
height: 210mm;
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div bind:this={container} class="container"></div>
|
||||
145
src/addObjectForm.ts
Normal file
145
src/addObjectForm.ts
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
import 'choices.js/public/assets/styles/choices.min.css'
|
||||
|
||||
// Инициализация состояний для формы "Прибор"
|
||||
const stateInstrument = {
|
||||
фиксация: 'НаМесте',
|
||||
типПрибора: 'Величина',
|
||||
величина: 'Напряжение',
|
||||
уточнение: null,
|
||||
функции: []
|
||||
};
|
||||
|
||||
// Инициализация состояний для формы "Исполнительный механизм"
|
||||
const stateMechanism = {
|
||||
ручной: false,
|
||||
направление: null as string | null
|
||||
};
|
||||
|
||||
// Настройки для выбора значений
|
||||
const функцииПоТипу = {
|
||||
ВыполняемаяФункция: [
|
||||
'Сигнализация'
|
||||
, 'АвтоматическоеРегулирование'
|
||||
, 'ВеличинаОтклоненияОтЗаданной'
|
||||
, 'Регистрация'
|
||||
],
|
||||
ФункциональныйПризнак: [
|
||||
'ЧувствительныйЭлемент'
|
||||
, 'Преобразование'
|
||||
, 'ПервичныйПоказывающийПрибор'
|
||||
, 'СтанцияУправления'
|
||||
, 'ВключениеОтключениеПереключение'
|
||||
]
|
||||
};
|
||||
|
||||
// Создание элементов формы
|
||||
export function createInstrumentForm(container: HTMLElement | null) {
|
||||
const form = document.createElement('form');
|
||||
|
||||
// Фиксация
|
||||
const fixationLabel = document.createElement('label');
|
||||
fixationLabel.innerText = 'Фиксация:';
|
||||
const fixationSelect = document.createElement('select');
|
||||
fixationSelect.innerHTML = '<option value="НаМесте">На месте</option><option value="НаЩите">На щите</option>';
|
||||
fixationSelect.value = stateInstrument.фиксация;
|
||||
fixationSelect.addEventListener('change', (e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
stateInstrument.фиксация = target.value;
|
||||
});
|
||||
fixationLabel.appendChild(fixationSelect);
|
||||
form.appendChild(fixationLabel);
|
||||
|
||||
// Тип прибора
|
||||
const typeLabel = document.createElement('label');
|
||||
typeLabel.innerText = 'Тип прибора:';
|
||||
const typeSelect = document.createElement('select');
|
||||
typeSelect.innerHTML = '<option value="Величина">Величина</option><option value="Мультивеличина">Мультивеличина</option>';
|
||||
typeSelect.value = stateInstrument.типПрибора;
|
||||
typeSelect.addEventListener('change', (e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
stateInstrument.типПрибора = target.value;
|
||||
});
|
||||
typeLabel.appendChild(typeSelect);
|
||||
form.appendChild(typeLabel);
|
||||
|
||||
// Величина
|
||||
const magnitudeLabel = document.createElement('label');
|
||||
magnitudeLabel.innerText = 'Величина:';
|
||||
const magnitudeSelect = document.createElement('select');
|
||||
const choices = [
|
||||
{ value: 'A', label: 'Анализ, качество' },
|
||||
{ value: 'B', label: 'Пламя, горение' },
|
||||
{ value: 'C', label: 'Дополнительная величина (C)' },
|
||||
{ value: 'D', label: 'Дополнительная величина (D)' },
|
||||
{ value: 'E', label: 'Напряжение' },
|
||||
{ value: 'F', label: 'Расход' },
|
||||
{ value: 'G', label: 'Дополнительная величина (G)' },
|
||||
{ value: 'H', label: 'Ручное воздействие' },
|
||||
{ value: 'I', label: 'Ток' },
|
||||
{ value: 'J', label: 'Мощность' },
|
||||
{ value: 'K', label: 'Время' },
|
||||
{ value: 'L', label: 'Уровень' },
|
||||
{ value: 'M', label: 'Дополнительная величина (N)' },
|
||||
{ value: 'N', label: 'Дополнительная величина (N))' },
|
||||
{ value: 'O', label: 'Дополнительная величина (O)' },
|
||||
{ value: 'P', label: 'Давление' },
|
||||
{ value: 'Q', label: 'Количество' },
|
||||
{ value: 'E', label: 'Радиоактивность' },
|
||||
{ value: 'S', label: 'Скорость, частота' },
|
||||
{ value: 'T', label: 'Температура' },
|
||||
{ value: 'U', label: 'Разнородные величины' }, // несколько величин ТОЛЬКО здесь
|
||||
{ value: 'V', label: 'Вибрация' },
|
||||
{ value: 'W', label: 'Вес' },
|
||||
{ value: 'X', label: 'Дополнительная величина (нерекомендованная буква X)' },
|
||||
{ value: 'Y', label: 'Событие' },
|
||||
{ value: 'Z', label: 'Размер' }
|
||||
];
|
||||
choices.forEach(element => {
|
||||
const opt = document.createElement<'option'>('option')
|
||||
opt.setAttribute('value', element.value)
|
||||
opt.appendChild(document.createTextNode(element.label))
|
||||
magnitudeSelect.appendChild(opt)
|
||||
});
|
||||
magnitudeSelect.addEventListener('change', (e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
stateInstrument.величина = target.value;
|
||||
});
|
||||
magnitudeLabel.appendChild(magnitudeSelect);
|
||||
form.appendChild(magnitudeLabel);
|
||||
|
||||
// Добавить форму на страницу
|
||||
container?.appendChild(form);
|
||||
}
|
||||
|
||||
export function createMechanismForm(container: HTMLElement | null) {
|
||||
const form = document.createElement('form');
|
||||
|
||||
// Ручное управление
|
||||
const manualControlLabel = document.createElement('label');
|
||||
manualControlLabel.innerText = 'Имеет ручное управление:';
|
||||
const manualControlCheckbox = document.createElement('input');
|
||||
manualControlCheckbox.type = 'checkbox';
|
||||
manualControlCheckbox.checked = stateMechanism.ручной;
|
||||
manualControlCheckbox.addEventListener('change', (e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
stateMechanism.ручной = target.checked;
|
||||
});
|
||||
manualControlLabel.appendChild(manualControlCheckbox);
|
||||
form.appendChild(manualControlLabel);
|
||||
|
||||
// Направление
|
||||
const directionLabel = document.createElement('label');
|
||||
directionLabel.innerText = 'Направление:';
|
||||
const directionSelect = document.createElement('select');
|
||||
directionSelect.innerHTML = '<option value="Открывается">Открывается</option><option value="Закрывается">Закрывается</option><option value="ОстаётсяНаМесте">Остаётся на месте</option>';
|
||||
directionSelect.value = stateMechanism.направление || '';
|
||||
directionSelect.addEventListener('change', (e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
stateMechanism.направление = target.value;
|
||||
});
|
||||
directionLabel.appendChild(directionSelect);
|
||||
form.appendChild(directionLabel);
|
||||
|
||||
// Добавить форму на страницу
|
||||
container?.appendChild(form);
|
||||
}
|
||||
110
src/editor.ts
110
src/editor.ts
|
|
@ -1,64 +1,50 @@
|
|||
import Diagram from 'diagram-js';
|
||||
import ConnectModule from 'diagram-js/lib/features/connect';
|
||||
import ContextPadModule from 'diagram-js/lib/features/context-pad';
|
||||
import CreateModule from 'diagram-js/lib/features/create';
|
||||
import LassoToolModule from 'diagram-js/lib/features/lasso-tool';
|
||||
import ModelingModule from 'diagram-js/lib/features/modeling';
|
||||
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
|
||||
import MoveModule from 'diagram-js/lib/features/move';
|
||||
import OutlineModule from 'diagram-js/lib/features/outline';
|
||||
import PaletteModule from 'diagram-js/lib/features/palette';
|
||||
import ResizeModule from 'diagram-js/lib/features/resize';
|
||||
import RulesModule from 'diagram-js/lib/features/rules';
|
||||
import SelectionModule from 'diagram-js/lib/features/selection';
|
||||
import GlobalConnectModule from 'diagram-js/lib/features/global-connect';
|
||||
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
|
||||
import BendpointMoveModule from 'diagram-js/lib/features/bendpoints';
|
||||
import StyleModule from './StyleModule.ts';
|
||||
import ManhattanConnectionModule from './ManhattanConnectionModule.ts';
|
||||
import CustomPaletteModule from './CustomPaletteModule.ts';
|
||||
import CustomGlobalConnectRulesModule from './CustomGlobalConnectRulesModule.ts';
|
||||
import CustomShapeRendererModule from './CustomShapeRendererModule.ts';
|
||||
import CustomOutlineModule from './CustomOutlineModule.ts';
|
||||
import Diagram from 'diagram-js'
|
||||
import ConnectModule from 'diagram-js/lib/features/connect'
|
||||
import ContextPadModule from 'diagram-js/lib/features/context-pad'
|
||||
import CreateModule from 'diagram-js/lib/features/create'
|
||||
import LassoToolModule from 'diagram-js/lib/features/lasso-tool'
|
||||
import ModelingModule from 'diagram-js/lib/features/modeling'
|
||||
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
|
||||
import MoveModule from 'diagram-js/lib/features/move'
|
||||
import RulesModule from 'diagram-js/lib/features/rules'
|
||||
import SelectionModule from 'diagram-js/lib/features/selection'
|
||||
import GlobalConnectModule from 'diagram-js/lib/features/global-connect'
|
||||
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll'
|
||||
import BendpointMoveModule from 'diagram-js/lib/features/bendpoints'
|
||||
|
||||
interface EditorOptions {
|
||||
container: HTMLElement;
|
||||
additionalModules?: Array<any>;
|
||||
}
|
||||
|
||||
export default function Editor(options: EditorOptions): Diagram {
|
||||
const { container } = options;
|
||||
|
||||
const modules = [
|
||||
BendpointMoveModule
|
||||
, ConnectModule
|
||||
, ContextPadModule
|
||||
, CreateModule
|
||||
, GlobalConnectModule
|
||||
, LassoToolModule
|
||||
, ModelingModule
|
||||
, MoveCanvasModule
|
||||
, MoveModule
|
||||
//, OutlineModule
|
||||
, PaletteModule
|
||||
//, ResizeModule
|
||||
, RulesModule
|
||||
, SelectionModule
|
||||
, ZoomScrollModule
|
||||
, StyleModule
|
||||
, ManhattanConnectionModule
|
||||
, CustomPaletteModule
|
||||
, CustomGlobalConnectRulesModule
|
||||
, CustomShapeRendererModule
|
||||
, CustomOutlineModule
|
||||
];
|
||||
|
||||
|
||||
console.log(container);
|
||||
return new Diagram({
|
||||
canvas: {
|
||||
container
|
||||
},
|
||||
modules: modules
|
||||
});
|
||||
import StyleModule from './modules/StyleModule'
|
||||
import ManhattanConnectionModule from './modules/ManhattanConnectionModule'
|
||||
import PaletteModule from './modules/PaletteModule'
|
||||
import GlobalConnectRulesModule from './modules/GlobalConnectRulesModule'
|
||||
import ShapeRendererModule from './modules/ShapeRendererModule'
|
||||
import OutlineModule from './modules/OutlineModule'
|
||||
|
||||
export default function Editor(container: HTMLElement): Diagram {
|
||||
return new Diagram(
|
||||
{
|
||||
canvas: {container},
|
||||
modules: [
|
||||
BendpointMoveModule
|
||||
, ConnectModule
|
||||
, ContextPadModule
|
||||
, CreateModule
|
||||
, GlobalConnectModule
|
||||
, LassoToolModule
|
||||
, ModelingModule
|
||||
, MoveCanvasModule
|
||||
, MoveModule
|
||||
, PaletteModule
|
||||
//, ResizeModule
|
||||
, RulesModule
|
||||
, SelectionModule
|
||||
, ZoomScrollModule
|
||||
, StyleModule
|
||||
, ManhattanConnectionModule
|
||||
, PaletteModule
|
||||
, GlobalConnectRulesModule
|
||||
, ShapeRendererModule
|
||||
, OutlineModule
|
||||
]
|
||||
}
|
||||
)
|
||||
}
|
||||
|
|
|
|||
26
src/main.ts
26
src/main.ts
|
|
@ -1,13 +1,21 @@
|
|||
import { mount } from 'svelte'
|
||||
import App from './App.svelte';
|
||||
import {createInstrumentForm, createMechanismForm} from './addObjectForm'
|
||||
import Editor from './editor'
|
||||
import 'diagram-js/assets/diagram-js.css'
|
||||
|
||||
const target = document.getElementById('app');
|
||||
const instrumentContainer = document.getElementById('instrument-form')
|
||||
const mechanismContainer = document.getElementById('mechanism-form')
|
||||
|
||||
if (!target) {
|
||||
throw new Error("Target element with ID 'app' not found in DOM.");
|
||||
createInstrumentForm(instrumentContainer)
|
||||
createMechanismForm(mechanismContainer)
|
||||
const diagramElement = document.getElementById('diagram')
|
||||
if (!diagramElement) {
|
||||
throw new Error('Element with ID "diagram" not found in DOM.')
|
||||
}
|
||||
diagramElement.style.width='297mm'
|
||||
diagramElement.style.height='210mm'
|
||||
diagramElement.style.border='solid'
|
||||
diagramElement.style.borderColor='canvastext'
|
||||
diagramElement.style.borderWidth='1px'
|
||||
const diagram = Editor(diagramElement)
|
||||
|
||||
const app = mount(App, {
|
||||
target: document.getElementById('app')!,
|
||||
})
|
||||
export default app;
|
||||
export default diagram
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import RuleProvider from 'diagram-js/lib/features/rules/RuleProvider';
|
||||
export default class CustomGlobalConnectRules extends RuleProvider {
|
||||
|
||||
class CustomGlobalConnectRules extends RuleProvider {
|
||||
static $inject = ['eventBus'];
|
||||
|
||||
constructor(eventBus: any) {
|
||||
|
|
@ -7,7 +8,6 @@ export default class CustomGlobalConnectRules extends RuleProvider {
|
|||
}
|
||||
|
||||
init(): void {
|
||||
// Правило для начала соединения
|
||||
this.addRule('connection.start', (context) => {
|
||||
return true;
|
||||
const { source } = context;
|
||||
|
|
@ -21,23 +21,15 @@ export default class CustomGlobalConnectRules extends RuleProvider {
|
|||
|
||||
// Правило для создания соединения
|
||||
this.addRule('connection.create', (context) => {
|
||||
//return true;
|
||||
const { source, target } = context;
|
||||
// console.log(typeof source);
|
||||
// console.log(source.constructor.name)
|
||||
// instanceof Shape);
|
||||
|
||||
//if (source?.type === Shape)
|
||||
|
||||
//if (
|
||||
// source?.businessObject?.type === 'custom:connectable' &&
|
||||
// target?.businessObject?.type === 'custom:connectable'
|
||||
//) {
|
||||
// const { source, target } = context;
|
||||
return { type: 'Connection' };
|
||||
// { type: 'Connection' }; // Тип соединения
|
||||
// }
|
||||
|
||||
return false; // Запретить соединение
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
__init__: ['customGlobalConnectRules'],
|
||||
customGlobalConnectRules: ['type', CustomGlobalConnectRules]
|
||||
};
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
import { connectPoints } from 'diagram-js/lib/layout/ManhattanLayout';
|
||||
import Modeling from 'diagram-js/lib/features/modeling/Modeling';
|
||||
import EventBus from 'diagram-js/lib/core/EventBus';
|
||||
import { Connection } from 'diagram-js/lib/model/Types';
|
||||
import type { Connection } from 'diagram-js/lib/model/Types';
|
||||
|
||||
export function updateWaypointsByManhattan (connection: Connection, modeling: Modeling ): void {
|
||||
if (connection.source && connection.target) {
|
||||
|
|
@ -32,8 +32,8 @@ function ManhattanLayoutPlugin(eventBus: EventBus, modeling: Modeling) {
|
|||
});
|
||||
|
||||
|
||||
eventBus.on("shape.move.end", (event) => {
|
||||
var shape = (event as any).shape;
|
||||
eventBus.on('shape.move.end', (event) => {
|
||||
const shape = (event as any).shape;
|
||||
if (shape.incoming) {
|
||||
shape.incoming.forEach((element: Connection) => {
|
||||
updateWaypointsByManhattan(element, modeling);
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
import { Element } from 'diagram-js/lib/model/Types';
|
||||
import { Outline } from 'diagram-js/lib/features/outline/OutlineProvider';
|
||||
import OutlineProvider from 'diagram-js/lib/features/outline/OutlineProvider';
|
||||
|
||||
import {
|
||||
attr as svgAttr,
|
||||
create as svgCreate} from 'tiny-svg';
|
||||
|
||||
import Styles from 'diagram-js/lib/draw/Styles';
|
||||
|
||||
function CustomOutlineProvider(outline:OutlineProvider, styles:Styles) {
|
||||
function CustomOutlineProvider(this: any, outline:Outline, styles:Styles) {
|
||||
this._styles = styles;
|
||||
outline.registerProvider(this);
|
||||
}
|
||||
|
|
@ -50,10 +50,11 @@ CustomOutlineProvider.prototype.updateOutline = function(element: Element, outli
|
|||
return false;
|
||||
}
|
||||
|
||||
const CustomOutlineModule = {
|
||||
__init__: ['outlineProvider'],
|
||||
__depends__: [ 'Outline' ],
|
||||
outlineProvider: ['type', CustomOutlineProvider]
|
||||
};
|
||||
import Ouline from 'diagram-js/lib/features/outline'; // idk why it's called such way
|
||||
|
||||
export default CustomOutlineModule;
|
||||
|
||||
export default {
|
||||
__init__: ['outlineProvider'],
|
||||
__depends__: [ Ouline ],
|
||||
outlineProvider: ['type', CustomOutlineProvider]
|
||||
}
|
||||
21
src/modules/PaletteModule.ts
Normal file
21
src/modules/PaletteModule.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import PaletteModule from 'diagram-js/lib/features/palette'
|
||||
import CreateModule from 'diagram-js/lib/features/create'
|
||||
import LassoToolModule from 'diagram-js/lib/features/lasso-tool'
|
||||
import HandToolModule from 'diagram-js/lib/features/hand-tool'
|
||||
import GlobalConnectModule from 'diagram-js/lib/features/global-connect'
|
||||
import translate from 'diagram-js/lib/i18n/translate'
|
||||
|
||||
import PaletteProvider from './PaletteProvider'
|
||||
|
||||
export default {
|
||||
__depends__: [
|
||||
PaletteModule,
|
||||
CreateModule,
|
||||
LassoToolModule,
|
||||
HandToolModule,
|
||||
GlobalConnectModule,
|
||||
translate
|
||||
],
|
||||
__init__: [ 'paletteProvider' ],
|
||||
paletteProvider: [ 'type', PaletteProvider ]
|
||||
};
|
||||
120
src/modules/PaletteProvider.ts
Normal file
120
src/modules/PaletteProvider.ts
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
import ElementFactory from "diagram-js/lib/core/ElementFactory";
|
||||
import Palette from "diagram-js/lib/features/palette/Palette"
|
||||
import LassoTool from "diagram-js/lib/features/lasso-tool/LassoTool";
|
||||
import Create from "diagram-js/lib/features/create/Create";
|
||||
import GlobalConnect from "diagram-js/lib/features/global-connect/GlobalConnect";
|
||||
import Translate from "diagram-js/lib/i18n/translate/Translate";
|
||||
import HandTool from "diagram-js/lib/features/hand-tool/HandTool";
|
||||
import { assign } from "min-dash";
|
||||
|
||||
export default function PaletteProvider(
|
||||
this: any,
|
||||
palette: Palette,
|
||||
create: Create,
|
||||
elementFactory: ElementFactory,
|
||||
lassoTool: LassoTool,
|
||||
handTool:HandTool,
|
||||
globalConnect:GlobalConnect,
|
||||
translate:typeof Translate) {
|
||||
this._palette = palette;
|
||||
this._create = create;
|
||||
this._elementFactory = elementFactory;
|
||||
this._lassoTool = lassoTool;
|
||||
this._handTool = handTool;
|
||||
this._globalConnect = globalConnect;
|
||||
this._translate = translate;
|
||||
palette.registerProvider(this);
|
||||
}
|
||||
|
||||
PaletteProvider.$inject = [
|
||||
'palette',
|
||||
'create',
|
||||
'elementFactory',
|
||||
'lassoTool',
|
||||
'handTool',
|
||||
'globalConnect',
|
||||
'translate'
|
||||
]
|
||||
|
||||
PaletteProvider.prototype.getPaletteEntries = function() {
|
||||
|
||||
var actions = {},
|
||||
create = this._create,
|
||||
elementFactory = this._elementFactory,
|
||||
lassoTool = this._lassoTool,
|
||||
handTool = this._handTool,
|
||||
globalConnect = this._globalConnect,
|
||||
translate = this._translate;
|
||||
|
||||
assign(actions, {
|
||||
'hand-tool': {
|
||||
group: 'tools',
|
||||
className: 'icon-hand-tool',
|
||||
title: translate('Activate hand tool'),
|
||||
action: {
|
||||
click: function(event: Event) {
|
||||
handTool.activateHand(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'lasso-tool': {
|
||||
group: 'tools',
|
||||
className: 'icon-lasso-tool',
|
||||
title: translate('Activate lasso tool'),
|
||||
action: {
|
||||
click: function(event: Event) {
|
||||
lassoTool.activateSelection(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'global-connect-tool': {
|
||||
group: 'tools',
|
||||
className: 'icon-connect',
|
||||
title: translate('Activate global connect tool'),
|
||||
action: {
|
||||
click: function(event: Event) {
|
||||
globalConnect.start(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
'tool-separator': {
|
||||
group: 'tools',
|
||||
separator: true
|
||||
},
|
||||
'create-shape': {
|
||||
group: 'create',
|
||||
className: 'icon-create-shape',
|
||||
title: 'Create Shape',
|
||||
action: {
|
||||
click: function() {
|
||||
var shape = elementFactory.createShape({
|
||||
width: 100,
|
||||
height: 80,
|
||||
canStartConnection:true
|
||||
});
|
||||
console.log(shape.canStartConnection);
|
||||
create.start(event, shape);
|
||||
}
|
||||
}
|
||||
},
|
||||
'create-device': {
|
||||
group: 'create',
|
||||
className: 'icon-create-shape',
|
||||
title: 'Create Device',
|
||||
action: {
|
||||
click: function() {
|
||||
var shape = elementFactory.createShape({
|
||||
width: 100,
|
||||
height: 80,
|
||||
canStartConnection:true,
|
||||
type: 'custom:circle'
|
||||
});
|
||||
console.log(shape.canStartConnection);
|
||||
create.start(event, shape);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return actions;
|
||||
};
|
||||
|
|
@ -1,34 +1,30 @@
|
|||
import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
|
||||
import { assign } from 'min-dash';
|
||||
import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'
|
||||
import { assign } from 'min-dash'
|
||||
import {
|
||||
append as svgAppend,
|
||||
attr as svgAttr,
|
||||
create as svgCreate
|
||||
} from 'tiny-svg';
|
||||
import data from './AddObjectForm.svelte';
|
||||
|
||||
|
||||
} from 'tiny-svg'
|
||||
|
||||
const HIGH_PRIORITY = 1500;
|
||||
|
||||
class CustomShapeRenderer extends BaseRenderer {
|
||||
styles: any
|
||||
SHAPE_STYLE: any
|
||||
|
||||
static $inject = ['eventBus', 'styles'];
|
||||
static $inject = ['eventBus', 'styles']
|
||||
|
||||
constructor(eventBus: any, styles: any) {
|
||||
super(eventBus, HIGH_PRIORITY);
|
||||
this.styles = styles;
|
||||
this.SHAPE_STYLE = styles.style({ fill: 'Canvas', stroke: 'CanvasText', strokeWidth: 2 });
|
||||
super(eventBus, HIGH_PRIORITY)
|
||||
this.styles = styles
|
||||
this.SHAPE_STYLE = styles.style({ fill: 'Canvas', stroke: 'CanvasText', strokeWidth: 2 })
|
||||
}
|
||||
|
||||
canRender(element: any): boolean {
|
||||
return element.type === 'custom:circle';
|
||||
}
|
||||
|
||||
|
||||
drawShape(visuals, element, attrs): SVGElement {
|
||||
console.log(data.value);
|
||||
|
||||
drawShape(visuals: Element, element: { width: number; height: number; }) : SVGElement {
|
||||
var circle = svgCreate('circle');
|
||||
|
||||
svgAttr(circle, {
|
||||
|
|
@ -52,19 +48,14 @@ class CustomShapeRenderer extends BaseRenderer {
|
|||
var g = svgCreate('g');
|
||||
svgAppend(g, circle);
|
||||
svgAppend(g, line);
|
||||
|
||||
svgAttr(g, assign({}, this.SHAPE_STYLE, attrs || {}));
|
||||
svgAttr(g, assign({}, this.SHAPE_STYLE));
|
||||
svgAppend(visuals, g);
|
||||
|
||||
return g;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const CustomShapeRendererModule = {
|
||||
export default {
|
||||
__init__: ['customShapeRenderer'],
|
||||
customShapeRenderer: ['type', CustomShapeRenderer]
|
||||
};
|
||||
|
||||
|
||||
export default CustomShapeRendererModule;
|
||||
};
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
export default {
|
||||
__init__: ['customRenderer'],
|
||||
__init__: [ 'customRenderer' ],
|
||||
customRenderer: [
|
||||
'type',
|
||||
function (defaultRenderer: any) {
|
||||
25
tsconfig.json
Normal file
25
tsconfig.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": false,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "auto",
|
||||
"outDir": "./dist",
|
||||
"noEmit": false,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
1
vite-end.d.ts
vendored
Normal file
1
vite-end.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
6
vite.config.ts
Normal file
6
vite.config.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { defineConfig } from 'vite'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [],
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue