be1f889211
* remove unfinished polygon and remove selectable for shapes in polygon mode * make group and polygon position remain inside canvas area * click through transparent area in grouped object * add some shortcuts for basic usages * tools button icon in center & switch mode border * fix load svg image * basic rtl support, panzoom have issues in rtl mode * better zoom option both in ltr and rtl * handle zoom event in mask editor * add h button to handle toggle mask * add more mime type * use capital M (shift+m) for toggle mask * allow io shortcuts in mask editor only * make other shapes also remain in canvas bound area * better zoom implementation, zoom from center add zoom to resize event listener * add a border to corner to handle blend of control * add refresh button to go to selection menu * add tooltip to shortcuts and also add shortcut for other tools * make opacity remain in same state when toggled on * opacity for group/ungroup objects * update shortcuts implementation
108 lines
2.8 KiB
TypeScript
108 lines
2.8 KiB
TypeScript
// Copyright: Ankitects Pty Ltd and contributors
|
|
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
|
|
import { fabric } from "fabric";
|
|
import { opacityStateStore } from "image-occlusion/store";
|
|
import { get } from "svelte/store";
|
|
|
|
import { BORDER_COLOR, SHAPE_MASK_COLOR, stopDraw } from "./lib";
|
|
import { undoStack } from "./tool-undo-redo";
|
|
|
|
export const drawRectangle = (canvas: fabric.Canvas): void => {
|
|
canvas.selectionColor = "rgba(0, 0, 0, 0)";
|
|
let rect, isDown, origX, origY;
|
|
|
|
stopDraw(canvas);
|
|
|
|
canvas.on("mouse:down", function(o) {
|
|
if (o.target) {
|
|
return;
|
|
}
|
|
isDown = true;
|
|
|
|
const pointer = canvas.getPointer(o.e);
|
|
origX = pointer.x;
|
|
origY = pointer.y;
|
|
|
|
rect = new fabric.Rect({
|
|
id: "rect-" + new Date().getTime(),
|
|
left: origX,
|
|
top: origY,
|
|
originX: "left",
|
|
originY: "top",
|
|
width: pointer.x - origX,
|
|
height: pointer.y - origY,
|
|
angle: 0,
|
|
fill: SHAPE_MASK_COLOR,
|
|
transparentCorners: false,
|
|
selectable: true,
|
|
stroke: BORDER_COLOR,
|
|
strokeWidth: 1,
|
|
strokeUniform: true,
|
|
noScaleCache: false,
|
|
opacity: get(opacityStateStore) ? 0.4 : 1,
|
|
});
|
|
canvas.add(rect);
|
|
});
|
|
|
|
canvas.on("mouse:move", function(o) {
|
|
if (!isDown) {
|
|
return;
|
|
}
|
|
const pointer = canvas.getPointer(o.e);
|
|
const x = pointer.x;
|
|
const y = pointer.y;
|
|
|
|
if (x < origX) {
|
|
rect.set({ originX: "right" });
|
|
} else {
|
|
rect.set({ originX: "left" });
|
|
}
|
|
|
|
if (y < origY) {
|
|
rect.set({ originY: "bottom" });
|
|
} else {
|
|
rect.set({ originY: "top" });
|
|
}
|
|
|
|
rect.set({
|
|
width: Math.abs(x - rect.left),
|
|
height: Math.abs(y - rect.top),
|
|
});
|
|
|
|
canvas.renderAll();
|
|
});
|
|
|
|
canvas.on("mouse:up", function() {
|
|
isDown = false;
|
|
// probably changed from rectangle to ellipse
|
|
if (!rect) {
|
|
return;
|
|
}
|
|
if (rect.width < 5 || rect.height < 5) {
|
|
canvas.remove(rect);
|
|
rect = undefined;
|
|
return;
|
|
}
|
|
|
|
if (rect.originX === "right") {
|
|
rect.set({
|
|
originX: "left",
|
|
left: rect.left - rect.width + rect.strokeWidth,
|
|
});
|
|
}
|
|
|
|
if (rect.originY === "bottom") {
|
|
rect.set({
|
|
originY: "top",
|
|
top: rect.top - rect.height + rect.strokeWidth,
|
|
});
|
|
}
|
|
|
|
rect.setCoords();
|
|
canvas.setActiveObject(rect);
|
|
undoStack.onObjectAdded(rect.id);
|
|
rect = undefined;
|
|
});
|
|
};
|