Merge pull request #1784 from googlefonts/issue-1782-make-the-backgro…

…und-image-editable Make the background image editable
googlefonts · Nov 13, 2024 · 0ff56f2 · 0ff56f2
2 parents 493eb87 + 3a64b00
commit 0ff56f2
Showing 1 changed file with 63 additions and 2 deletions.
diff --git a/src/fontra/views/editor/edit-behavior.js b/src/fontra/views/editor/edit-behavior.js
@@ -25,6 +25,7 @@ export class EditBehaviorFactory {
       guideline: guidelineSelection,
       componentOrigin: componentOriginSelection,
       componentTCenter: componentTCenterSelection,
+      backgroundImage: backgroundImageSelection,
     } = parseSelection(selection);
     const componentOriginIndices = unionIndexSets(
       componentSelection,
@@ -39,6 +40,9 @@ export class EditBehaviorFactory {
     this.components = unpackComponents(instance.components, relevantComponentIndices);
     this.anchors = unpackAnchors(instance.anchors, anchorSelection || []);
     this.guidelines = unpackGuidelines(instance.guidelines, guidelineSelection || []);
+    this.backgroundImage = backgroundImageSelection
+      ? instance.backgroundImage
+      : undefined;
     this.componentOriginIndices = componentOriginIndices || [];
     this.componentTCenterIndices = componentTCenterSelection || [];
     this.behaviors = {};
@@ -61,6 +65,7 @@ export class EditBehaviorFactory {
         this.components,
         this.anchors,
         this.guidelines,
+        this.backgroundImage,
         this.componentOriginIndices,
         this.componentTCenterIndices,
         behaviorType,
@@ -78,6 +83,7 @@ class EditBehavior {
     components,
     anchors,
     guidelines,
+    backgroundImage,
     componentOriginIndices,
     componentTCenterIndices,
     behavior,
@@ -151,12 +157,30 @@ class EditBehavior {
       guidelineRollbackChanges.push(guidelineRollback);
     }
 
+    const backgroundImageRollbackChanges = [];
+    this.backgroundImageEditFuncs = [];
+
+    const makeBackgroundImageEditFunc = makeBackgroundImageOriginEditFunc;
+    // const makeBackgroundImageEditFunc = fullBackgroundImageTransform
+    // ? makeBackgroundImageTransformationEditFunc
+    // : makeBackgroundImageOriginEditFunc;
+
+    if (backgroundImage) {
+      const [editFunc, backgroundImageRollback] = makeBackgroundImageEditFunc(
+        backgroundImage,
+        this.roundFunc
+      );
+      this.backgroundImageEditFuncs.push(editFunc);
+      backgroundImageRollbackChanges.push(backgroundImageRollback);
+    }
+
     this.rollbackChange = makeRollbackChange(
       contours,
       participatingPointIndices,
       componentRollbackChanges,
       anchorRollbackChanges,
-      guidelineRollbackChanges
+      guidelineRollbackChanges,
+      backgroundImageRollbackChanges
     );
   }
 
@@ -210,6 +234,9 @@ class EditBehavior {
     const guidelineChanges = this.guidelineEditFuncs?.map((editFunc) => {
       return editFunc(transform);
     });
+    const backgroundImageChanges = this.backgroundImageEditFuncs?.map((editFunc) => {
+      return editFunc(transform);
+    });
     const changes = [];
     if (pathChanges && pathChanges.length) {
       changes.push(consolidateChanges(pathChanges, ["path"]));
@@ -223,6 +250,9 @@ class EditBehavior {
     if (guidelineChanges && guidelineChanges.length) {
       changes.push(consolidateChanges(guidelineChanges, ["guidelines"]));
     }
+    if (backgroundImageChanges && backgroundImageChanges.length) {
+      changes.push(consolidateChanges(backgroundImageChanges, ["backgroundImage"]));
+    }
     return consolidateChanges(changes);
   }
 }
@@ -232,7 +262,8 @@ function makeRollbackChange(
   participatingPointIndices,
   componentRollback,
   anchorRollback,
-  guidelineRollback
+  guidelineRollback,
+  backgroundImageRollback
 ) {
   const pointRollback = [];
   for (let i = 0; i < contours.length; i++) {
@@ -263,6 +294,9 @@ function makeRollbackChange(
   if (guidelineRollback.length) {
     changes.push(consolidateChanges(guidelineRollback, ["guidelines"]));
   }
+  if (backgroundImageRollback.length) {
+    changes.push(consolidateChanges(backgroundImageRollback, ["backgroundImage"]));
+  }
   return consolidateChanges(changes);
 }
 
@@ -299,6 +333,23 @@ function makeComponentOriginEditFunc(component, componentIndex, roundFunc) {
   ];
 }
 
+function makeBackgroundImageOriginEditFunc(image, roundFunc) {
+  const origin = {
+    x: image.transformation.translateX,
+    y: image.transformation.translateY,
+  };
+  return [
+    (transform) => {
+      const editedOrigin = transform.constrained(origin);
+      return makeBackgroundImageOriginChange(
+        roundFunc(editedOrigin.x),
+        roundFunc(editedOrigin.y)
+      );
+    },
+    makeBackgroundImageOriginChange(origin.x, origin.y),
+  ];
+}
+
 function makeAnchorEditFunc(anchor, anchorIndex, roundFunc) {
   const oldAnchor = { ...anchor };
   return [
@@ -431,6 +482,16 @@ function makeComponentOriginChange(componentIndex, x, y) {
   };
 }
 
+function makeBackgroundImageOriginChange(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"],