2021-10-25 20:23:06 +03:00
|
|
|
const ToolManager = (() => {
|
2021-11-09 14:19:57 +03:00
|
|
|
tools = {};
|
2021-11-09 14:53:19 +03:00
|
|
|
isPanning = false;
|
2021-11-09 14:19:57 +03:00
|
|
|
|
|
|
|
tools["brush"] = new BrushTool("brush", {type: 'html'}, switchTool);
|
|
|
|
tools["eraser"] = new EraserTool("eraser", {type: 'html'}, switchTool);
|
|
|
|
tools["rectangle"] = new RectangleTool("rectangle", {type: 'html'}, switchTool);
|
|
|
|
tools["line"] = new LineTool("line", {type: 'html'}, switchTool);
|
2022-01-23 14:41:42 +03:00
|
|
|
tools["ellipse"] = new EllipseTool("ellipse", {type: 'cursor', style: 'crosshair'}, switchTool);
|
2021-11-09 14:19:57 +03:00
|
|
|
tools["fill"] = new FillTool("fill", {type: 'cursor', style: 'crosshair'}, switchTool);
|
2021-11-01 14:31:09 +03:00
|
|
|
|
2022-01-08 06:45:35 +03:00
|
|
|
tools["eyedropper"] = new EyeDropperTool("eyedropper", {type: 'cursor', style: 'crosshair'}, switchTool);
|
2021-11-09 14:19:57 +03:00
|
|
|
tools["pan"] = new PanTool("pan", {type: 'custom'}, switchTool);
|
|
|
|
tools["zoom"] = new ZoomTool("zoom", {type:'custom'});
|
|
|
|
|
|
|
|
tools["moveselection"] = new MoveSelectionTool("moveselection",
|
|
|
|
{type:'cursor', style:'crosshair'}, switchTool, tools["brush"]);
|
|
|
|
tools["rectselect"] = new RectangularSelectionTool("rectselect",
|
|
|
|
{type: 'cursor', style:'crosshair'}, switchTool, tools["moveselection"]);
|
2021-12-27 21:40:23 +03:00
|
|
|
tools["lassoselect"] = new LassoSelectionTool("lassoselect",
|
|
|
|
{type: 'cursor', style:'crosshair'}, switchTool, tools["moveselection"]);
|
2022-01-10 01:53:28 +03:00
|
|
|
tools["magicwand"] = new MagicWandTool("magicwand",
|
2022-01-11 01:37:21 +03:00
|
|
|
{type: 'cursor', style:'crosshair'}, switchTool, tools["moveselection"]);
|
2021-11-09 00:25:30 +03:00
|
|
|
|
2021-11-09 14:19:57 +03:00
|
|
|
currTool = tools["brush"];
|
2021-10-31 20:03:21 +03:00
|
|
|
currTool.onSelect();
|
2021-12-06 19:37:43 +03:00
|
|
|
currFile.canvasView.style.cursor = 'default';
|
2021-10-25 20:23:06 +03:00
|
|
|
|
2021-10-27 11:02:21 +03:00
|
|
|
Events.on("mouseup", window, onMouseUp);
|
|
|
|
Events.on("mousemove", window, onMouseMove);
|
|
|
|
Events.on("mousedown", window, onMouseDown);
|
2021-12-12 20:37:16 +03:00
|
|
|
Events.on("wheel", window, onMouseWheel);
|
2021-11-01 14:31:09 +03:00
|
|
|
|
2022-01-22 14:18:10 +03:00
|
|
|
// Assign a selection tool to the move tool
|
|
|
|
tools["moveselection"].selectionTool = tools["lassoselect"];
|
|
|
|
|
2021-11-09 14:53:19 +03:00
|
|
|
// Bind tool shortcuts
|
2021-11-09 14:19:57 +03:00
|
|
|
Events.onCustom("tool-shortcut", onShortcut);
|
|
|
|
|
|
|
|
function onShortcut(tool) {
|
2021-12-07 14:11:40 +03:00
|
|
|
if (!EditorState.documentCreated || Dialogue.isOpen())
|
2021-12-06 13:26:42 +03:00
|
|
|
return;
|
2021-11-09 14:19:57 +03:00
|
|
|
switchTool(tools[tool]);
|
|
|
|
}
|
|
|
|
|
2021-11-01 14:31:09 +03:00
|
|
|
function onMouseWheel(mouseEvent) {
|
2021-12-07 14:11:40 +03:00
|
|
|
if (!EditorState.documentCreated || Dialogue.isOpen())
|
2021-12-06 13:26:42 +03:00
|
|
|
return;
|
|
|
|
|
2022-03-23 15:47:57 +03:00
|
|
|
const isHoveringMenuElement = !!mouseEvent.path.find(n=>n.id && n.id.includes("-menu"));
|
|
|
|
if(isHoveringMenuElement)return;
|
|
|
|
|
2021-11-01 14:31:09 +03:00
|
|
|
let mousePos = Input.getCursorPosition(mouseEvent);
|
2021-11-09 14:19:57 +03:00
|
|
|
tools["zoom"].onMouseWheel(mousePos, mouseEvent.deltaY < 0 ? 'in' : 'out');
|
2021-11-01 14:31:09 +03:00
|
|
|
}
|
2021-10-27 11:02:21 +03:00
|
|
|
|
|
|
|
function onMouseDown(mouseEvent) {
|
2021-12-07 14:11:40 +03:00
|
|
|
if (!EditorState.documentCreated() || Dialogue.isOpen())
|
2021-10-27 11:02:21 +03:00
|
|
|
return;
|
|
|
|
|
|
|
|
let mousePos = Input.getCursorPosition(mouseEvent);
|
2021-10-31 14:49:38 +03:00
|
|
|
|
2021-11-09 01:12:51 +03:00
|
|
|
if (!Input.isDragging()) {
|
|
|
|
switch(mouseEvent.which) {
|
|
|
|
case 1:
|
2021-11-09 14:53:19 +03:00
|
|
|
if (Input.isSpacePressed()) {
|
|
|
|
tools["pan"].onStart(mousePos, mouseEvent.target);
|
|
|
|
}
|
|
|
|
else if (Input.isAltPressed()) {
|
|
|
|
tools["eyedropper"].onStart(mousePos, mouseEvent.target);
|
|
|
|
}
|
2021-12-13 00:50:21 +03:00
|
|
|
else if (!currFile.currentLayer.isLocked || !((Object.getPrototypeOf(currTool) instanceof DrawingTool))) {
|
2021-11-09 14:53:19 +03:00
|
|
|
currTool.onStart(mousePos, mouseEvent.target);
|
|
|
|
}
|
2021-11-09 01:12:51 +03:00
|
|
|
break;
|
|
|
|
case 2:
|
2021-11-09 14:19:57 +03:00
|
|
|
tools["pan"].onStart(mousePos, mouseEvent.target);
|
2021-11-09 01:12:51 +03:00
|
|
|
break;
|
|
|
|
case 3:
|
|
|
|
currTool.onRightStart(mousePos, mouseEvent.target);
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
2021-10-27 11:02:21 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
function onMouseMove(mouseEvent) {
|
2021-12-07 14:11:40 +03:00
|
|
|
if (!EditorState.documentCreated() || Dialogue.isOpen())
|
2021-10-27 11:02:21 +03:00
|
|
|
return;
|
|
|
|
let mousePos = Input.getCursorPosition(mouseEvent);
|
|
|
|
// Call the hover event
|
|
|
|
currTool.onHover(mousePos, mouseEvent.target);
|
|
|
|
|
|
|
|
if (Input.isDragging()) {
|
2021-12-12 20:37:16 +03:00
|
|
|
switch (mouseEvent.buttons) {
|
2021-11-09 01:12:51 +03:00
|
|
|
case 1:
|
2021-11-09 14:53:19 +03:00
|
|
|
if (Input.isSpacePressed()) {
|
|
|
|
tools["pan"].onDrag(mousePos, mouseEvent.target);
|
|
|
|
}
|
|
|
|
else if (Input.isAltPressed()) {
|
|
|
|
tools["eyedropper"].onDrag(mousePos, mouseEvent.target);
|
|
|
|
}
|
2021-12-13 00:50:21 +03:00
|
|
|
else if (!currFile.currentLayer.isLocked || !((Object.getPrototypeOf(currTool) instanceof DrawingTool))){
|
2021-11-09 14:53:19 +03:00
|
|
|
currTool.onDrag(mousePos, mouseEvent.target);
|
|
|
|
}
|
2021-11-09 01:12:51 +03:00
|
|
|
break;
|
2021-12-12 20:37:16 +03:00
|
|
|
case 4:
|
2021-11-09 14:19:57 +03:00
|
|
|
tools["pan"].onDrag(mousePos, mouseEvent.target);
|
2021-11-09 01:12:51 +03:00
|
|
|
break;
|
2021-12-12 20:37:16 +03:00
|
|
|
case 2:
|
2021-11-09 01:12:51 +03:00
|
|
|
currTool.onRightDrag(mousePos, mouseEvent.target);
|
|
|
|
break;
|
|
|
|
default:
|
2022-02-23 19:16:23 +03:00
|
|
|
////console.log("wtf");
|
2021-11-09 01:12:51 +03:00
|
|
|
break;
|
|
|
|
}
|
2021-10-27 11:02:21 +03:00
|
|
|
}
|
|
|
|
}
|
2021-10-25 20:23:06 +03:00
|
|
|
|
2021-10-27 11:02:21 +03:00
|
|
|
function onMouseUp(mouseEvent) {
|
2022-01-29 23:36:25 +03:00
|
|
|
if (!EditorState.documentCreated || Dialogue.isOpen())
|
2021-10-27 11:02:21 +03:00
|
|
|
return;
|
|
|
|
let mousePos = Input.getCursorPosition(mouseEvent);
|
|
|
|
|
2021-11-09 01:12:51 +03:00
|
|
|
if (Input.isDragging()) {
|
|
|
|
switch(mouseEvent.which) {
|
|
|
|
case 1:
|
2021-11-09 14:53:19 +03:00
|
|
|
if (Input.isSpacePressed()) {
|
|
|
|
tools["pan"].onEnd(mousePos, mouseEvent.target);
|
|
|
|
}
|
|
|
|
else if (Input.isAltPressed()) {
|
|
|
|
tools["eyedropper"].onEnd(mousePos, mouseEvent.target);
|
|
|
|
}
|
2021-12-13 00:50:21 +03:00
|
|
|
else if (!currFile.currentLayer.isLocked || !((Object.getPrototypeOf(currTool) instanceof DrawingTool))) {
|
2021-12-29 00:51:18 +03:00
|
|
|
currTool.onEnd(mousePos, mouseEvent.target);
|
2021-11-09 14:53:19 +03:00
|
|
|
}
|
2021-11-09 01:12:51 +03:00
|
|
|
break;
|
|
|
|
case 2:
|
2021-12-29 00:51:18 +03:00
|
|
|
tools["pan"].onEnd(mousePos, mouseEvent.target);
|
2021-11-09 01:12:51 +03:00
|
|
|
break;
|
|
|
|
case 3:
|
|
|
|
currTool.onRightEnd(mousePos, mouseEvent.target);
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
break;
|
|
|
|
}
|
2021-10-27 11:02:21 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function currentTool() {
|
|
|
|
return currTool;
|
|
|
|
}
|
|
|
|
|
2022-01-22 14:18:10 +03:00
|
|
|
function switchTool(newTool, event) {
|
2021-10-27 11:43:51 +03:00
|
|
|
currTool.onDeselect();
|
|
|
|
currTool = newTool;
|
|
|
|
currTool.onSelect();
|
2022-01-22 14:18:10 +03:00
|
|
|
|
|
|
|
if (event != undefined)
|
|
|
|
event.stopPropagation();
|
2021-10-27 11:43:51 +03:00
|
|
|
}
|
|
|
|
|
2021-10-27 11:02:21 +03:00
|
|
|
return {
|
|
|
|
currentTool
|
2021-10-25 20:23:06 +03:00
|
|
|
}
|
2021-10-27 11:02:21 +03:00
|
|
|
})();
|