From c8f5f90d39c39216837c8c1961d576cbcf284777 Mon Sep 17 00:00:00 2001 From: Igor Zinken Date: Thu, 26 May 2022 21:04:17 +0200 Subject: [PATCH] Updated zCanvas and Dropbox dependencies. Updated UI behaviour when loading large cloud documents --- package-lock.json | 165 ++++++++---------- package.json | 6 +- .../cloud-file-selector.vue | 26 ++- .../tool-options-clone/tool-options-clone.vue | 2 - .../tool-options-text/tool-options-text.vue | 2 +- src/factories/sprite-factory.js | 3 +- src/math/image-math.js | 4 +- src/math/unit-math.js | 4 +- src/mixins/cloud-service-connector.js | 2 +- src/mixins/image-to-document-manager.js | 4 +- src/services/dropbox-service.js | 4 +- src/services/keyboard-service.js | 7 +- 12 files changed, 111 insertions(+), 118 deletions(-) diff --git a/package-lock.json b/package-lock.json index 553dfe7..bcb900d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2225,6 +2225,17 @@ "color-convert": "^2.0.1" } }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "cliui": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", @@ -2272,6 +2283,13 @@ "universalify": "^0.1.0" } }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "optional": true + }, "ssri": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz", @@ -2281,6 +2299,42 @@ "minipass": "^3.1.1" } }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.8.3", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz", + "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + }, + "dependencies": { + "loader-utils": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz", + "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + } + } + }, "wrap-ansi": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", @@ -2892,9 +2946,9 @@ "dev": true }, "async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "requires": { "lodash": "^4.17.14" @@ -4831,9 +4885,9 @@ } }, "core-js": { - "version": "3.8.1", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.8.1.tgz", - "integrity": "sha512-9Id2xHY1W7m8hCl8NkhQn5CufmF/WuR30BTRewvCXc1aZd3kMECwNZ69ndLbekKfakw9Rf2Xyc+QR6E7Gg+obg==" + "version": "3.22.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.22.7.tgz", + "integrity": "sha512-Jt8SReuDKVNZnZEzyEQT5eK6T2RRCXkfTq7Lo09kpm+fHjgGewSbNjV+Wt4yZMhPDdzz2x1ulI5z/w4nxpBseg==" }, "core-js-compat": { "version": "3.20.2", @@ -5764,9 +5818,9 @@ "dev": true }, "dropbox": { - "version": "8.2.0", - "resolved": "https://registry.npmjs.org/dropbox/-/dropbox-8.2.0.tgz", - "integrity": "sha512-lA/Bb7ZWPaeDK+S4AIeAAlPc49nwbrTlgMSLO5Nghg6FfhqhAKdICtpENviwb0YT1Zgn1NmYk1LCJfiyrJ7lVQ==", + "version": "10.30.0", + "resolved": "https://registry.npmjs.org/dropbox/-/dropbox-10.30.0.tgz", + "integrity": "sha512-ah4mb4YoI7WwS0yXtDLKxbp9apXp5TfPksDuEvvgCYR1bpMmQKUFG9raNMLC2NsF4Dc/9Axxqj436ErPvg9HeQ==", "requires": { "node-fetch": "^2.6.1" } @@ -13582,9 +13636,9 @@ }, "dependencies": { "ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz", + "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==", "dev": true }, "strip-ansi": { @@ -14771,87 +14825,6 @@ } } }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.8.3", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz", - "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==", - "dev": true, - "optional": true, - "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "optional": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "optional": true - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "optional": true - }, - "loader-utils": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz", - "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "optional": true, - "requires": { - "has-flag": "^4.0.0" - } - } - } - }, "vue-resize": { "version": "0.4.5", "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz", @@ -16011,9 +15984,9 @@ } }, "zcanvas": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/zcanvas/-/zcanvas-4.3.1.tgz", - "integrity": "sha512-L+RD7trG01wmKmGLyqvdm0pcwOM/Y+2v7GaUiBGXKg2L6DP6oXpR0unBouwj9Q+J2VK69obQke/U5dcLS5qmJQ==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/zcanvas/-/zcanvas-5.1.1.tgz", + "integrity": "sha512-amicGa+6NVmqGq12FrGeIhaeA3K7Qa+5jW93zQ33US06tT1zPHJVZs6KAU95LSuD6OKQho7tXE04U6+grAFysg==", "dev": true } } diff --git a/package.json b/package.json index b2aa6ae..b1446a5 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,8 @@ "dependencies": { "@simonwep/pickr": "^1.8.0", "contactjs": "^1.4.0", - "core-js": "^3.6.5", - "dropbox": "^8.2.0", + "core-js": "^3.21.1", + "dropbox": "^10.26.0", "gifshot": "^0.4.5", "psd.js": "^3.4.1-bata.3", "register-service-worker": "^1.7.1", @@ -49,6 +49,6 @@ "vue-template-compiler": "^2.6.11", "vuedraggable": "^2.24.3", "worker-loader": "^2.0.0", - "zcanvas": "^4.3.1" + "zcanvas": "^5.1.1" } } diff --git a/src/components/cloud-file-selector/cloud-file-selector.vue b/src/components/cloud-file-selector/cloud-file-selector.vue index 4675349..d417528 100644 --- a/src/components/cloud-file-selector/cloud-file-selector.vue +++ b/src/components/cloud-file-selector/cloud-file-selector.vue @@ -37,12 +37,14 @@ @@ -55,6 +57,7 @@ v-for="node in filesAndFolders" :key="`entry_${node.path}`" class="entry" + :class="{ 'entry__disabled': disabled }" >
@@ -104,7 +108,7 @@ v-t="'createFolder'" type="button" class="button" - :disabled="!newFolderName" + :disabled="!newFolderName || disabled" @click="handleCreateFolderClick()" >
@@ -173,6 +177,9 @@ export default { loading() { return this.loadingStates.includes( RETRIEVAL_LOAD_KEY ); }, + disabled() { + return this.loadingStates.includes( ACTION_LOAD_KEY ); + }, breadcrumbs() { let parent = this.leaf.parent; const out = []; @@ -265,6 +272,9 @@ export default { this.unsetLoading( ACTION_LOAD_KEY ); }, async handleNodeClick( node ) { + if ( this.disabled ) { + return; + } this.setLoading( ACTION_LOAD_KEY ); switch ( node.type ) { case "folder": @@ -439,6 +449,10 @@ $actionsHeight: 74px; &--active { color: #FFF; } + + &:disabled { + color: inherit; + } } } @@ -503,5 +517,15 @@ $actionsHeight: 74px; display: block; } } + + &__disabled { + opacity: 0.5; + + &:hover { + .entry__delete-button { + display: none; + } + } + } } diff --git a/src/components/tool-options-panel/tool-options-clone/tool-options-clone.vue b/src/components/tool-options-panel/tool-options-clone/tool-options-clone.vue index 2df1ac8..c8070b7 100644 --- a/src/components/tool-options-panel/tool-options-clone/tool-options-clone.vue +++ b/src/components/tool-options-panel/tool-options-clone/tool-options-clone.vue @@ -78,7 +78,6 @@ import SelectBox from '@/components/ui/select-box/select-box'; import Slider from "@/components/ui/slider/slider"; import messages from "./messages.json"; -let isSourceSelect = false; let orgCoords = null; export default { @@ -179,7 +178,6 @@ export default { // when alt key is held down, we store a reference to the current // source coordinates (when existing) and reset the coordinates // this will lead the layer-sprite to set new source coordinates on click - isSourceSelect = true; orgCoords = this.cloneOptions.coords; this.resetSourceCoordinate(); break; diff --git a/src/components/tool-options-panel/tool-options-text/tool-options-text.vue b/src/components/tool-options-panel/tool-options-text/tool-options-text.vue index 8d79e7c..83d5a4d 100644 --- a/src/components/tool-options-panel/tool-options-text/tool-options-text.vue +++ b/src/components/tool-options-panel/tool-options-text/tool-options-text.vue @@ -283,7 +283,7 @@ export default { const { left, top, width, height } = this.activeLayer; const commit = () => store.commit( "updateLayer", { index, opts: { name: newName, text: newOpts } }); commit(); - enqueueState( `text_${index}`, { + enqueueState( `${propName}_${index}`, { undo() { store.commit( "updateLayer", { index, opts: { left, top, width, height, name: orgName, text: orgOpts } }); }, diff --git a/src/factories/sprite-factory.js b/src/factories/sprite-factory.js index 4cdf39b..34fea0d 100644 --- a/src/factories/sprite-factory.js +++ b/src/factories/sprite-factory.js @@ -1,7 +1,7 @@ /** * The MIT License (MIT) * - * Igor Zinken 2020-2021 - https://www.igorski.nl + * Igor Zinken 2020-2022 - https://www.igorski.nl * * Permission is hereby granted, free of charge, to any person obtaining a copy of * this software and associated documentation files (the "Software"), to deal in @@ -21,7 +21,6 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ import LayerSprite from "@/rendering/canvas-elements/layer-sprite"; -import { LAYER_IMAGE, LAYER_GRAPHIC, LAYER_MASK } from "@/definitions/layer-types"; let zCanvasInstance = null; // a non-Vue observable zCanvas instance diff --git a/src/math/image-math.js b/src/math/image-math.js index 537d1d4..8b55a5a 100644 --- a/src/math/image-math.js +++ b/src/math/image-math.js @@ -1,7 +1,7 @@ /** * The MIT License (MIT) * - * Igor Zinken 2020-2021 - https://www.igorski.nl + * Igor Zinken 2020-2022 - https://www.igorski.nl * * Permission is hereby granted, free of charge, to any person obtaining a copy of * this software and associated documentation files (the "Software"), to deal in @@ -106,7 +106,7 @@ export const getZoomRange = ( activeDocument, canvasDimensions ) => { */ return { zeroZoomWidth, zeroZoomHeight, - minZoomWidth, minZoomWidth, pixelsPerZoomOutUnit, + minZoomWidth, minZoomHeight, pixelsPerZoomOutUnit, maxZoomWidth, maxZoomHeight, pixelsPerZoomInUnit, }; }; diff --git a/src/math/unit-math.js b/src/math/unit-math.js index 27a3634..c94a894 100644 --- a/src/math/unit-math.js +++ b/src/math/unit-math.js @@ -33,8 +33,8 @@ export const pixelsToInch = ( pixels, dpi = 72 ) => pixels / dpi; export const pixelsToCm = ( pixels, dpi = 72 ) => pixelsToInch( pixels, dpi ) * CM_PER_INCH export const pixelsToMm = ( pixels, dpi = 72 ) => pixelsToInch( pixels, dpi ) * MM_PER_INCH; export const inchesToPixels = ( inches, dpi = 72 ) => inches * dpi; -export const cmToPixels = ( cms, dpi = 72 ) => inchesToPixels( cms / CM_PER_INCH ); -export const mmToPixels = ( mms, dpi = 72 ) => inchesToPixels( mms / MM_PER_INCH ); +export const cmToPixels = ( cms, dpi = 72 ) => inchesToPixels( cms / CM_PER_INCH, dpi ); +export const mmToPixels = ( mms, dpi = 72 ) => inchesToPixels( mms / MM_PER_INCH, dpi ); // convenience method to scale given value and its expected maxValue against // an arbitrary range (defined by maxCompareValue in relation to maxValue) diff --git a/src/mixins/cloud-service-connector.js b/src/mixins/cloud-service-connector.js index fec4341..32167b8 100644 --- a/src/mixins/cloud-service-connector.js +++ b/src/mixins/cloud-service-connector.js @@ -97,7 +97,7 @@ export default { } this.openFileBrowserDropbox(); } else { - this.authUrl = requestLogin( + this.authUrl = await requestLogin( window.dropboxClientId || localStorage?.getItem( "dropboxClientId" ), window.dropboxRedirect || `${window.location.href}login.html` ); diff --git a/src/mixins/image-to-document-manager.js b/src/mixins/image-to-document-manager.js index 84bbbc0..74b0a1a 100644 --- a/src/mixins/image-to-document-manager.js +++ b/src/mixins/image-to-document-manager.js @@ -115,9 +115,9 @@ export default { // load the image files - const start = Date.now(); + //const start = Date.now(); await loadImageFiles( imageFiles, this.addLoadedFile.bind( this )); - const elapsed = Date.now() - start; + //const elapsed = Date.now() - start; // load the BitMappery documents diff --git a/src/services/dropbox-service.js b/src/services/dropbox-service.js index ba7086d..74ec57b 100644 --- a/src/services/dropbox-service.js +++ b/src/services/dropbox-service.js @@ -33,7 +33,7 @@ let currentFolder = ""; * Authentication step 1: for interacting with Dropbox : request access token * by opening an authentication page */ -export const requestLogin = ( clientId, loginUrl ) => { +export const requestLogin = async ( clientId, loginUrl ) => { dbx = new Dropbox({ clientId }); return dbx.auth.getAuthenticationUrl( loginUrl ); }; @@ -78,7 +78,7 @@ export const listFolder = async ( path = "" ) => { export const createFolder = async ( path = "/", folder = "folder" ) => { try { - const { result } = await dbx.filesCreateFolderV2({ + await dbx.filesCreateFolderV2({ path: `${sanitizePath( path )}/${folder}` }); return true; diff --git a/src/services/keyboard-service.js b/src/services/keyboard-service.js index 72e3100..c4de777 100644 --- a/src/services/keyboard-service.js +++ b/src/services/keyboard-service.js @@ -39,7 +39,6 @@ let store, state, getters, commit, dispatch, listener, const DEFAULT_BLOCKED = [ 8, 32, 37, 38, 39, 40 ]; const MOVABLE_TOOL_TYPES = [ ToolTypes.DRAG, ToolTypes.SELECTION, ToolTypes.LASSO ]; const BRUSH_TOOL_TYPES = [ ToolTypes.BRUSH, ToolTypes.ERASER, ToolTypes.CLONE ]; -const noop = () => {}; const defaultBlock = e => e.preventDefault(); /** @@ -97,7 +96,7 @@ const KeyboardService = * the KeyboardService can be suspended so it * will not fire its callback to the listeners */ - getSuspended( value ){ + getSuspended() { return suspended; }, /** @@ -395,7 +394,7 @@ function handleKeyDown( event ) { case 86: // V // paste current selection if ( hasOption ) { - if ( !!state.selectionContent ) { + if ( state.selectionContent ) { dispatch( "pasteSelection" ); preventDefault( event ); // override browser paste } @@ -500,7 +499,7 @@ function handleKeyUp( event ) { if ( !suspended ) { if ( typeof listener === "function" ) { - listener( "up", event.keyCode, aEvent ); + listener( "up", event.keyCode, event ); } } }