Moving around an image works

googlefonts · Nov 1, 2024 · 3aeb1f7 · 3aeb1f7
1 parent 97d250e
commit 3aeb1f7
Showing 1 changed file with 77 additions and 8 deletions.
diff --git a/src/fontra/views/editor/edit-behavior.js b/src/fontra/views/editor/edit-behavior.js
@@ -47,7 +47,11 @@ export class EditBehaviorFactory {
     this.enableScalingEdit = enableScalingEdit;
   }
 
-  getBehavior(behaviorName, fullComponentTransform = false) {
+  getBehavior(
+    behaviorName,
+    fullComponentTransform = false,
+    fullImageTransform = false
+  ) {
     let behavior = this.behaviors[behaviorName];
     if (!behavior) {
       let behaviorType = behaviorTypes[behaviorName];
@@ -67,7 +71,8 @@ export class EditBehaviorFactory {
         this.componentOriginIndices,
         this.componentTCenterIndices,
         behaviorType,
-        fullComponentTransform
+        fullComponentTransform,
+        fullImageTransform
       );
       this.behaviors[behaviorName] = behavior;
     }
@@ -85,9 +90,11 @@ class EditBehavior {
     componentOriginIndices,
     componentTCenterIndices,
     behavior,
-    fullComponentTransform
+    fullComponentTransform,
+    fullImageTransform
   ) {
     this.fullComponentTransform = fullComponentTransform;
+    this.fullImageTransform = fullImageTransform;
     this.roundFunc = Math.round;
     this.constrainDelta = behavior.constrainDelta || ((v) => v);
     const [pointEditFuncs, participatingPointIndices] = makePointEditFuncs(
@@ -155,13 +162,14 @@ class EditBehavior {
       guidelineRollbackChanges.push(guidelineRollback);
     }
 
+    const makeImageEditFunc = fullImageTransform
+      ? makeImageTransformationEditFunc
+      : makeImageOriginEditFunc;
+
     const imageRollbackChanges = [];
     this.imageEditFuncs = [];
     if (image) {
-      const [editFunc, imageRollback] = makeImageTransformationEditFunc(
-        image,
-        this.roundFunc
-      );
+      const [editFunc, imageRollback] = makeImageEditFunc(image, this.roundFunc);
       this.imageEditFuncs.push(editFunc);
       imageRollbackChanges.push(imageRollback);
     }
@@ -203,6 +211,11 @@ class EditBehavior {
         "assert -- must pass transformComponentFunc when doing fullComponentTransform"
       );
     }
+    if (this.fullImageTransform && !transformImageFunc) {
+      throw Error(
+        "assert -- must pass transformImageFunc when doing fullImageTransform"
+      );
+    }
     const transform = {
       constrained: transformFunc,
       free: freeTransformFunc || transformFunc,
@@ -327,6 +340,24 @@ function makeComponentOriginEditFunc(component, componentIndex, roundFunc) {
   ];
 }
 
+function makeImageOriginEditFunc(image, roundFunc) {
+  const origin = {
+    x: image.transformation.translateX,
+    y: image.transformation.translateY,
+  };
+  return [
+    (transform) => {
+      const editedOrigin = transform.constrained(origin);
+      return makeImageOriginChange(
+        0,
+        roundFunc(editedOrigin.x),
+        roundFunc(editedOrigin.y)
+      );
+    },
+    makeImageOriginChange(0, origin.x, origin.y),
+  ];
+}
+
 function makeImageTransformationEditFunc(image) {
   const oldImage = copyImage(image);
   return [
@@ -338,10 +369,38 @@ function makeImageTransformationEditFunc(image) {
   ];
 }
 
+// function makeImageChange(image, imageIndex) {
+//   return { f: "=", a: [imageIndex, image] };
+// }
+
 function makeImageChange(image, imageIndex) {
-  return { f: "=", a: [imageIndex, image] };
+  return {
+    p: ["transformation"],
+    c: [
+      { f: "=", a: ["translateX", image.transformation.translateX] },
+      { f: "=", a: ["translateY", image.transformation.translateY] },
+      { f: "=", a: ["scaleX", image.transformation.scaleX] },
+      { f: "=", a: ["scaleY", image.transformation.scaleY] },
+      { f: "=", a: ["tCenterX", image.transformation.tCenterX] },
+      { f: "=", a: ["tCenterY", image.transformation.tCenterY] },
+    ],
+  };
 }
 
+// function makeImageChange(image, imageIndex) {
+//   return {
+//     p: ["transformation"],
+//     c: [
+//       { f: "=", a: ["translateX", image.transformation.translateX] },
+//       { f: "=", a: ["translateY", image.transformation.translateY] },
+//       { f: "=", a: ["scaleX", image.transformation.scaleX] },
+//       { f: "=", a: ["scaleY", image.transformation.scaleY] },
+//       { f: "=", a: ["tCenterX", image.transformation.tCenterX] },
+//       { f: "=", a: ["tCenterY", image.transformation.tCenterY] },
+//     ],
+//   };
+// }
+
 function makeAnchorEditFunc(anchor, anchorIndex, roundFunc) {
   const oldAnchor = { ...anchor };
   return [
@@ -474,6 +533,16 @@ function makeComponentOriginChange(componentIndex, x, y) {
   };
 }
 
+function makeImageOriginChange(imageIndex, x, y) {
+  return {
+    p: ["transformation"],
+    c: [
+      { f: "=", a: ["translateX", x] },
+      { f: "=", a: ["translateY", y] },
+    ],
+  };
+}
+
 function makeComponentTCenterChange(componentIndex, x, y, cx, cy) {
   return {
     p: [componentIndex, "transformation"],