From 12b51efffaae4b45a62bd2eea3f99bcfb60cdc92 Mon Sep 17 00:00:00 2001
From: Igor Zinken <730069+igorski@users.noreply.github.com>
Date: Sat, 15 Mar 2025 08:16:02 +0100
Subject: [PATCH] Updates to layer and mask position management

---
 src/components/layer-panel/layer-panel.vue    |  9 ++--
 .../tool-options-drag/messages.json           |  1 +
 .../tool-options-drag/tool-options-drag.vue   | 46 ++++++++++++++++---
 3 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/components/layer-panel/layer-panel.vue b/src/components/layer-panel/layer-panel.vue
index 660f73d..dd8569d 100644
--- a/src/components/layer-panel/layer-panel.vue
+++ b/src/components/layer-panel/layer-panel.vue
@@ -77,7 +77,7 @@
                                     v-tooltip.left="$t( element.maskSelected ? 'clickToEditLayer' : 'dblClickToRename')"
                                     class="layer__name"
                                     :class="{
-                                        'layer--highlight': element.index === activeLayerIndex && !activeLayerMask
+                                        'layer--selected': element.index === activeLayerIndex && !element.maskSelected
                                     }"
                                     @dblclick="handleLayerDoubleClick( element )"
                                     @click="handleLayerClick( element )"
@@ -448,7 +448,7 @@ export default {
     @include mixins.boxSize();
     @include typography.customFont();
     display: flex;
-    color: #FFF;
+    color: colors.$color-lines;
 
     &:hover {
         background-color: colors.$color-4;
@@ -492,6 +492,7 @@ export default {
     &--active {
         background-color: colors.$color-1;
         border: none;
+        color: colors.$color-2;
     }
 
     &--active,
@@ -501,8 +502,8 @@ export default {
         }
     }
 
-    &--highlight {
-        color: #000;
+    &--selected {
+        color: #FFF;
     }
 }
 </style>
diff --git a/src/components/tool-options-panel/tool-options-drag/messages.json b/src/components/tool-options-panel/tool-options-drag/messages.json
index e0c714e..1b2e9f9 100644
--- a/src/components/tool-options-panel/tool-options-drag/messages.json
+++ b/src/components/tool-options-panel/tool-options-drag/messages.json
@@ -1,6 +1,7 @@
 {
     "en-US": {
         "layerPosition": "Layer position",
+        "maskPosition": "Mask position",
         "coordinates": "Coordinates",
         "reset": "Reset",
         "center": "Center"
diff --git a/src/components/tool-options-panel/tool-options-drag/tool-options-drag.vue b/src/components/tool-options-panel/tool-options-drag/tool-options-drag.vue
index fae1d24..2a8e84e 100644
--- a/src/components/tool-options-panel/tool-options-drag/tool-options-drag.vue
+++ b/src/components/tool-options-panel/tool-options-drag/tool-options-drag.vue
@@ -23,10 +23,10 @@
 <template>
     <div
         class="tool-option"
-        @focusin="handleFocus"
-        @focusout="handleBlur"
+        @focusin="handleFocus()"
+        @focusout="handleBlur()"
     >
-        <h3 v-t="'layerPosition'"></h3>
+        <h3 v-t="isMask ? 'maskPosition' : 'layerPosition'"></h3>
         <div class="wrapper input">
             <label v-t="'coordinates'"></label>
             <input
@@ -67,6 +67,7 @@
 
 <script lang="ts">
 import { mapGetters } from "vuex";
+import { enqueueState } from "@/factories/history-state-factory";
 import KeyboardService from "@/services/keyboard-service";
 import { getSpriteForLayer } from "@/factories/sprite-factory";
 
@@ -83,10 +84,20 @@ export default {
         ...mapGetters([
             "activeDocument",
             "activeLayer",
+            "activeLayerMask",
         ]),
+        isMask(): boolean {
+            if ( !this.activeLayer ) {
+                return false;
+            }
+            return !!this.activeLayer.mask && this.activeLayer.mask === this.activeLayerMask;
+        },
         left: {
             get(): number {
-                return Math.round( this.activeLayer?.left ?? 0 );
+                if ( !this.activeLayer ) {
+                    return 0;
+                }
+                return Math.round( this.isMask ? this.activeLayer.maskX : this.activeLayer.left );
             },
             set( value: number ): void {
                 if ( isNaN( value )) {
@@ -97,7 +108,10 @@ export default {
         },
         top: {
             get(): number {
-                return Math.round( this.activeLayer?.top ?? 0 );
+                if ( !this.activeLayer ) {
+                    return 0;
+                }
+                return Math.round( this.isMask ? this.activeLayer.maskY : this.activeLayer.top );
             },
             set( value: number ): void {
                 if ( isNaN( value )) {
@@ -127,7 +141,27 @@ export default {
             KeyboardService.setSuspended( false );
         },
         setLayerPosition( x = this.top, y = this.left ): void {
-            getSpriteForLayer( this.activeLayer )?.setBounds( x, y );
+            if ( this.isMask ) {
+                const layer = this.activeLayer;
+                const orgX = layer.maskX;
+                const orgY = layer.maskY;
+                const commit = () => {
+                    layer.maskX = x;
+                    layer.maskY = y;
+                    getSpriteForLayer( layer )?.resetFilterAndRecache();
+                };
+                commit();
+                enqueueState( `maskPos_${layer.id}`, {
+                    undo() {
+                        layer.maskX = orgX;
+                        layer.maskY = orgY;
+                        getSpriteForLayer( layer )?.resetFilterAndRecache();
+                    },
+                    redo: commit
+                }); 
+            } else {
+                getSpriteForLayer( this.activeLayer )?.setBounds( x, y );
+            }
         },
         reset(): void {
             this.setLayerPosition( 0, 0 );