AlekPet
cb57aa8161
Update deisgn settings Speech & Recognition and save recording audio Add button abort, chancel recognition and save recod audio Button stop, stoped recognation and get result and save recod audio Small fix global utils.js Updates REAMDE's Other small fixes...
2740 lines
84 KiB
JavaScript
2740 lines
84 KiB
JavaScript
/*
|
|
* Title: PainterNode ComflyUI from ControlNet
|
|
* Author: AlekPet
|
|
* Version: 2024.09.25
|
|
* Github: https://github.com/AlekPet/ComfyUI_Custom_Nodes_AlekPet
|
|
*/
|
|
|
|
import { app } from "../../scripts/app.js";
|
|
import { api } from "../../scripts/api.js";
|
|
import { fabric } from "./lib/painternode/fabric.js";
|
|
import "./lib/painternode/mybrush.js";
|
|
import { svgSymmetryButtons } from "./lib/painternode/brushes.js";
|
|
import { toRGBA, getColorHEX, LS_Class } from "./lib/painternode/helpers.js";
|
|
import { PainterStorageDialog } from "./lib/painternode/dialogs.js";
|
|
import { addStylesheet } from "../../scripts/utils.js";
|
|
import {
|
|
showHide,
|
|
makeElement,
|
|
makeModal,
|
|
animateClick,
|
|
createWindowModal,
|
|
isEmptyObject,
|
|
THEMES_MODAL_WINDOW,
|
|
} from "./utils.js";
|
|
import { MyPaintManager } from "./lib/painternode/manager_mypaint.js";
|
|
|
|
// ================= FUNCTIONS ================
|
|
|
|
// Save settings in JSON file on the extension folder [big data settings includes images] if true else localStorage
|
|
const SaveSettingsJsonLS = localStorage.getItem(
|
|
"Comfy.Settings.alekpet.PainterNode.SaveSettingsJson",
|
|
false
|
|
);
|
|
let painters_settings_json = SaveSettingsJsonLS
|
|
? JSON.parse(SaveSettingsJsonLS)
|
|
: false;
|
|
//
|
|
|
|
const removeIcon =
|
|
"data:image/svg+xml,%3Csvg version='1.1' id='Ebene_1' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3C/defs%3E%3Crect x='125.3' y='264.6' width='350.378' height='349.569' style='fill: rgb(237, 0, 0); stroke: rgb(197, 2, 2);' rx='58.194' ry='58.194'%3E%3C/rect%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18' rx='32.772' ry='32.772'%3E%3C/rect%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179' rx='32.772' ry='32.772'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E";
|
|
|
|
const removeImg = document.createElement("img");
|
|
removeImg.src = removeIcon;
|
|
|
|
const convertIdClass = (text) => text.replaceAll(".", "_");
|
|
|
|
function renderIcon(icon) {
|
|
return function renderIcon(ctx, left, top, styleOverride, fabricObject) {
|
|
var size = this.cornerSize;
|
|
ctx.save();
|
|
ctx.translate(left, top);
|
|
ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
|
|
ctx.drawImage(icon, -size / 2, -size / 2, size, size);
|
|
ctx.restore();
|
|
};
|
|
}
|
|
|
|
function removeObject(eventData, transform) {
|
|
var target = transform.target;
|
|
var canvas = target.canvas;
|
|
canvas.remove(target);
|
|
canvas.requestRenderAll();
|
|
this.viewListObjects(this.list_objects_panel__items);
|
|
}
|
|
|
|
function resizeCanvas(node, sizes) {
|
|
const { width, height } = sizes ?? node.painter.currentCanvasSize;
|
|
|
|
node.painter.canvas.setDimensions({
|
|
width: width,
|
|
height: height,
|
|
});
|
|
|
|
node.painter.canvas.getElement().width = width;
|
|
node.painter.canvas.getElement().height = height;
|
|
|
|
node.painter.canvas.renderAll();
|
|
setTimeout(() => {
|
|
node.onResize();
|
|
app.graph.setDirtyCanvas(true, false);
|
|
}, 1000);
|
|
}
|
|
// ================= END FUNCTIONS ================
|
|
|
|
// ================= CLASS PAINTER ================
|
|
class Painter {
|
|
constructor(node, canvas) {
|
|
this.originX = 0;
|
|
this.originY = 0;
|
|
this.drawning = true;
|
|
this.mode = false;
|
|
this.type = "Brush";
|
|
|
|
this.locks = {
|
|
lockMovementX: false,
|
|
lockMovementY: false,
|
|
lockScalingX: false,
|
|
lockScalingY: false,
|
|
lockRotation: false,
|
|
};
|
|
|
|
this.currentCanvasSize = { width: 512, height: 512 };
|
|
this.maxNodeSize = 1024;
|
|
|
|
this.max_history_steps = 20;
|
|
this.undo_history = [];
|
|
this.redo_history = [];
|
|
|
|
// this.undo_history = this.node.LS_Cls.LS_Painters.undo_history || [];
|
|
// this.redo_history = this.node.LS_Cls.LS_Painters.redo_history || [];
|
|
|
|
this.fonts = {
|
|
Arial: "arial",
|
|
"Times New Roman": "Times New Roman",
|
|
Verdana: "verdana",
|
|
Georgia: "georgia",
|
|
Courier: "courier",
|
|
"Comic Sans MS": "comic sans ms",
|
|
Impact: "impact",
|
|
};
|
|
|
|
this.bringFrontSelected = true;
|
|
|
|
this.node = node;
|
|
this.history_change = false;
|
|
this.canvas = this.initCanvas(canvas);
|
|
this.image = node.widgets.find((w) => w.name === "image");
|
|
|
|
let default_value = this.image.value;
|
|
Object.defineProperty(this.image, "value", {
|
|
set: function (value) {
|
|
this._real_value = value;
|
|
},
|
|
|
|
get: function () {
|
|
let value = "";
|
|
if (this._real_value) {
|
|
value = this._real_value;
|
|
} else {
|
|
return default_value;
|
|
}
|
|
|
|
if (value.filename) {
|
|
let real_value = value;
|
|
value = "";
|
|
if (real_value.subfolder) {
|
|
value = real_value.subfolder + "/";
|
|
}
|
|
|
|
value += real_value.filename;
|
|
|
|
if (real_value.type && real_value.type !== "input")
|
|
value += ` [${real_value.type}]`;
|
|
}
|
|
return value;
|
|
},
|
|
});
|
|
}
|
|
|
|
initCanvas(canvasEl) {
|
|
this.canvas = new fabric.Canvas(canvasEl, {
|
|
isDrawingMode: true,
|
|
backgroundColor: "transparent",
|
|
width: 512,
|
|
height: 512,
|
|
enablePointerEvents: true,
|
|
containerClass: "canvas-container-painter",
|
|
});
|
|
|
|
this.canvas.backgroundColor = "#000000";
|
|
|
|
fabric.util.addListener(
|
|
this.canvas.upperCanvasEl,
|
|
"contextmenu",
|
|
function (e) {
|
|
e.preventDefault();
|
|
}
|
|
);
|
|
|
|
return this.canvas;
|
|
}
|
|
|
|
propertiesLS() {
|
|
let settingsNode = this.node.LS_Cls.LS_Painters.settings;
|
|
|
|
if (!settingsNode) {
|
|
settingsNode = this.node.LS_Cls.LS_Painters.settings = {
|
|
lsSavePainter: true,
|
|
pipingSettings: {
|
|
action: {
|
|
name: "background",
|
|
options: {},
|
|
},
|
|
pipingChangeSize: true,
|
|
pipingUpdateImage: true,
|
|
},
|
|
};
|
|
}
|
|
|
|
// Save canvas to localStorage if not exists
|
|
if (typeof settingsNode?.lsSavePainter !== "boolean") {
|
|
settingsNode.lsSavePainter = true;
|
|
}
|
|
|
|
// Piping settings localStorage if not exists
|
|
if (!settingsNode?.pipingSettings) {
|
|
settingsNode.pipingSettings = {
|
|
action: {
|
|
name: "background",
|
|
options: {},
|
|
},
|
|
pipingChangeSize: true,
|
|
pipingUpdateImage: true,
|
|
};
|
|
}
|
|
}
|
|
|
|
makeElements() {
|
|
const panelPaintBox = document.createElement("div");
|
|
panelPaintBox.innerHTML = `<div class="painter_manipulation_box" f_name="Locks" style="display:none;">
|
|
<div class="comfy-menu-btns">
|
|
<button id="lockMovementX" title="Lock move X">Lock X</button>
|
|
<button id="lockMovementY" title="Lock move Y">Lock Y</button>
|
|
<button id="lockScalingX" title="Lock scale X">Lock ScaleX</button>
|
|
<button id="lockScalingY" title="Lock scale Y">Lock ScaleY</button>
|
|
<button id="lockRotation" title="Lock rotate">Lock Rotate</button>
|
|
</div>
|
|
<div class="comfy-menu-btns">
|
|
<button id="zpos_BringForward" title="Moves an object or a selection up in stack of drawn objects">Bring Forward</button>
|
|
<button id="zpos_SendBackwards" title="Moves an object or a selection down in stack of drawn objects">Send Backwards</button>
|
|
<button id="zpos_BringToFront" title="Moves an object or the objects of a multiple selection to the top">Bring Front</button>
|
|
<button id="zpos_SendToBack" title="Moves an object or the objects of a multiple selection to the bottom">Send Back</button>
|
|
<button id="zpos_BringFrontSelected" title="Moves an object or the objects of a multiple selection to the top after mouse click" class="${
|
|
this.bringFrontSelected ? "active" : ""
|
|
}">Bring Up Always</button>
|
|
</div>
|
|
</div>
|
|
<div class="painter_drawning_box_property" style='display:block;'></div>
|
|
<div class="painter_drawning_box">
|
|
<div class="painter_mode_box fieldset_box comfy-menu-btns" f_name="Mode">
|
|
<button id="painter_change_mode" title="Enable selection mode">Selection</button>
|
|
<div class="list_objects_panel" style="display:none;">
|
|
<div class="list_objects_align">
|
|
<div class="list_objects_panel__items"></div>
|
|
<div class="painter_shapes_box_modify"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="painter_drawning_elements" style="display:block;">
|
|
<div class="painter_grid_style painter_shapes_box fieldset_box comfy-menu-btns" f_name="Shapes">
|
|
<button class="active" data-shape='Brush' title="Brush">B</button>
|
|
<button data-shape='Erase' title="Erase">E</button>
|
|
<button data-shape='Circle' title="Draw circle">◯</button>
|
|
<button data-shape='Rect' title="Draw rectangle">▭</button>
|
|
<button data-shape='Triangle' title="Draw triangle">△</button>
|
|
<button data-shape='Line' title="Draw line">|</button>
|
|
<button data-shape='Image' title="Add picture">P</button>
|
|
<button data-shape='Textbox' title="Add text">T</button>
|
|
</div>
|
|
<div class="painter_colors_box fieldset_box" f_name="Colors">
|
|
<div class="painter_grid_style painter_colors_alpha">
|
|
<span>Fill</span><span>Alpha</span>
|
|
<input id="fillColor" type="color" value="#FF00FF" title="Fill color">
|
|
<input id="fillColorTransparent" type="number" max="1.0" min="0" step="0.05" value="0.0" title="Alpha fill value">
|
|
</div>
|
|
<div class="painter_grid_style painter_colors_alpha">
|
|
<span>Stroke</span><span>Alpha</span>
|
|
<input id="strokeColor" type="color" value="#FFFFFF" title="Stroke color">
|
|
<input id="strokeColorTransparent" type="number" max="1.0" min="0" step="0.05" value="1.0" title="Stroke alpha value">
|
|
</div>
|
|
</div>
|
|
<div class="painter_stroke_box fieldset_box" f_name="Brush/Erase width">
|
|
<label for="strokeWidth"><span>Brush:</span><input id="strokeWidth" type="number" min="0" max="150" value="5" step="1" title="Brush width"></label>
|
|
<label for="eraseWidth"><span>Erase:</span><input id="eraseWidth" type="number" min="0" max="150" value="5" step="1" title="Erase width"></label>
|
|
</div>
|
|
<div class="painter_grid_style painter_bg_setting fieldset_box comfy-menu-btns" f_name="Background">
|
|
<input id="bgColor" type="color" value="#000000" data-label="BG" title="Background color">
|
|
<button bgImage="img_load" title="Add background image">IMG</button>
|
|
<button bgImage="img_reset" title="Remove background image">IMG <span style="color: var(--error-text);">✖</span></button>
|
|
</div>
|
|
<div class="painter_settings_box fieldset_box comfy-menu-btns" f_name="Settimgs">
|
|
<button id="painter_canvas_size" title="Set canvas size">Canvas size</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="painter_history_panel comfy-menu-btns">
|
|
<button id="history_undo" title="Undo" disabled>⟲</button>
|
|
<button id="history_redo" title="Redo" disabled>⟳</button>
|
|
</div>
|
|
`;
|
|
|
|
// Main panelpaint box
|
|
panelPaintBox.className = "panelPaintBox";
|
|
|
|
this.canvas.wrapperEl.appendChild(panelPaintBox);
|
|
// Manipulation box
|
|
this.manipulation_box = panelPaintBox.querySelector(
|
|
".painter_manipulation_box"
|
|
);
|
|
this.painter_drawning_box_property = panelPaintBox.querySelector(
|
|
".painter_drawning_box_property"
|
|
);
|
|
|
|
[this.undo_button, this.redo_button] = panelPaintBox.querySelectorAll(
|
|
".painter_history_panel button"
|
|
);
|
|
|
|
// Modify in change mode
|
|
this.painter_shapes_box_modify = panelPaintBox.querySelector(
|
|
".painter_shapes_box_modify"
|
|
);
|
|
this.painter_drawning_elements = panelPaintBox.querySelector(
|
|
".painter_drawning_elements"
|
|
);
|
|
[
|
|
this.painter_shapes_box,
|
|
this.painter_colors_box,
|
|
this.painter_stroke_box,
|
|
this.painter_bg_setting,
|
|
this.painter_settings_box,
|
|
] = this.painter_drawning_elements.children;
|
|
|
|
// Setting pipping modal window
|
|
this.mainSettings();
|
|
|
|
// Settings piping button
|
|
const mainSettingsNode = makeElement("button", {
|
|
style: "background: var(--comfy-input-bg);",
|
|
textContent: "Settings 🛠️",
|
|
title: "Show main settings model window",
|
|
onclick: (e) => animateClick(this.painter_wrapper_settings),
|
|
customSize: { w: 70, h: 25, fs: 10 },
|
|
});
|
|
this.painter_settings_box.append(mainSettingsNode);
|
|
|
|
this.change_mode = panelPaintBox.querySelector("#painter_change_mode");
|
|
this.painter_shapes_box = panelPaintBox.querySelector(
|
|
".painter_shapes_box"
|
|
);
|
|
this.strokeWidth = panelPaintBox.querySelector("#strokeWidth");
|
|
this.eraseWidth = panelPaintBox.querySelector("#eraseWidth");
|
|
this.strokeColor = panelPaintBox.querySelector("#strokeColor");
|
|
this.fillColor = panelPaintBox.querySelector("#fillColor");
|
|
|
|
this.list_objects_panel__items = panelPaintBox.querySelector(
|
|
".list_objects_panel__items"
|
|
);
|
|
|
|
this.strokeColorTransparent = panelPaintBox.querySelector(
|
|
"#strokeColorTransparent"
|
|
);
|
|
this.fillColorTransparent = panelPaintBox.querySelector(
|
|
"#fillColorTransparent"
|
|
);
|
|
|
|
this.bgColor = panelPaintBox.querySelector("#bgColor");
|
|
this.clear = panelPaintBox.querySelector("#clear");
|
|
|
|
this.painter_bg_setting = panelPaintBox.querySelector(
|
|
".painter_bg_setting"
|
|
);
|
|
|
|
this.buttonSetCanvasSize = panelPaintBox.querySelector(
|
|
"#painter_canvas_size"
|
|
);
|
|
|
|
this.bgImageFile = document.createElement("input");
|
|
Object.assign(this.bgImageFile, {
|
|
accept: "image/jpeg,image/png,image/webp",
|
|
type: "file",
|
|
style: "display:none",
|
|
});
|
|
|
|
this.painter_bg_setting.appendChild(this.bgImageFile);
|
|
this.changePropertyBrush();
|
|
this.createBrushesToolbar();
|
|
this.bindEvents();
|
|
}
|
|
|
|
setValueElementsLS() {
|
|
this.painter_wrapper_settings.remove();
|
|
this.mainSettings();
|
|
}
|
|
|
|
mainSettings() {
|
|
// Piping fieldset
|
|
const pipingSettingsBox = makeElement("fieldset", {
|
|
style:
|
|
"display: flex; flex-direction: column; gap: 5px; text-align: left; border-color: #0f84cd; border-radius: 4px;",
|
|
class: ["pipingSettingsBox"],
|
|
});
|
|
|
|
// LS change size piping
|
|
const labelPipingChangeSize = makeElement("label", {
|
|
textContent: "Change size:",
|
|
style: "font-size: 10px; display: block; text-align: right;",
|
|
title: "Change the canvas size equal to the input image",
|
|
});
|
|
|
|
const pipingChangeSize = makeElement("input", {
|
|
type: "checkbox",
|
|
class: ["pipingChangeSize_checkbox"],
|
|
checked:
|
|
this.node.LS_Cls.LS_Painters.settings?.pipingSettings
|
|
?.pipingChangeSize ?? true,
|
|
onchange: (e) => {
|
|
this.node.LS_Cls.LS_Painters.settings.pipingSettings.pipingChangeSize =
|
|
pipingChangeSize.checked;
|
|
this.node.LS_Cls.LS_Save();
|
|
},
|
|
});
|
|
|
|
pipingChangeSize.customSize = { w: 10, h: 10, fs: 10 };
|
|
labelPipingChangeSize.append(pipingChangeSize);
|
|
// end - LS change size piping
|
|
|
|
// Piping update image
|
|
const labelPipingUpdateImage = makeElement("label", {
|
|
textContent: "Update image:",
|
|
style: "font-size: 10px; display: block; text-align: right;",
|
|
title:
|
|
"Update the image when generating (needed to avoid updating the mask)",
|
|
});
|
|
|
|
const pipingUpdateImageCheckbox = makeElement("input", {
|
|
type: "checkbox",
|
|
class: ["pipingUpdateImage_checkbox"],
|
|
checked:
|
|
this.node.LS_Cls.LS_Painters.settings?.pipingSettings
|
|
?.pipingUpdateImage ?? true,
|
|
onchange: (e) => {
|
|
this.node.LS_Cls.LS_Painters.settings.pipingSettings.pipingUpdateImage =
|
|
pipingUpdateImageCheckbox.checked;
|
|
|
|
// Get hidden widget update_node
|
|
const update_node_widget = this.node.widgets.find(
|
|
(w) => w.name === "update_node"
|
|
);
|
|
update_node_widget.value = pipingUpdateImageCheckbox.checked;
|
|
this.node.LS_Cls.LS_Save();
|
|
},
|
|
});
|
|
|
|
pipingUpdateImageCheckbox.customSize = { w: 10, h: 10, fs: 10 };
|
|
labelPipingUpdateImage.append(pipingUpdateImageCheckbox);
|
|
// end - Piping update image
|
|
|
|
// === Settings box ===
|
|
|
|
// Function click on the radio and show/hide custom settings
|
|
function checkRadioOptionsSelect(currentTarget) {
|
|
if (currentTarget.value !== "image") {
|
|
other_options_radio.innerHTML = "";
|
|
} else {
|
|
if (!other_options_radio.querySelector(".custom_options_piping_box")) {
|
|
const custom_options_piping_box = makeElement("div", {
|
|
class: ["custom_options_piping_box"],
|
|
style:
|
|
"border: 1px solid #0069ff; padding: 6px; display: flex; flex-direction: column; gap: 3px; justify-content: center; align-items: flex-end; text-align: right; border-radius: 6px;",
|
|
});
|
|
|
|
// Scale option image
|
|
const scale = makeElement("input", {
|
|
type: "number",
|
|
value:
|
|
this.node.LS_Cls.LS_Painters.settings.pipingSettings.action
|
|
.options.scale ?? 1.0,
|
|
min: 0,
|
|
step: 0.01,
|
|
style: "width: 30%;",
|
|
onchange: (e) => {
|
|
this.node.LS_Cls.LS_Painters.settings.pipingSettings.action.options.scale =
|
|
+e.currentTarget.value;
|
|
this.node.LS_Cls.LS_Save();
|
|
},
|
|
});
|
|
|
|
const scaleLabel = makeElement("label", {
|
|
textContent: "Scale: ",
|
|
title: "Change image size (default: 1)",
|
|
});
|
|
scaleLabel.append(scale);
|
|
|
|
// sendToBack image canvas
|
|
const backwardsImage = makeElement("input", {
|
|
type: "checkbox",
|
|
checked:
|
|
this.node.LS_Cls.LS_Painters.settings.pipingSettings.action
|
|
.options.sendToBack ?? true,
|
|
onchange: (e) => {
|
|
this.node.LS_Cls.LS_Painters.settings.pipingSettings.action.options.sendToBack =
|
|
e.currentTarget.checked;
|
|
this.node.LS_Cls.LS_Save();
|
|
},
|
|
});
|
|
const sendToBackLabel = makeElement("label", {
|
|
textContent: "Send to back: ",
|
|
title: "Sending to back image on the canvas (default: true)",
|
|
});
|
|
sendToBackLabel.append(backwardsImage);
|
|
|
|
custom_options_piping_box.append(scaleLabel, sendToBackLabel);
|
|
|
|
other_options_radio.append(custom_options_piping_box);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Radios click
|
|
function radiosClick(e) {
|
|
const { currentTarget } = e;
|
|
checkRadioOptionsSelect.call(this, currentTarget);
|
|
|
|
this.node.LS_Cls.LS_Painters.settings.pipingSettings.action.name =
|
|
currentTarget.value;
|
|
this.node.LS_Cls.LS_Save();
|
|
}
|
|
|
|
const radio_name = `painter_radio_piping_${this.node.name.replace(
|
|
".png",
|
|
""
|
|
)}`;
|
|
|
|
const radios = [
|
|
{
|
|
title: "Past as background",
|
|
toast: "Set piping input image as backgound canvas",
|
|
value: "background",
|
|
},
|
|
{
|
|
title: "Past as image",
|
|
toast: "Set piping input image as image to the backend",
|
|
value: "image",
|
|
},
|
|
];
|
|
|
|
const other_options_radio = makeElement("div", {
|
|
class: ["painter_other_options_radio"],
|
|
});
|
|
|
|
const radiosElements = [];
|
|
radios.forEach((radio, idx) => {
|
|
const { title, toast, value } = radio;
|
|
const radioBox = makeElement("div", {
|
|
class: ["painter_radio_piping_box"],
|
|
});
|
|
|
|
const labelRadio = makeElement("label", {
|
|
class: ["painter_radio_piping_label"],
|
|
});
|
|
|
|
const radEl = makeElement("input", {
|
|
type: "radio",
|
|
name: radio_name,
|
|
title: toast,
|
|
id: `painter_radio_${value}`,
|
|
value: value,
|
|
onclick: (e) => radiosClick.call(this, e),
|
|
});
|
|
|
|
labelRadio.append(radEl, document.createTextNode(title));
|
|
radioBox.append(labelRadio);
|
|
radiosElements.push(radioBox);
|
|
|
|
if (
|
|
this.node.LS_Cls.LS_Painters.settings.pipingSettings.action.name ===
|
|
value
|
|
) {
|
|
radEl.checked = true;
|
|
checkRadioOptionsSelect.call(this, radEl);
|
|
}
|
|
});
|
|
|
|
pipingSettingsBox.append(
|
|
makeElement("legend", {
|
|
textContent: "Piping",
|
|
style: "color: rgb(15, 132, 205);",
|
|
}),
|
|
...radiosElements,
|
|
other_options_radio,
|
|
labelPipingChangeSize,
|
|
labelPipingUpdateImage
|
|
);
|
|
|
|
// LocalStorage fieldset
|
|
const lSettingsBoxSettingsBox = makeElement("fieldset", {
|
|
style:
|
|
"display: flex; flex-direction: column; gap: 5px; text-align: left; border-color: #ffb710; border-radius: 4px;",
|
|
class: ["lSettingsBoxSettingsBox"],
|
|
});
|
|
|
|
const labelLSSave = makeElement("label", {
|
|
textContent: "Save canvas:",
|
|
style: "font-size: 10px; display: block; text-align: right;",
|
|
title: "Save canvas to local storage",
|
|
});
|
|
|
|
const checkBoxLSSave = makeElement("input", {
|
|
type: "checkbox",
|
|
class: ["lsSave_checkbox"],
|
|
checked: this.node.LS_Cls.LS_Painters.settings?.lsSavePainter ?? true,
|
|
onchange: (e) => {
|
|
this.node.LS_Cls.LS_Painters.settings.lsSavePainter =
|
|
checkBoxLSSave.checked;
|
|
this.node.LS_Cls.LS_Save();
|
|
},
|
|
customSize: { w: 10, h: 10, fs: 10 },
|
|
});
|
|
|
|
labelLSSave.append(checkBoxLSSave);
|
|
lSettingsBoxSettingsBox.append(
|
|
makeElement("legend", {
|
|
textContent: "Local Storage",
|
|
style: "color: #ffb710;",
|
|
}),
|
|
labelLSSave
|
|
);
|
|
// end - LocalStorage fieldset
|
|
|
|
this.painter_wrapper_settings = createWindowModal({
|
|
textTitle: "Settings",
|
|
textBody: [pipingSettingsBox, lSettingsBoxSettingsBox],
|
|
stylesBox: {
|
|
borderColor: "#13e9c5ad",
|
|
boxShadow: "2px 2px 4px #13e9c5ad",
|
|
},
|
|
stylesClose: { background: "#13e9c5ad" },
|
|
stylesBody: { width: "100%", alignItems: "auto" },
|
|
});
|
|
|
|
this.canvas.wrapperEl.append(this.painter_wrapper_settings);
|
|
// === end - Settings box ===
|
|
}
|
|
|
|
clearCanvas() {
|
|
this.canvas.clear();
|
|
this.canvas.backgroundColor = this.bgColor.value || "#000000";
|
|
this.canvas.requestRenderAll();
|
|
|
|
this.addToHistory();
|
|
this.canvasSaveSettingsPainter();
|
|
}
|
|
|
|
viewListObjects(list_body) {
|
|
list_body.innerHTML = "";
|
|
|
|
let objectNames = [];
|
|
|
|
this.canvas.getObjects().forEach((o) => {
|
|
const type = o.type,
|
|
boxOb = makeElement("div", { class: ["viewlist__itembox"] }),
|
|
itemRemove = makeElement("img", {
|
|
src: removeIcon,
|
|
title: "Remove object",
|
|
}),
|
|
obEl = makeElement("button"),
|
|
countType = objectNames.filter((t) => t == type).length + 1,
|
|
text_value = !o.hasOwnProperty("mypaintlib")
|
|
? type + `_${countType}`
|
|
: `mypaint_${countType}`;
|
|
|
|
obEl.setAttribute("painter_object", text_value);
|
|
obEl.textContent = text_value;
|
|
|
|
objectNames.push(o.type);
|
|
|
|
obEl.addEventListener("click", (e) => {
|
|
// Style active
|
|
this.setActiveElement(obEl, list_body);
|
|
// Select element
|
|
this.canvas.discardActiveObject();
|
|
this.canvas.setActiveObject(o);
|
|
|
|
// Get position and size object
|
|
this.getPositionAndSize(o);
|
|
|
|
this.canvas.renderAll();
|
|
});
|
|
|
|
itemRemove.addEventListener("click", () => {
|
|
removeObject.call(this, null, { target: o });
|
|
this.canvas.renderAll();
|
|
this.uploadPaintFile(this.node.name);
|
|
});
|
|
|
|
boxOb.append(obEl, itemRemove);
|
|
list_body.append(boxOb);
|
|
});
|
|
}
|
|
|
|
getPositionAndSize(object) {
|
|
if (!this.elemX || !this.elemY) {
|
|
[this.elemX, this.elemY] = this.position_sizes_box.querySelectorAll(
|
|
"input[class*=painter_position]"
|
|
);
|
|
}
|
|
this.elemX.value = object.left;
|
|
this.elemY.value = object.top;
|
|
|
|
this.elemX.title = "Position X:" + object.left.toFixed(2);
|
|
this.elemY.title = "Position Y:" + object.top.toFixed(2);
|
|
}
|
|
|
|
clearLocks() {
|
|
try {
|
|
const locksElements =
|
|
this.manipulation_box.querySelectorAll("[id^=lock]");
|
|
if (locksElements) {
|
|
locksElements.forEach((element) => {
|
|
const id = element.id;
|
|
if (id) {
|
|
this.locks[id] = false;
|
|
element.classList.remove("active");
|
|
}
|
|
});
|
|
}
|
|
} catch (e) {
|
|
console.log("Clear locks error:" + e.message);
|
|
}
|
|
}
|
|
|
|
changeMode(b) {
|
|
let target = b.target,
|
|
nextElement = target.parentElement.nextElementSibling,
|
|
panelListObjects = target.nextElementSibling;
|
|
|
|
if (["Image", "Textbox"].includes(this.type)) {
|
|
this.drawning = true;
|
|
}
|
|
|
|
if (this.drawning) {
|
|
this.canvas.isDrawingMode = false;
|
|
this.drawning = false;
|
|
} else {
|
|
this.canvas.discardActiveObject();
|
|
this.canvas.isDrawingMode = this.drawning = true;
|
|
|
|
if (
|
|
!["Brush", "Erase", "BrushSymmetry", "Image", "Textbox"].includes(
|
|
this.type
|
|
)
|
|
)
|
|
this.canvas.isDrawingMode = false;
|
|
}
|
|
|
|
if (!this.mode) {
|
|
target.textContent = "Drawing";
|
|
target.title = "Enable drawing mode";
|
|
this.viewListObjects(this.list_objects_panel__items);
|
|
|
|
showHide({
|
|
elements: [this.manipulation_box, nextElement, panelListObjects],
|
|
});
|
|
|
|
showHide({
|
|
elements: [this.painter_drawning_box_property],
|
|
displayProp: "flex",
|
|
});
|
|
|
|
this.clearLocks();
|
|
|
|
// Make XY pos and scale
|
|
this.position_sizes_box = makeElement("div", {
|
|
class: ["painter_position_sizes_box", "fieldset_box"],
|
|
style: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
},
|
|
children: [
|
|
makeElement("label", {
|
|
children: [
|
|
makeElement("span", {
|
|
textContent: "X:",
|
|
style: { padding: "2px" },
|
|
}),
|
|
makeElement("input", {
|
|
class: ["painter_position_element_x"],
|
|
title: "Position X",
|
|
type: "number",
|
|
value: 0,
|
|
onchange: (e) => {
|
|
const object = this.canvas.getActiveObject();
|
|
if (+e.target.value) {
|
|
e.target.title = "Position X: " + e.target.value;
|
|
object.set({ left: +e.target.value });
|
|
object?.setCoords();
|
|
this.canvas.requestRenderAll();
|
|
}
|
|
},
|
|
}),
|
|
],
|
|
}),
|
|
makeElement("label", {
|
|
children: [
|
|
makeElement("span", {
|
|
textContent: "Y:",
|
|
style: { padding: "2px" },
|
|
}),
|
|
makeElement("input", {
|
|
class: ["painter_position_element_y"],
|
|
title: "Position Y",
|
|
type: "number",
|
|
value: 0,
|
|
onchange: (e) => {
|
|
const object = this.canvas.getActiveObject();
|
|
if (+e.target.value) {
|
|
e.target.title = "Position Y: " + e.target.value;
|
|
object.set({ top: +e.target.value });
|
|
object?.setCoords();
|
|
this.canvas.requestRenderAll();
|
|
}
|
|
},
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
});
|
|
|
|
this.position_sizes_box.setAttribute("f_name", "Position");
|
|
|
|
this.painter_shapes_box_modify.append(
|
|
this.position_sizes_box,
|
|
this.painter_colors_box,
|
|
this.painter_stroke_box
|
|
);
|
|
} else {
|
|
target.textContent = "Selection";
|
|
target.title = "Enable selection mode";
|
|
showHide({
|
|
elements: [this.manipulation_box, nextElement, panelListObjects],
|
|
});
|
|
|
|
showHide({
|
|
elements: [this.painter_drawning_box_property],
|
|
displayProp: "flex",
|
|
});
|
|
|
|
this.painter_shapes_box.insertAdjacentElement(
|
|
"afterend",
|
|
this.painter_colors_box
|
|
);
|
|
this.painter_colors_box.insertAdjacentElement(
|
|
"afterend",
|
|
this.painter_stroke_box
|
|
);
|
|
// Position and scale remove
|
|
this.position_sizes_box.remove();
|
|
}
|
|
|
|
this.canvas.discardActiveObject();
|
|
this.canvas.renderAll();
|
|
|
|
this.mode = !this.mode;
|
|
}
|
|
|
|
setActiveElement(element_active, parent) {
|
|
let elementActive = parent?.querySelector(".active");
|
|
if (elementActive) elementActive.classList.remove("active");
|
|
element_active.classList.add("active");
|
|
}
|
|
|
|
// Change properties brush and shapes, when change color and strokeWidth
|
|
changePropertyBrush(type = "Brush") {
|
|
if (["Brush", "BrushSymmetry", "BrushMyPaint"].includes(type)) {
|
|
if (type === "Brush" || type === "BrushSymmetry") {
|
|
}
|
|
|
|
if (type === "BrushMyPaint") {
|
|
this.MyBrushPaintManager.setColorBrush(this.strokeColor.value);
|
|
|
|
// Size brush
|
|
this.MyBrushPaintManager.setPropertyBrushValue(
|
|
this.strokeWidth.value,
|
|
"radius_logarithmic"
|
|
);
|
|
return;
|
|
}
|
|
|
|
this.canvas.freeDrawingBrush.color = toRGBA(
|
|
this.strokeColor.value,
|
|
this.strokeColorTransparent.value
|
|
);
|
|
this.canvas.freeDrawingBrush.width = parseInt(this.strokeWidth.value, 10);
|
|
}
|
|
|
|
if (type != "Erase" || (type == "Erase" && !this.drawning)) {
|
|
let a_obs = this.canvas.getActiveObjects();
|
|
if (a_obs) {
|
|
a_obs.forEach((a_o) => {
|
|
this.setActiveStyle(
|
|
"strokeWidth",
|
|
parseInt(this.strokeWidth.value, 10),
|
|
a_o
|
|
);
|
|
this.setActiveStyle(
|
|
"stroke",
|
|
toRGBA(this.strokeColor.value, this.strokeColorTransparent.value),
|
|
a_o
|
|
);
|
|
this.setActiveStyle(
|
|
"fill",
|
|
toRGBA(this.fillColor.value, this.fillColorTransparent.value),
|
|
a_o
|
|
);
|
|
});
|
|
}
|
|
} else {
|
|
this.canvas.freeDrawingBrush.width = parseInt(this.eraseWidth.value, 10);
|
|
}
|
|
|
|
this.canvas.renderAll();
|
|
}
|
|
|
|
// Make shape
|
|
shapeCreate({
|
|
type,
|
|
left,
|
|
top,
|
|
stroke,
|
|
fill,
|
|
strokeWidth,
|
|
points = [],
|
|
path = "",
|
|
}) {
|
|
let shape = null;
|
|
|
|
if (type == "Rect") {
|
|
shape = new fabric.Rect();
|
|
} else if (type == "Circle") {
|
|
shape = new fabric.Circle();
|
|
} else if (type == "Triangle") {
|
|
shape = new fabric.Triangle();
|
|
} else if (type == "Line") {
|
|
shape = new fabric.Line(points);
|
|
} else if (type == "Path") {
|
|
shape = new fabric.Path(path);
|
|
}
|
|
|
|
Object.assign(shape, {
|
|
angle: 0,
|
|
left: left,
|
|
top: top,
|
|
originX: "left",
|
|
originY: "top",
|
|
strokeWidth: strokeWidth,
|
|
stroke: stroke,
|
|
transparentCorners: false,
|
|
hasBorders: false,
|
|
hasControls: false,
|
|
radius: 1,
|
|
fill: type == "Path" ? false : fill,
|
|
});
|
|
|
|
return shape;
|
|
}
|
|
|
|
// Toolbars
|
|
createFontToolbar() {
|
|
const property_textbox = makeElement("div", {
|
|
class: ["property_textBox", "comfy-menu-btns"],
|
|
});
|
|
const buttonItalic = makeElement("button", {
|
|
dataset: { prop: "prop_fontStyle" },
|
|
title: "Italic",
|
|
style: "font-style:italic;",
|
|
textContent: "I",
|
|
});
|
|
const buttonBold = makeElement("button", {
|
|
dataset: { prop: "prop_fontWeight" },
|
|
title: "Bold",
|
|
style: "font-weight:bold;",
|
|
textContent: "B",
|
|
});
|
|
const buttonUnderline = makeElement("button", {
|
|
dataset: { prop: "prop_underline" },
|
|
title: "Underline",
|
|
style: "text-decoration: underline;",
|
|
textContent: "U",
|
|
});
|
|
const separator = makeElement("div", { class: ["separator"] });
|
|
const selectFontFamily = makeElement("select", {
|
|
class: ["font_family_select"],
|
|
});
|
|
|
|
for (let f in this.fonts) {
|
|
const option = makeElement("option");
|
|
if (f === "Arial") option.setAttribute("selected", true);
|
|
option.value = this.fonts[f];
|
|
option.textContent = f;
|
|
selectFontFamily.appendChild(option);
|
|
}
|
|
|
|
// Select front event
|
|
selectFontFamily.onchange = (e) => {
|
|
if (this.getActiveStyle("fontFamily") != selectFontFamily.value)
|
|
this.setActiveStyle("fontFamily", selectFontFamily.value);
|
|
};
|
|
|
|
property_textbox.append(
|
|
buttonItalic,
|
|
buttonBold,
|
|
buttonUnderline,
|
|
separator,
|
|
selectFontFamily
|
|
);
|
|
this.painter_drawning_box_property.append(property_textbox);
|
|
}
|
|
|
|
createBrushesToolbar() {
|
|
// First panel
|
|
const property_brushesBox = makeElement("div", {
|
|
class: ["property_brushesBox", "comfy-menu-btns"],
|
|
});
|
|
|
|
const BrushMyPaint = makeElement("button", {
|
|
dataset: [{ shape: "BrushMyPaint" }, { prop: "prop_BrushMyPaint" }],
|
|
title: "MyPaint Brush",
|
|
textContent: "MyPaint",
|
|
});
|
|
BrushMyPaint.customSize = { w: 50, h: 25, fs: 10 };
|
|
|
|
const buttonBrushSymmetry = makeElement("button", {
|
|
dataset: [{ shape: "BrushSymmetry" }, { prop: "prop_BrushSymmetry" }],
|
|
title: "Symmetry Brush",
|
|
textContent: "S",
|
|
});
|
|
|
|
const separator = makeElement("div", { class: ["separator"] });
|
|
|
|
// Second panel setting brushes
|
|
this.property_brushesSecondBox = makeElement("div", {
|
|
class: ["property_brushesSecondBox"],
|
|
});
|
|
|
|
property_brushesBox.append(
|
|
BrushMyPaint,
|
|
buttonBrushSymmetry,
|
|
separator,
|
|
this.property_brushesSecondBox
|
|
);
|
|
|
|
this.painter_drawning_box_property.append(property_brushesBox);
|
|
}
|
|
|
|
async createToolbarOptions(type) {
|
|
this.property_brushesSecondBox.innerHTML = "";
|
|
if (type === "BrushSymmetry" || type === "BrushMyPaint") {
|
|
const options = this.canvas.freeDrawingBrush?._options;
|
|
Object.keys(options).forEach((symoption, indx) => {
|
|
const current = options[symoption];
|
|
const buttonOpt = makeElement("button", {
|
|
innerHTML: svgSymmetryButtons[indx],
|
|
dataset: { prop: `prop_symmetry_${indx}` },
|
|
title: current.type,
|
|
});
|
|
|
|
if (current.enable) buttonOpt.classList.add("active");
|
|
|
|
buttonOpt.optindex = indx;
|
|
this.property_brushesSecondBox.append(buttonOpt);
|
|
});
|
|
|
|
// MyPaintBrush
|
|
if (type === "BrushMyPaint") {
|
|
this.MyBrushPaintManager.appendElements(this.property_brushesSecondBox);
|
|
}
|
|
}
|
|
|
|
app.graph.setDirtyCanvas(true, false);
|
|
}
|
|
// end - Toolbars
|
|
|
|
selectPropertyToolbar(type) {
|
|
this.painter_drawning_box_property.innerHTML = "";
|
|
if (["Textbox", "Brush"].includes(this.type)) {
|
|
this.painter_drawning_box_property.style.display = "block";
|
|
|
|
switch (this.type) {
|
|
case "Textbox":
|
|
this.createFontToolbar();
|
|
break;
|
|
case "Brush":
|
|
this.createBrushesToolbar();
|
|
break;
|
|
}
|
|
} else {
|
|
this.painter_drawning_box_property.style.display = "";
|
|
}
|
|
app.graph.setDirtyCanvas(true, false);
|
|
}
|
|
|
|
setCanvasSize(new_width, new_height, confirmChange = false) {
|
|
if (
|
|
confirmChange &&
|
|
this.node.isInputConnected(0) &&
|
|
this.node.LS_Cls.LS_Painters.settings.pipingSettings.pipingChangeSize &&
|
|
(new_width !== this.currentCanvasSize.width ||
|
|
new_height !== this.currentCanvasSize.height)
|
|
) {
|
|
if (confirm("Disable change size piping?")) {
|
|
this.canvas.wrapperEl.querySelector(
|
|
".pipingChangeSize_checkbox"
|
|
).checked = false;
|
|
this.node.LS_Cls.LS_Painters.settings.pipingSettings.pipingChangeSize = false;
|
|
this.node.LS_Cls.LS_Save();
|
|
}
|
|
}
|
|
|
|
resizeCanvas(this.node, {
|
|
width: new_width,
|
|
height: new_height,
|
|
});
|
|
|
|
this.currentCanvasSize = { width: new_width, height: new_height };
|
|
this.node.LS_Cls.LS_Painters.settings["currentCanvasSize"] =
|
|
this.currentCanvasSize;
|
|
this.node.title = `${this.node.type} - ${new_width}x${new_height}`;
|
|
this.canvas.renderAll();
|
|
app.graph.setDirtyCanvas(true, false);
|
|
this.node.onResize();
|
|
this.node.LS_Cls.LS_Save();
|
|
}
|
|
|
|
setDefaultValuesInputs() {
|
|
if (+this.strokeWidth.value < 1) {
|
|
this.strokeWidth.max = 150;
|
|
this.strokeWidth.min = 0;
|
|
this.strokeWidth.step = 1;
|
|
this.strokeWidth.value = 5;
|
|
}
|
|
}
|
|
|
|
bindEvents() {
|
|
// Button tools select
|
|
this.painter_shapes_box.onclick = (e) => {
|
|
let target = e.target,
|
|
currentTarget = target.dataset?.shape;
|
|
if (currentTarget) {
|
|
this.type = currentTarget;
|
|
|
|
// Set default brush width if width < 1 (for fabricjs)
|
|
this.setDefaultValuesInputs();
|
|
|
|
switch (currentTarget) {
|
|
case "Erase":
|
|
this.canvas.freeDrawingBrush = new fabric.EraserBrush(this.canvas);
|
|
this.changePropertyBrush(currentTarget);
|
|
this.canvas.isDrawingMode = true;
|
|
this.drawning = true;
|
|
break;
|
|
case "Brush":
|
|
this.canvas.freeDrawingBrush = new fabric.PencilBrush(this.canvas);
|
|
this.changePropertyBrush(currentTarget);
|
|
this.canvas.isDrawingMode = true;
|
|
this.drawning = true;
|
|
break;
|
|
case "Image":
|
|
this.bgImageFile.func = (img) => {
|
|
let img_ = img
|
|
.set({
|
|
left: 0,
|
|
top: 0,
|
|
angle: 0,
|
|
strokeWidth: 1,
|
|
})
|
|
.scale(0.3);
|
|
this.canvas.add(img_).renderAll();
|
|
this.uploadPaintFile(this.node.name);
|
|
this.bgImageFile.value = "";
|
|
};
|
|
this.bgImageFile.click();
|
|
this.canvas.isDrawingMode = false;
|
|
this.drawning = false;
|
|
break;
|
|
case "Textbox":
|
|
let textbox = new fabric.Textbox("Text here", {
|
|
fontFamily: "Arial",
|
|
stroke: toRGBA(
|
|
this.strokeColor.value,
|
|
this.strokeColorTransparent.value
|
|
),
|
|
fill: toRGBA(
|
|
this.fillColor.value,
|
|
this.fillColorTransparent.value
|
|
),
|
|
strokeWidth: 1,
|
|
});
|
|
this.strokeWidth.value = +textbox.strokeWidth;
|
|
this.canvas.add(textbox).setActiveObject(textbox);
|
|
this.canvas.isDrawingMode = false;
|
|
this.drawning = false;
|
|
break;
|
|
default:
|
|
this.canvas.isDrawingMode = false;
|
|
this.drawning = true;
|
|
break;
|
|
}
|
|
|
|
this.selectPropertyToolbar(this.type);
|
|
this.setActiveElement(target, this.painter_shapes_box);
|
|
}
|
|
};
|
|
|
|
// Button Mode select
|
|
this.change_mode.onclick = (e) => this.changeMode(e);
|
|
|
|
// Buttons Lock events
|
|
const stackPositionObjects = (tool, target) => {
|
|
let a_object = this.canvas.getActiveObject();
|
|
if (tool) {
|
|
switch (tool) {
|
|
case "zpos_BringForward":
|
|
this.canvas.bringForward(a_object);
|
|
break;
|
|
case "zpos_BringToFront":
|
|
this.canvas.bringToFront(a_object);
|
|
break;
|
|
case "zpos_SendToBack":
|
|
this.canvas.sendToBack(a_object);
|
|
break;
|
|
case "zpos_SendBackwards":
|
|
this.canvas.sendBackwards(a_object);
|
|
break;
|
|
case "zpos_BringFrontSelected":
|
|
this.bringFrontSelected = !this.bringFrontSelected;
|
|
target.classList.toggle("active");
|
|
break;
|
|
}
|
|
this.canvas.renderAll();
|
|
}
|
|
};
|
|
|
|
// Manipulation box events
|
|
this.manipulation_box.onclick = (e) => {
|
|
let target = e.target,
|
|
listButtons = [
|
|
...Object.keys(this.locks),
|
|
"zpos_BringForward",
|
|
"zpos_BringToFront",
|
|
"zpos_SendToBack",
|
|
"zpos_SendBackwards",
|
|
"zpos_BringFrontSelected",
|
|
],
|
|
index = listButtons.indexOf(target.id);
|
|
if (index != -1) {
|
|
if (
|
|
listButtons[index].includes("_Send") ||
|
|
listButtons[index].includes("_Bring")
|
|
) {
|
|
stackPositionObjects(listButtons[index], target);
|
|
} else {
|
|
let buttonSel = listButtons[index];
|
|
this.locks[buttonSel] = !this.locks[buttonSel];
|
|
target.classList.toggle("active");
|
|
}
|
|
}
|
|
};
|
|
|
|
// Drawning box property box events
|
|
this.getActiveStyle = (styleName, object) => {
|
|
object = object || this.canvas.getActiveObject();
|
|
if (!object) return "";
|
|
|
|
return object.getSelectionStyles && object.isEditing
|
|
? object.getSelectionStyles()[styleName] || ""
|
|
: object[styleName] || "";
|
|
};
|
|
|
|
this.setActiveStyle = (styleName, value, object) => {
|
|
object = object || this.canvas.getActiveObject();
|
|
if (!object) return;
|
|
|
|
if (object.setSelectionStyles && object.isEditing) {
|
|
var style = {};
|
|
style[styleName] = value;
|
|
object.setSelectionStyles(style);
|
|
object.setCoords();
|
|
} else {
|
|
object.set(styleName, value);
|
|
}
|
|
|
|
object.setCoords();
|
|
this.canvas.requestRenderAll();
|
|
};
|
|
|
|
this.painter_drawning_box_property.onclick = async (e) => {
|
|
const listButtonsStyles = [
|
|
"prop_fontStyle",
|
|
"prop_fontWeight",
|
|
"prop_underline",
|
|
"prop_brushDefault",
|
|
// Symmetry
|
|
"prop_BrushMyPaint",
|
|
"prop_BrushSymmetry",
|
|
"prop_symmetry_",
|
|
];
|
|
|
|
let { target, currentTarget } = e;
|
|
while (target.tagName !== "BUTTON") {
|
|
target = target.parentElement;
|
|
if (!target || target === currentTarget) return;
|
|
}
|
|
|
|
const index = listButtonsStyles.indexOf(target.dataset.prop);
|
|
if (index != -1) {
|
|
if (listButtonsStyles[index].includes("prop_")) {
|
|
const buttonSelStyle = listButtonsStyles[index].replace("prop_", ""),
|
|
activeOb = this.canvas.getActiveObject();
|
|
|
|
if (activeOb?.type === "textbox") {
|
|
switch (buttonSelStyle) {
|
|
case "fontWeight":
|
|
if (this.getActiveStyle("fontWeight") == "bold") {
|
|
this.setActiveStyle(buttonSelStyle, "");
|
|
target.classList.remove("active");
|
|
} else {
|
|
this.setActiveStyle(buttonSelStyle, "bold");
|
|
target.classList.add("active");
|
|
}
|
|
break;
|
|
case "fontStyle":
|
|
if (this.getActiveStyle("fontStyle") == "italic") {
|
|
this.setActiveStyle(buttonSelStyle, "");
|
|
target.classList.remove("active");
|
|
} else {
|
|
this.setActiveStyle(buttonSelStyle, "italic");
|
|
target.classList.add("active");
|
|
}
|
|
break;
|
|
case "underline":
|
|
if (Boolean(this.getActiveStyle("underline"))) {
|
|
this.setActiveStyle("underline", false);
|
|
target.classList.remove("active");
|
|
} else {
|
|
this.setActiveStyle("underline", true);
|
|
target.classList.add("active");
|
|
}
|
|
|
|
this.fillColorTransparent.value = "1.0";
|
|
this.setActiveStyle("fill", toRGBA(this.fillColor.value));
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Default brush
|
|
if (target.parentElement?.classList.contains("property_brushesBox")) {
|
|
Array.from(target.parentElement.children).forEach((b) =>
|
|
b.classList.remove("active")
|
|
);
|
|
|
|
this.canvas.isDrawingMode = true;
|
|
this.drawning = true;
|
|
this.type = buttonSelStyle;
|
|
|
|
// Symmetry & MyPaint
|
|
if (
|
|
buttonSelStyle === "BrushSymmetry" ||
|
|
buttonSelStyle === "BrushMyPaint"
|
|
) {
|
|
// BrushMyPaint
|
|
if (this.type === "BrushMyPaint") {
|
|
this.MyBrushPaintManager = new MyPaintManager(this);
|
|
await this.MyBrushPaintManager.createElements();
|
|
|
|
this.canvas.freeDrawingBrush = new fabric.MyBrushPaintSymmetry(
|
|
this.canvas,
|
|
this.MyBrushPaintManager.range_brush_pressure,
|
|
this.MyBrushPaintManager.currentBrushSettings,
|
|
this
|
|
);
|
|
} // end BrushMyPaint
|
|
|
|
// BrushSymmetry fabricjs
|
|
if (this.type === "BrushSymmetry") {
|
|
this.setDefaultValuesInputs();
|
|
this.canvas.freeDrawingBrush = new fabric.SymmetryBrush(
|
|
this.canvas
|
|
);
|
|
} // end BrushSymmetry fabricjs
|
|
|
|
if (this.symmetryBrushOptionsCopy)
|
|
this.canvas.freeDrawingBrush._options =
|
|
this.symmetryBrushOptionsCopy;
|
|
|
|
if (this.property_brushesSecondBox)
|
|
this.createToolbarOptions(this.type);
|
|
|
|
// Set options brush
|
|
this.changePropertyBrush(this.type);
|
|
this.setActiveElement(target, this.painter_shapes_box);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Second toolbar options
|
|
if (
|
|
target.parentElement?.classList.contains("property_brushesSecondBox")
|
|
) {
|
|
const options = this.canvas.freeDrawingBrush?._options;
|
|
if (options && target.dataset.prop?.includes("prop_symmetry_")) {
|
|
const optionsKeys = Object.keys(options);
|
|
const optionKeyChange = optionsKeys[target.optindex];
|
|
|
|
options[optionKeyChange].enable = !options[optionKeyChange].enable;
|
|
this.symmetryBrushOptionsCopy = this.canvas.freeDrawingBrush._options;
|
|
target.classList.toggle("active");
|
|
}
|
|
}
|
|
};
|
|
// Event input bgcolor
|
|
this.reset_set_bg = () => {
|
|
this.canvas.setBackgroundImage(null);
|
|
this.canvas.backgroundColor = this.bgColor.value;
|
|
this.canvas.renderAll();
|
|
};
|
|
|
|
const fileReaderFunc = (e, func) => {
|
|
let file = e.target.files[0],
|
|
reader = new FileReader();
|
|
|
|
reader.onload = (f) => {
|
|
let data = f.target.result;
|
|
fabric.Image.fromURL(data, (img) => func(img));
|
|
};
|
|
reader.readAsDataURL(file);
|
|
};
|
|
|
|
this.bgColor.oninput = this.reset_set_bg;
|
|
|
|
// Event input bg image
|
|
this.bgImageFile.onchange = (e) => {
|
|
fileReaderFunc(e, this.bgImageFile.func);
|
|
};
|
|
|
|
this.painter_bg_setting.onclick = (e) => {
|
|
let target = e.target;
|
|
if (target.hasAttribute("bgImage")) {
|
|
let typeEvent = target.getAttribute("bgImage");
|
|
switch (typeEvent) {
|
|
case "img_load":
|
|
this.bgImageFile.func = (img) => {
|
|
if (confirm("Change canvas size equal image?")) {
|
|
this.setCanvasSize(img.width, img.height, true);
|
|
}
|
|
|
|
this.canvas.setBackgroundImage(
|
|
img,
|
|
() => {
|
|
this.canvas.renderAll();
|
|
this.uploadPaintFile(this.node.name);
|
|
this.bgImageFile.value = "";
|
|
},
|
|
{
|
|
scaleX: this.canvas.width / img.width,
|
|
scaleY: this.canvas.height / img.height,
|
|
strokeWidth: 0,
|
|
}
|
|
);
|
|
};
|
|
this.bgImageFile.click();
|
|
break;
|
|
case "img_reset":
|
|
this.reset_set_bg();
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
// Settings
|
|
this.buttonSetCanvasSize.addEventListener("click", () => {
|
|
function checkSized(prop = "", defaultVal = 512) {
|
|
let inputSize;
|
|
let correct = false;
|
|
while (!correct) {
|
|
inputSize = +prompt(`Enter canvas ${prop}:`, defaultVal);
|
|
if (
|
|
Number(inputSize) === inputSize &&
|
|
inputSize % 1 === 0 &&
|
|
inputSize > 0
|
|
) {
|
|
return inputSize;
|
|
}
|
|
alert(`[${prop}] Invalid number "${inputSize}" or <=0!`);
|
|
}
|
|
}
|
|
|
|
let width = checkSized("width", this.currentCanvasSize.width),
|
|
height = checkSized("height", this.currentCanvasSize.height);
|
|
|
|
this.setCanvasSize(width, height, true);
|
|
this.uploadPaintFile(this.node.name);
|
|
});
|
|
|
|
// History undo, redo
|
|
function showURModal() {
|
|
if (this.type === "BrushMyPaint") {
|
|
makeModal({
|
|
title: "Info",
|
|
text: "Undo/Redo not avaibles in MyPaint 😞!",
|
|
stylePos: "absolute",
|
|
parent: this.canvas.wrapperEl,
|
|
});
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
this.undo_button.onclick = (e) => {
|
|
if (!showURModal.call(this)) return;
|
|
this.undo();
|
|
};
|
|
|
|
this.redo_button.onclick = (e) => {
|
|
if (!showURModal.call(this)) return;
|
|
this.redo();
|
|
};
|
|
|
|
// Event inputs stroke, fill colors and transparent
|
|
this.strokeColorTransparent.oninput =
|
|
this.strokeColor.oninput =
|
|
this.fillColor.oninput =
|
|
this.fillColorTransparent.oninput =
|
|
() => {
|
|
if (
|
|
[
|
|
"Brush",
|
|
"Textbox",
|
|
"BrushMyPaint",
|
|
"BrushSymmetry",
|
|
"Image",
|
|
"Erase",
|
|
].includes(this.type) ||
|
|
!this.drawning
|
|
) {
|
|
this.changePropertyBrush(this.type);
|
|
}
|
|
};
|
|
|
|
this.strokeColorTransparent.onchange =
|
|
this.strokeColor.onchange =
|
|
this.fillColor.onchange =
|
|
this.fillColorTransparent.onchange =
|
|
() => {
|
|
if (this.canvas.getActiveObject()) {
|
|
this.uploadPaintFile(this.node.name);
|
|
}
|
|
};
|
|
|
|
this.bgColor.onchange = () => this.uploadPaintFile(this.node.name);
|
|
|
|
// Event change stroke and erase width
|
|
this.eraseWidth.onchange = () => {
|
|
if (["Erase"].includes(this.type) || !this.drawning) {
|
|
this.changePropertyBrush(this.type);
|
|
}
|
|
};
|
|
|
|
this.strokeWidth.onchange = () => {
|
|
if (
|
|
["Brush", "BrushMyPaint", "BrushSymmetry", "Textbox", "Image"].includes(
|
|
this.type
|
|
) ||
|
|
!this.drawning
|
|
) {
|
|
this.changePropertyBrush(this.type);
|
|
}
|
|
|
|
if (this.canvas.getActiveObject()) {
|
|
this.uploadPaintFile(this.node.name);
|
|
}
|
|
};
|
|
|
|
this.setInputsStyleObject = () => {
|
|
let targets = this.canvas.getActiveObjects();
|
|
if (!targets || targets.length == 0) return;
|
|
|
|
// Selected tools
|
|
const setProps = (style, check) => {
|
|
const propEl = this.painter_drawning_box_property.querySelector(
|
|
`#prop_${style}`
|
|
);
|
|
|
|
if (propEl) propEl.classList[check ? "remove" : "add"]("active");
|
|
};
|
|
|
|
targets.forEach((target) => {
|
|
// MyPaintLib not valid change color and stroke (only borders) in selection mode it type texture
|
|
if (target?.mypaintlib) return;
|
|
|
|
if (target.type == "textbox") {
|
|
setProps(
|
|
"fontWeight",
|
|
this.getActiveStyle("fontWeight", target) == "normal"
|
|
);
|
|
setProps(
|
|
"fontStyle",
|
|
this.getActiveStyle("fontStyle", target) == "normal"
|
|
);
|
|
setProps(
|
|
"underline",
|
|
Boolean(this.getActiveStyle("underline", target)) == false
|
|
);
|
|
}
|
|
|
|
if (
|
|
!this.drawning &&
|
|
!["Erase", "Brush", "BrushMyPaint", "BrushSymmetry"].includes(
|
|
this.type
|
|
)
|
|
) {
|
|
this.strokeWidth.value = parseInt(
|
|
this.getActiveStyle("strokeWidth", target),
|
|
10
|
|
);
|
|
|
|
let { color: strokeColor, alpha: alpha_stroke } = getColorHEX(
|
|
this.getActiveStyle("stroke", target)
|
|
),
|
|
{ color: fillColor, alpha: alpha_fill } = getColorHEX(
|
|
this.getActiveStyle("fill", target)
|
|
);
|
|
|
|
this.strokeColor.value = strokeColor;
|
|
this.strokeColorTransparent.value = alpha_stroke;
|
|
|
|
this.fillColor.value = fillColor;
|
|
this.fillColorTransparent.value = alpha_fill;
|
|
}
|
|
});
|
|
this.canvas.renderAll();
|
|
};
|
|
|
|
// ----- Canvas Events -----
|
|
this.canvas.on({
|
|
"selection:created": (o) => {
|
|
this.setInputsStyleObject();
|
|
},
|
|
"selection:updated": (o) => {
|
|
this.setInputsStyleObject();
|
|
},
|
|
// Mouse button down event
|
|
"mouse:down": (o) => {
|
|
if (!this.canvas.isDrawingMode && this.bringFrontSelected)
|
|
this.canvas.bringToFront(this.canvas.getActiveObject());
|
|
|
|
this.canvas.isDrawingMode = this.drawning;
|
|
if (!this.canvas.isDrawingMode) {
|
|
// New group when manipulated group mypaint
|
|
if (this.type === "BrushMyPaint") {
|
|
this.canvas.freeDrawingBrush?.newGroup();
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (
|
|
["Brush", "Erase", "BrushMyPaint", "BrushSymmetry"].includes(
|
|
this.type
|
|
)
|
|
)
|
|
return;
|
|
|
|
if (this.type != "Textbox") {
|
|
let { x: left, y: top } = this.canvas.getPointer(o.e),
|
|
colors = ["red", "blue", "green", "yellow", "purple", "orange"],
|
|
strokeWidth = +this.strokeWidth.value,
|
|
stroke =
|
|
strokeWidth == 0
|
|
? "transparent"
|
|
: toRGBA(
|
|
this.strokeColor.value,
|
|
this.strokeColorTransparent.value
|
|
) || colors[Math.floor(Math.random() * colors.length)],
|
|
fill = toRGBA(
|
|
this.fillColor.value,
|
|
this.fillColorTransparent.value
|
|
),
|
|
shape = this.shapeCreate({
|
|
type: this.type,
|
|
left,
|
|
top,
|
|
stroke,
|
|
fill,
|
|
strokeWidth,
|
|
points: [left, top, left, top],
|
|
});
|
|
|
|
this.originX = left;
|
|
this.originY = top;
|
|
|
|
if (shape) {
|
|
this.canvas.add(shape).renderAll().setActiveObject(shape);
|
|
}
|
|
}
|
|
},
|
|
|
|
// Mouse move event
|
|
"mouse:move": (o) => {
|
|
if (!this.drawning) {
|
|
try {
|
|
let activeObjManipul = this.canvas.getActiveObject();
|
|
activeObjManipul.hasControls = true;
|
|
activeObjManipul.lockScalingX = this.locks.lockScalingX;
|
|
activeObjManipul.lockScalingY = this.locks.lockScalingY;
|
|
activeObjManipul.lockRotation = this.locks.lockRotation;
|
|
|
|
if (!activeObjManipul.isEditing) {
|
|
activeObjManipul.lockMovementX = this.locks.lockMovementX;
|
|
activeObjManipul.lockMovementY = this.locks.lockMovementY;
|
|
}
|
|
} catch (e) {}
|
|
}
|
|
if (!this.canvas.isDrawingMode) {
|
|
return;
|
|
}
|
|
|
|
if (
|
|
["Brush", "Erase", "BrushMyPaint", "BrushSymmetry"].includes(
|
|
this.type
|
|
)
|
|
)
|
|
return;
|
|
|
|
let pointer = this.canvas.getPointer(o.e),
|
|
activeObj = this.canvas.getActiveObject();
|
|
|
|
if (!activeObj) return;
|
|
|
|
if (this.originX > pointer.x) {
|
|
activeObj.set({ left: pointer.x });
|
|
}
|
|
if (this.originY > pointer.y) {
|
|
activeObj.set({ top: pointer.y });
|
|
}
|
|
|
|
if (this.type == "Circle") {
|
|
let radius =
|
|
Math.max(
|
|
Math.abs(this.originY - pointer.y),
|
|
Math.abs(this.originX - pointer.x)
|
|
) / 2;
|
|
if (radius > activeObj.strokeWidth)
|
|
radius -= activeObj.strokeWidth / 2;
|
|
activeObj.set({ radius: radius });
|
|
} else if (this.type == "Line") {
|
|
activeObj.set({ x2: pointer.x, y2: pointer.y });
|
|
} else {
|
|
activeObj.set({ width: Math.abs(this.originX - pointer.x) });
|
|
activeObj.set({ height: Math.abs(this.originY - pointer.y) });
|
|
}
|
|
|
|
this.canvas.renderAll();
|
|
},
|
|
|
|
// Mouse button up event
|
|
"mouse:up": (o) => {
|
|
this.canvas._objects.forEach((object) => {
|
|
if (!object.hasOwnProperty("controls")) {
|
|
object.controls = {
|
|
...object.controls,
|
|
removeControl: new fabric.Control({
|
|
x: 0.5,
|
|
y: -0.5,
|
|
offsetY: -16,
|
|
offsetX: 16,
|
|
cursorStyle: "pointer",
|
|
mouseUpHandler: removeObject.bind(this),
|
|
render: renderIcon(removeImg),
|
|
cornerSize: 24,
|
|
}),
|
|
};
|
|
}
|
|
});
|
|
|
|
this.canvas.getActiveObject()?.setCoords();
|
|
this.canvas.getActiveObjects()?.forEach((a) => a.setCoords());
|
|
|
|
if (
|
|
![
|
|
"Brush",
|
|
"Erase",
|
|
"BrushMyPaint",
|
|
"BrushSymmetry",
|
|
"Image",
|
|
"Textbox",
|
|
].includes(this.type)
|
|
)
|
|
this.canvas.isDrawingMode = false;
|
|
|
|
// Skip BrushMyPaint mouseup is empty objects array, loading canvas as image, upload when object add to canvas
|
|
if (!["BrushMyPaint"].includes(this.type)) {
|
|
this.addToHistory();
|
|
this.canvas.renderAll();
|
|
this.uploadPaintFile(this.node.name);
|
|
}
|
|
},
|
|
|
|
"object:added": (o) => {},
|
|
|
|
// Object moving event
|
|
"object:moving": (o) => {
|
|
this.canvas.isDrawingMode = false;
|
|
},
|
|
|
|
// Object modify event
|
|
"object:modified": (o) => {
|
|
this.canvas.isDrawingMode = false;
|
|
|
|
if (this.position_sizes_box) {
|
|
this.getPositionAndSize(o.target);
|
|
}
|
|
|
|
this.canvas.renderAll();
|
|
this.uploadPaintFile(this.node.name);
|
|
},
|
|
});
|
|
// ----- Canvas Events -----
|
|
}
|
|
|
|
addToHistory() {
|
|
// Undo / rendo
|
|
const objs = this.canvas.toJSON(["mypaintlib"]);
|
|
|
|
if (this.undo_history.length > this.max_history_steps) {
|
|
this.undo_history.shift();
|
|
console.log(
|
|
`[Info ${this.node.name}]: History saving step limit reached! Limit steps = ${this.max_history_steps}.`
|
|
);
|
|
}
|
|
this.undo_history.push(objs);
|
|
this.redo_history = [];
|
|
if (this.undo_history.length) {
|
|
this.undo_button.disabled = false;
|
|
}
|
|
}
|
|
|
|
// Save canvas data to localStorage or JSON
|
|
canvasSaveSettingsPainter() {
|
|
if (!this.node.LS_Cls.LS_Painters.settings.lsSavePainter) return;
|
|
|
|
try {
|
|
const data = this.canvas.toJSON(["mypaintlib"]);
|
|
if (
|
|
this.node.LS_Cls.LS_Painters &&
|
|
!isEmptyObject(this.node.LS_Cls.LS_Painters)
|
|
) {
|
|
this.node.LS_Cls.LS_Painters.canvas_settings = painters_settings_json
|
|
? data
|
|
: JSON.stringify(data);
|
|
|
|
this.node.LS_Cls.LS_Painters.settings["currentCanvasSize"] =
|
|
this.currentCanvasSize;
|
|
|
|
this.node.LS_Cls.LS_Save();
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
setCanvasLoadData(data) {
|
|
const obj_data =
|
|
typeof data === "string" || data instanceof String
|
|
? JSON.parse(data)
|
|
: data;
|
|
|
|
const canvas_settings = data.canvas_settings;
|
|
const settings = data.settings;
|
|
|
|
this.canvas.loadFromJSON(canvas_settings, () => {
|
|
this.canvas.renderAll();
|
|
this.uploadPaintFile(this.node.name);
|
|
this.bgColor.value = getColorHEX(data.background).color || "";
|
|
});
|
|
}
|
|
|
|
undoRedoLoadData(data) {
|
|
this.canvas.loadFromJSON(data, () => {
|
|
this.canvas.renderAll();
|
|
this.bgColor.value = getColorHEX(data.background).color || "";
|
|
});
|
|
}
|
|
|
|
// Load canvas data from localStorage or JSON
|
|
canvasLoadSettingPainter() {
|
|
try {
|
|
if (
|
|
this.node.LS_Cls.LS_Painters &&
|
|
this.node.LS_Cls.LS_Painters.hasOwnProperty("canvas_settings")
|
|
) {
|
|
const data =
|
|
typeof this.node.LS_Cls.LS_Painters === "string" ||
|
|
this.node.LS_Cls.LS_Painters instanceof String
|
|
? JSON.parse(this.node.LS_Cls.LS_Painters)
|
|
: this.node.LS_Cls.LS_Painters;
|
|
this.setCanvasLoadData(data);
|
|
this.addToHistory();
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
undo() {
|
|
if (this.undo_history.length > 0) {
|
|
this.undo_button.disabled = false;
|
|
this.redo_button.disabled = false;
|
|
this.redo_history.push(this.undo_history.pop());
|
|
|
|
const content = this.undo_history[this.undo_history.length - 1];
|
|
this.undoRedoLoadData(content);
|
|
this.canvas.renderAll();
|
|
} else {
|
|
this.undo_button.disabled = true;
|
|
}
|
|
}
|
|
|
|
redo() {
|
|
if (this.redo_history.length > 0) {
|
|
this.redo_button.disabled = false;
|
|
this.undo_button.disabled = false;
|
|
|
|
const content = this.redo_history.pop();
|
|
this.undo_history.push(content);
|
|
this.undoRedoLoadData(content);
|
|
this.canvas.renderAll();
|
|
} else {
|
|
this.redo_button.disabled = true;
|
|
}
|
|
}
|
|
|
|
pastAsBackground(image, options = {}) {
|
|
if (!image) return;
|
|
|
|
if (confirm("Resize Painter node canvas?")) {
|
|
this.setCanvasSize(image.naturalWidth, image.naturalHeight);
|
|
}
|
|
|
|
const img_ = new fabric.Image(image, {
|
|
left: 0,
|
|
top: 0,
|
|
angle: 0,
|
|
strokeWidth: 1,
|
|
...options,
|
|
});
|
|
|
|
this.canvas.setBackgroundImage(
|
|
img_,
|
|
() => {
|
|
this.canvas.renderAll();
|
|
this.uploadPaintFile(this.node.name);
|
|
},
|
|
{
|
|
scaleX: this.canvas.width / img_.width,
|
|
scaleY: this.canvas.height / img_.height,
|
|
strokeWidth: 0,
|
|
}
|
|
);
|
|
}
|
|
|
|
pastAsImage(image, options = {}) {
|
|
if (!image) return;
|
|
|
|
const painterSize = confirm("Resize Painter node canvas?");
|
|
if (painterSize) {
|
|
this.setCanvasSize(image.naturalWidth, image.naturalHeight);
|
|
}
|
|
|
|
const img_ = new fabric.Image(image, {
|
|
left: 0,
|
|
top: 0,
|
|
angle: 0,
|
|
strokeWidth: 1,
|
|
...options,
|
|
});
|
|
|
|
if (!painterSize && confirm("Stretch image to fit canvas Painter node?")) {
|
|
img_.scaleToHeight(this.currentCanvasSize.width);
|
|
img_.scaleToWidth(this.currentCanvasSize.height);
|
|
}
|
|
|
|
this.canvas.add(img_).renderAll();
|
|
this.uploadPaintFile(this.node.name);
|
|
this.canvas.isDrawingMode = false;
|
|
this.drawning = false;
|
|
this.type = "Image";
|
|
this.setActiveElement(
|
|
this.painter_shapes_box.querySelector("[data-shape=Image]"),
|
|
this.painter_shapes_box
|
|
);
|
|
}
|
|
|
|
async addImageToCanvas(image, options = {}) {
|
|
async function uploadFile(file) {
|
|
try {
|
|
const body = new FormData();
|
|
body.append("image", file);
|
|
|
|
const resp = await api.fetchApi("/upload/image", {
|
|
method: "POST",
|
|
body,
|
|
});
|
|
|
|
if (resp.status === 200) {
|
|
const data = await resp.json();
|
|
let path = data.name;
|
|
if (data.subfolder) path = data.subfolder + "/" + path;
|
|
|
|
const img = await new Promise((resolve, reject) => {
|
|
let img = new Image();
|
|
img.onload = () => resolve(img);
|
|
img.onerror = (e) => resolve(new Error("Image not load!"));
|
|
|
|
let name = path;
|
|
let folder_separator = name.lastIndexOf("/");
|
|
let subfolder = "";
|
|
|
|
if (folder_separator > -1) {
|
|
subfolder = name.substring(0, folder_separator);
|
|
name = name.substring(folder_separator + 1);
|
|
}
|
|
|
|
img.src = api.apiURL(
|
|
`/view?filename=${encodeURIComponent(
|
|
name
|
|
)}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}${app.getRandParam()}`
|
|
);
|
|
});
|
|
|
|
return img;
|
|
} else {
|
|
console.log(`${resp.status} - ${resp.statusText}`);
|
|
return resp.statusText;
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
return err;
|
|
}
|
|
}
|
|
|
|
image = await uploadFile(image);
|
|
|
|
if (image?.tagName !== "IMG") {
|
|
createWindowModal({
|
|
textTitle: "ERROR",
|
|
textBody: [
|
|
makeElement("div", {
|
|
innerHTML: image ?? "Error load image",
|
|
}),
|
|
],
|
|
...THEMES_MODAL_WINDOW.error,
|
|
options: {
|
|
auto: { autohide: true, autoshow: true, autoremove: true },
|
|
close: { showClose: false },
|
|
parent: this.canvas.wrapperEl,
|
|
},
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (confirm("Past as background?")) {
|
|
this.pastAsBackground(image, options);
|
|
} else if (confirm("Past as image?")) {
|
|
this.pastAsImage(image, options);
|
|
}
|
|
}
|
|
|
|
showImage(name) {
|
|
let img = new Image();
|
|
img.onload = () => {
|
|
this.node.imgs = [img];
|
|
app.graph.setDirtyCanvas(true);
|
|
};
|
|
|
|
let folder_separator = name.lastIndexOf("/");
|
|
let subfolder = "";
|
|
if (folder_separator > -1) {
|
|
subfolder = name.substring(0, folder_separator);
|
|
name = name.substring(folder_separator + 1);
|
|
}
|
|
|
|
img.src = api.apiURL(
|
|
`/view?filename=${name}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}&${new Date().getTime()}`
|
|
);
|
|
this.node.setSizeForImage?.();
|
|
}
|
|
|
|
async uploadPaintFile(fileName) {
|
|
// Upload paint to temp folder ComfyUI
|
|
let activeObj = null;
|
|
if (!this.canvas.isDrawingMode) {
|
|
activeObj = this.canvas.getActiveObject();
|
|
|
|
if (activeObj) {
|
|
activeObj.hasControls = false;
|
|
activeObj.hasBorders = false;
|
|
this.canvas.getActiveObjects().forEach((a_obs) => {
|
|
a_obs.hasControls = false;
|
|
a_obs.hasBorders = false;
|
|
});
|
|
this.canvas.renderAll();
|
|
}
|
|
}
|
|
|
|
await new Promise((res) => {
|
|
const uploadFile = async (blobFile) => {
|
|
try {
|
|
const resp = await fetch("/upload/image", {
|
|
method: "POST",
|
|
body: blobFile,
|
|
});
|
|
|
|
if (resp.status === 200) {
|
|
const data = await resp.json();
|
|
|
|
if (!this.image.options.values.includes(data.name)) {
|
|
this.image.options.values.push(data.name);
|
|
}
|
|
|
|
this.image.value = data.name;
|
|
this.showImage(data.name);
|
|
|
|
if (activeObj && !this.drawning) {
|
|
activeObj.hasControls = true;
|
|
activeObj.hasBorders = true;
|
|
|
|
this.canvas.getActiveObjects().forEach((a_obs) => {
|
|
a_obs.hasControls = true;
|
|
a_obs.hasBorders = true;
|
|
});
|
|
this.canvas.renderAll();
|
|
}
|
|
this.canvasSaveSettingsPainter();
|
|
res(true);
|
|
} else {
|
|
alert(resp.status + " - " + resp.statusText);
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
this.canvas.lowerCanvasEl.toBlob(function (blob) {
|
|
let formData = new FormData();
|
|
formData.append("image", blob, fileName);
|
|
formData.append("overwrite", "true");
|
|
//formData.append("type", "temp");
|
|
uploadFile(formData);
|
|
}, "image/png");
|
|
});
|
|
|
|
// - end
|
|
|
|
const callb = this.node.callback,
|
|
self = this;
|
|
this.image.callback = function () {
|
|
self.image.value = self.node.name;
|
|
if (callb) {
|
|
return callb.apply(this, arguments);
|
|
}
|
|
};
|
|
}
|
|
}
|
|
// ================= END CLASS PAINTER ================
|
|
|
|
// ================= CREATE PAINTER WIDGET ============
|
|
function PainterWidget(node, inputName, inputData, app) {
|
|
node.name = inputName;
|
|
const widget = {
|
|
type: "painter_widget",
|
|
name: `w${inputName}`,
|
|
callback: () => {},
|
|
draw: function (ctx, _, widgetWidth, y, widgetHeight) {
|
|
const margin = 10,
|
|
left_offset = 8,
|
|
top_offset = 50,
|
|
visible = app.canvas.ds.scale > 0.6 && this.type === "painter_widget",
|
|
w = widgetWidth - margin * 2 - 80,
|
|
clientRectBound = ctx.canvas.getBoundingClientRect(),
|
|
transform = new DOMMatrix()
|
|
.scaleSelf(
|
|
clientRectBound.width / ctx.canvas.width,
|
|
clientRectBound.height / ctx.canvas.height
|
|
)
|
|
.multiplySelf(ctx.getTransform())
|
|
.translateSelf(margin, margin + y),
|
|
scale = new DOMMatrix().scaleSelf(transform.a, transform.d);
|
|
|
|
let aspect_ratio = 1;
|
|
if (node?.imgs && typeof node.imgs !== undefined) {
|
|
aspect_ratio = node.imgs[0].naturalHeight / node.imgs[0].naturalWidth;
|
|
}
|
|
|
|
Object.assign(this.painter_wrap.style, {
|
|
left: `${
|
|
transform.a * margin * left_offset +
|
|
transform.e +
|
|
clientRectBound.left
|
|
}px`,
|
|
top: `${
|
|
transform.d + transform.f + top_offset + clientRectBound.top
|
|
}px`,
|
|
width: `${w * transform.a}px`,
|
|
height: `${w * transform.d}px`,
|
|
position: "absolute",
|
|
zIndex: 9,
|
|
});
|
|
|
|
Object.assign(this.painter_wrap.children[0].style, {
|
|
transformOrigin: "0 0",
|
|
transform: scale,
|
|
width: w + "px",
|
|
height: w * aspect_ratio + "px",
|
|
});
|
|
|
|
Object.assign(this.painter_wrap.children[1].style, {
|
|
transformOrigin: "0 0",
|
|
transform: scale,
|
|
width: w + "px",
|
|
height: w * aspect_ratio + "px",
|
|
});
|
|
|
|
Array.from(
|
|
this.painter_wrap.children[2].querySelectorAll(
|
|
"input, button, input:after, span, div.painter_drawning_box"
|
|
)
|
|
).forEach((element) => {
|
|
if (element.type == "number") {
|
|
Object.assign(element.style, {
|
|
width: `${40 * transform.a}px`,
|
|
height: `${21 * transform.d}px`,
|
|
fontSize: `${transform.d * 10.0}px`,
|
|
});
|
|
} else if (element.tagName == "SPAN") {
|
|
// NOPE
|
|
} else if (element.tagName == "DIV") {
|
|
Object.assign(element.style, {
|
|
width: `${88 * transform.a}px`,
|
|
left: `${-90 * transform.a}px`,
|
|
});
|
|
} else {
|
|
let sizesEl = { w: 25, h: 25, fs: 10 };
|
|
|
|
if (element?.customSize) {
|
|
sizesEl = element.customSize;
|
|
}
|
|
|
|
if (element.id.includes("lock")) sizesEl = { w: 75, h: 15, fs: 10 };
|
|
if (element.id.includes("zpos")) sizesEl = { w: 80, h: 15, fs: 7 };
|
|
if (
|
|
["painter_change_mode", "painter_canvas_size"].includes(element.id)
|
|
)
|
|
sizesEl.w = 75;
|
|
if (element.hasAttribute("painter_object"))
|
|
sizesEl = { w: 58, h: 16, fs: 10 };
|
|
if (element.hasAttribute("bgImage"))
|
|
sizesEl = { w: 60, h: 20, fs: 10 };
|
|
|
|
Object.assign(element.style, {
|
|
cursor: "pointer",
|
|
width: `${sizesEl.w * transform.a}px`,
|
|
height: `${sizesEl.h * transform.d}px`,
|
|
fontSize: `${transform.d * sizesEl.fs}px`,
|
|
});
|
|
}
|
|
});
|
|
this.painter_wrap.hidden = !visible;
|
|
},
|
|
};
|
|
|
|
// Fabric canvas
|
|
let canvasPainter = makeElement("canvas", {
|
|
width: 512,
|
|
height: 512,
|
|
});
|
|
node.painter = new Painter(node, canvasPainter);
|
|
|
|
node.painter.canvas.setWidth(node.painter.currentCanvasSize.width);
|
|
node.painter.canvas.setHeight(node.painter.currentCanvasSize.height);
|
|
|
|
resizeCanvas(node, node.painter.canvas);
|
|
|
|
widget.painter_wrap = node.painter.canvas.wrapperEl;
|
|
widget.parent = node;
|
|
widget.painter_wrap.hidden = true;
|
|
|
|
node.painter.image.value = node.name;
|
|
|
|
node.painter.propertiesLS();
|
|
node.painter.makeElements();
|
|
|
|
document.body.appendChild(widget.painter_wrap);
|
|
|
|
node.addWidget("button", "Clear Canvas", "clear_painer", () => {
|
|
node.painter.list_objects_panel__items.innerHTML = "";
|
|
node.painter.clearCanvas();
|
|
});
|
|
|
|
// Add customWidget to node
|
|
node.addCustomWidget(widget);
|
|
|
|
node.onRemoved = () => {
|
|
//this.LS_Cls.removeData();
|
|
|
|
// When removing this node we need to remove the input from the DOM
|
|
for (let y in node.widgets) {
|
|
if (node.widgets[y].painter_wrap) {
|
|
node.widgets[y].painter_wrap.remove();
|
|
}
|
|
}
|
|
};
|
|
|
|
widget.onRemove = () => {
|
|
widget.painter_wrap?.remove();
|
|
};
|
|
|
|
node.onResize = function () {
|
|
let [w, h] = this.size;
|
|
let aspect_ratio = 1;
|
|
|
|
if (node?.imgs && typeof this.imgs !== undefined) {
|
|
aspect_ratio = this.imgs[0].naturalHeight / this.imgs[0].naturalWidth;
|
|
}
|
|
let buffer = 90;
|
|
|
|
if (w > this.painter.maxNodeSize) w = w - (w - this.painter.maxNodeSize);
|
|
if (w < 600) w = 600;
|
|
|
|
h = w * aspect_ratio + buffer;
|
|
|
|
if (h < 600) h = 600 + h / 2;
|
|
|
|
this.size = [w, h];
|
|
};
|
|
|
|
node.onDrawBackground = function (ctx) {
|
|
if (!this.flags.collapsed) {
|
|
node.painter.canvas.wrapperEl.hidden = false;
|
|
if (this.imgs && this.imgs.length) {
|
|
if (app.canvas.ds.scale > 0.8) {
|
|
let [dw, dh] = this.size;
|
|
|
|
let w = this.imgs[0].naturalWidth;
|
|
let h = this.imgs[0].naturalHeight;
|
|
|
|
const scaleX = dw / w;
|
|
const scaleY = dh / h;
|
|
const scale = Math.min(scaleX, scaleY, 1);
|
|
|
|
w *= scale / 8;
|
|
h *= scale / 8;
|
|
|
|
let x = 5;
|
|
let y = dh - h - 5;
|
|
|
|
ctx.drawImage(this.imgs[0], x, y, w, h);
|
|
ctx.font = "10px serif";
|
|
ctx.strokeStyle = "white";
|
|
ctx.strokeRect(x, y, w, h);
|
|
ctx.fillStyle = "rgba(255,255,255,0.7)";
|
|
ctx.fillText("Mask", w / 2, dh - 10);
|
|
}
|
|
}
|
|
} else {
|
|
node.painter.canvas.wrapperEl.hidden = true;
|
|
}
|
|
};
|
|
|
|
node.onConnectInput = () => console.log(`Connected input ${node.name}`);
|
|
|
|
// DragDrop past image
|
|
node.onDragOver = function (e) {
|
|
if (e.dataTransfer && e.dataTransfer.items) {
|
|
const image = [...e.dataTransfer.items].find((f) => f.kind === "file");
|
|
return !!image;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
node.onDragDrop = function (e) {
|
|
let handled = false;
|
|
for (const file of e.dataTransfer.files) {
|
|
if (file.type.startsWith("image/")) {
|
|
node.painter.addImageToCanvas(file);
|
|
handled = true;
|
|
}
|
|
}
|
|
|
|
return handled;
|
|
};
|
|
// end - DragDrop past image
|
|
|
|
// Get piping image input, when node executing...
|
|
api.addEventListener("alekpet_get_image", async ({ detail }) => {
|
|
const { images, unique_id } = detail;
|
|
|
|
if (
|
|
!images.length ||
|
|
!node.LS_Cls.LS_Painters.settings.pipingSettings.pipingUpdateImage ||
|
|
+unique_id !== node.id
|
|
) {
|
|
return;
|
|
}
|
|
|
|
await new Promise((res) => {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
// Change size piping input image
|
|
const { naturalWidth: w, naturalHeight: h } = img;
|
|
if (
|
|
node.LS_Cls.LS_Painters.settings.pipingSettings.pipingChangeSize &&
|
|
(w !== node.painter.currentCanvasSize.width ||
|
|
h !== node.painter.currentCanvasSize.height)
|
|
) {
|
|
node.painter.setCanvasSize(w, h);
|
|
} else {
|
|
node.title = `${node.type} - ${node.painter.currentCanvasSize.width}x${node.painter.currentCanvasSize.height}`;
|
|
}
|
|
|
|
const img_ = new fabric.Image(img, {
|
|
left: 0,
|
|
top: 0,
|
|
angle: 0,
|
|
strokeWidth: 1,
|
|
originX: "left",
|
|
originY: "top",
|
|
pipingImage: true,
|
|
});
|
|
res(img_);
|
|
};
|
|
img.src = images[0];
|
|
})
|
|
.then(async (result) => {
|
|
switch (node.LS_Cls.LS_Painters.settings.pipingSettings.action.name) {
|
|
case "image":
|
|
await new Promise(async (res) => {
|
|
let { scale, sendToBack = true } =
|
|
node.LS_Cls.LS_Painters.settings.pipingSettings.action.options;
|
|
|
|
if (typeof scale === "number") result.scale(scale);
|
|
|
|
node.painter.canvas.add(result);
|
|
sendToBack && node.painter.canvas.sendToBack(result);
|
|
node.painter.canvas.renderAll();
|
|
|
|
if (node.painter.mode) {
|
|
node.painter.viewListObjects(
|
|
node.painter.list_objects_panel__items
|
|
);
|
|
}
|
|
|
|
await node.painter.uploadPaintFile(node.name);
|
|
res(true);
|
|
});
|
|
break;
|
|
case "background":
|
|
default:
|
|
await new Promise((res) => {
|
|
node.painter.canvas.setBackgroundImage(
|
|
result,
|
|
async () => {
|
|
node.painter.canvas.renderAll();
|
|
await node.painter.uploadPaintFile(node.name);
|
|
res(true);
|
|
},
|
|
{
|
|
scaleX: node.painter.canvas.width / result.width,
|
|
scaleY: node.painter.canvas.height / result.height,
|
|
strokeWidth: 0,
|
|
}
|
|
);
|
|
});
|
|
}
|
|
})
|
|
.then(() => {
|
|
api
|
|
.fetchApi("/alekpet/check_canvas_changed", {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
unique_id: node.id.toString(),
|
|
is_ok: true,
|
|
}),
|
|
})
|
|
.then((res) => res.json())
|
|
.then((res) =>
|
|
res?.status === "Ok"
|
|
? console.log(
|
|
`%cChange canvas ${node.name}: ${res.status}`,
|
|
"color: green; font-weight: 600;"
|
|
)
|
|
: console.error(`Error change canvas: ${res.status}`)
|
|
)
|
|
.catch((err) => console.error(`Error change canvas: ${err}`));
|
|
});
|
|
});
|
|
|
|
app.canvas.onDrawBackground = function () {
|
|
// Draw node isnt fired once the node is off the screen
|
|
// if it goes off screen quickly, the input may not be removed
|
|
// this shifts it off screen so it can be moved back if the node is visible.
|
|
for (let n in app.graph._nodes) {
|
|
const currnode = app.graph._nodes[n];
|
|
for (let w in currnode.widgets) {
|
|
let wid = currnode.widgets[w];
|
|
if (Object.hasOwn(wid, "painter_widget")) {
|
|
wid.painter_wrap.style.left = -8000 + "px";
|
|
wid.painter_wrap.style.position = "absolute";
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
node.onResize();
|
|
app.graph.setDirtyCanvas(true, false);
|
|
|
|
return { widget: widget };
|
|
}
|
|
// ================= END CREATE PAINTER WIDGET ============
|
|
|
|
// ================= CREATE EXTENSION ================
|
|
|
|
const extensionName = "alekpet.PainterNode";
|
|
|
|
app.registerExtension({
|
|
name: extensionName,
|
|
async init(app) {
|
|
// Add styles
|
|
addStylesheet("css/painternode/painter_node_styles.css", import.meta.url);
|
|
|
|
// Add settings params painter node
|
|
app.ui.settings.addSetting({
|
|
id: `${extensionName}.SaveSettingsJson`,
|
|
name: "🔸 Painter Node",
|
|
defaultValue: false,
|
|
type: (name, sett, val) => {
|
|
const newUI = document.querySelector(".p-dialog-header");
|
|
return makeElement("tr", {
|
|
children: [
|
|
!newUI
|
|
? makeElement("td", {
|
|
children: [
|
|
makeElement("label", {
|
|
textContent: name,
|
|
for: convertIdClass(
|
|
`${extensionName}.save_settings_json_checkbox`
|
|
),
|
|
}),
|
|
],
|
|
})
|
|
: "",
|
|
makeElement("td", {
|
|
children: [
|
|
makeElement("label", {
|
|
style: { display: "block" },
|
|
textContent: "Save settings to json file: ",
|
|
for: convertIdClass(
|
|
`${extensionName}.save_settings_json_checkbox`
|
|
),
|
|
children: [
|
|
makeElement("input", {
|
|
id: convertIdClass(
|
|
`${extensionName}.save_settings_json_checkbox`
|
|
),
|
|
type: "checkbox",
|
|
checked: val,
|
|
onchange: (e) => {
|
|
const checked = !!e.target.checked;
|
|
painters_settings_json = checked;
|
|
|
|
// Settings all painter nodes save in the JSON or LocalStorage
|
|
const PainerNodes = app.graph._nodes.filter(
|
|
(wi) => wi.type == "PainterNode"
|
|
);
|
|
|
|
if (PainerNodes.length) {
|
|
PainerNodes.map((n) => {
|
|
n.LS_Cls.painters_settings_json =
|
|
painters_settings_json;
|
|
});
|
|
}
|
|
//
|
|
|
|
sett(checked);
|
|
},
|
|
}),
|
|
],
|
|
}),
|
|
makeElement("button", {
|
|
textContent: "Managing Data",
|
|
onclick: () => {
|
|
new PainterStorageDialog().show(painters_settings_json);
|
|
},
|
|
style: {
|
|
display: "block",
|
|
},
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
});
|
|
},
|
|
});
|
|
},
|
|
async setup(app) {
|
|
let PainerNode = app.graph._nodes.filter((wi) => wi.type == "PainterNode");
|
|
|
|
if (PainerNode.length) {
|
|
PainerNode.map(async (n) => {
|
|
console.log(`Setup PainterNode: ${n.name}`);
|
|
// Resize window
|
|
window.addEventListener("resize", (e) => resizeCanvas(n), false);
|
|
});
|
|
}
|
|
},
|
|
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
|
if (nodeData.name === "PainterNode") {
|
|
// Create node
|
|
const onNodeCreated = nodeType.prototype.onNodeCreated;
|
|
nodeType.prototype.onNodeCreated = async function () {
|
|
const r = onNodeCreated
|
|
? onNodeCreated.apply(this, arguments)
|
|
: undefined;
|
|
|
|
const node_title = await this.getTitle();
|
|
const node_id = this.id; // used node id as image name,instead of PainterNode's quantity
|
|
|
|
const nodeName = `Paint_${node_id}`;
|
|
const nodeNamePNG = `${nodeName}.png`;
|
|
|
|
console.log(`Create PainterNode: ${nodeName}`);
|
|
|
|
this.LS_Cls = new LS_Class(nodeNamePNG, painters_settings_json);
|
|
|
|
// Find widget update_node and hide him
|
|
for (const w of this.widgets) {
|
|
if (w.name === "update_node") {
|
|
w.type = "converted-widget";
|
|
w.value =
|
|
this.LS_Cls.LS_Painters.settings?.pipingSettings
|
|
?.pipingUpdateImage ?? true;
|
|
w.computeSize = () => [0, -4];
|
|
if (!w.linkedWidgets) continue;
|
|
for (const l of w.linkedWidgets) {
|
|
l.type = "converted-widget";
|
|
l.computeSize = () => [0, -4];
|
|
}
|
|
}
|
|
}
|
|
|
|
await PainterWidget.apply(this, [this, nodeNamePNG, {}, app]);
|
|
await this.LS_Cls.LS_Init(this);
|
|
let painter_ls = this.LS_Cls.LS_Painters;
|
|
|
|
const widgetImage = this.widgets.find((w) => w.name == "image");
|
|
|
|
if (painter_ls && typeof lsData === "string") {
|
|
painter_ls = JSON.parse(painter_ls);
|
|
}
|
|
|
|
if (widgetImage && painter_ls && !isEmptyObject(painter_ls)) {
|
|
// Load settings elements
|
|
this.painter.setValueElementsLS();
|
|
|
|
painter_ls.hasOwnProperty("objects_canvas") &&
|
|
delete painter_ls.objects_canvas; // remove old property
|
|
|
|
if (painter_ls?.settings?.currentCanvasSize) {
|
|
this.painter.currentCanvasSize =
|
|
painter_ls.settings.currentCanvasSize;
|
|
|
|
this.painter.setCanvasSize(
|
|
this.painter.currentCanvasSize.width,
|
|
this.painter.currentCanvasSize.height
|
|
);
|
|
}
|
|
this.painter.canvasLoadSettingPainter();
|
|
}
|
|
|
|
this.painter.canvas.renderAll();
|
|
this.painter.uploadPaintFile(nodeNamePNG);
|
|
this.title = `${this.type} - ${this.painter.currentCanvasSize.width}x${this.painter.currentCanvasSize.height}`;
|
|
|
|
return r;
|
|
};
|
|
|
|
// ExtraMenuOptions
|
|
const getExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
|
|
nodeType.prototype.getExtraMenuOptions = async function (_, options) {
|
|
getExtraMenuOptions?.apply(this, arguments);
|
|
await this.getTitle();
|
|
|
|
const past_index = options.findIndex(
|
|
(m) => m?.content === "Paste (Clipspace)"
|
|
),
|
|
past = options[past_index];
|
|
|
|
if (!!past) {
|
|
// Past as image
|
|
const past_callback = past.callback;
|
|
past.callback = () => {
|
|
past_callback.apply(this, arguments);
|
|
if (!this.imgs.length) return;
|
|
|
|
this.painter.pastAsImage(this.imgs[0]);
|
|
};
|
|
|
|
// Past as background
|
|
options.splice(past_index + 1, 0, {
|
|
content: "Paste background (Clipspace)",
|
|
callback: () => {
|
|
past_callback.apply(this, arguments);
|
|
if (!this.imgs.length) return;
|
|
|
|
this.painter.pastAsBackground(this.imgs[0]);
|
|
},
|
|
});
|
|
}
|
|
|
|
const removeIndex = options.findIndex((m) => m?.content === "Remove"),
|
|
removeButton = options[removeIndex];
|
|
if (!!removeButton) {
|
|
const remove_callback = removeButton.callback;
|
|
const self = this;
|
|
removeButton.callback = function () {
|
|
remove_callback.apply(this, arguments);
|
|
|
|
if (confirm("Remove storage data?")) {
|
|
self.LS_Cls.removeData();
|
|
}
|
|
};
|
|
}
|
|
};
|
|
// end - ExtraMenuOptions
|
|
}
|
|
},
|
|
});
|
|
// ================= END CREATE EXTENSION ================
|