diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 68b682e..76edd2e 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -9,13 +9,14 @@ module.exports = { // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted parserOptions: { parser: require.resolve('@typescript-eslint/parser'), - extraFileExtensions: [ '.vue' ] + extraFileExtensions: ['.vue'], }, env: { browser: true, es2021: true, - node: true + node: true, + 'vue/setup-compiler-macros': true, }, // Rules order is important, please avoid shuffling them @@ -36,7 +37,7 @@ module.exports = { // https://github.com/prettier/eslint-config-prettier#installation // usage with Prettier, provided by 'eslint-config-prettier'. - 'prettier' + 'prettier', ], plugins: [ @@ -45,12 +46,11 @@ module.exports = { // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files // required to lint *.vue files - 'vue' - + 'vue', + // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674 // Prettier has not been included as plugin to avoid performance impact // add it as an extension for your IDE - ], globals: { @@ -63,12 +63,11 @@ module.exports = { __QUASAR_SSR_PWA__: 'readonly', process: 'readonly', Capacitor: 'readonly', - chrome: 'readonly' + chrome: 'readonly', }, // add your custom rules here rules: { - 'prefer-promise-reject-errors': 'off', quotes: ['warn', 'single', { avoidEscape: true }], @@ -84,6 +83,8 @@ module.exports = { 'no-unused-vars': 'off', // allow debugger during development only - 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' - } -} + 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', + + '@typescript-eslint/no-explicit-any': ['off'], + }, +}; diff --git a/package-lock.json b/package-lock.json index 9ea52f5..909437d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,15 +9,16 @@ "version": "0.0.1", "dependencies": { "@quasar/extras": "^1.16.4", - "jl-graphic": "git+https://git.code.tencent.com/jl-framework/graphic-pixi.git#v0.1.8", + "axios": "^1.2.1", + "jl-graphic": "git+http://120.46.212.6:3000/joylink/graphic-pixi.git#v0.1.15", + "js-base64": "^3.7.5", + "pinia": "^2.0.11", "quasar": "^2.16.0", "vue": "^3.4.18", "vue-router": "^4.0.12" }, "devDependencies": { "@quasar/app-vite": "^1.9.0", - "@rollup/plugin-alias": "^5.1.0", - "@rollup/plugin-typescript": "^11.1.5", "@types/node": "^12.20.21", "@typescript-eslint/eslint-plugin": "^7.16.0", "@typescript-eslint/parser": "^7.16.0", @@ -26,7 +27,6 @@ "eslint-config-prettier": "^8.1.0", "eslint-plugin-vue": "^9.0.0", "prettier": "^2.5.1", - "rollup": "^4.9.1", "typescript": "~5.5.4", "vite-plugin-checker": "^0.7.2", "vue-tsc": "2.0.29" @@ -902,86 +902,6 @@ "vue": "^3.0.0" } }, - "node_modules/@rollup/plugin-alias": { - "version": "5.1.0", - "resolved": "https://registry.npmmirror.com/@rollup/plugin-alias/-/plugin-alias-5.1.0.tgz", - "integrity": "sha512-lpA3RZ9PdIG7qqhEfv79tBffNaoDuukFDrmhLqg9ifv99u/ehn+lOg30x2zmhf8AQqQUZaMk/B9fZraQ6/acDQ==", - "dev": true, - "dependencies": { - "slash": "^4.0.0" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - } - } - }, - "node_modules/@rollup/plugin-alias/node_modules/slash": { - "version": "4.0.0", - "resolved": "https://registry.npmmirror.com/slash/-/slash-4.0.0.tgz", - "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==", - "dev": true, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@rollup/plugin-typescript": { - "version": "11.1.6", - "resolved": "https://registry.npmmirror.com/@rollup/plugin-typescript/-/plugin-typescript-11.1.6.tgz", - "integrity": "sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==", - "dev": true, - "dependencies": { - "@rollup/pluginutils": "^5.1.0", - "resolve": "^1.22.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^2.14.0||^3.0.0||^4.0.0", - "tslib": "*", - "typescript": ">=3.7.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - }, - "tslib": { - "optional": true - } - } - }, - "node_modules/@rollup/plugin-typescript/node_modules/@rollup/pluginutils": { - "version": "5.1.0", - "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz", - "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==", - "dev": true, - "dependencies": { - "@types/estree": "^1.0.0", - "estree-walker": "^2.0.2", - "picomatch": "^2.3.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - } - } - }, "node_modules/@rollup/pluginutils": { "version": "4.2.1", "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", @@ -1006,7 +926,8 @@ "optional": true, "os": [ "android" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-android-arm64": { "version": "4.21.2", @@ -1019,7 +940,8 @@ "optional": true, "os": [ "android" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-darwin-arm64": { "version": "4.21.2", @@ -1032,7 +954,8 @@ "optional": true, "os": [ "darwin" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-darwin-x64": { "version": "4.21.2", @@ -1045,7 +968,8 @@ "optional": true, "os": [ "darwin" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { "version": "4.21.2", @@ -1058,7 +982,8 @@ "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { "version": "4.21.2", @@ -1071,7 +996,8 @@ "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-linux-arm64-gnu": { "version": "4.21.2", @@ -1084,7 +1010,8 @@ "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-linux-arm64-musl": { "version": "4.21.2", @@ -1097,7 +1024,8 @@ "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { "version": "4.21.2", @@ -1110,7 +1038,8 @@ "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { "version": "4.21.2", @@ -1123,7 +1052,8 @@ "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-linux-s390x-gnu": { "version": "4.21.2", @@ -1136,7 +1066,8 @@ "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-linux-x64-gnu": { "version": "4.21.2", @@ -1149,7 +1080,8 @@ "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-linux-x64-musl": { "version": "4.21.2", @@ -1162,7 +1094,8 @@ "optional": true, "os": [ "linux" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-win32-arm64-msvc": { "version": "4.21.2", @@ -1175,7 +1108,8 @@ "optional": true, "os": [ "win32" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-win32-ia32-msvc": { "version": "4.21.2", @@ -1188,7 +1122,8 @@ "optional": true, "os": [ "win32" - ] + ], + "peer": true }, "node_modules/@rollup/rollup-win32-x64-msvc": { "version": "4.21.2", @@ -1201,7 +1136,8 @@ "optional": true, "os": [ "win32" - ] + ], + "peer": true }, "node_modules/@stomp/stompjs": { "version": "7.0.0", @@ -1266,7 +1202,9 @@ "version": "1.0.5", "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz", "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/@types/express": { "version": "4.17.21", @@ -1964,6 +1902,11 @@ "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==", "dev": true }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "node_modules/autoprefixer": { "version": "10.4.20", "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.20.tgz", @@ -2001,6 +1944,16 @@ "postcss": "^8.1.0" } }, + "node_modules/axios": { + "version": "1.7.7", + "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.7.tgz", + "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz", @@ -2438,6 +2391,17 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/commander": { "version": "10.0.1", "resolved": "https://registry.npmmirror.com/commander/-/commander-10.0.1.tgz", @@ -2721,6 +2685,14 @@ "node": ">=8" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/depd": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz", @@ -3777,6 +3749,38 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.9", + "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz", + "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz", @@ -4406,8 +4410,8 @@ }, "node_modules/jl-graphic": { "name": "graphic-pixi", - "version": "0.1.8", - "resolved": "git+https://git.code.tencent.com/jl-framework/graphic-pixi.git#d75e16db8261330c944ebf2aee6be60e372d68ff", + "version": "0.1.14", + "resolved": "git+http://120.46.212.6:3000/joylink/graphic-pixi.git#8b0ad14f7324a5eaba58239645a1fa0452e87ab4", "dependencies": { "@pixi/graphics-extras": "^7.3.2", "@pixi/utils": "^7.3.2", @@ -4422,6 +4426,11 @@ "yarn": ">= 1.21.1" } }, + "node_modules/js-base64": { + "version": "3.7.7", + "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.7.tgz", + "integrity": "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==" + }, "node_modules/js-sdsl": { "version": "4.3.0", "resolved": "https://registry.npmmirror.com/js-sdsl/-/js-sdsl-4.3.0.tgz", @@ -4727,7 +4736,6 @@ "version": "2.1.35", "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", - "dev": true, "dependencies": { "mime-db": "1.52.0" }, @@ -4739,7 +4747,6 @@ "version": "1.52.0", "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz", "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", - "dev": true, "engines": { "node": ">= 0.6" } @@ -5284,6 +5291,56 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/pinia": { + "version": "2.2.2", + "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.2.2.tgz", + "integrity": "sha512-ja2XqFWZC36mupU4z1ZzxeTApV7DOw44cV4dhQ9sGwun+N89v/XP7+j7q6TanS1u1tdbK4r+1BUx7heMaIdagA==", + "dependencies": { + "@vue/devtools-api": "^6.6.3", + "vue-demi": "^0.14.10" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "@vue/composition-api": "^1.4.0", + "typescript": ">=4.4.4", + "vue": "^2.6.14 || ^3.3.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + }, + "typescript": { + "optional": true + } + } + }, + "node_modules/pinia/node_modules/vue-demi": { + "version": "0.14.10", + "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz", + "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/pixi-viewport": { "version": "5.0.3", "resolved": "https://registry.npmmirror.com/pixi-viewport/-/pixi-viewport-5.0.3.tgz", @@ -5426,6 +5483,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.1.tgz", @@ -5689,6 +5751,8 @@ "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.21.2.tgz", "integrity": "sha512-e3TapAgYf9xjdLvKQCkQTnbTKd4a6jwlpQSJJFokHGaX2IVjoEqkIIhiQfqsi0cdwlOD+tQGuOd5AJkc5RngBw==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "@types/estree": "1.0.5" }, diff --git a/package.json b/package.json index 287b051..ce24e29 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,10 @@ "quasar": "^2.16.0", "vue": "^3.4.18", "vue-router": "^4.0.12", - "jl-graphic": "git+https://git.code.tencent.com/jl-framework/graphic-pixi.git#v0.1.8" + "axios": "^1.2.1", + "pinia": "^2.0.11", + "js-base64": "^3.7.5", + "jl-graphic": "git+http://120.46.212.6:3000/joylink/graphic-pixi.git#v0.1.15" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^7.16.0", diff --git a/src/components/draw-app/DrawProperties.vue b/src/components/draw-app/DrawProperties.vue new file mode 100644 index 0000000..7230a41 --- /dev/null +++ b/src/components/draw-app/DrawProperties.vue @@ -0,0 +1,38 @@ + + + diff --git a/src/drawApp/drawApp.ts b/src/drawApp/drawApp.ts new file mode 100644 index 0000000..a1c7d94 --- /dev/null +++ b/src/drawApp/drawApp.ts @@ -0,0 +1,146 @@ +// import { fromUint8Array } from 'js-base64'; +import { + CombinationKey, + ContextMenu, + IDrawApp, + IGraphicStorage, + JlGraphic, + KeyListener, + MenuItemOptions, + newDrawApp, +} from 'jl-graphic'; +import { useDrawStore } from 'src/stores/draw-store'; + +// import { Notify } from 'quasar'; + +let drawApp: IDrawApp | null = null; + +const UndoOptions: MenuItemOptions = { + name: '撤销', +}; +const RedoOptions: MenuItemOptions = { + name: '重做', +}; +const SelectAllOptions: MenuItemOptions = { + name: '全选', +}; + +export const DefaultCanvasMenu = new ContextMenu({ + name: '绘制-画布菜单', + groups: [ + { + items: [UndoOptions, RedoOptions], + }, + { + items: [SelectAllOptions], + }, + ], +}); + +export function getDrawApp(): IDrawApp | null { + return drawApp; +} + +export function destroyDrawApp(): void { + if (drawApp) { + drawApp.destroy(); + drawApp = null; + } +} + +export const drawLayerList = [ + // 图层列表 默认显示的图层defaultShow: true +]; + +// function initShowLayer(app: IDrawApp) { +// const showTypeList: string[] = []; +// drawLayerList.forEach((item) => { +// if (item.defaultShow) { +// showTypeList.push(item.value); +// } +// }); +// const alllGraphic = app.queryStore.getAllGraphics(); +// alllGraphic.forEach((g) => { +// if (showTypeList.includes(g.type)) { +// g.visible = true; +// } else { +// g.visible = false; +// } +// }); +// } + +export function initDrawApp(): IDrawApp { + const isSupportDeletion = (g: JlGraphic) => { + console.log(g); + return true; + }; + drawApp = newDrawApp({ + dataLoader: loadDrawDatas, + isSupportDeletion: isSupportDeletion, + }); + const app = drawApp; + // app.canvas.on('_rightclick', (e) => { + // if (app.drawing) return; + // UndoOptions.disabled = !app.opRecord.hasUndo; + // RedoOptions.disabled = !app.opRecord.hasRedo; + + // UndoOptions.handler = () => { + // app.opRecord.undo(); + // }; + // RedoOptions.handler = () => { + // app.opRecord.redo(); + // }; + // SelectAllOptions.handler = () => { + // app.selectAllGraphics(); + // }; + // DefaultCanvasMenu.open(e.global); + // }); + // app.on('destroy', async () => {}); + app.addKeyboardListener( + new KeyListener({ + value: 'KeyS', + global: true, + combinations: [CombinationKey.Ctrl], + onPress: () => { + saveDrawToServer(saveDrawDatas(app)); + }, + }) + ); + // app.on('postdataloaded', () => { + // initShowLayer(app); + // }); + return drawApp; +} + +export async function loadDrawDatas(): Promise { + const drawStore = useDrawStore(); + const id = drawStore.draftId; + if (!id) { + throw new Error('获取数据异常：为获取到草稿地图ID'); + } + return Promise.resolve({ + datas: [], + }); +} + +export function saveDrawDatas(app: IDrawApp) { + const storage = ''; + console.log(storage, '保存数据', app); + return storage; +} + +export function loadCommonDrawDatas(storage: any): any[] { + const datas: any[] = []; + console.log(storage, 'storage'); + + return datas; +} + +export function saveDrawToServer(base64: string) { + const drawStore = useDrawStore(); + const id = drawStore.draftId; + if (!id) { + return; + } + console.log('save' + base64); +} diff --git a/src/layouts/DrawLayout.vue b/src/layouts/DrawLayout.vue new file mode 100644 index 0000000..27c6fdc --- /dev/null +++ b/src/layouts/DrawLayout.vue @@ -0,0 +1,255 @@ + + + diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index 049f1c3..a34af05 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -11,25 +11,15 @@ @click="toggleLeftDrawer" /> - - Quasar App - + Quasar App
Quasar v{{ $q.version }}
- + - - Essential Links - + Essential Links import { ref } from 'vue'; -import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue'; +import EssentialLink, { + EssentialLinkProps, +} from 'components/EssentialLink.vue'; defineOptions({ - name: 'MainLayout' + name: 'MainLayout', }); - const linksList: EssentialLinkProps[] = [ { title: 'Docs', caption: 'quasar.dev', icon: 'school', - link: 'https://quasar.dev' + link: 'https://quasar.dev', }, { title: 'Github', caption: 'github.com/quasarframework', icon: 'code', - link: 'https://github.com/quasarframework' + link: 'https://github.com/quasarframework', }, { title: 'Discord Chat Channel', caption: 'chat.quasar.dev', icon: 'chat', - link: 'https://chat.quasar.dev' + link: 'https://chat.quasar.dev', }, { title: 'Forum', caption: 'forum.quasar.dev', icon: 'record_voice_over', - link: 'https://forum.quasar.dev' + link: 'https://forum.quasar.dev', }, { title: 'Twitter', caption: '@quasarframework', icon: 'rss_feed', - link: 'https://twitter.quasar.dev' + link: 'https://twitter.quasar.dev', }, { title: 'Facebook', caption: '@QuasarFramework', icon: 'public', - link: 'https://facebook.quasar.dev' + link: 'https://facebook.quasar.dev', }, { title: 'Quasar Awesome', caption: 'Community Quasar projects', icon: 'favorite', - link: 'https://awesome.quasar.dev' - } + link: 'https://awesome.quasar.dev', + }, ]; const leftDrawerOpen = ref(false); -function toggleLeftDrawer () { +function toggleLeftDrawer() { leftDrawerOpen.value = !leftDrawerOpen.value; } diff --git a/src/router/routes.ts b/src/router/routes.ts index 2d34fc1..b2c4017 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -3,8 +3,8 @@ import { RouteRecordRaw } from 'vue-router'; const routes: RouteRecordRaw[] = [ { path: '/', - component: () => import('layouts/MainLayout.vue'), - children: [{ path: '', component: () => import('pages/IndexPage.vue') }], + component: () => import('layouts/DrawLayout.vue'), + // children: [{ path: '', component: () => import('pages/IndexPage.vue') }], }, // Always leave this as last one, diff --git a/src/stores/draw-store.ts b/src/stores/draw-store.ts new file mode 100644 index 0000000..c7fb00c --- /dev/null +++ b/src/stores/draw-store.ts @@ -0,0 +1,108 @@ +import { defineStore } from 'pinia'; +import { QTable } from 'quasar'; +import { initDrawApp, destroyDrawApp } from 'src/drawApp/drawApp'; +import { + DrawAssistant, + GraphicData, + IDrawApp, + IJlCanvas, + JlGraphic, +} from 'jl-graphic'; +import { markRaw } from 'vue'; + +export const useDrawStore = defineStore('draw', { + state: () => ({ + drawAssistant: null as DrawAssistant | null, + selectedGraphics: null as JlGraphic[] | null, + draftId: null as number | null, + oneClickType: '', + table: undefined as QTable | undefined, + }), + getters: { + drawMode: (state) => state.drawAssistant != null, + drawGraphicType: (state) => state.drawAssistant?.type, + drawGraphicName: (state) => state.drawAssistant?.description, + drawGraphicTemplate: (state) => state.drawAssistant?.graphicTemplate, + + selectedGraphicType: (state) => { + if (state.selectedGraphics) { + if (state.selectedGraphics.length === 1) { + return state.selectedGraphics[0].type; + } + } + }, + selectedObjName(state): string { + if (state.selectedGraphics) { + if (state.selectedGraphics.length == 0) { + return '画布'; + } else if (state.selectedGraphics.length == 1) { + const name = this.getApp?.getDrawAssistant( + state.selectedGraphics[0].type + ).description; + return name || ''; + } + return '批量设置'; + } + return ''; + }, + selectedGraphic: (state) => { + if (state.selectedGraphics) { + if (state.selectedGraphics.length === 1) { + return state.selectedGraphics[0]; + } + } + return null; + }, + }, + actions: { + getDrawApp(): IDrawApp { + const app = this.getApp; + if (app == null) { + throw new Error('未初始化app'); + } + return app; + }, + getJlCanvas(): IJlCanvas { + return this.getDrawApp().canvas; + }, + bindFormData(form: GraphicData): void { + const app = this.getDrawApp(); + app.bindFormData(form); + }, + unbindFormData(form: GraphicData): void { + const app = this.getDrawApp(); + app.unbindFormData(form); + }, + initDrawApp() { + let app: IDrawApp | null = null; + app = initDrawApp(); + if (app == null) { + throw new Error('未初始化app'); + } + app.on('interaction-plugin-resume', (plugin) => { + if (plugin.isAppPlugin()) { + if (Object.hasOwn(plugin, '__GraphicDrawAssistant')) { + this.drawAssistant = plugin as DrawAssistant; + } else { + this.drawAssistant = null; + } + } + }); + app.on('graphicselected', (graphics) => { + this.selectedGraphics = markRaw(graphics); + }); + this.selectedGraphics = []; + return app; + }, + destroy() { + // console.log('绘制状态清空，绘制应用销毁'); + this.drawAssistant = null; + this.selectedGraphics = null; + destroyDrawApp(); + }, + setDraftId(id: number | null) { + this.draftId = id; + }, + + }, +}); diff --git a/src/stores/example-store.ts b/src/stores/example-store.ts new file mode 100644 index 0000000..83e8390 --- /dev/null +++ b/src/stores/example-store.ts @@ -0,0 +1,15 @@ +import { defineStore } from 'pinia'; + +export const useCounterStore = defineStore('counter', { + state: () => ({ + counter: 0, + }), + getters: { + doubleCount: (state) => state.counter * 2, + }, + actions: { + increment() { + this.counter++; + }, + }, +}); diff --git a/src/stores/index.ts b/src/stores/index.ts new file mode 100644 index 0000000..d30b7cf --- /dev/null +++ b/src/stores/index.ts @@ -0,0 +1,32 @@ +import { store } from 'quasar/wrappers' +import { createPinia } from 'pinia' +import { Router } from 'vue-router'; + +/* + * When adding new properties to stores, you should also + * extend the `PiniaCustomProperties` interface. + * @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties + */ +declare module 'pinia' { + export interface PiniaCustomProperties { + readonly router: Router; + } +} + +/* + * If not building with SSR mode, you can + * directly export the Store instantiation; + * + * The function below can be async too; either use + * async/await or return a Promise which resolves + * with the Store instance. + */ + +export default store((/* { ssrContext } */) => { + const pinia = createPinia() + + // You can add Pinia plugins here + // pinia.use(SomePiniaPlugin) + + return pinia +}) diff --git a/src/stores/store-flag.d.ts b/src/stores/store-flag.d.ts new file mode 100644 index 0000000..7677175 --- /dev/null +++ b/src/stores/store-flag.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +// THIS FEATURE-FLAG FILE IS AUTOGENERATED, +// REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING +import "quasar/dist/types/feature-flag"; + +declare module "quasar/dist/types/feature-flag" { + interface QuasarFeatureFlags { + store: true; + } +} diff --git a/src/utils/CommonNotify.ts b/src/utils/CommonNotify.ts new file mode 100644 index 0000000..aee90fd --- /dev/null +++ b/src/utils/CommonNotify.ts @@ -0,0 +1,38 @@ +import { AxiosError } from 'axios'; +import { Notify } from 'quasar'; + +export function successNotify(message: string) { + Notify.create({ + type: 'positive', + message: message, + }); +} + +export function errorNotify(message: string, error: any): void { + console.error(error); + let errMsg = ''; + if (error instanceof AxiosError) { + errMsg = error.response?.data.errMsg; + } else if (error.data) { + errMsg = error.data.errMsg; + } else if (error.message) { + errMsg = error.message; + } + Notify.create({ + type: 'negative', + message: `${message}: ${errMsg}`, + }); +} + +export function errorDismissNotify( + message: string, + onDismiss: () => void, + error: any +): void { + console.error(error); + Notify.create({ + type: 'negative', + message: message, + onDismiss, + }); +} diff --git a/tsconfig.json b/tsconfig.json index 24fee09..d4d337f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,8 +1,10 @@ { "extends": "@quasar/app-vite/tsconfig-preset", "compilerOptions": { - "baseUrl": "." + "baseUrl": ".", + "strict": false }, + "include": ["src/**/*"], "exclude": [ "./dist", "./.quasar", @@ -11,4 +13,4 @@ "./src-cordova", "./quasar.config.*.temporary.compiled*" ] -} \ No newline at end of file +}