Rename transformations to less long 'transform'

Author: igorski

README.md

@@ -101,7 +101,7 @@ update( propertyName: string, newValue: any ): void {
     // now define and enqueue undo/redo handlers to reverse and redo the commit mutation
     enqueueState( propertyName, {
         undo(): void {
-            store.commit( "updateLayerTransformations", { index, opts: { existingValue } });
+            store.commit( "updateLayerTransform", { index, opts: { existingValue } });
         },
         redo(): void {
             commit();

src/components/document-canvas/decorators/touch-decorator.ts

@@ -23,7 +23,7 @@ export default {
     },
     methods: {
         ...mapMutations([
-            "updateLayerTransformations",
+            "updateLayerTransform",
         ]),
         detectTouch(): void {
             this.usesTouch = false;
@@ -127,9 +127,9 @@ export default {
         /*
         handleRotateGesture( event ) : void{
             // TODO: this should go into history
-            this.updateLayerTransformations({
+            this.updateLayerTransform({
                 index: this.activeLayerIndex,
-                transformations: { rotation: degreesToRadians( event.angle ) }
+                transform: { rotation: degreesToRadians( event.angle ) }
             });
         },*/
     }

src/components/tool-options-panel/tool-options-mirror/tool-options-mirror.vue

@@ -52,7 +52,7 @@
 
 <script lang="ts">
 import { mapGetters } from "vuex";
-import type { Transformations } from "@/definitions/document";
+import type { Transform } from "@/definitions/document";
 import { enqueueState } from "@/factories/history-state-factory";
 import messages  from "./messages.json";
 
@@ -62,38 +62,38 @@ export default {
         ...mapGetters([
             "activeLayer",
             "activeLayerIndex",
-            "activeLayerTransformations",
+            "activeLayerTransform",
         ]),
         canReset(): void {
-            const { mirrorX, mirrorY } = this.activeLayer.transformations;
+            const { mirrorX, mirrorY } = this.activeLayer.transform;
             return mirrorX || mirrorY;
         },
     },
     methods: {
         flipHorizontal(): void {
-            this.update({ mirrorX: !this.activeLayerTransformations.mirrorX }, "mirrorX" );
+            this.update({ mirrorX: !this.activeLayerTransform.mirrorX }, "mirrorX" );
         },
         flipVertical(): void {
-            this.update({ mirrorY: !this.activeLayerTransformations.mirrorY }, "mirrorY" );
+            this.update({ mirrorY: !this.activeLayerTransform.mirrorY }, "mirrorY" );
         },
         resetFlip(): void {
             this.update({ mirrorX: false, mirrorY: false }, "mirrorXY" );
         },
-        update( transformations: Partial<Transformations>, propName = "mirror" ): void {
-            const { mirrorX, mirrorY } = this.activeLayerTransformations;
-            const newTransformations = {
+        update( transform: Partial<Transform>, propName = "mirror" ): void {
+            const { mirrorX, mirrorY } = this.activeLayerTransform;
+            const newTransform = {
                 mirrorX,
                 mirrorY,
-                ...transformations,
+                ...transform,
             };
             const index  = this.activeLayerIndex;
             const store  = this.$store;
-            const commit = () => store.commit( "updateLayerTransformations", { index, transformations: newTransformations });
+            const commit = () => store.commit( "updateLayerTransform", { index, transform: newTransform });
             commit();
 
             enqueueState( `${propName}_${index}`, {
                 undo(): void {
-                    store.commit( "updateLayerTransformations", { index, transformations: { mirrorX, mirrorY } });
+                    store.commit( "updateLayerTransform", { index, transform: { mirrorX, mirrorY } });
                 },
                 redo: commit,
             });

src/components/tool-options-panel/tool-options-rotate/tool-options-rotate.vue

@@ -88,12 +88,12 @@ export default {
         ...mapGetters([
             "activeLayer",
             "activeLayerIndex",
-            "activeLayerTransformations",
+            "activeLayerTransform",
         ]),
         // note rotation is stored in radians but represented visually as degrees
         rotation: {
             get(): number {
-                return radiansToDegrees( this.activeLayerTransformations.rotation );
+                return radiansToDegrees( this.activeLayerTransform.rotation );
             },
             set( value: number ): void {
                 this.update( degreesToRadians( value % 360 ));
@@ -102,7 +102,7 @@ export default {
     },
     methods: {
         ...mapMutations([
-            "updateLayerTransformations",
+            "updateLayerTransform",
         ]),
         update( rotation: number ): void {
             rotateLayer( this.$store, this.activeLayer, this.activeLayerIndex, rotation );

src/components/tool-options-panel/tool-options-scale/tool-options-scale.vue

@@ -81,43 +81,43 @@ export default {
         ...mapGetters([
             "activeLayer",
             "activeLayerIndex",
-            "activeLayerTransformations",
+            "activeLayerTransform",
         ]),
         scale: {
             get(): number {
-                return ( this.activeLayerTransformations.scale - 1 ) * MAX_ZOOM;
+                return ( this.activeLayerTransform.scale - 1 ) * MAX_ZOOM;
             },
             set( value: number ): void {
                 this.update( scale( value, MAX_ZOOM, 1 ) + 1 );
             }
         },
         isScaled(): boolean {
-            return this.activeLayerTransformations.scale !== 1;
+            return this.activeLayerTransform.scale !== 1;
         },
         isSaveable(): boolean {
             return SAVEABLE_TYPES.includes( this.activeLayer?.type );
         },
     },
     methods: {
         update( scale: number ): void {
-            const oldScale = this.activeLayerTransformations.scale;
+            const oldScale = this.activeLayerTransform.scale;
             const index  = this.activeLayerIndex;
             const store  = this.$store;
             const commit = () => {
-                store.commit( "updateLayerTransformations", { index, transformations: { scale } });
+                store.commit( "updateLayerTransform", { index, transform: { scale } });
             };
             commit();
             enqueueState( `scale_${index}`, {
                 undo() {
-                    store.commit( "updateLayerTransformations", { index, transformations: { scale: oldScale } });
+                    store.commit( "updateLayerTransform", { index, transform: { scale: oldScale } });
                 },
                 redo: commit
             });
         },
         async save(): Promise<void> {
             const { activeLayer } = this;
             const { left, top, width, height } = activeLayer;
-            const { scale } = activeLayer.transformations;
+            const { scale } = activeLayer.transform;
             const index = this.activeLayerIndex;
             const store = this.$store;
             const orgImage = cloneCanvas( this.activeLayer.source );
@@ -139,14 +139,14 @@ export default {
             const commit = () => {
                 store.commit( "updateLayer", { index, opts: { source: scaledImage, left: 0, top: 0, width: targetWidth, height: targetHeight } });
                 // unset layer scale (the resized image should display at a reset scale)
-                store.commit( "updateLayerTransformations", { index, transformations: { scale: 1 } });
+                store.commit( "updateLayerTransform", { index, transform: { scale: 1 } });
                 getRendererForLayer( activeLayer )?.syncPosition();
             };
             commit();
             enqueueState( `saveScale_${scale}`, {
                 undo() {
                     store.commit( "updateLayer", { index, opts: { source: orgImage, left, top, width, height } });
-                    store.commit( "updateLayerTransformations", { index, transformations: { scale } });
+                    store.commit( "updateLayerTransform", { index, transform: { scale } });
                     getRendererForLayer( activeLayer )?.syncPosition();
                 },
                 redo: commit,

src/definitions/document.ts

@@ -38,12 +38,12 @@ export type Layer = {
     transparent: boolean;
     source?: HTMLCanvasElement;
     mask?: HTMLCanvasElement;
-    transformations: Transformations;
+    transform: Transform;
     filters: Filters;
     text: Text;
 };
 
-export type Transformations = {
+export type Transform = {
     scale: number;
     rotation: number;
     mirrorX: boolean;

src/definitions/tool-types.ts

@@ -61,7 +61,7 @@ export const canDragMask = ( activeLayer?: Layer, activeLayerMask?: HTMLCanvasEl
     if ( !activeLayer || !activeLayer?.mask || ( activeLayer.mask !== activeLayerMask )) {
         return false;
     }
-    return activeLayer.transformations.rotation === 0;
+    return activeLayer.transform.rotation === 0;
 };
 
 export const TOOL_SRC_MERGED = "Merged"; // constant to define that a tools source context are all layers merged

src/factories/layer-factory.ts

@@ -24,16 +24,16 @@ import type { Rectangle } from "zcanvas";
 import { LayerTypes, DEFAULT_LAYER_NAME, DEFAULT_TEXT_LAYER_NAME } from "@/definitions/layer-types";
 import type { Layer } from "@/definitions/document";
 import { imageToBase64, base64toCanvas } from "@/utils/canvas-util";
-import TransformationsFactory, { type TransformationsProps } from "@/factories/transformations-factory";
+import TransformFactory, { type TransformProps } from "@/factories/transform-factory";
 import FiltersFactory from "@/factories/filters-factory";
 import TextFactory from "@/factories/text-factory";
 import type { FiltersProps } from "@/factories/filters-factory";
 import type { TextProps } from "@/factories/text-factory";
 
 let UID_COUNTER = 0;
 
-export type LayerProps = Partial<Omit<Layer, "transformations" | "filters" | "text">> & {
-    transformations?: TransformationsProps;
+export type LayerProps = Partial<Omit<Layer, "transform" | "filters" | "text">> & {
+    transform?: TransformProps;
     filters?: FiltersProps;
     text?: TextProps;
 };
@@ -46,7 +46,7 @@ const LayerFactory = {
         name = DEFAULT_LAYER_NAME,
         type = LayerTypes.LAYER_GRAPHIC, transparent = true, source = null, mask = null,
         left = 0, top = 0, maskX = 0, maskY = 0, width = 1, height = 1, visible = true,
-        transformations = {}, filters = {}, text = {}
+        transform = {}, filters = {}, text = {}
     }: LayerProps = {}): Layer {
         return {
             id: `layer_${( ++UID_COUNTER )}`,
@@ -63,7 +63,7 @@ const LayerFactory = {
             height,
             visible,
             text: TextFactory.create( text ),
-            transformations: TransformationsFactory.create( transformations ),
+            transform: TransformFactory.create( transform ),
             filters: FiltersFactory.create( filters ),
         }
     },
@@ -86,7 +86,7 @@ const LayerFactory = {
             w: layer.width,
             h: layer.height,
             tx: TextFactory.serialize( layer.text ),
-            f: TransformationsFactory.serialize( layer.transformations ),
+            f: TransformFactory.serialize( layer.transform ),
             fl: FiltersFactory.serialize( layer.filters ),
             v: layer.visible,
         };
@@ -114,7 +114,7 @@ const LayerFactory = {
             height: layer.h,
             visible: layer.v,
             text,
-            transformations: TransformationsFactory.deserialize( layer.f ),
+            transform: TransformFactory.deserialize( layer.f ),
             filters: FiltersFactory.deserialize( layer.fl ),
         });
     }

src/factories/transformations-factory.ts renamed to src/factories/transform-factory.ts

@@ -20,12 +20,12 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-import type { Transformations } from "@/definitions/document";
+import type { Transform } from "@/definitions/document";
 
-export type TransformationsProps = Partial<Transformations>;
+export type TransformProps = Partial<Transform>;
 
-const TransformationsFactory = {
-    create({ scale = 1, rotation = 0, mirrorX = false, mirrorY = false }: TransformationsProps = {}): Transformations {
+const TransformFactory = {
+    create({ scale = 1, rotation = 0, mirrorX = false, mirrorY = false }: TransformProps = {}): Transform {
         return {
             scale,
             rotation,
@@ -38,7 +38,7 @@ const TransformationsFactory = {
      * Saving transformation properties into a simplified JSON structure
      * for project storage
      */
-    serialize( data: Transformations ): any {
+    serialize( data: Transform ): any {
         return {
             s: data.scale,
             r: data.rotation,
@@ -48,21 +48,21 @@ const TransformationsFactory = {
     },
 
     /**
-     * Creating a new transformations lists from a stored transformation structure
+     * Creating a new transformations structure from a stored JSON structure
      * inside a stored projects layer
      */
-     deserialize( data: any = {} ): Transformations {
-         return TransformationsFactory.create({
+     deserialize( data: any = {} ): Transform {
+         return TransformFactory.create({
              scale    : data.s,
              rotation : data.r,
              mirrorX  : data.x,
              mirrorY  : data.y,
          });
      }
 };
-export default TransformationsFactory;
+export default TransformFactory;
 
-export const isEqual = ( data: Transformations, dataToCompare?: Transformations ): boolean => {
+export const isEqual = ( data: Transform, dataToCompare?: Transform ): boolean => {
     if ( !dataToCompare ) {
         return false;
     }

src/math/point-math.ts

@@ -185,7 +185,7 @@ export const rotatePointers = ( pointers: Point[], layer: Layer, sourceWidth: nu
     // we take layer.left instead of bounds.left as it provides the unrotated Layer offset
     const { left, top } = layer;
     // translate pointer to translated space, when layer is rotated or mirrored
-    const { mirrorX, mirrorY, rotation } = layer.transformations;
+    const { mirrorX, mirrorY, rotation } = layer.transform;
     return pointers.map( point => {
         // translate recorded pointer towards rotated point
         // and against layer position