import Konva from "konva";
|
|
import { IconRotate } from "@humansignal/icons";
|
|
const EVENTS_NAME = "tr-konva";
|
|
// Copies of local methods from Konva's original implementation
|
function getCenter(shape) {
|
return {
|
x: shape.x + (shape.width / 2) * Math.cos(shape.rotation) + (shape.height / 2) * Math.sin(-shape.rotation),
|
y: shape.y + (shape.height / 2) * Math.cos(shape.rotation) + (shape.width / 2) * Math.sin(shape.rotation),
|
};
|
}
|
|
function rotateAroundPoint(shape, angleRad, point) {
|
const x = point.x + (shape.x - point.x) * Math.cos(angleRad) - (shape.y - point.y) * Math.sin(angleRad);
|
const y = point.y + (shape.x - point.x) * Math.sin(angleRad) + (shape.y - point.y) * Math.cos(angleRad);
|
|
return {
|
...shape,
|
rotation: shape.rotation + angleRad,
|
x,
|
y,
|
};
|
}
|
|
function rotateAroundCenter(shape, deltaRad) {
|
const center = getCenter(shape);
|
|
return rotateAroundPoint(shape, deltaRad, center);
|
}
|
|
function getSnap(snaps, newRotationRad, tol) {
|
let snapped = newRotationRad;
|
|
for (let i = 0; i < snaps.length; i++) {
|
const angle = Konva.getAngle(snaps[i]);
|
|
const absDiff = Math.abs(angle - newRotationRad) % (Math.PI * 2);
|
const dif = Math.min(absDiff, Math.PI * 2 - absDiff);
|
|
if (dif < tol) {
|
snapped = angle;
|
}
|
}
|
return snapped;
|
}
|
|
class LSTransformer extends Konva.Transformer {
|
isMouseOver = false;
|
isMouseDown = false;
|
|
initialRotationDelta = 0;
|
origin;
|
|
constructor(props) {
|
super(props);
|
|
if (props.rotateEnabled) this.createRotateButton();
|
}
|
|
// Here starts the configuration of the rotation tool
|
createRotateButton() {
|
const rotateList = this.refreshRotationList();
|
|
for (const obj in rotateList) {
|
const rotateButton = new Konva.Circle({
|
radius: 20,
|
name: `rotate-${obj}`,
|
dragDistance: 0,
|
draggable: true,
|
x: rotateList[obj].x,
|
y: rotateList[obj].y,
|
});
|
|
this.add(rotateButton);
|
rotateButton.moveToBottom(); // to not overlap other controls
|
|
rotateButton.on("mousedown touchstart", this.handleMouseDown);
|
|
rotateButton.on("mouseover", () => {
|
if (!this.isMouseDown) {
|
this.getStage().content.style.cursor = `url(${IconRotate}) 16 16, pointer`;
|
}
|
|
this.isMouseOver = true;
|
});
|
|
rotateButton.on("mouseout", () => {
|
this.isMouseOver = false;
|
|
if (!this.isMouseDown) {
|
this.getStage().content.style.cursor = "";
|
}
|
});
|
|
rotateButton.on("dragstart", (e) => {
|
const anchorNode = this.findOne(`.${this._movingAnchorName}`);
|
|
anchorNode.stopDrag();
|
e.cancelBubble = true;
|
});
|
|
rotateButton.on("dragend", (e) => {
|
e.cancelBubble = true;
|
});
|
}
|
}
|
|
handleMouseDown = (e) => {
|
const stage = this.getStage();
|
const pp = stage?.getPointerPosition();
|
|
if (!stage || !pp) return;
|
|
const shape = this._getNodeRect();
|
const origin = getCenter(shape);
|
const dx = pp.x - origin.x;
|
const dy = pp.y - origin.y;
|
const azimuth = Math.PI / 2 - Math.atan2(-dy, dx);
|
|
stage.content.style.cursor = `url(${IconRotate}) 16 16, pointer`;
|
this.isMouseDown = true;
|
this._movingAnchorName = e.target.name().split(" ")[0];
|
|
// we save angle between vector to current pointer and shape rotation
|
// and we keep this angle the same during mousemove by changing shape rotation
|
this.initialRotationDelta = azimuth - shape.rotation;
|
this.origin = origin;
|
|
if (window) {
|
window.addEventListener("mousemove", this.handleMouseMove);
|
window.addEventListener("touchmove", this.handleMouseMove);
|
window.addEventListener("mouseup", this.handleMouseUp, true);
|
window.addEventListener("touchend", this.handleMouseUp, true);
|
}
|
|
this._fire("transformstart", { evt: e, target: this.getNode() });
|
this._nodes.forEach((target) => {
|
target._fire("transformstart", { evt: e, target });
|
});
|
};
|
|
handleMouseUp = (e) => {
|
this.isMouseDown = false;
|
this.origin = undefined;
|
|
if (!this.isMouseOver) {
|
this.getStage().content.style.cursor = "";
|
}
|
|
if (window) {
|
window.removeEventListener("mousemove", this.handleMouseMove);
|
window.removeEventListener("touchmove", this.handleMouseMove);
|
window.removeEventListener("mouseup", this.handleMouseUp, true);
|
window.removeEventListener("touchend", this.handleMouseUp, true);
|
}
|
|
const node = this.getNode();
|
|
this._fire("transformend", { evt: e, target: node });
|
if (node) {
|
this._nodes.forEach((target) => {
|
target._fire("transformend", { evt: e, target });
|
});
|
}
|
this._movingAnchorName = "";
|
};
|
|
handleMouseMove = (e) => {
|
const stage = this.getStage();
|
|
if (!this.isMouseDown || !this.origin || !stage) return;
|
|
// register coordinates outside the stage into the stage
|
stage.setPointersPositions(e);
|
const pp = stage.getPointerPosition();
|
const shape = this._getNodeRect();
|
|
if (!pp) return;
|
|
const dx = pp.x - this.origin.x;
|
const dy = pp.y - this.origin.y;
|
// @todo why such signs? but they produce correct angles in every quadrant
|
const azimuth = Math.PI / 2 - Math.atan2(-dy, dx);
|
|
const newRotation = azimuth - this.initialRotationDelta;
|
|
// in case we have rotation snap enabled
|
const tol = Konva.getAngle(this.rotationSnapTolerance());
|
const snappedRot = getSnap(this.rotationSnaps(), newRotation, tol);
|
const diff = snappedRot - shape.rotation;
|
const rotated = rotateAroundCenter(shape, diff);
|
|
this._fitNodesInto(rotated, e);
|
};
|
|
refreshRotationList() {
|
return {
|
"top-left": {
|
x: 0,
|
y: 0,
|
},
|
"top-right": {
|
x: this.getWidth(),
|
y: 0,
|
},
|
"bottom-left": {
|
x: 0,
|
y: this.getHeight(),
|
},
|
"bottom-right": {
|
x: this.getWidth(),
|
y: this.getHeight(),
|
},
|
};
|
}
|
|
// Here starts override methods from LSTransform
|
|
get _outerBack() {
|
return this.getStage()?.findOne(this.attrs.backSelector);
|
}
|
|
setNodes(nodes = []) {
|
super.setNodes(nodes);
|
|
if (this._outerBack) {
|
this._proxyDrag(this._outerBack);
|
}
|
return this;
|
}
|
|
detach() {
|
this._outerBack?.off(`.${EVENTS_NAME}`);
|
|
super.detach();
|
}
|
|
update() {
|
this.refreshRotationList();
|
|
const { x, y, width, height } = this._getNodeRect();
|
const rotation = this.rotation();
|
const outerBack = this._outerBack;
|
const rotateList = this.refreshRotationList();
|
|
for (const obj in rotateList) {
|
const anchorNode = this.findOne(`.rotate-${obj}`);
|
|
if (anchorNode) {
|
anchorNode
|
.setAttrs({
|
x: rotateList[obj].x,
|
y: rotateList[obj].y,
|
})
|
.getLayer()
|
.batchDraw();
|
}
|
}
|
|
super.update();
|
|
if (outerBack) {
|
const backAbsScale = this.getAbsoluteScale();
|
const trAbsScale = outerBack.getAbsoluteScale();
|
const scale = {
|
x: backAbsScale.x / trAbsScale.x,
|
y: backAbsScale.y / trAbsScale.y,
|
};
|
|
outerBack
|
.setAttrs({
|
x: (x - this.getStage().getAttr("x")) * scale.x,
|
y: (y - this.getStage().getAttr("y")) * scale.y,
|
width: width * scale.x,
|
height: height * scale.y,
|
rotation,
|
})
|
.getLayer()
|
.batchDraw();
|
}
|
}
|
}
|
|
Konva.LSTransformer = LSTransformer;
|
|
export default "LSTransformer";
|
