@quinninc/pixi-transformer 0.0.4 → 0.0.6

package/dist/Transformer.js

@@ -0,0 +1,668 @@
+import { Pixi } from "./pixi";
+import { calcAngleRadians, calcDistance, getDirection, rotatePoint, snapToEdgesAndCorners, } from "./graphics";
+export class Transformer extends Pixi.Container {
+    /**
+     *
+     * @param p.lineColor - border line color
+     * @param p.handleColor - handles' fill color
+     * @param p.controlsSize - handles' size in pixels
+     * @param p.debug - show scaling distance debug lines
+     * @param p.generateAnchorMark - a function to generate your custom anchor mark
+     *
+     * @example
+     * const selectTool = new FreeTransformTool({
+     *   lineColor: 0x66cfff,
+     *   handleColor: 0xffffff,
+     *   controlsSize: 10,
+     *   debug: false,
+     *   generateAnchorMark: (g) => g.clear().circle(0,0,10).fill(0xff0000); // please use clear() to clear the geometry first every time. leave undefined for default anchor mark. set false to disable.
+     * });
+     *
+     * root.addChild(selectTool); // by default the tool has a z-index of 1e7 (10000000). you can change it according to your requirement
+     *
+     * selectTool.select(obj);
+     *
+     * selectTool.unselect();
+     */
+    constructor({ id = "transformer", lineColor = 0x66cfff, handleColor = 0xffffff, controlsSize = 10, debug = false, generateAnchorMark, } = {}) {
+        super();
+        // target Pixi.Container
+        this.target = null;
+        // position state
+        this.left = 0;
+        this.top = 0;
+        this.bottom = 0;
+        this.right = 0;
+        this._anchor = new Pixi.Point(0, 0);
+        this.dragging = false;
+        this.onUpdate = () => { };
+        const that = this;
+        this._id = id;
+        this.debug = debug;
+        this.lineColor = lineColor;
+        this.handleColor = handleColor;
+        this.handleOpacity = 1;
+        this.controlsSize = controlsSize;
+        this.controlsDimOpacity = 1;
+        this.controlsStrokeThickness = 2;
+        this.movedThreshold = 10;
+        if (typeof generateAnchorMark == "function")
+            this.generateAnchorMark = generateAnchorMark;
+        else if (generateAnchorMark === false)
+            this.generateAnchorMark = () => { };
+        this.zIndex = 1e7;
+        // Pixi.Container Properties
+        this.visible = false;
+        // create border
+        this.border = new Pixi.Graphics({ label: "Border" });
+        this.addChild(this.border);
+        // Anchor mark
+        this.anchorMark = new Pixi.Graphics({
+            label: "AnchorMark",
+            eventMode: "none",
+        });
+        this.anchorMark.alpha = this.handleOpacity;
+        this.addChild(this.anchorMark);
+        // debug indicators
+        this.fromPoint = new Pixi.Graphics({
+            label: "fromPoint",
+            alpha: this.handleOpacity * 0.75,
+        });
+        this.toPoint = new Pixi.Graphics({
+            label: "toPoint",
+            alpha: this.handleOpacity * 0.75,
+        });
+        this.addChild(this.fromPoint, this.toPoint);
+        // scaling handles
+        this.scaleTHandle = this.createHandle({
+            name: "scaleTHandle",
+            cursor: "n-resize",
+        });
+        this.scaleRHandle = this.createHandle({
+            name: "scaleRHandle",
+            cursor: "w-resize",
+        });
+        this.scaleBHandle = this.createHandle({
+            name: "scaleBHandle",
+            cursor: "s-resize",
+        });
+        this.scaleLHandle = this.createHandle({
+            name: "scaleLHandle",
+            cursor: "e-resize",
+        });
+        this.scaleTLHandle = this.createHandle({
+            name: "scaleTLHandle",
+            cursor: "nw-resize",
+        });
+        this.scaleTRHandle = this.createHandle({
+            name: "scaleTRHandle",
+            cursor: "ne-resize",
+        });
+        this.scaleBRHandle = this.createHandle({
+            name: "scaleBRHandle",
+            cursor: "se-resize",
+        });
+        this.scaleBLHandle = this.createHandle({
+            name: "scaleBLHandle",
+            cursor: "sw-resize",
+        });
+        // rotation handle
+        this.rotateHandle = this.createHandle({
+            name: "Rotate",
+            cursor: "pointer",
+            shape: "circle",
+        });
+        this.addChild(this.scaleTHandle, this.scaleRHandle, this.scaleBHandle, this.scaleLHandle, this.scaleTLHandle, this.scaleTRHandle, this.scaleBRHandle, this.scaleBLHandle, this.rotateHandle);
+        // ------------<MoveTool>---------------
+        this.moveHandle = new Pixi.Graphics({ label: this.id });
+        this.moveHandle.eventMode = "dynamic";
+        this.addToolTip(this.moveHandle, "Move", "move");
+        this.moveHandle
+            .on("pointerdown", onMoveHandleDown)
+            .on("pointerup", onMoveHandleUp)
+            .on("pointerupoutside", onMoveHandleUp);
+        this.handleHandleEvents(this.moveHandle, this);
+        this.moveHandle.hitArea = new Pixi.Rectangle(0, 0, this.controlsSize, this.controlsSize);
+        this.addChild(this.moveHandle);
+        function changeAnchorPoint(ev) {
+            // console.log("TAPP this, that - ", this, that);
+            if (!ev.ctrlKey && !ev.metaKey)
+                return;
+            if (!that.target)
+                return;
+            const eventPoint = that.convertToLocal(ev.global);
+            console.log("Prev anchor - ", that._anchor);
+            console.log("ev.position - ", eventPoint.x, eventPoint.y);
+            console.log("that.target.position - ", that.target.position.x, that.target.position.y);
+            console.log("that.target.pivot - ", that.target.pivot.x, that.target.pivot.y);
+            let dx, dy;
+            // calc new pivot point
+            // step 1 - translate to origin
+            dx = eventPoint.x - that.target.position.x;
+            dy = eventPoint.y - that.target.position.y;
+            // step 2 - rotate by -angle
+            const rp = rotatePoint({ x: dx, y: dy }, { x: 0, y: 0 }, -that.target.rotation);
+            let rdx = rp.x;
+            let rdy = rp.y;
+            const sp = { x: rdx, y: rdy };
+            const pSnapped = snapToEdgesAndCorners({
+                point: sp,
+                dim: { width: that.target.width, height: that.target.height },
+                anchor: that._anchor,
+            });
+            // console.log("UP SNAPPING - ", sp, pSnapped);
+            // step 3 - scale by 1/scale
+            rdx = pSnapped.x / that.target.scale.x;
+            rdy = pSnapped.y / that.target.scale.y;
+            // console.log("3 - dx, dy - ", dx, dy);
+            // step 4 - translate to new pivot
+            const x = that.target.pivot.x + rdx;
+            const y = that.target.pivot.y + rdy;
+            // calc new position
+            const rrp = rotatePoint({ x: rdx, y: rdy }, { x: 0, y: 0 }, that.target.rotation);
+            rrp.x = rrp.x * that.target.scale.x + that.target.position.x;
+            rrp.y = rrp.y * that.target.scale.y + that.target.position.y;
+            const posX = rrp.x;
+            const posY = rrp.y;
+            that.target.pivot.set(x, y);
+            that.target.position.set(posX, posY);
+        }
+        function onMoveHandleDown(downEvent) {
+            // console.log("onMoveHandleDown this, that - ", this, that);
+            if (!that.target)
+                return;
+            if (downEvent.ctrlKey || downEvent.metaKey) {
+                this.draggingPivot = true;
+            }
+            // data
+            this.targetStartPos = that.target.position.clone();
+            this.dragDistance = 0;
+            this.on("globalpointermove", onMoveHandleMove);
+        }
+        function onMoveHandleMove(moveEvent) {
+            // console.log("onMoveHandleMove this, that - ", this, that);
+            if (!this.dragging || !that.target)
+                return;
+            const eventPoint = that.convertToLocal(moveEvent.global);
+            if (this.draggingPivot) {
+                // changing pivot point
+                let x = eventPoint.x - that.target.x;
+                let y = eventPoint.y - that.target.y;
+                const p = rotatePoint({ x, y }, { x: 0, y: 0 }, -that.target.rotation);
+                const snappedPoint = snapToEdgesAndCorners({
+                    point: p,
+                    dim: {
+                        width: that.target.width,
+                        height: that.target.height,
+                    },
+                    anchor: that._anchor,
+                });
+                // console.log("MOVE SNAPPING - ", p, snappedPoint);
+                that.anchorMark.position.set(snappedPoint.x / that.target.scale.x, snappedPoint.y / that.target.scale.y);
+                return;
+            }
+            const moveDelta = new Pixi.Point(eventPoint.x - this.eventStartPos.x, eventPoint.y - this.eventStartPos.y);
+            that.target.position.x = this.targetStartPos.x + moveDelta.x;
+            that.target.position.y = this.targetStartPos.y + moveDelta.y;
+            this.dragDistance = calcDistance(eventPoint, this.eventStartPos);
+            that.update();
+            moveEvent.stopPropagation();
+        }
+        function onMoveHandleUp(upEvent) {
+            // console.log("onMoveHandleUp this, that - ", this, that);
+            upEvent.stopPropagation();
+            if (this.draggingPivot) {
+                changeAnchorPoint(upEvent);
+                that.anchorMark.position.set(0, 0);
+            }
+            this.draggingPivot = false;
+            this.off("globalpointermove", onMoveHandleMove);
+        }
+        // ------------</ MoveTool>---------------
+        // ------------<ScaleXYTool>---------------
+        for (const handle of [
+            this.scaleBRHandle,
+            this.scaleTRHandle,
+            this.scaleBLHandle,
+            this.scaleTLHandle,
+        ]) {
+            handle
+                .on("pointerdown", onScaleXYToolDown)
+                .on("pointerupoutside", onScaleXYToolUp)
+                .on("pointerup", onScaleXYToolUp);
+        }
+        function onScaleXYToolDown(downEvent) {
+            // console.log("onScaleToolDown this, that - ", this, that);
+            if (!that.target)
+                return;
+            this.targetResolutionStart = that.target.resolution;
+            this.on("globalpointermove", onScaleXYToolMove);
+        }
+        function onScaleXYToolMove(moveEvent) {
+            // console.log("onScaleToolMove this, that - ", this, that);
+            if (!this.dragging || !that.target)
+                return;
+            const eventPoint = that.convertToLocal(moveEvent.global);
+            const distStart = calcDistance(this.eventStartPos, that.target.position);
+            const distEnd = calcDistance(eventPoint, that.target.position);
+            const direction = getDirection(that.position, this.eventStartPos, eventPoint);
+            this.rescaleFactor = (distEnd / distStart) * direction;
+            that.target.scale.x = this.targetStartScale.x * this.rescaleFactor;
+            that.target.scale.y = this.targetStartScale.y * this.rescaleFactor;
+            that.update();
+        }
+        function onScaleXYToolUp() {
+            // console.log("onScaleToolUp this, that - ", this, that);
+            if (that.target) {
+                that.target.resolution =
+                    this.targetResolutionStart * this.rescaleFactor;
+            }
+            this.off("globalpointermove", onScaleXYToolMove);
+        }
+        // ------------</ ScaleXYTool>---------------
+        // ------------<ScaleYTool>---------------
+        for (const handle of [this.scaleTHandle, this.scaleBHandle]) {
+            handle
+                .on("pointerdown", onScaleYToolDown)
+                .on("pointerup", onScaleYToolUp)
+                .on("pointerupoutside", onScaleYToolUp);
+        }
+        function onScaleYToolDown(downEvent) {
+            // console.log("onVScaleToolDown this, that - ", this, that);
+            if (!that.target)
+                return;
+            this.on("globalpointermove", onScaleYToolMove);
+        }
+        function onScaleYToolMove(moveEvent) {
+            // console.log("onVScaleToolMove this - ", this);
+            if (!this.dragging || !that.target)
+                return;
+            const eventPoint = that.convertToLocal(moveEvent.global);
+            const referencePoint = that.target.position.clone();
+            // referencePoint.x = that.target.position.x + that.target.width / 2;
+            const distStart = calcDistance(this.eventStartPos, referencePoint);
+            const distEnd = calcDistance(eventPoint, referencePoint);
+            const direction = getDirection(referencePoint, this.eventStartPos, eventPoint);
+            this.rescaleFactor = (distEnd / distStart) * direction;
+            that.target.scale.y = this.targetStartScale.y * this.rescaleFactor;
+            that.update();
+        }
+        function onScaleYToolUp(upEvent) {
+            // console.log("onVScaleToolUp this, that - ", this, that);
+            this.off("globalpointermove", onScaleYToolMove);
+        }
+        // ------------</ ScaleYTool>---------------
+        // ------------<ScaleXTool>---------------
+        for (const handle of [this.scaleRHandle, this.scaleLHandle]) {
+            handle
+                .on("pointerdown", onScaleXToolDown)
+                .on("pointerup", onScaleXToolUp)
+                .on("pointerupoutside", onScaleXToolUp);
+        }
+        this.addChild(this.scaleRHandle);
+        function onScaleXToolDown(downEvent) {
+            // console.log("onHScaleToolDown this, that - ", this, that);
+            if (!that.target)
+                return;
+            this.on("globalpointermove", onScaleXToolMove);
+        }
+        function onScaleXToolMove(moveEvent) {
+            // console.log("onHScaleToolMove this - ", this);
+            if (!this.dragging || !that.target)
+                return;
+            const eventPoint = that.convertToLocal(moveEvent.global);
+            const referencePoint = that.target.position.clone();
+            // referencePoint.y = that.target.position.y + that.target.height / 2;
+            const distStart = calcDistance(this.eventStartPos, referencePoint);
+            const distEnd = calcDistance(eventPoint, referencePoint);
+            const direction = getDirection(referencePoint, this.eventStartPos, eventPoint);
+            const rescaleFactor = (distEnd / distStart) * direction;
+            that.target.scale.x = this.targetStartScale.x * rescaleFactor;
+            that.update();
+        }
+        function onScaleXToolUp(upEvent) {
+            // console.log("onHScaleToolUp this, that - ", this, that);
+            this.off("globalpointermove", onScaleXToolMove);
+        }
+        // ------------</ ScaleXTool>---------------
+        // ------------<RotateTool>---------------
+        this.rotateHandle
+            .on("pointerdown", onRotateToolDown)
+            .on("pointerup", onRotateToolUp)
+            .on("pointerupoutside", onRotateToolUp);
+        function onRotateToolDown(downEvent) {
+            // console.log("onRotateToolDown this, that - ", this, that);
+            if (!that.target)
+                return;
+            this.on("globalpointermove", onRotateToolMove);
+        }
+        function onRotateToolMove(moveEvent) {
+            // console.log("onRotateToolMove this, that - ", this, that);
+            if (!this.dragging || !that.target)
+                return;
+            const eventPoint = that.convertToLocal(moveEvent.global);
+            // the drag point is relative to the display object x,y position on the stage (it's registration point)
+            const relativeStartPoint = {
+                x: this.eventStartPos.x - that.target.x,
+                y: this.eventStartPos.y - that.target.y,
+            };
+            const relativeEndPoint = {
+                x: eventPoint.x - that.target.x,
+                y: eventPoint.y - that.target.y,
+            };
+            const startAngle = calcAngleRadians(relativeStartPoint.x, relativeStartPoint.y);
+            const endAngle = calcAngleRadians(relativeEndPoint.x, relativeEndPoint.y);
+            const deltaAngle = endAngle - startAngle;
+            let finalRotation = this.targetStartRotation + deltaAngle;
+            if (moveEvent.ctrlKey || moveEvent.metaKey) {
+                const snapAngle = 45;
+                let finalAngle = (finalRotation * 180) / Math.PI;
+                const proximity = Math.min(Math.abs(finalAngle % snapAngle), snapAngle - Math.abs(finalAngle % snapAngle));
+                const snapProximity = 6;
+                if (proximity < snapProximity) {
+                    finalAngle = Math.round(finalAngle / snapAngle) * snapAngle;
+                    finalRotation = (finalAngle * Math.PI) / 180;
+                }
+            }
+            that.target.rotation = finalRotation;
+            that.update();
+        }
+        function onRotateToolUp(upEvent) {
+            // console.log("onRotateToolUp this, that - ", this, that);
+            this.off("globalpointermove", onRotateToolMove);
+        }
+        // ------------</ RotateTool>---------------
+    }
+    addToolTip(shape, name, cursor) {
+        shape.on("pointerover", () => {
+            if (!this.dragging) {
+                this.setTitle(name);
+                this.setCursor(cursor);
+            }
+        });
+        shape.on("pointerout", () => {
+            if (!this.dragging) {
+                this.setTitle("");
+                this.setCursor("default");
+            }
+        });
+        shape.on("pointerupoutside", () => {
+            this.setTitle("");
+            this.setCursor("default");
+        });
+    }
+    handleHandleEvents(handle, that) {
+        // console.log("handleHandleEvents this, handle - ", this, handle.label);
+        function onHandleDown(e) {
+            // console.log("onHandleDown this - ", this);
+            that.dragging = true;
+            handle.dragging = true;
+            handle.eventStartPos = that.convertToLocal(e.global.clone());
+            handle.targetStartScale = that.target.scale.clone();
+            handle.targetStartRotation = that.target.rotation;
+            handle.on("globalpointermove", onHandleMove);
+            // graphic - fromPoint
+            if (that.debug) {
+                that.createHandleIndicatorTo(that.fromPoint, handle.eventStartPos.x, handle.eventStartPos.y);
+            }
+        }
+        function onHandleMove(e) {
+            // console.log("onHandleMove this - ", this);
+            const eventPoint = that.convertToLocal(e.global.clone());
+            if (that.debug) {
+                that.createHandleIndicatorTo(that.toPoint, eventPoint.x, eventPoint.y);
+                that.deScale(that.fromPoint);
+            }
+        }
+        function onHandleUp() {
+            // console.log("onHandleUp this - ", this);
+            that.update();
+            handle.off("globalpointermove", onHandleMove);
+            if (that.debug) {
+                that.fromPoint.clear();
+                that.toPoint.clear();
+            }
+            handle.dragging = false;
+            that.dragging = false;
+        }
+        handle
+            .on("pointerdown", onHandleDown)
+            .on("pointerup", onHandleUp)
+            .on("pointerupoutside", onHandleUp);
+    }
+    createHandle({ cursor, name, shape = "square", }) {
+        const handle = new Pixi.Graphics();
+        handle.label = this.id;
+        handle.eventMode = "dynamic";
+        handle.alpha = this.handleOpacity;
+        this.addToolTip(handle, name, cursor);
+        if (shape === "circle") {
+            handle.ellipse(this.controlsSize / 2, this.controlsSize / 2, this.controlsSize / 2, this.controlsSize / 2);
+        }
+        else
+            handle.rect(0, 0, this.controlsSize, this.controlsSize);
+        handle
+            .stroke({ width: this.controlsStrokeThickness, color: this.lineColor })
+            .fill(this.handleColor);
+        handle.pivot.set(this.controlsSize / 2, this.controlsSize / 2);
+        this.handleHandleEvents(handle, this);
+        return handle;
+    }
+    createHandleIndicatorTo(handle, x, y) {
+        x = x - this.position.x;
+        y = y - this.position.y;
+        const p1 = new Pixi.Point(x, y);
+        const origin = new Pixi.Point(0, 0);
+        const p = rotatePoint(p1, origin, -this.rotation);
+        x = p.x;
+        y = p.y;
+        const size = this.controlsSize * 1.25;
+        handle
+            .clear()
+            .moveTo(0, 0)
+            .lineTo(x, y)
+            .stroke({ width: 5, color: 0xffffff })
+            .rect(x - size / 2, y - size / 2, size, size)
+            .fill(0xffffff);
+        this.deScale(handle);
+    }
+    deScale(target) {
+        target.scale.set(1 / this.scale.x, 1 / this.scale.y);
+    }
+    // public methods:
+    select(target) {
+        if (!target) {
+            this.unselect();
+            return;
+        }
+        // console.log("select this - ", this);
+        this.target = target;
+        let _anchor;
+        if (this.target.pivot) {
+            // console.log("target has pivot", this.target.pivot);
+            // when you set a width of 100 on a sprites with image with actual width of 500, the sprite container is scaled down to 0.2 by default
+            _anchor = new Pixi.Point(this.target.pivot.x / Math.abs(this.target.width / this.target.scale.x), this.target.pivot.y /
+                Math.abs(this.target.height / this.target.scale.y));
+        }
+        else {
+            // console.log("no-pivot|no-anchor", this.target.pivot);
+            _anchor = new Pixi.Point(0.5, 0.5);
+        }
+        this._anchor = _anchor;
+        if (this.parent !== this.target.parent) {
+            // console.log("Different parent - switching transformer location position");
+            this.target.parent.addChild(this);
+        }
+        // console.log("Anchor - ", _anchor);
+        this.update();
+        this.visible = true;
+    }
+    unselect() {
+        this.target = null;
+        this.visible = false;
+        this.onUpdate();
+    }
+    update() {
+        if (!this.target) {
+            console.log("no target, returning...");
+            return;
+        }
+        this.onUpdate();
+        // copy object translation/transformation
+        const bounds = this.target.getLocalBounds();
+        this.width = bounds.width;
+        this.height = bounds.height;
+        this.scale.x = this.target.scale.x;
+        this.scale.y = this.target.scale.y;
+        this.x = this.target.x;
+        this.y = this.target.y;
+        this.rotation = this.target.rotation;
+        let _anchor;
+        if (this.target.pivot) {
+            // console.log("target has pivot", this.target.pivot);
+            _anchor = new Pixi.Point(this.target.pivot.x / Math.abs(this.target.width / this.scale.x), this.target.pivot.y / Math.abs(this.target.height / this.scale.y));
+        }
+        else {
+            _anchor = this._anchor || new Pixi.Point(0.5, 0.5);
+        }
+        this._anchor = _anchor;
+        // console.log("Anchor - ", _anchor);
+        this.left = -bounds.width * _anchor.x;
+        this.top = -bounds.height * _anchor.y;
+        this.bottom = bounds.height * (1 - _anchor.y);
+        this.right = bounds.width * (1 - _anchor.x);
+        // anchor mark
+        this.generateAnchorMark?.(this.anchorMark);
+        this.deScale(this.anchorMark);
+        // this.anchorMark!.rotation = -this.rotation;
+        const rotationHandlePos = {
+            x: (this.left + this.right) / 2,
+            y: this.top - 80 / Math.abs(this.scale.y),
+        };
+        // borders
+        this.border
+            .clear()
+            .moveTo(this.left, this.top)
+            .lineTo(this.right, this.top)
+            .moveTo(this.left, this.bottom)
+            .lineTo(this.right, this.bottom)
+            .stroke({
+            width: this.controlsStrokeThickness / this.scale.y,
+            color: this.lineColor,
+        })
+            .moveTo(this.left, this.top)
+            .lineTo(this.left, this.bottom)
+            .moveTo(this.right, this.top)
+            .lineTo(this.right, this.bottom)
+            .stroke({
+            width: this.controlsStrokeThickness / this.scale.x,
+            color: this.lineColor,
+        })
+            .moveTo(rotationHandlePos.x, this.top)
+            .lineTo(rotationHandlePos.x, rotationHandlePos.y)
+            .stroke({
+            width: this.controlsStrokeThickness / this.scale.x,
+            color: this.lineColor,
+        });
+        // draw move hit area
+        let anchorRectPoints = [];
+        const isAnchorOutside = this._anchor.x < 0 ||
+            this._anchor.y < 0 ||
+            this._anchor.x > 1 ||
+            this._anchor.y > 1;
+        if (isAnchorOutside) {
+            anchorRectPoints = [
+                new Pixi.Point(-this.controlsSize, -this.controlsSize),
+                new Pixi.Point(-this.controlsSize, this.controlsSize),
+                new Pixi.Point(this.controlsSize, this.controlsSize),
+                new Pixi.Point(this.controlsSize, -this.controlsSize),
+                new Pixi.Point(-this.controlsSize, -this.controlsSize),
+            ];
+        }
+        this.moveHandle.hitArea = new Pixi.Polygon(new Pixi.Point(this.left, this.top), new Pixi.Point(this.right, this.top), new Pixi.Point(this.right, this.bottom), new Pixi.Point(this.left, this.bottom), new Pixi.Point(this.left, this.top), ...anchorRectPoints);
+        this.scaleTLHandle.position.set(this.left, this.top);
+        this.scaleTRHandle.position.set(this.right, this.top);
+        this.scaleBRHandle.position.set(this.right, this.bottom);
+        this.scaleBLHandle.position.set(this.left, this.bottom);
+        this.scaleTHandle.position.set(this.left + bounds.width / 2, this.top);
+        this.scaleRHandle.position.set(this.right, this.top + bounds.height / 2);
+        this.scaleBHandle.position.set(this.left + bounds.width / 2, this.bottom);
+        this.scaleLHandle.position.set(this.left, this.top + bounds.height / 2);
+        this.rotateHandle.position.set(rotationHandlePos.x, rotationHandlePos.y);
+        const allHandles = [
+            this.scaleTLHandle,
+            this.scaleTRHandle,
+            this.scaleBRHandle,
+            this.scaleBLHandle,
+            this.scaleTHandle,
+            this.scaleRHandle,
+            this.scaleBHandle,
+            this.scaleLHandle,
+            this.rotateHandle,
+        ];
+        // descale all handles
+        allHandles.forEach((handle) => {
+            this.deScale(handle);
+        });
+    }
+    setTitle(title) {
+        title = title || "";
+        this.accessibleTitle = title;
+    }
+    setCursor(cursor) {
+        const cursors = [
+            "e-resize",
+            "se-resize",
+            "s-resize",
+            "sw-resize",
+            "w-resize",
+            "nw-resize",
+            "n-resize",
+            "ne-resize",
+        ];
+        const index = cursors.indexOf(cursor);
+        if (index >= 0) {
+            const angle = 45;
+            let rotation = this.target.angle;
+            rotation = rotation + angle / 2;
+            let newIndex = index + Math.floor(rotation / angle);
+            newIndex = newIndex % cursors.length;
+            document.body.style.cursor = cursors[newIndex];
+        }
+        else {
+            document.body.style.cursor = cursor;
+        }
+    }
+    generateAnchorMark(graphic) {
+        const scale = 2;
+        const anchorInnerRadius = this.controlsSize * 0.125 * scale;
+        const anchorOuterRadius = this.controlsSize * 0.625 * scale;
+        graphic
+            .clear()
+            .circle(0, 0, this.controlsSize * 0.375 * scale)
+            .moveTo(0, anchorInnerRadius)
+            .lineTo(0, anchorOuterRadius)
+            .moveTo(-anchorInnerRadius, 0)
+            .lineTo(-anchorOuterRadius, 0)
+            .moveTo(0, -anchorInnerRadius)
+            .lineTo(0, -anchorOuterRadius)
+            .moveTo(anchorInnerRadius, 0)
+            .lineTo(anchorOuterRadius, 0)
+            .fill(0xff0000)
+            .stroke(0x111111);
+    }
+    get _target() {
+        return this.target;
+    }
+    get id() {
+        return this._id;
+    }
+    cleanup() { }
+    convertToLocal(point) {
+        if (this.target) {
+            const p = this.target.parent.toLocal(point);
+            return p;
+        }
+        return point;
+    }
+}