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 Diagram from 'diagram-js'
|
||||||
import ConnectModule from 'diagram-js/lib/features/connect';
|
import ConnectModule from 'diagram-js/lib/features/connect'
|
||||||
import ContextPadModule from 'diagram-js/lib/features/context-pad';
|
import ContextPadModule from 'diagram-js/lib/features/context-pad'
|
||||||
import CreateModule from 'diagram-js/lib/features/create';
|
import CreateModule from 'diagram-js/lib/features/create'
|
||||||
import LassoToolModule from 'diagram-js/lib/features/lasso-tool';
|
import LassoToolModule from 'diagram-js/lib/features/lasso-tool'
|
||||||
import ModelingModule from 'diagram-js/lib/features/modeling';
|
import ModelingModule from 'diagram-js/lib/features/modeling'
|
||||||
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
|
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
|
||||||
import MoveModule from 'diagram-js/lib/features/move';
|
import MoveModule from 'diagram-js/lib/features/move'
|
||||||
import OutlineModule from 'diagram-js/lib/features/outline';
|
import RulesModule from 'diagram-js/lib/features/rules'
|
||||||
import PaletteModule from 'diagram-js/lib/features/palette';
|
import SelectionModule from 'diagram-js/lib/features/selection'
|
||||||
import ResizeModule from 'diagram-js/lib/features/resize';
|
import GlobalConnectModule from 'diagram-js/lib/features/global-connect'
|
||||||
import RulesModule from 'diagram-js/lib/features/rules';
|
import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll'
|
||||||
import SelectionModule from 'diagram-js/lib/features/selection';
|
import BendpointMoveModule from 'diagram-js/lib/features/bendpoints'
|
||||||
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';
|
|
||||||
|
|
||||||
interface EditorOptions {
|
import StyleModule from './modules/StyleModule'
|
||||||
container: HTMLElement;
|
import ManhattanConnectionModule from './modules/ManhattanConnectionModule'
|
||||||
additionalModules?: Array<any>;
|
import PaletteModule from './modules/PaletteModule'
|
||||||
}
|
import GlobalConnectRulesModule from './modules/GlobalConnectRulesModule'
|
||||||
|
import ShapeRendererModule from './modules/ShapeRendererModule'
|
||||||
export default function Editor(options: EditorOptions): Diagram {
|
import OutlineModule from './modules/OutlineModule'
|
||||||
const { container } = options;
|
|
||||||
|
export default function Editor(container: HTMLElement): Diagram {
|
||||||
const modules = [
|
return new Diagram(
|
||||||
BendpointMoveModule
|
{
|
||||||
, ConnectModule
|
canvas: {container},
|
||||||
, ContextPadModule
|
modules: [
|
||||||
, CreateModule
|
BendpointMoveModule
|
||||||
, GlobalConnectModule
|
, ConnectModule
|
||||||
, LassoToolModule
|
, ContextPadModule
|
||||||
, ModelingModule
|
, CreateModule
|
||||||
, MoveCanvasModule
|
, GlobalConnectModule
|
||||||
, MoveModule
|
, LassoToolModule
|
||||||
//, OutlineModule
|
, ModelingModule
|
||||||
, PaletteModule
|
, MoveCanvasModule
|
||||||
//, ResizeModule
|
, MoveModule
|
||||||
, RulesModule
|
, PaletteModule
|
||||||
, SelectionModule
|
//, ResizeModule
|
||||||
, ZoomScrollModule
|
, RulesModule
|
||||||
, StyleModule
|
, SelectionModule
|
||||||
, ManhattanConnectionModule
|
, ZoomScrollModule
|
||||||
, CustomPaletteModule
|
, StyleModule
|
||||||
, CustomGlobalConnectRulesModule
|
, ManhattanConnectionModule
|
||||||
, CustomShapeRendererModule
|
, PaletteModule
|
||||||
, CustomOutlineModule
|
, GlobalConnectRulesModule
|
||||||
];
|
, ShapeRendererModule
|
||||||
|
, OutlineModule
|
||||||
|
]
|
||||||
console.log(container);
|
}
|
||||||
return new Diagram({
|
)
|
||||||
canvas: {
|
|
||||||
container
|
|
||||||
},
|
|
||||||
modules: modules
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
26
src/main.ts
26
src/main.ts
|
|
@ -1,13 +1,21 @@
|
||||||
import { mount } from 'svelte'
|
import {createInstrumentForm, createMechanismForm} from './addObjectForm'
|
||||||
import App from './App.svelte';
|
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) {
|
createInstrumentForm(instrumentContainer)
|
||||||
throw new Error("Target element with ID 'app' not found in DOM.");
|
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, {
|
export default diagram
|
||||||
target: document.getElementById('app')!,
|
|
||||||
})
|
|
||||||
export default app;
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import RuleProvider from 'diagram-js/lib/features/rules/RuleProvider';
|
import RuleProvider from 'diagram-js/lib/features/rules/RuleProvider';
|
||||||
export default class CustomGlobalConnectRules extends RuleProvider {
|
|
||||||
|
class CustomGlobalConnectRules extends RuleProvider {
|
||||||
static $inject = ['eventBus'];
|
static $inject = ['eventBus'];
|
||||||
|
|
||||||
constructor(eventBus: any) {
|
constructor(eventBus: any) {
|
||||||
|
|
@ -7,7 +8,6 @@ export default class CustomGlobalConnectRules extends RuleProvider {
|
||||||
}
|
}
|
||||||
|
|
||||||
init(): void {
|
init(): void {
|
||||||
// Правило для начала соединения
|
|
||||||
this.addRule('connection.start', (context) => {
|
this.addRule('connection.start', (context) => {
|
||||||
return true;
|
return true;
|
||||||
const { source } = context;
|
const { source } = context;
|
||||||
|
|
@ -21,23 +21,15 @@ export default class CustomGlobalConnectRules extends RuleProvider {
|
||||||
|
|
||||||
// Правило для создания соединения
|
// Правило для создания соединения
|
||||||
this.addRule('connection.create', (context) => {
|
this.addRule('connection.create', (context) => {
|
||||||
//return true;
|
// const { source, target } = context;
|
||||||
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'
|
|
||||||
//) {
|
|
||||||
return { type: 'Connection' };
|
return { type: 'Connection' };
|
||||||
// { type: 'Connection' }; // Тип соединения
|
|
||||||
// }
|
|
||||||
|
|
||||||
return false; // Запретить соединение
|
return false; // Запретить соединение
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
__init__: ['customGlobalConnectRules'],
|
||||||
|
customGlobalConnectRules: ['type', CustomGlobalConnectRules]
|
||||||
|
};
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import { connectPoints } from 'diagram-js/lib/layout/ManhattanLayout';
|
import { connectPoints } from 'diagram-js/lib/layout/ManhattanLayout';
|
||||||
import Modeling from 'diagram-js/lib/features/modeling/Modeling';
|
import Modeling from 'diagram-js/lib/features/modeling/Modeling';
|
||||||
import EventBus from 'diagram-js/lib/core/EventBus';
|
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 {
|
export function updateWaypointsByManhattan (connection: Connection, modeling: Modeling ): void {
|
||||||
if (connection.source && connection.target) {
|
if (connection.source && connection.target) {
|
||||||
|
|
@ -32,8 +32,8 @@ function ManhattanLayoutPlugin(eventBus: EventBus, modeling: Modeling) {
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
eventBus.on("shape.move.end", (event) => {
|
eventBus.on('shape.move.end', (event) => {
|
||||||
var shape = (event as any).shape;
|
const shape = (event as any).shape;
|
||||||
if (shape.incoming) {
|
if (shape.incoming) {
|
||||||
shape.incoming.forEach((element: Connection) => {
|
shape.incoming.forEach((element: Connection) => {
|
||||||
updateWaypointsByManhattan(element, modeling);
|
updateWaypointsByManhattan(element, modeling);
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
import { Element } from 'diagram-js/lib/model/Types';
|
import { Element } from 'diagram-js/lib/model/Types';
|
||||||
import { Outline } from 'diagram-js/lib/features/outline/OutlineProvider';
|
import { Outline } from 'diagram-js/lib/features/outline/OutlineProvider';
|
||||||
import OutlineProvider from 'diagram-js/lib/features/outline/OutlineProvider';
|
|
||||||
import {
|
import {
|
||||||
attr as svgAttr,
|
attr as svgAttr,
|
||||||
create as svgCreate} from 'tiny-svg';
|
create as svgCreate} from 'tiny-svg';
|
||||||
|
|
||||||
import Styles from 'diagram-js/lib/draw/Styles';
|
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;
|
this._styles = styles;
|
||||||
outline.registerProvider(this);
|
outline.registerProvider(this);
|
||||||
}
|
}
|
||||||
|
|
@ -50,10 +50,11 @@ CustomOutlineProvider.prototype.updateOutline = function(element: Element, outli
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
const CustomOutlineModule = {
|
import Ouline from 'diagram-js/lib/features/outline'; // idk why it's called such way
|
||||||
__init__: ['outlineProvider'],
|
|
||||||
__depends__: [ 'Outline' ],
|
|
||||||
outlineProvider: ['type', CustomOutlineProvider]
|
|
||||||
};
|
|
||||||
|
|
||||||
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 BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'
|
||||||
import { assign } from 'min-dash';
|
import { assign } from 'min-dash'
|
||||||
import {
|
import {
|
||||||
append as svgAppend,
|
append as svgAppend,
|
||||||
attr as svgAttr,
|
attr as svgAttr,
|
||||||
create as svgCreate
|
create as svgCreate
|
||||||
} from 'tiny-svg';
|
} from 'tiny-svg'
|
||||||
import data from './AddObjectForm.svelte';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const HIGH_PRIORITY = 1500;
|
const HIGH_PRIORITY = 1500;
|
||||||
|
|
||||||
class CustomShapeRenderer extends BaseRenderer {
|
class CustomShapeRenderer extends BaseRenderer {
|
||||||
|
styles: any
|
||||||
|
SHAPE_STYLE: any
|
||||||
|
|
||||||
static $inject = ['eventBus', 'styles'];
|
static $inject = ['eventBus', 'styles']
|
||||||
|
|
||||||
constructor(eventBus: any, styles: any) {
|
constructor(eventBus: any, styles: any) {
|
||||||
super(eventBus, HIGH_PRIORITY);
|
super(eventBus, HIGH_PRIORITY)
|
||||||
this.styles = styles;
|
this.styles = styles
|
||||||
this.SHAPE_STYLE = styles.style({ fill: 'Canvas', stroke: 'CanvasText', strokeWidth: 2 });
|
this.SHAPE_STYLE = styles.style({ fill: 'Canvas', stroke: 'CanvasText', strokeWidth: 2 })
|
||||||
}
|
}
|
||||||
|
|
||||||
canRender(element: any): boolean {
|
canRender(element: any): boolean {
|
||||||
return element.type === 'custom:circle';
|
return element.type === 'custom:circle';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
drawShape(visuals: Element, element: { width: number; height: number; }) : SVGElement {
|
||||||
drawShape(visuals, element, attrs): SVGElement {
|
|
||||||
console.log(data.value);
|
|
||||||
|
|
||||||
var circle = svgCreate('circle');
|
var circle = svgCreate('circle');
|
||||||
|
|
||||||
svgAttr(circle, {
|
svgAttr(circle, {
|
||||||
|
|
@ -52,19 +48,14 @@ class CustomShapeRenderer extends BaseRenderer {
|
||||||
var g = svgCreate('g');
|
var g = svgCreate('g');
|
||||||
svgAppend(g, circle);
|
svgAppend(g, circle);
|
||||||
svgAppend(g, line);
|
svgAppend(g, line);
|
||||||
|
svgAttr(g, assign({}, this.SHAPE_STYLE));
|
||||||
svgAttr(g, assign({}, this.SHAPE_STYLE, attrs || {}));
|
|
||||||
svgAppend(visuals, g);
|
svgAppend(visuals, g);
|
||||||
|
|
||||||
return g;
|
return g;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
const CustomShapeRendererModule = {
|
|
||||||
__init__: ['customShapeRenderer'],
|
__init__: ['customShapeRenderer'],
|
||||||
customShapeRenderer: ['type', CustomShapeRenderer]
|
customShapeRenderer: ['type', CustomShapeRenderer]
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export default CustomShapeRendererModule;
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
export default {
|
export default {
|
||||||
__init__: ['customRenderer'],
|
__init__: [ 'customRenderer' ],
|
||||||
customRenderer: [
|
customRenderer: [
|
||||||
'type',
|
'type',
|
||||||
function (defaultRenderer: any) {
|
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