Close

Scripts/play.ts

@@ -9,6 +9,7 @@ export class PlaySpace {
     constructor(model: Playset) {
         const container = $(".container");
         this.canvas = new fabric.Canvas("play_space");
+        this.canvas.selection = false;
         this.canvas.setHeight(container.height()).setWidth(container.width());
         this.model = model;
         this.selectSet();
@@ -19,6 +20,11 @@ export class PlaySpace {
         });
 
         this.canvas.setZoom(this.canvas.width / model.width);
+
+        this.canvas.on("mouse:down", event => {
+            if (!event.target) return;
+            console.log(event.target);
+        });
     }
 
     async selectSet(set?: number) {
@@ -32,8 +38,8 @@ export class PlaySpace {
         this.canvas.clear();
         if (this.model.borderColor) this.canvas.backgroundColor = this.model.borderColor;
 
-        const cels = this.model.cels.filter(x => x.initialPositions[set]);
-        for (let cel of cels) {
+        const celGroups: { [key: number]: fabric.Image[] } = {};
+        for (let cel of this.model.cels.filter(x => x.initialPositions[set])) {
             const image = await new Promise<fabric.Image>(resolve => {
                 fabric.Image.fromURL(cel.image, image => resolve(image));
             });
@@ -41,9 +47,51 @@ export class PlaySpace {
             image.set({
                 left: cel.initialPositions[set].x + cel.offset.x,
                 top: cel.initialPositions[set].y + cel.offset.y,
-                selectable: cel.fix == 0
+                selectable: cel.fix == 0,
+                hoverCursor: "default",
+                hasControls: false,
+                lockRotation: true,
+                lockScalingX: true,
+                lockScalingY: true,
+                hasBorders: false
             });
             this.canvas.add(image);
+
+            if (!celGroups[cel.mark]) celGroups[cel.mark] = [];
+            celGroups[cel.mark].push(image);
+        }
+
+        this.linkItems(celGroups);
+    }
+
+    linkItems(groups: { [key: number]: fabric.Image[] }) {
+        for (let key in groups) {
+            const group = groups[key];
+            const length = group.length;
+            if (length < 2) continue;
+
+            const top = group.pop();
+            if (!top.selectable) continue;
+
+            top.set({hoverCursor: "move"});
+            const transformMatrix = top.calcTransformMatrix();
+            const invertedTransform = fabric.util.invertTransform(transformMatrix);
+            for (let item of group) {
+                (item as any)["relationship"] = fabric.util.multiplyTransformMatrices(invertedTransform, item.calcTransformMatrix());
+            }
+
+            top.on("moving", event => {
+                const currentTransform = top.calcTransformMatrix();
+                for (let item of group) {
+                    const relationship = (item as any).relationship;
+                    if (!relationship) continue;
+                    const transform = fabric.util.multiplyTransformMatrices(currentTransform, relationship);
+                    const translation = fabric.util.qrDecompose(transform);
+                    item.setPositionByOrigin(new fabric.Point(translation.translateX, translation.translateY), "center", "center");
+                    item.set(translation);
+                    item.set({flipX: false, flipY: false}).setCoords();
+                }
+            });
         }
     }
 }