diff --git a/.fleet/run.json b/.fleet/run.json deleted file mode 100644 index d892209..0000000 --- a/.fleet/run.json +++ /dev/null @@ -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", - } - ] -} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..cf71f52 --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + + FSA Editor + + +
+
+
+
+ + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..ab56442 --- /dev/null +++ b/package-lock.json @@ -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" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..b1e68b6 --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/src/AddObjectForm.svelte b/src/AddObjectForm.svelte deleted file mode 100644 index 3a1f7e6..0000000 --- a/src/AddObjectForm.svelte +++ /dev/null @@ -1,267 +0,0 @@ - - -
- -
- - {#if типОбъекта === 'Прибор'} - -
- - -
- - -
- - -
- - -
- -Функции - {#each функции as функция, i} -
- - - - -
- {/each} - - - {:else} - -
- - -
- {/if} -
- -
-
- \ No newline at end of file diff --git a/src/App.svelte b/src/App.svelte deleted file mode 100644 index 81c8ca4..0000000 --- a/src/App.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - -
-

FSA Editor

- - -
- - diff --git a/src/CustomGlobalConnectRulesModule.ts b/src/CustomGlobalConnectRulesModule.ts deleted file mode 100644 index 424e449..0000000 --- a/src/CustomGlobalConnectRulesModule.ts +++ /dev/null @@ -1,8 +0,0 @@ -import CustomGlobalConnectRules from './CustomGlobalConnectRules'; - -const CustomGlobalConnectRulesModule = { - __init__: ['customGlobalConnectRules'], - customGlobalConnectRules: ['type', CustomGlobalConnectRules] -}; - -export default CustomGlobalConnectRulesModule; \ No newline at end of file diff --git a/src/CustomPaletteModule.ts b/src/CustomPaletteModule.ts deleted file mode 100644 index 9c9eb51..0000000 --- a/src/CustomPaletteModule.ts +++ /dev/null @@ -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 ] - }; \ No newline at end of file diff --git a/src/Diagram.svelte b/src/Diagram.svelte deleted file mode 100644 index caba9f8..0000000 --- a/src/Diagram.svelte +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - - - - - - - -
\ No newline at end of file diff --git a/src/addObjectForm.ts b/src/addObjectForm.ts new file mode 100644 index 0000000..b6a2d4d --- /dev/null +++ b/src/addObjectForm.ts @@ -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 = ''; + 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 = ''; + 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 = ''; + 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); +} \ No newline at end of file diff --git a/src/editor.ts b/src/editor.ts index 4c823b3..9410c1c 100644 --- a/src/editor.ts +++ b/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; -} - -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 + ] + } + ) } diff --git a/src/main.ts b/src/main.ts index 56f8d21..42a1702 100644 --- a/src/main.ts +++ b/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; \ No newline at end of file +export default diagram \ No newline at end of file diff --git a/src/CustomGlobalConnectRules.ts b/src/modules/GlobalConnectRulesModule.ts similarity index 56% rename from src/CustomGlobalConnectRules.ts rename to src/modules/GlobalConnectRulesModule.ts index 210f8bd..36ed18c 100644 --- a/src/CustomGlobalConnectRules.ts +++ b/src/modules/GlobalConnectRulesModule.ts @@ -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] +}; \ No newline at end of file diff --git a/src/ManhattanConnectionModule.ts b/src/modules/ManhattanConnectionModule.ts similarity index 92% rename from src/ManhattanConnectionModule.ts rename to src/modules/ManhattanConnectionModule.ts index 05d16e1..f3bd8cf 100644 --- a/src/ManhattanConnectionModule.ts +++ b/src/modules/ManhattanConnectionModule.ts @@ -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); diff --git a/src/CustomOutlineModule.ts b/src/modules/OutlineModule.ts similarity index 82% rename from src/CustomOutlineModule.ts rename to src/modules/OutlineModule.ts index f1dd588..fa17363 100644 --- a/src/CustomOutlineModule.ts +++ b/src/modules/OutlineModule.ts @@ -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] +} \ No newline at end of file diff --git a/src/modules/PaletteModule.ts b/src/modules/PaletteModule.ts new file mode 100644 index 0000000..5f2f2d1 --- /dev/null +++ b/src/modules/PaletteModule.ts @@ -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 ] +}; \ No newline at end of file diff --git a/src/modules/PaletteProvider.ts b/src/modules/PaletteProvider.ts new file mode 100644 index 0000000..1c50667 --- /dev/null +++ b/src/modules/PaletteProvider.ts @@ -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; +}; \ No newline at end of file diff --git a/src/CustomShapeRendererModule.ts b/src/modules/ShapeRendererModule.ts similarity index 65% rename from src/CustomShapeRendererModule.ts rename to src/modules/ShapeRendererModule.ts index 0718f93..0bc3ccd 100644 --- a/src/CustomShapeRendererModule.ts +++ b/src/modules/ShapeRendererModule.ts @@ -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; \ No newline at end of file +}; \ No newline at end of file diff --git a/src/StyleModule.ts b/src/modules/StyleModule.ts similarity index 91% rename from src/StyleModule.ts rename to src/modules/StyleModule.ts index 8bff962..6e78627 100644 --- a/src/StyleModule.ts +++ b/src/modules/StyleModule.ts @@ -1,5 +1,5 @@ export default { - __init__: ['customRenderer'], + __init__: [ 'customRenderer' ], customRenderer: [ 'type', function (defaultRenderer: any) { diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..297fb9e --- /dev/null +++ b/tsconfig.json @@ -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"] +} \ No newline at end of file diff --git a/vite-end.d.ts b/vite-end.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/vite-end.d.ts @@ -0,0 +1 @@ +/// diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..07a8f8f --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' + +// https://vite.dev/config/ +export default defineConfig({ + plugins: [], +}) \ No newline at end of file