Updated zCanvas and Dropbox dependencies. Updated UI behaviour when loading large cloud documents

2026-07-05 14:59:15 +02:00 · 2022-05-26 21:04:17 +02:00
parent 4adb01276b
commit c8f5f90d39
12 changed files with 111 additions and 118 deletions
--- 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
    }
  }
--- 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"
  }
 }
--- a/src/components/cloud-file-selector/cloud-file-selector.vue
+++ b/src/components/cloud-file-selector/cloud-file-selector.vue
@@ -37,12 +37,14 @@
                    <button
                        v-for="parent in breadcrumbs"
                        :key="parent.path"
+                        :disabled="disabled"
                        type="button"
                        class="breadcrumbs__button"
                        @click="handleNodeClick( parent )"
                    >{{ parent.name || "." }}</button>
                    <!-- current folder -->
                    <button
+                        :disabled="disabled"
                        type="button"
                        class="breadcrumbs__button breadcrumbs__button--active"
                    >{{ leaf.name }}</button>
@@ -55,6 +57,7 @@
                            v-for="node in filesAndFolders"
                            :key="`entry_${node.path}`"
                            class="entry"
+                            :class="{ 'entry__disabled': disabled }"
                        >
                            <div
                                v-if="node.type === 'folder'"
@@ -95,6 +98,7 @@
                        <input
                            v-model="newFolderName"
                            :placeholder="$t('newFolderName')"
+                            :disabled="disabled"
                            type="text"
                            class="input-field full"
                        />
@@ -104,7 +108,7 @@
                    v-t="'createFolder'"
                    type="button"
                    class="button"
-                    :disabled="!newFolderName"
+                    :disabled="!newFolderName || disabled"
                    @click="handleCreateFolderClick()"
                ></button>
            </div>
@@ -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;
+            }
+        }
+    }
 }
 </style>
--- 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;
--- 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 } });
                },
--- 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

--- 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,
    };
 };
--- 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)
--- 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`
                );
--- 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

--- 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;
--- 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 );
        }
    }
 }