+
+
@@ -104,7 +106,8 @@ http://127.0.0.1:8188/flow
- Enhanced Customization Options
### Feature Support
-- [ ] Inpainting Functionality
+- [x] Canvas / Masking / Inpainting Functionality
+- - [ ] Improved Canvas / Masking / Inpainting Functionality
- [ ] Enhanced Media Handling
- [x] Live Preview
- [ ] Prompt Tracking
diff --git a/__init__.py b/__init__.py
index c901f33..4a27190 100644
--- a/__init__.py
+++ b/__init__.py
@@ -38,7 +38,7 @@
NODE_DISPLAY_NAME_MAPPINGS: Dict[str, str] = {}
APP_CONFIGS: List[AppConfig] = []
APP_NAME: str = "Flow"
-APP_VERSION: str = "0.2.3"
+APP_VERSION: str = "0.3.0"
PURPLE = "\033[38;5;129m"
RESET = "\033[0m"
FLOWMSG = f"{PURPLE}Flow{RESET}"
diff --git a/pyproject.toml b/pyproject.toml
index 62e64ba..5fe447c 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,7 +1,7 @@
[project]
name = "comfyui-disty-flow"
description = "Flow is a custom node designed to provide a more user-friendly interface for ComfyUI by acting as an alternative user interface for running workflows. It is not a replacement for workflow creation.\nFlow is currently in the early stages of development, so expect bugs and ongoing feature enhancements. With your support and feedback, Flow will settle into a steady stream."
-version = "0.2.3"
+version = "0.3.0"
license = {file = "LICENSE"}
[project.urls]
diff --git a/web/core/content.html b/web/core/content.html
index 5aec955..2b0c433 100644
--- a/web/core/content.html
+++ b/web/core/content.html
@@ -1,13 +1,17 @@
+
_)for(var C=1,S=v.length;Ct[i-2].x?1:s.x===t[i-2].x?0:-1,h=s.y>t[i-2].y?1:s.y===t[i-2].y?0:-1),n.push(["L",s.x+c*e,s.y+h*e]),n},fabric.util.getPathSegmentsInfo=l,fabric.util.getBoundsOfCurve=function(t,e,i,r,n,s,o,a){var c;if(fabric.cachesBoundsOfCurve&&(c=w.call(arguments),fabric.boundsOfCurveCache[c]))return fabric.boundsOfCurveCache[c];for(var h,l,u,f=Math.sqrt,d=Math.min,g=Math.max,p=Math.abs,m=[],v=[[],[]],b=6*t-12*i+6*n,y=-3*t+9*i-9*n+3*o,_=3*i-3*t,x=0;x<2;++x)0t.x&&this.y>t.y},gte:function(t){return this.x>=t.x&&this.y>=t.y},lerp:function(t,e){return void 0===e&&(e=.5),e=Math.max(Math.min(1,e),0),new i(this.x+(t.x-this.x)*e,this.y+(t.y-this.y)*e)},distanceFrom:function(t){var e=this.x-t.x,t=this.y-t.y;return Math.sqrt(e*e+t*t)},midPointFrom:function(t){return this.lerp(t)},min:function(t){return new i(Math.min(this.x,t.x),Math.min(this.y,t.y))},max:function(t){return new i(Math.max(this.x,t.x),Math.max(this.y,t.y))},toString:function(){return this.x+","+this.y},setXY:function(t,e){return this.x=t,this.y=e,this},setX:function(t){return this.x=t,this},setY:function(t){return this.y=t,this},setFromPoint:function(t){return this.x=t.x,this.y=t.y,this},swap:function(t){var e=this.x,i=this.y;this.x=t.x,this.y=t.y,t.x=e,t.y=i},clone:function(){return new i(this.x,this.y)}}}("undefined"!=typeof exports?exports:this),function(t){"use strict";var a=t.fabric||(t.fabric={});function c(t){this.status=t,this.points=[]}a.Intersection?a.warn("fabric.Intersection is already defined"):(a.Intersection=c,a.Intersection.prototype={constructor:c,appendPoint:function(t){return this.points.push(t),this},appendPoints:function(t){return this.points=this.points.concat(t),this}},a.Intersection.intersectLineLine=function(t,e,i,r){var n,s=(r.x-i.x)*(t.y-i.y)-(r.y-i.y)*(t.x-i.x),o=(e.x-t.x)*(t.y-i.y)-(e.y-t.y)*(t.x-i.x),r=(r.y-i.y)*(e.x-t.x)-(r.x-i.x)*(e.y-t.y);return 0!=r?(i=o/r,0<=(r=s/r)&&r<=1&&0<=i&&i<=1?(n=new c("Intersection")).appendPoint(new a.Point(t.x+r*(e.x-t.x),t.y+r*(e.y-t.y))):n=new c):n=new c(0==s||0==o?"Coincident":"Parallel"),n},a.Intersection.intersectLinePolygon=function(t,e,i){for(var r,n,s=new c,o=i.length,a=0;a=o&&(s.x-=o),s.x<=-o&&(s.x+=o),s.y>=o&&(s.y-=o),s.y<=o&&(s.y+=o),s.x-=t.offsetX,s.y-=t.offsetY,s}function w(t){return t.flipX!==t.flipY}function O(t,e,i,r,n){0!==t[e]&&(e=n/t._getTransformedDimensions()[r]*t[i],t.set(i,e))}function P(t,e,i,r){var n,s=e.target,o=s._getTransformedDimensions(0,s.skewY),i=T(e,e.originX,e.originY,i,r),r=Math.abs(2*i.x)-o.x,i=s.skewX,r=(r<2?n=0:(n=g(Math.atan2(r/s.scaleX,o.y/s.scaleY)),e.originX===c&&e.originY===u&&(n=-n),e.originX===l&&e.originY===h&&(n=-n),w(s)&&(n=-n)),i!==n);return r&&(o=s._getTransformedDimensions().y,s.set("skewX",n),O(s,"skewY","scaleY","y",o)),r}function k(t,e,i,r){var n,s=e.target,o=s._getTransformedDimensions(s.skewX,0),i=T(e,e.originX,e.originY,i,r),r=Math.abs(2*i.y)-o.y,i=s.skewY,r=(r<2?n=0:(n=g(Math.atan2(r/s.scaleY,o.x/s.scaleX)),e.originX===c&&e.originY===u&&(n=-n),e.originX===l&&e.originY===h&&(n=-n),w(s)&&(n=-n)),i!==n);return r&&(o=s._getTransformedDimensions().x,s.set("skewY",n),O(s,"skewX","scaleX","x",o)),r}function E(t,e,i,r,n){var s=e.target,o=s.lockScalingX,a=s.lockScalingY,n=(n=n||{}).by,t=b(t,s),c=_(s,n,t),h=e.gestureScale;if(c)return!1;if(h)l=e.scaleX*h,u=e.scaleY*h;else{if(c=T(e,e.originX,e.originY,i,r),h="y"!==n?p(c.x):1,i="x"!==n?p(c.y):1,e.signX||(e.signX=h),e.signY||(e.signY=i),s.lockScalingFlip&&(e.signX!==h||e.signY!==i))return!1;var l,u,r=s._getTransformedDimensions();u=t&&!n?(t=Math.abs(c.x)+Math.abs(c.y),f=e.original,t=t/(Math.abs(r.x*f.scaleX/s.scaleX)+Math.abs(r.y*f.scaleY/s.scaleY)),l=f.scaleX*t,f.scaleY*t):(l=Math.abs(c.x*s.scaleX/r.x),Math.abs(c.y*s.scaleY/r.y)),y(e)&&(l*=2,u*=2),e.signX!==h&&"y"!==n&&(e.originX=d[e.originX],l*=-1,e.signX=h),e.signY!==i&&"x"!==n&&(e.originY=d[e.originY],u*=-1,e.signY=i)}var f=s.scaleX,t=s.scaleY;return n?("x"===n&&s.set("scaleX",l),"y"===n&&s.set("scaleY",u)):(o||s.set("scaleX",l),a||s.set("scaleY",u)),f!==s.scaleX||t!==s.scaleY}o.scaleCursorStyleHandler=function(t,e,i){var t=b(t,i),r="";return 0!==e.x&&0===e.y?r="x":0===e.x&&0!==e.y&&(r="y"),_(i,r,t)?"not-allowed":(r=m(i,e),n[r]+"-resize")},o.skewCursorStyleHandler=function(t,e,i){var r="not-allowed";return 0!==e.x&&i.lockSkewingY||0!==e.y&&i.lockSkewingX?r:(r=m(i,e)%4,s[r]+"-resize")},o.scaleSkewCursorStyleHandler=function(t,e,i){return t[i.canvas.altActionKey]?o.skewCursorStyleHandler(t,e,i):o.scaleCursorStyleHandler(t,e,i)},o.rotationWithSnapping=S("rotating",C(function(t,e,i,r){var n=e.target,s=n.translateToOriginPoint(n.getCenterPoint(),e.originX,e.originY);if(n.lockRotation)return!1;var o=Math.atan2(e.ey-s.y,e.ex-s.x),r=Math.atan2(r-s.y,i-s.x),i=g(r-o+e.theta);return 0r.r2,o=(this.gradientTransform||fabric.iMatrix).concat(),a=-this.offsetX,c=-this.offsetY,h=!!e.additionalTransform,l="pixels"===this.gradientUnits?"userSpaceOnUse":"objectBoundingBox";if(n.sort(function(t,e){return t.offset-e.offset}),"objectBoundingBox"==l?(a/=t.width,c/=t.height):(a+=t.width/2,c+=t.height/2),"path"===t.type&&"percentage"!==this.gradientUnits&&(a-=t.pathOffset.x,c-=t.pathOffset.y),o[4]-=a,o[5]-=c,t='id="SVGID_'+this.id+'" gradientUnits="'+l+'"',t+=' gradientTransform="'+(h?e.additionalTransform+" ":"")+fabric.util.matrixToSVG(o)+'" ',"linear"===this.type?i=["\n']:"radial"===this.type&&(i=["\n']),"radial"===this.type){if(s)for((n=n.concat()).reverse(),f=0,d=n.length;f \n":"\n"),i.join("")},toLive:function(t){var e,i,r,n=fabric.util.object.clone(this.coords);if(this.type){for("linear"===this.type?e=t.createLinearGradient(n.x1,n.y1,n.x2,n.y2):"radial"===this.type&&(e=t.createRadialGradient(n.x1,n.y1,n.r1,n.x2,n.y2,n.r2)),i=0,r=this.colorStops.length;i\n\n\t\n\t\t \n \n'},toObject:function(){if(this.includeDefaultValues)return{color:this.color,blur:this.blur,offsetX:this.offsetX,offsetY:this.offsetY,affectStroke:this.affectStroke,nonScaling:this.nonScaling};var e={},i=o.Shadow.prototype;return["color","blur","offsetX","offsetY","affectStroke","nonScaling"].forEach(function(t){this[t]!==i[t]&&(e[t]=this[t])},this),e}}),o.Shadow.reOffsetsAndBlur=/(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/)}("undefined"!=typeof exports?exports:this),function(){"use strict";var n,t,h,a,s,o,i,r,e;fabric.StaticCanvas?fabric.warn("fabric.StaticCanvas is already defined."):(n=fabric.util.object.extend,t=fabric.util.getElementOffset,h=fabric.util.removeFromArray,a=fabric.util.toFixed,s=fabric.util.transformPoint,o=fabric.util.invertTransform,i=fabric.util.getNodeCanvas,r=fabric.util.createCanvasElement,e=new Error("Could not initialize `canvas` element"),fabric.StaticCanvas=fabric.util.createClass(fabric.CommonMethods,{initialize:function(t,e){e=e||{},this.renderAndResetBound=this.renderAndReset.bind(this),this.requestRenderAllBound=this.requestRenderAll.bind(this),this._initStatic(t,e)},backgroundColor:"",backgroundImage:null,overlayColor:"",overlayImage:null,includeDefaultValues:!0,stateful:!1,renderOnAddRemove:!0,controlsAboveOverlay:!1,allowTouchScrolling:!1,imageSmoothingEnabled:!0,viewportTransform:fabric.iMatrix.concat(),backgroundVpt:!0,overlayVpt:!0,enableRetinaScaling:!0,vptCoords:{},skipOffscreen:!0,clipPath:void 0,_initStatic:function(t,e){var i=this.requestRenderAllBound;this._objects=[],this._createLowerCanvas(t),this._initOptions(e),this.interactive||this._initRetinaScaling(),e.overlayImage&&this.setOverlayImage(e.overlayImage,i),e.backgroundImage&&this.setBackgroundImage(e.backgroundImage,i),e.backgroundColor&&this.setBackgroundColor(e.backgroundColor,i),e.overlayColor&&this.setOverlayColor(e.overlayColor,i),this.calcOffset()},_isRetinaScaling:function(){return 1\n'),this._setSVGBgOverlayColor(i,"background"),this._setSVGBgOverlayImage(i,"backgroundImage",e),this._setSVGObjects(i,e),this.clipPath&&i.push("\n"),this._setSVGBgOverlayColor(i,"overlay"),this._setSVGBgOverlayImage(i,"overlayImage",e),i.push(""),i.join("")},_setSVGPreamble:function(t,e){e.suppressPreamble||t.push('\n','\n')},_setSVGHeader:function(t,e){var i,r=e.width||this.width,n=e.height||this.height,s='viewBox="0 0 '+this.width+" "+this.height+'" ',o=fabric.Object.NUM_FRACTION_DIGITS;e.viewBox?s='viewBox="'+e.viewBox.x+" "+e.viewBox.y+" "+e.viewBox.width+" "+e.viewBox.height+'" ':this.svgViewportTransformation&&(i=this.viewportTransform,s='viewBox="'+a(-i[4]/i[0],o)+" "+a(-i[5]/i[3],o)+" "+a(this.width/i[0],o)+" "+a(this.height/i[3],o)+'" '),t.push("
+
+
diff --git a/web/core/css/main.css b/web/core/css/main.css
index cc04068..bfbb339 100644
--- a/web/core/css/main.css
+++ b/web/core/css/main.css
@@ -174,7 +174,7 @@ header .right {
display: flex;
flex: 1;
text-align: left;
- overflow-y: auto;
+ overflow: hidden;
}
.content div {
@@ -194,6 +194,10 @@ header .right {
flex: 1.1;
background-color: var(--color-background);
}
+.content .right-col {
+ flex: 0.5;
+ background-color: var(--color-background);
+}
.content .mid-col {
flex: 2.5;
@@ -201,11 +205,64 @@ header .right {
border-right: 1px dashed var(--color-border);
justify-content: space-around;
min-height: 100%;
+ padding: 10px;
+ /* padding: 4px 6px; */
+
}
-.content .right-col {
- flex: 0.5;
- background-color: var(--color-background);
+.canvas-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ /* height: 100% !important; */
+ /* width: 100% !important; */
+ /* background: var(--color-button-primary-active); */
+}
+
+#canvasContainer:focus {
+ border: 2px solid #4A90E2;
+}
+
+#imageCanvas {
+ /* width: 100%; */
+ /* height: 100%; */
+ display: block;
+ /* position: absolute; */
+ /* top: 0; */
+ /* left: 0; */
+ /* background: green; */
+ overflow: hidden;
+ padding: 0;
+
+}
+
+/* Green dashed border around the canvas wrapper */
+#canvasWrapper {
+ /* position: relative; */
+ flex: 1;
+ /* width: 100%; */
+ /* height: 100%; */
+ overflow: hidden;
+ /* background-color: var(--color-background-secondary); */
+ border: 1px dashed var(--color-border);
+ box-sizing: border-box;
+ /* width: 800px; */
+ /* height: 600px; */
+ position: relative;
+ margin: 0; /* Remove default margins */
+ padding: 10px;
+}
+
+.brush-ui-container {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 10px;
+ background-color: var(--color-button-primary-text-hover);
+ color: var(--color-primary-text);
+ border: 1px solid var(--color-border);
+ border-radius: 5px;
+ margin-bottom: 10px;
}
#control button {
@@ -676,7 +733,7 @@ select option:hover {
height: 100%;
position: relative;
object-fit: contain;
- border: 2px dashed var(--color-border);
+ border: 1px dashed var(--color-border);
border-radius: 5px;
}
#batch-images-container {
@@ -1546,4 +1603,356 @@ html:not(.css-loading) body {
.multi-component-container {
background: var(--color-background-secondary);
margin-bottom: 4px;
-}
\ No newline at end of file
+}
+.plugin-ui-container {
+ background: var(--color-background-secondary);
+ padding: 4px;
+ /* position: absolute; */
+ /* top: 100px; */
+ /* left: 19%; */
+ z-index: 1000;
+ transition: width 0.3s, height 0.3s;
+ display: flex;
+ flex-direction: row;
+ /* justify-content: space-between; */
+ align-items: stretch;
+ /* border: 1px dashed var(--color-border); */
+ margin: 5px;
+}
+/* Style for the plugin UI container */
+#pluginUIContainer {
+ /* padding: 10px; */
+ /* background-color: var(--color-background-secondary); */
+ /* Adjust as needed */
+}
+
+/* Parent container for the canvas */
+/* #canvasContainer {
+ position: relative;
+ width: 100%;
+ height: calc(100% - 60px);
+ border: 1px solid #ccc;
+ box-sizing: border-box;
+} */
+
+/* Make the canvas fill its parent container */
+/* #imageCanvas {
+ width: 100% !important;
+ height: 100% !important;
+ display: block;
+ background: var(--color-progress-background);
+
+} */
+
+ /* CSS Isolation: Prefix all classes with 'cbp-' */
+ .cbp-brush-ui-container {
+ background-color: var(--color-background);
+ user-select: none;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ font-family: Arial, sans-serif;
+ font-size: 14px;
+ color: var(--color-text);
+ position: absolute;
+ top: 100px;
+ left: 19%;
+ z-index: 1000;
+ transition: width 0.3s, height 0.3s;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+
+ border: 1px dashed var(--color-border);
+ }
+ .cbp-brush-ui-header {
+ cursor: move;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px;
+ background-color: var(--color-header-background);
+ border-bottom: 1px dashed var(--color-border);
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ }
+ .cbp-brush-ui-title {
+ font-weight: bold;
+ }
+ .cbp-brush-ui-minimize-btn {
+ background: none;
+ border: none;
+ font-size: 18px;
+ cursor: pointer;
+ width: 24px;
+ height: 24px;
+ padding: 0;
+ color: var(--color-text);
+ display: none;
+ }
+ .cbp-brush-ui-content {
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ width: 100%;
+ box-sizing: border-box;
+ }
+ .cbp-brush-ui-content label {
+ display: flex;
+ flex-direction: column;
+ font-size: 12px;
+ gap: 4px;
+ }
+ .cbp-brush-ui-content input[type="range"],
+ .cbp-brush-ui-content input[type="number"],
+ .cbp-brush-ui-content input[type="color"],
+ .cbp-brush-ui-content button {
+ width: 100%;
+ height: 30px;
+ box-sizing: border-box;
+ padding: 4px;
+ /* border: 1px solid #ccc; */
+ /* border-radius: 4px; */
+ font-size: 14px;
+ }
+
+ .cbp-brush-ui-toggle-btn {
+ flex: 2;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: var(--color-button-primary);
+ border: none;
+ cursor: pointer;
+ padding: 4px !important;
+ height: 40px !important;
+ width: auto;
+ }
+ #cbp-color-picker {
+ flex: 1;
+ height: auto;
+
+ }
+ #cbp-color-picker:hover {
+ border: 1px dashed var(--color-button-primary-text);
+ }
+ #cbp-toggle-btn-icon {
+ width: 70%;
+ height: 100%;
+ /* display: block; Ensures the SVG takes up space */
+ }
+ #cbp-toggle-drawing-mode-btn.active {
+ /* background: var(--color-button-primary-text); */
+ border: 1px dashed var(--color-button-primary-text) !important;
+ }
+ #ui-toggle-btn.active {
+ background: var(--color-button-primary-text);
+ /* border: 1px dashed var(--color-button-secondary-text-active) !important; */
+
+ }
+ .cbp-brush-ui-color-picker {
+ flex: 1;
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+
+ width: 100%;
+ height: 100%;
+ }
+
+ .cbp-brush-ui-content input[type="color"] {
+ padding: 0;
+ /* border: none; */
+ background-color: var(--color-background);
+ outline: none;
+ -webkit-appearance: none; /* Removes default styling in WebKit browsers */
+ border-bottom: 1px dashed var(--color-border);
+
+ }
+
+ /* Remove the color swatch border in WebKit browsers */
+ .cbp-brush-ui-content input[type="color"]::-webkit-color-swatch-wrapper {
+ padding: 0;
+ border: none;
+ }
+
+ .cbp-brush-ui-content input[type="color"]::-webkit-color-swatch {
+ border: none;
+ }
+
+ /* Remove the color swatch border in Firefox */
+ .cbp-brush-ui-content input[type="color"]::-moz-color-swatch {
+ border: none;
+ }
+ .cbp-brush-ui-minimized .cbp-brush-ui-content {
+ display: none;
+ }
+ .cbp-brush-ui-full {
+ width: 155px;
+ height: auto;
+ }
+ .cbp-brush-ui-mini {
+ width: 80px;
+ height: auto;
+ }
+ .cbp-brush-ui-minimized {
+ width: 60px;
+ height: auto;
+ }
+ .cbp-brush-ui-input-group {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+ .cbp-brush-ui-input-group input {
+ flex: 1;
+ }
+ .cbp-hidden-cursor {
+ cursor: none !important;
+ }
+
+
+
+
+ .mbp-container * {
+ box-sizing: border-box;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ }
+
+ .mbp-container {
+ /* --mbp-primary: var(--color-button-primary);
+ --mbp-primary-hover: var(--color-button-primary-hover);
+ --mbp-bg: var(--color-background-secondary);
+ --mbp-border: var(--color-border);
+ --mbp-text: var(--color-primary-text);
+ --mbp-icon: var(--color-primary); */
+ padding: 0.5rem;
+ }
+
+ .mbp-header {
+ display: flex;
+ gap: 0.5rem;
+ margin-bottom: 0.75rem;
+ }
+
+ .mbp-header .mbp-select {
+ flex: 1;
+ }
+
+ .mbp-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem;
+ border: 1px solid var(--mbp-border);
+ background: var(--color-button-primary) ;
+ /* border-radius: 0.375rem; */
+ cursor: pointer;
+ transition: all 0.2s;
+ color: var(--mbp-icon);
+ min-width: 36px;
+ height: 36px;
+ width: 100%;
+ }
+
+ .mbp-button:hover {
+ background: var(--color-button-primary-hover);
+ color: var(--mbp-primary);
+ }
+
+ .mbp-button svg {
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+
+ .mbp-select {
+ padding: 0.5rem;
+ border: none;
+ background: var(--color-background);
+ color: var(--mbp-text);
+ cursor: pointer;
+ appearance: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: right 0.5rem center;
+ background-size: 1.25rem;
+ padding-right: 2.5rem;
+ height: 36px;
+ outline: none;
+ }
+ .mbp-select:hover {
+ /* background: var(--color-button-primary-hover); */
+ border-top: solid 1px var(--color-button-primary-hover);
+ }
+
+ .mbp-toggle-wrapper {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ margin: 0.75rem 0;
+ padding: 0.25rem 0;
+ display: none !important;
+
+ }
+
+ .mbp-toggle {
+ position: relative;
+ display: inline-block;
+ width: 3.5rem;
+ height: 1.75rem;
+ margin: 0;
+ }
+
+ .mbp-toggle input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ margin: 0;
+ }
+
+ .mbp-toggle-slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ /* background-color: #e5e7eb; */
+ transition: .3s;
+ border-radius: 2rem;
+ }
+
+ .mbp-toggle-slider:before {
+ position: absolute;
+ content: "";
+ height: 1.25rem;
+ width: 1.25rem;
+ left: 0.25rem;
+ bottom: 0.25rem;
+ /* background-color: white; */
+ transition: .3s;
+ border-radius: 50%;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+
+ .mbp-toggle input:checked + .mbp-toggle-slider {
+ background-color: var(--mbp-primary);
+ }
+
+ .mbp-toggle input:checked + .mbp-toggle-slider:before {
+ transform: translateX(1.75rem);
+ }
+
+ .mbp-label {
+ font-size: 0.75rem;
+ color: var(--mbp-text);
+ user-select: none;
+ padding: 0 6px;
+ }
+
+ .mbp-button-group {
+ display: flex;
+ gap: 0.5rem;
+ margin: 0.75rem 0;
+
+ }
\ No newline at end of file
diff --git a/web/core/js/common/components/CanvasComponent.js b/web/core/js/common/components/CanvasComponent.js
new file mode 100644
index 0000000..8fb3fbb
--- /dev/null
+++ b/web/core/js/common/components/CanvasComponent.js
@@ -0,0 +1,147 @@
+import { showSpinner, hideSpinner } from './utils.js';
+import { updateWorkflow } from './workflowManager.js';
+
+function dataURLToBlob(dataURL) {
+ const [header, data] = dataURL.split(',');
+ const mimeMatch = header.match(/:(.*?);/);
+ if (!mimeMatch) {
+ throw new Error('Invalid data URL.');
+ }
+ const mime = mimeMatch[1];
+ const binary = atob(data);
+ const array = [];
+ for (let i = 0; i < binary.length; i++) {
+ array.push(binary.charCodeAt(i));
+ }
+ return new Blob([new Uint8Array(array)], { type: mime });
+}
+
+async function processAndUpload(items, getImage, uploadDescription, defaultErrorMessage, successMessagePrefix, workflow) {
+ for (const item of items) {
+ const { id, label, nodePath } = item;
+
+ try {
+ showSpinner();
+
+ const imageDataURL = getImage();
+ // console.log(`${uploadDescription} Data URL for ${id}:`, imageDataURL);
+ if (!imageDataURL) {
+ throw new Error(`${uploadDescription} data is unavailable.`);
+ }
+
+ const blob = dataURLToBlob(imageDataURL);
+
+ const formData = new FormData();
+ formData.append('image', blob, `${id}.png`);
+
+ const response = await fetch('/upload/image', {
+ method: 'POST',
+ body: formData,
+ });
+
+ if (!response.ok) {
+ let errorMessage = defaultErrorMessage;
+ try {
+ const errorResponse = await response.json();
+ errorMessage = errorResponse.message || errorMessage;
+ } catch (e) {
+ console.error('Failed to parse error response:', e);
+ }
+ throw new Error(errorMessage);
+ }
+
+ let result;
+ try {
+ result = await response.json();
+ console.log(`Server Response for ${id}:`, result);
+ } catch (e) {
+ throw new Error('Invalid JSON response from server.');
+ }
+
+ console.log(`${successMessagePrefix} ${id} uploaded successfully:`, result);
+
+ if (result && result.name) {
+ updateWorkflow(workflow, nodePath, result.name);
+ console.log(`Workflow updated at nodePath ${nodePath} with imageUrl: ${result.name}`);
+ } else {
+ throw new Error('Server response did not include imageUrl or imageName.');
+ }
+ } catch (error) {
+ console.error(`Error uploading ${uploadDescription.toLowerCase()} ${id}:`, error);
+ alert(`Error uploading ${label}: ${error.message}`);
+ } finally {
+ hideSpinner();
+ }
+ }
+}
+
+export default async function CanvasComponent(flowConfig, workflow, canvasLoader) {
+ if (flowConfig.canvasOutputs && Array.isArray(flowConfig.canvasOutputs)) {
+ await processAndUpload(
+ flowConfig.canvasOutputs,
+ () => canvasLoader.getCanvasOutImage(),
+ 'Canvas Output Image',
+ 'Canvas upload failed.',
+ 'Canvas',
+ workflow
+ );
+ }
+
+ // **Process canvasLoadedImages and canvasSelectedMaskOutputs (Case 1)**
+ if (
+ flowConfig.canvasLoadedImages && Array.isArray(flowConfig.canvasLoadedImages) &&
+ flowConfig.canvasSelectedMaskOutputs && Array.isArray(flowConfig.canvasSelectedMaskOutputs)
+ ) {
+ await processAndUpload(
+ flowConfig.canvasLoadedImages,
+ () => canvasLoader.getOriginalImage(),
+ 'Original Image',
+ 'Original image upload failed.',
+ 'Original Image',
+ workflow
+ );
+
+ await processAndUpload(
+ flowConfig.canvasSelectedMaskOutputs,
+ () => canvasLoader.getSelectedMaskAlphaOnImage(),
+ 'Selected Mask Alpha Image',
+ 'Selected mask alpha image upload failed.',
+ 'Selected Mask Alpha Image',
+ workflow
+ );
+ }
+
+ if (flowConfig.canvasMaskOutputs && Array.isArray(flowConfig.canvasMaskOutputs)) {
+ await processAndUpload(
+ flowConfig.canvasMaskOutputs,
+ () => canvasLoader.getMaskImage(),
+ 'Mask Image',
+ 'Mask image upload failed.',
+ 'Mask Image',
+ workflow
+ );
+ }
+
+ if (flowConfig.canvasAlphaOutputs && Array.isArray(flowConfig.canvasAlphaOutputs)) {
+ await processAndUpload(
+ flowConfig.canvasAlphaOutputs,
+ () => canvasLoader.getMaskAlphaOnImage(),
+ 'Mask Alpha Image',
+ 'Mask alpha image upload failed.',
+ 'Mask Alpha Image',
+ workflow
+ );
+ }
+
+ // **Process canvasSelectedMaskOutputs (New Functionality for Case 1)**
+ if (flowConfig.canvasSelectedMaskOutputs && Array.isArray(flowConfig.canvasSelectedMaskOutputs)) {
+ await processAndUpload(
+ flowConfig.canvasSelectedMaskOutputs,
+ () => canvasLoader.getSelectedMaskAlphaOnImage(),
+ 'Selected Mask Alpha Image',
+ 'Selected mask alpha image upload failed.',
+ 'Selected Mask Alpha Image',
+ workflow
+ );
+ }
+}
diff --git a/web/core/js/common/components/canvas/CanvasControlsPlugin.js b/web/core/js/common/components/canvas/CanvasControlsPlugin.js
new file mode 100644
index 0000000..831ac8c
--- /dev/null
+++ b/web/core/js/common/components/canvas/CanvasControlsPlugin.js
@@ -0,0 +1,240 @@
+import { CanvasPlugin } from './CanvasPlugin.js';
+
+export class CanvasControlsPlugin extends CanvasPlugin {
+ constructor(options = {}) {
+ super('CanvasControlsPlugin');
+
+ this.zoomIn = this.zoomIn.bind(this);
+ this.zoomOut = this.zoomOut.bind(this);
+ this.resetZoom = this.resetZoom.bind(this);
+ this.onMouseDown = this.onMouseDown.bind(this);
+ this.onMouseMove = this.onMouseMove.bind(this);
+ this.onMouseUp = this.onMouseUp.bind(this);
+ this.onAfterRender = this.onAfterRender.bind(this);
+ this.arraysEqual = this.arraysEqual.bind(this);
+
+ this.canvasManager = null;
+ this.canvas = null;
+ this.isPanning = false;
+ this.lastPosX = 0;
+ this.lastPosY = 0;
+ this.lastTransform = null;
+ }
+
+ init(canvasManager) {
+ this.canvasManager = canvasManager;
+ this.canvas = canvasManager.canvas;
+
+ this.createUI();
+
+ this.attachEventListeners();
+
+ this.lastTransform = this.canvas.viewportTransform.slice();
+ }
+
+ createUI() {
+ const styleSheet = document.createElement('style');
+ styleSheet.textContent = `
+ .cc-container * {
+ box-sizing: border-box;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ }
+
+ .cc-container {
+ display: inline-flex;
+ gap: 0.5rem;
+ padding: 0.5rem;
+ /* background: var(--color-background); */
+ /* border: 1px dashed var(--color-border); */
+ user-select: none;
+ }
+
+ .cc-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem;
+ background: var(--color-button-primary);
+ border: none;
+ cursor: pointer;
+ transition: all 0.2s;
+ color: var(--color-primary-text);
+ min-width: 36px;
+ height: 36px;
+ }
+
+ .cc-button:hover {
+ background: var(--color-button-primary-hover);
+ }
+
+ .cc-button svg {
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+
+ .cc-button[data-active="true"] {
+ border: 1px dashed var(--color-button-secondary-text-active);
+ }
+
+ .cc-divider {
+ width: 1px;
+ border-left: 1px dashed var(--color-border);
+ margin: 0 0.25rem;
+ display: none;
+ }
+ #panBtn {
+ display: none;
+ }
+ `;
+ document.head.appendChild(styleSheet);
+
+ const temp = document.createElement('div');
+ temp.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+
+ this.uiContainer = temp.firstElementChild;
+ this.zoomInBtn = this.uiContainer.querySelector('#zoomInBtn');
+ this.zoomOutBtn = this.uiContainer.querySelector('#zoomOutBtn');
+ this.resetZoomBtn = this.uiContainer.querySelector('#resetZoomBtn');
+ this.panBtn = this.uiContainer.querySelector('#panBtn');
+
+ const pluginUIContainer = document.getElementById('pluginUIContainer');
+ if (pluginUIContainer) {
+ pluginUIContainer.appendChild(this.uiContainer);
+ } else {
+ console.warn('Element with id "pluginUIContainer" not found.');
+ }
+
+ this.updatePanButtonState = (isPanning) => {
+ this.panBtn.dataset.active = isPanning;
+ };
+ }
+
+ attachEventListeners() {
+ this.zoomInBtn.addEventListener('click', this.zoomIn);
+ this.zoomOutBtn.addEventListener('click', this.zoomOut);
+ this.resetZoomBtn.addEventListener('click', this.resetZoom);
+
+ this.canvas.on('mouse:down', this.onMouseDown);
+ this.canvas.on('mouse:move', this.onMouseMove);
+ this.canvas.on('mouse:up', this.onMouseUp);
+ this.canvas.on('mouse:out', this.onMouseUp);
+
+ this.canvas.on('after:render', this.onAfterRender);
+ }
+
+ detachEventListeners() {
+ this.zoomInBtn.removeEventListener('click', this.zoomIn);
+ this.zoomOutBtn.removeEventListener('click', this.zoomOut);
+ this.resetZoomBtn.removeEventListener('click', this.resetZoom);
+
+ this.canvas.off('mouse:down', this.onMouseDown);
+ this.canvas.off('mouse:move', this.onMouseMove);
+ this.canvas.off('mouse:up', this.onMouseUp);
+ this.canvas.off('mouse:out', this.onMouseUp);
+
+ this.canvas.off('after:render', this.onAfterRender);
+ }
+
+ arraysEqual(a, b) {
+ if (a.length !== b.length) return false;
+ for (let i = 0; i < a.length; i++) {
+ if (a[i] !== b[i]) return false;
+ }
+ return true;
+ }
+
+ onAfterRender() {
+ const currentTransform = this.canvas.viewportTransform;
+ if (!this.arraysEqual(currentTransform, this.lastTransform)) {
+ this.lastTransform = currentTransform.slice();
+ this.canvasManager.emit('viewport:changed', {
+ transform: this.canvas.viewportTransform
+ });
+ }
+ }
+
+ zoomIn() {
+ let zoom = this.canvas.getZoom();
+ zoom *= 1.1;
+ if (zoom > 20) zoom = 20;
+ this.canvas.zoomToPoint({ x: this.canvas.width / 2, y: this.canvas.height / 2 }, zoom);
+ }
+
+ zoomOut() {
+ let zoom = this.canvas.getZoom();
+ zoom /= 1.1;
+ this.canvas.zoomToPoint({ x: this.canvas.width / 2, y: this.canvas.height / 2 }, zoom);
+ }
+
+ resetZoom() {
+ this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
+ }
+
+ onMouseDown(opt) {
+ const evt = opt.e;
+ if (evt.altKey) {
+ this.isPanning = true;
+ this.lastPosX = evt.clientX;
+ this.lastPosY = evt.clientY;
+ this.canvas.setCursor('move');
+ }
+ }
+
+ onMouseMove(opt) {
+ if (this.isPanning) {
+ const e = opt.e;
+ const deltaX = e.clientX - this.lastPosX;
+ const deltaY = e.clientY - this.lastPosY;
+ const vpt = this.canvas.viewportTransform;
+ const zoom = this.canvas.getZoom();
+ vpt[4] += deltaX / zoom;
+ vpt[5] += deltaY / zoom;
+ this.canvas.requestRenderAll();
+ this.lastPosX = e.clientX;
+ this.lastPosY = e.clientY;
+ }
+ }
+
+ onMouseUp(opt) {
+ this.isPanning = false;
+ this.canvas.setCursor('default');
+ }
+
+ destroy() {
+ if (this.uiContainer && this.uiContainer.parentNode) {
+ this.uiContainer.parentNode.removeChild(this.uiContainer);
+ }
+
+ this.detachEventListeners();
+ }
+}
\ No newline at end of file
diff --git a/web/core/js/common/components/canvas/CanvasLoader.js b/web/core/js/common/components/canvas/CanvasLoader.js
new file mode 100644
index 0000000..99ca1b6
--- /dev/null
+++ b/web/core/js/common/components/canvas/CanvasLoader.js
@@ -0,0 +1,467 @@
+import { CanvasManager } from './CanvasManager.js';
+import { ImageLoaderPlugin } from './ImageLoaderPlugin.js';
+import { ImageCompareSliderPlugin } from './ImageCompareSliderPlugin.js';
+import { MaskBrushPlugin } from './MaskBrushPlugin.js';
+import { CanvasControlsPlugin } from './CanvasControlsPlugin.js';
+import { CustomBrushPlugin } from './CustomBrushPlugin.js';
+import { UndoRedoPlugin } from './UndoRedoPlugin.js';
+import { ImageAdderPlugin } from './ImageAdderPlugin.js';
+import { CanvasScaleForSavePlugin } from './CanvasScaleForSavePlugin.js';
+
+const loadFabric = () => {
+ return new Promise((resolve, reject) => {
+ const script = document.createElement('script');
+ script.src = '/core/js/common/components/canvas/fabric.5.2.4.min.js';
+ script.async = false;
+ script.onload = () => {
+ console.log('Fabric.js loaded successfully');
+ resolve();
+ };
+ script.onerror = () => {
+ console.error('Failed to load Fabric.js');
+ reject(new Error('Fabric.js failed to load'));
+ };
+ document.head.appendChild(script);
+ });
+};
+
+// Floating toolbar functionality - move
+const styleSheet = document.createElement('style');
+styleSheet.textContent = `
+ .plugin-ui-container {
+ position: relative;
+ display: flex;
+ gap: 0.5rem;
+ padding: 0.5rem;
+ padding-right: calc(0.5rem + 36px);
+ transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
+ will-change: transform;
+ }
+
+ .plugin-ui-container.floating {
+ position: fixed;
+ bottom: 25%;
+ /* left: 16%px; */
+ z-index: 1000;
+ background: var(--color-background);
+ border: 1px dashed var(--color-border);
+ cursor: move;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ }
+
+ .dock-toggle {
+ position: absolute;
+ right: 0;
+ top: 0;
+ height: 100%;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem;
+ background: var(--color-button-primary);
+ border: none;
+ border-left: 1px dashed var(--color-border);
+ cursor: pointer;
+ transition: all 0.2s;
+ color: var(--color-primary-text);
+ width: 36px;
+ }
+
+ .plugin-ui-container.floating .dock-toggle {
+ position: relative;
+ height: 36px;
+ margin-left: 0.5rem;
+ border: none;
+ }
+
+ .dock-toggle:hover {
+ background: var(--color-button-primary-hover);
+ }
+
+ .dock-toggle svg {
+ width: 1.25rem;
+ height: 1.25rem;
+ transition: transform 0.2s ease;
+ }
+
+ .dock-toggle:hover svg {
+ transform: scale(1.1);
+ }
+
+ .plugin-ui-container.floating .dock-toggle:hover svg {
+ transform: scale(1.1);
+ }
+`;
+document.head.appendChild(styleSheet);
+
+function initializeFloating() {
+ const container = document.getElementById('pluginUIContainer');
+ const dockButton = document.createElement('button');
+ dockButton.className = 'dock-toggle';
+ dockButton.title = 'Make toolbar floating';
+ dockButton.innerHTML = `
+
+ `;
+ container.appendChild(dockButton);
+
+ let isDragging = false;
+ let currentX;
+ let currentY;
+ let initialX;
+ let initialY;
+ let xOffset = 0;
+ let yOffset = 0;
+ let originalPosition = null;
+ let lastFrameTime = 0;
+ const frameRate = 1000 / 120;
+
+ function updateDockIcon(isFloating) {
+ dockButton.title = isFloating ? 'Dock toolbar' : 'Make toolbar floating';
+ dockButton.innerHTML = isFloating
+ ? ``
+ : ``;
+ }
+
+ function updateDockButtonPosition(isFloating) {
+ if (isFloating) {
+ container.appendChild(dockButton);
+ } else {
+ container.insertBefore(dockButton, container.firstChild);
+ }
+ }
+
+ function startDragging(e) {
+ if (container.classList.contains('floating') && e.target !== dockButton) {
+ isDragging = true;
+ initialX = e.clientX - xOffset;
+ initialY = e.clientY - yOffset;
+ container.style.transition = 'none';
+ document.body.style.cursor = 'move';
+ }
+ }
+
+ function drag(e) {
+ if (isDragging) {
+ e.preventDefault();
+
+ const currentTime = performance.now();
+ if (currentTime - lastFrameTime < frameRate) return;
+
+ currentX = e.clientX - initialX;
+ currentY = e.clientY - initialY;
+ xOffset = currentX;
+ yOffset = currentY;
+ container.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`;
+
+ lastFrameTime = currentTime;
+ }
+ }
+
+ function stopDragging() {
+ if (isDragging) {
+ isDragging = false;
+ container.style.transition = '';
+ document.body.style.cursor = '';
+ }
+ }
+
+ function toggleFloating() {
+ const isFloating = container.classList.toggle('floating');
+ updateDockIcon(isFloating);
+ updateDockButtonPosition(isFloating);
+
+ if (isFloating) {
+ originalPosition = {
+ parent: container.parentNode,
+ nextSibling: container.nextSibling,
+ styles: {
+ position: container.style.position,
+ top: container.style.top,
+ left: container.style.left,
+ transform: container.style.transform,
+ zIndex: container.style.zIndex
+ }
+ };
+
+ container.addEventListener('mousedown', startDragging);
+ window.addEventListener('mousemove', drag);
+ window.addEventListener('mouseup', stopDragging);
+ window.addEventListener('mouseleave', stopDragging);
+
+ container.style.transform = `translate3d(${xOffset}px, ${yOffset}px, 0)`;
+ } else {
+ container.removeEventListener('mousedown', startDragging);
+ window.removeEventListener('mousemove', drag);
+ window.removeEventListener('mouseup', stopDragging);
+ window.removeEventListener('mouseleave', stopDragging);
+
+ container.style.transform = '';
+ container.style.position = '';
+ container.style.top = '';
+ container.style.left = '';
+ container.style.zIndex = '';
+ xOffset = 0;
+ yOffset = 0;
+ }
+ }
+
+ dockButton.addEventListener('click', toggleFloating);
+
+ container.addEventListener('selectstart', (e) => {
+ if (isDragging) e.preventDefault();
+ });
+
+ return function cleanup() {
+ container.removeEventListener('mousedown', startDragging);
+ window.removeEventListener('mousemove', drag);
+ window.removeEventListener('mouseup', stopDragging);
+ window.removeEventListener('mouseleave', stopDragging);
+ dockButton.removeEventListener('click', toggleFloating);
+ container.removeEventListener('selectstart', (e) => {
+ if (isDragging) e.preventDefault();
+ });
+ if (dockButton.parentNode) {
+ dockButton.parentNode.removeChild(dockButton);
+ }
+ };
+}
+const cleanupFloating = initializeFloating();
+// Floating toolbar functionality
+
+export class CanvasLoader {
+ constructor(canvasId, flowConfig) {
+ this.canvasId = canvasId;
+ this.flowConfig = flowConfig;
+ this.isInitialized = false;
+ this.initPromise = this.init();
+ }
+
+ determineCanvasOptions(flowConfig) {
+ const options = {
+ canvasControls: true,
+ imageLoader: false,
+ undo: true,
+ maskBrush: false,
+ customBrush: false,
+ imageCompareSlider: false,
+ imageAdder: false,
+ canvasScaleForSave: false,
+ };
+
+ // **Case 1**: Load maskBrush if canvasLoadedImages and canvasSelectedMaskOutputs are present
+ if (flowConfig.canvasLoadedImages && Array.isArray(flowConfig.canvasLoadedImages) && flowConfig.canvasLoadedImages.length > 0 &&
+ flowConfig.canvasSelectedMaskOutputs && Array.isArray(flowConfig.canvasSelectedMaskOutputs) && flowConfig.canvasSelectedMaskOutputs.length > 0) {
+ options.maskBrush = true;
+ options.imageLoader = true;
+ }
+
+ // **Case 2**: Load customBrush if canvasOutputs are present
+ if (flowConfig.canvasOutputs && Array.isArray(flowConfig.canvasOutputs) && flowConfig.canvasOutputs.length > 0) {
+ options.customBrush = true;
+ options.imageLoader = true;
+ options.canvasScaleForSave = true;
+
+
+ }
+
+ return options;
+ }
+
+ async init() {
+ try {
+ this.options = this.determineCanvasOptions(this.flowConfig);
+
+
+ if (!this.options.maskBrush && !this.options.customBrush) {
+ console.warn("No relevant fields in flowConfig. Canvas will not be displayed or initialized.");
+ this.hideCanvasUI();
+ return;
+ }
+
+ await loadFabric();
+
+ const canvasWrapper = document.getElementById('canvasWrapper');
+ const pluginUIContainer = document.getElementById('pluginUIContainer');
+
+ if (!canvasWrapper || !pluginUIContainer) {
+ throw new Error('Required DOM elements (canvasWrapper or pluginUIContainer) are missing.');
+ }
+
+ canvasWrapper.style.display = 'block';
+ pluginUIContainer.style.display = 'block';
+
+ this.canvasManager = new CanvasManager({ canvasId: this.canvasId });
+
+ if (this.options.imageLoader) {
+ const imageLoaderPlugin = new ImageLoaderPlugin({
+ mode: 'Single' // Set to 'Single' or 'Multi' as needed
+ });
+ this.canvasManager.registerPlugin(imageLoaderPlugin);
+ }
+
+ if (this.options.canvasControls) {
+ const canvasControlsPlugin = new CanvasControlsPlugin();
+ this.canvasManager.registerPlugin(canvasControlsPlugin);
+ }
+
+ if (this.options.undo) {
+ const undoRedoPlugin = new UndoRedoPlugin({
+ maxHistory: 100,
+ });
+ this.canvasManager.registerPlugin(undoRedoPlugin);
+ }
+ if (this.options.canvasScaleForSave) {
+ const canvasScaleForSave = new CanvasScaleForSavePlugin({
+ defaultScale: 1,
+ showDownloadButton: true,
+ });
+ this.canvasManager.registerPlugin(canvasScaleForSave);
+ }
+ if (this.options.maskBrush) {
+ const maskBrushPlugin = new MaskBrushPlugin({
+ brushSize: 75,
+ brushOpacity: 0.5,
+ cursorOutlineType: 'dashed',
+ cursorPrimaryColor: '#000000',
+ cursorSecondaryColor: '#FFFFFF',
+ cursorLineWidth: 1,
+ cursorFill: true,
+ useBrushColorPrimaryColor: true,
+ brushColor: '#FF0000',
+ useBrushColorForCursorRing: false,
+ });
+ this.canvasManager.registerPlugin(maskBrushPlugin);
+ }
+
+ if (this.options.customBrush) {
+ const customBrushPlugin = new CustomBrushPlugin({
+ brushSize: 25,
+ brushOpacity: 1,
+ cursorOutlineType: 'dotted',
+ cursorPrimaryColor: '#000000',
+ cursorSecondaryColor: '#FFFFFF',
+ cursorLineWidth: 1,
+ cursorFill: true,
+ useBrushColorPrimaryColor: true,
+ brushColor: '#64D813',
+ useBrushColorForCursorRing: false,
+ });
+ this.canvasManager.registerPlugin(customBrushPlugin);
+ }
+
+ if (this.options.imageCompareSlider) {
+ const imageCompareSliderPlugin = new ImageCompareSliderPlugin({
+ sliderColor: '#570d7b',
+ sliderWidth: 2,
+ handleRadius: 18,
+ handleStrokeWidth: 4,
+ handleStrokeColor: '#fff',
+ topMargin: 23,
+ bottomMargin: 23,
+ mode: 'Pairs' // 'Pairs', 'Replace', or 'Multi'
+ });
+ this.canvasManager.registerPlugin(imageCompareSliderPlugin);
+ }
+
+ if (this.options.imageAdder) {
+ const imageAdderPlugin = new ImageAdderPlugin();
+ this.canvasManager.registerPlugin(imageAdderPlugin);
+ }
+
+ console.log('All selected plugins registered successfully');
+
+ this.isInitialized = true;
+ } catch (error) {
+ console.error('Error initializing CanvasLoader:', error);
+ this.hideCanvasUI();
+ }
+ }
+
+ hideCanvasUI() {
+ const canvasWrapper = document.getElementById('canvasWrapper');
+ const pluginUIContainer = document.getElementById('pluginUIContainer');
+
+ if (canvasWrapper) {
+ canvasWrapper.style.display = 'none';
+ }
+
+ if (pluginUIContainer) {
+ pluginUIContainer.style.display = 'none';
+ }
+ }
+
+ getOriginalImage(id) {
+ const imageLoaderPlugin = this.canvasManager.getPluginByName('ImageLoaderPlugin');
+ if (imageLoaderPlugin && imageLoaderPlugin.getOriginalImage) {
+ return imageLoaderPlugin.getOriginalImage(id);
+ } else {
+ console.error('ImageLoaderPlugin is not registered or does not have getOriginalImage.');
+ return null;
+ }
+ }
+
+ getMaskImage() {
+ const maskBrushPlugin = this.canvasManager.getPluginByName('MaskBrushPlugin');
+ if (maskBrushPlugin) {
+ const exportFunction = maskBrushPlugin.getExportFunction('saveAllMasksCombined');
+ if (exportFunction) {
+ return exportFunction();
+ } else {
+ console.error('Failed to get export function for saveMaskAlphaOnImage.');
+ return null;
+ }
+ }
+ return null;
+ }
+
+ getMaskAlphaOnImage() {
+ const maskBrushPlugin = this.canvasManager.getPluginByName('MaskBrushPlugin');
+ if (maskBrushPlugin) {
+ const exportFunction = maskBrushPlugin.getExportFunction('saveAllMasksCombinedAlphaOnImage');
+ if (exportFunction) {
+ return exportFunction();
+ } else {
+ console.error('Failed to get export function for saveMaskAlphaOnImage.');
+ return null;
+ }
+ }
+ return null;
+ }
+
+ getSelectedMaskAlphaOnImage() {
+ const maskBrushPlugin = this.canvasManager.getPluginByName('MaskBrushPlugin');
+ if (maskBrushPlugin) {
+ const selectedOption = maskBrushPlugin.saveOptionsSelect.value;
+ const exportFunction = maskBrushPlugin.getExportFunction(selectedOption);
+ if (exportFunction) {
+ return exportFunction();
+ } else {
+ console.error('Unknown save option selected in MaskBrushPlugin.');
+ return null;
+ }
+ }
+ }
+
+ getCanvasOutImage() {
+ return this.getCanvasImage();
+ }
+
+ getCanvasImage() {
+ if (this.canvasManager && this.canvasManager.getCanvasImage) {
+ return this.canvasManager.getCanvasImage();
+ } else {
+ console.error('CanvasManager is not initialized or getCanvasImage method is unavailable.');
+ return null;
+ }
+ }
+
+}
diff --git a/web/core/js/common/components/canvas/CanvasManager.js b/web/core/js/common/components/canvas/CanvasManager.js
new file mode 100644
index 0000000..ca00eaa
--- /dev/null
+++ b/web/core/js/common/components/canvas/CanvasManager.js
@@ -0,0 +1,117 @@
+import { EventEmitter } from './EventEmitter.js';
+import { CanvasPlugin } from './CanvasPlugin.js';
+
+export class CanvasManager extends EventEmitter {
+ constructor(options = {}) {
+ super();
+ this.canvasId = options.canvasId || 'imageCanvas';
+ this.canvas = new fabric.Canvas(this.canvasId, {
+ selection: false,
+ defaultCursor: 'default',
+ preserveObjectStacking: true
+ });
+
+ this.plugins = new Set();
+
+ this.init();
+
+ window.addEventListener('resize', this.resizeCanvas.bind(this));
+
+ this.observeContainerResize();
+
+ this.scaleMultiplier = 1;
+
+ this.on('canvas:scaleChanged', this.onScaleChanged.bind(this));
+ }
+
+ init() {
+ this.resizeCanvas();
+ this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
+ }
+
+ resizeCanvas() {
+ const container = document.getElementById('canvasWrapper');
+ if (!container) {
+ console.warn('canvasWrapper element not found in the DOM.');
+ return;
+ }
+
+ const { clientWidth, clientHeight } = container;
+
+ this.canvas.setWidth(clientWidth);
+ this.canvas.setHeight(clientHeight);
+
+ this.canvas.renderAll();
+
+ this.emit('canvas:resized', { width: clientWidth, height: clientHeight });
+ }
+
+ observeContainerResize() {
+ const container = document.getElementById('canvasWrapper');
+ if (!container || typeof ResizeObserver === 'undefined') return;
+
+ const resizeObserver = new ResizeObserver(() => {
+ this.resizeCanvas();
+ });
+
+ resizeObserver.observe(container);
+ }
+
+ registerPlugin(plugin) {
+ if (!(plugin instanceof CanvasPlugin)) {
+ throw new Error('Plugin must extend the CanvasPlugin class.');
+ }
+ plugin.init(this);
+ this.plugins.add(plugin);
+ console.log(`CanvasManager: Registered plugin ${plugin.name}`);
+ }
+
+ unregisterPlugin(plugin) {
+ if (this.plugins.has(plugin)) {
+ plugin.destroy();
+ this.plugins.delete(plugin);
+ console.log(`CanvasManager: Unregistered plugin ${plugin.name}`);
+ }
+ }
+
+ getCanvasImage() {
+ return this.canvas.toDataURL({
+ format: 'png',
+ multiplier: this.scaleMultiplier
+ });
+ }
+
+ getPluginByName(name) {
+ for (let plugin of this.plugins) {
+ if (plugin.name === name) {
+ return plugin;
+ }
+ }
+ return null;
+ }
+
+ onHandleSave() {
+ const maskBrushPlugin = this.getPluginByName('MaskBrushPlugin');
+ if (maskBrushPlugin) {
+ const selectedOption = maskBrushPlugin.saveOptionsSelect.value;
+ this.emit('save:trigger', selectedOption);
+ } else {
+ console.error('MaskBrushPlugin is not registered. Cannot handle save.');
+ }
+ }
+
+ onScaleChanged(data) {
+ this.scaleMultiplier = data.scale;
+ console.log(`CanvasManager: Scale multiplier set to ${this.scaleMultiplier}`);
+ }
+
+ destroy() {
+ window.removeEventListener('resize', this.resizeCanvas.bind(this));
+
+ this.plugins.forEach(plugin => plugin.destroy());
+ this.plugins.clear();
+
+ this.canvas.dispose();
+ console.log('CanvasManager destroyed');
+ }
+}
diff --git a/web/core/js/common/components/canvas/CanvasPlugin.js b/web/core/js/common/components/canvas/CanvasPlugin.js
new file mode 100644
index 0000000..9f7fb68
--- /dev/null
+++ b/web/core/js/common/components/canvas/CanvasPlugin.js
@@ -0,0 +1,13 @@
+export class CanvasPlugin {
+ constructor(name) {
+ this.name = name;
+ }
+
+ init(canvasManager) {
+ throw new Error('init() must be implemented by the plugin.');
+ }
+
+ destroy() {
+ throw new Error('destroy() must be implemented by the plugin.');
+ }
+}
diff --git a/web/core/js/common/components/canvas/CanvasScaleForSavePlugin.js b/web/core/js/common/components/canvas/CanvasScaleForSavePlugin.js
new file mode 100644
index 0000000..289a0c4
--- /dev/null
+++ b/web/core/js/common/components/canvas/CanvasScaleForSavePlugin.js
@@ -0,0 +1,225 @@
+import { CanvasPlugin } from './CanvasPlugin.js';
+
+export class CanvasScaleForSavePlugin extends CanvasPlugin {
+ constructor(options = {}) {
+ super('CanvasScaleForSavePlugin');
+
+ this.increaseScale = this.increaseScale.bind(this);
+ this.decreaseScale = this.decreaseScale.bind(this);
+ this.updateScaleDisplay = this.updateScaleDisplay.bind(this);
+ this.emitScaleChange = this.emitScaleChange.bind(this);
+ this.downloadCanvasImage = this.downloadCanvasImage.bind(this);
+ this.onCanvasResized = this.onCanvasResized.bind(this);
+
+ this.defaultScale = options.defaultScale || 1;
+ this.showDownloadButton = options.showDownloadButton !== undefined ? options.showDownloadButton : true;
+
+ this.scale = this.defaultScale;
+
+ this.uiContainer = null;
+ this.scaleDecreaseBtn = null;
+ this.scaleIncreaseBtn = null;
+ this.scaleValueDisplay = null;
+ this.actualSizeDisplay = null;
+ this.downloadBtn = null;
+ }
+
+ init(canvasManager) {
+ this.canvasManager = canvasManager;
+ this.canvas = canvasManager.canvas;
+
+ this.createUI();
+ this.attachEventListeners();
+ this.updateActualSize();
+ }
+
+ createUI() {
+ const styleSheet = document.createElement('style');
+ styleSheet.textContent = `
+ .csfs-container * {
+ box-sizing: border-box;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ }
+
+ .csfs-container {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem;
+ /* background: var(--color-background); */
+ /* border: 1px dashed var(--color-border); */
+ user-select: none;
+ margin-left: 1rem; /* Adjust as needed to align with existing controls */
+ }
+
+ .csfs-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem;
+ background: var(--color-button-primary);
+ border: none;
+ cursor: pointer;
+ transition: all 0.2s;
+ color: var(--color-primary-text);
+ min-width: 36px;
+ height: 36px;
+ }
+
+ .csfs-button:hover {
+ background: var(--color-button-primary-hover);
+ }
+
+ .csfs-button svg {
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+
+ .csfs-button[data-active="true"] {
+ border: 1px dashed var(--color-button-secondary-text-active);
+ }
+
+ /* Styles for scale controls */
+ .csfs-scale-container {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25rem;
+ padding: 0.5rem;
+ }
+
+ .csfs-scale-label {
+ margin-right: 0.25rem;
+ font-weight: bold;
+ }
+
+ .csfs-scale-display {
+ margin-left: 0.5rem;
+ font-size: 0.9rem;
+ color: var(--color-secondary-text);
+ font-weight: bold;
+
+ }
+ .csfs-scale-value {
+ padding: 8px 8px;
+ font-weight: bold;
+ }
+ `;
+ document.head.appendChild(styleSheet);
+
+ const temp = document.createElement('div');
+ temp.innerHTML = `
+
+
+
+ `;
+
+ this.uiContainer = temp.firstElementChild;
+ this.scaleDecreaseBtn = this.uiContainer.querySelector('#csfs-scaleDecreaseBtn');
+ this.scaleIncreaseBtn = this.uiContainer.querySelector('#csfs-scaleIncreaseBtn');
+ this.scaleValueDisplay = this.uiContainer.querySelector('#csfs-scaleValue');
+ this.actualSizeDisplay = this.uiContainer.querySelector('#csfs-actualSize');
+ this.downloadBtn = this.uiContainer.querySelector('#csfs-downloadBtn');
+
+ const pluginUIContainer = document.getElementById('pluginUIContainer');
+ if (pluginUIContainer) {
+ pluginUIContainer.appendChild(this.uiContainer);
+ } else {
+ console.warn('Element with id "pluginUIContainer" not found.');
+ }
+ }
+
+ attachEventListeners() {
+ this.scaleIncreaseBtn.addEventListener('click', this.increaseScale);
+ this.scaleDecreaseBtn.addEventListener('click', this.decreaseScale);
+
+ if (this.downloadBtn) {
+ this.downloadBtn.addEventListener('click', this.downloadCanvasImage);
+ }
+
+ this.canvasManager.on('canvas:resized', this.onCanvasResized);
+ }
+
+
+ detachEventListeners() {
+ this.scaleIncreaseBtn.removeEventListener('click', this.increaseScale);
+ this.scaleDecreaseBtn.removeEventListener('click', this.decreaseScale);
+
+ if (this.downloadBtn) {
+ this.downloadBtn.removeEventListener('click', this.downloadCanvasImage);
+ }
+
+ this.canvasManager.off('canvas:resized', this.onCanvasResized);
+ }
+
+ increaseScale() {
+ if (this.scale < 10) {
+ this.scale += 1;
+ this.updateScaleDisplay();
+ this.emitScaleChange();
+ this.updateActualSize();
+ }
+ }
+
+ decreaseScale() {
+ if (this.scale > 1) {
+ this.scale -= 1;
+ this.updateScaleDisplay();
+ this.emitScaleChange();
+ this.updateActualSize();
+ }
+ }
+
+ updateScaleDisplay() {
+ this.scaleValueDisplay.textContent = `${this.scale}x`;
+ }
+
+ emitScaleChange() {
+ this.canvasManager.emit('canvas:scaleChanged', { scale: this.scale });
+ }
+
+ updateActualSize() {
+ const canvasWidth = this.canvas.getWidth();
+ const canvasHeight = this.canvas.getHeight();
+ const scaledWidth = Math.round(canvasWidth * this.scale);
+ const scaledHeight = Math.round(canvasHeight * this.scale);
+ this.actualSizeDisplay.textContent = `${scaledWidth}x${scaledHeight}`;
+ }
+
+ onCanvasResized(data) {
+ this.updateActualSize();
+ }
+
+ downloadCanvasImage() {
+ const dataURL = this.canvasManager.getCanvasImage();
+ const link = document.createElement('a');
+ link.href = dataURL;
+ link.download = 'canvas-image.png';
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ }
+
+ destroy() {
+ if (this.uiContainer && this.uiContainer.parentNode) {
+ this.uiContainer.parentNode.removeChild(this.uiContainer);
+ }
+
+ this.detachEventListeners();
+ }
+}
diff --git a/web/core/js/common/components/canvas/CustomBrushPlugin.js b/web/core/js/common/components/canvas/CustomBrushPlugin.js
new file mode 100644
index 0000000..d7f8681
--- /dev/null
+++ b/web/core/js/common/components/canvas/CustomBrushPlugin.js
@@ -0,0 +1,824 @@
+import { CanvasPlugin } from './CanvasPlugin.js';
+
+export class CustomBrushPlugin extends CanvasPlugin {
+ constructor(options = {}) {
+ super(options.name || 'CustomBrushPlugin');
+
+ this.brushSize = options.brushSize || 25;
+ this.minBrushSize = options.minBrushSize || 1;
+ this.maxBrushSize = options.maxBrushSize || 500;
+ this.brushColor = options.brushColor || '#000000';
+ this.brushOpacity = options.brushOpacity !== undefined ? options.brushOpacity : 1;
+ this.brushTipResizeSpeed = options.brushTipResizeSpeed || 1;
+ this.cursorOutlineType = options.cursorOutlineType || 'dashed';
+ this.cursorPrimaryColor = options.cursorPrimaryColor || '#000000';
+ this.cursorSecondaryColor = options.cursorSecondaryColor || '#FFFFFF';
+ this.cursorLineWidth = options.cursorLineWidth || 2;
+ this.cursorFill = options.cursorFill !== undefined ? options.cursorFill : false;
+ this.useBrushColorPrimaryColor = options.useBrushColorPrimaryColor || false;
+ this.showSystemCursor = options.showSystemCursor !== undefined ? options.showSystemCursor : false;
+ this.useBrushColorForCursorRing = options.useBrushColorForCursorRing !== undefined ? options.useBrushColorForCursorRing : false;
+ this.cursorRingOpacityAffected = options.cursorRingOpacityAffected !== undefined ? options.cursorRingOpacityAffected : false;
+
+ this.canvasManager = null;
+ this.canvas = null;
+ this.drawingMode = false;
+ this.isMouseDown = false;
+ this.lastPointer = null;
+ this.currentPath = null;
+ this.brushIcon = '/core/media/ui/paintree.png';
+
+ this.originalCanvasProperties = null;
+
+ this.cursorCircle = null;
+ this.secondaryCircle = null;
+
+ this.uiContainer = null;
+ this.uiHeader = null;
+ this.brushSizeInput = null;
+ this.brushOpacityInput = null;
+ this.colorPicker = null;
+ this.toggleDrawBtn = null;
+ this.minimizeBtn = null;
+ this.isMinimized = false;
+ this.currentMode = 'full'; // Modes: 'full', 'mini', 'minimized'
+
+ this.isDragging = false;
+ this.dragOffsetX = 0;
+ this.dragOffsetY = 0;
+
+ this.drawnObjects = new Set();
+
+ this.currentZoom = 1;
+
+ this.hiddenCursorClass = 'custom-brush-plugin-hidden-cursor';
+
+ this.onBrushSizeChange = this.onBrushSizeChange.bind(this);
+ this.onBrushOpacityChange = this.onBrushOpacityChange.bind(this);
+ this.onToggleDrawingMode = this.onToggleDrawingMode.bind(this);
+ this.onColorChange = this.onColorChange.bind(this);
+ this.onKeyDown = this.onKeyDown.bind(this);
+ this.enforceObjectProperties = this.enforceObjectProperties.bind(this);
+ this.onViewportChanged = this.onViewportChanged.bind(this);
+
+ this.onMouseDown = this.onMouseDown.bind(this);
+ this.onMouseMove = this.onMouseMove.bind(this);
+ this.onMouseUp = this.onMouseUp.bind(this);
+ this.handleMouseWheel = this.handleMouseWheel.bind(this);
+ this.handleMouseOver = this.handleMouseOver.bind(this);
+ this.handleMouseOut = this.handleMouseOut.bind(this);
+ this.onObjectAdded = this.onObjectAdded.bind(this);
+ this.onHeaderMouseDown = this.onHeaderMouseDown.bind(this);
+ this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this);
+ this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this);
+ this.onMinimize = this.onMinimize.bind(this);
+ this.onModeChange = this.onModeChange.bind(this);
+ this.brushStrokeIdCounter = 0;
+ }
+
+ init(canvasManager) {
+ this.canvasManager = canvasManager;
+ this.canvas = canvasManager.canvas;
+
+ this.storeOriginalCanvasProperties();
+
+ this.disableSelectionBox();
+
+ this.injectHiddenCursorCSS();
+
+ this.createUI();
+
+ this.attachEventListeners();
+
+ this.brushSizeInput.value = this.brushSize;
+ this.brushOpacityInput.value = this.brushOpacity * 100;
+ this.colorPicker.value = this.brushColor;
+
+ this.canvas.on('object:added', this.onObjectAdded);
+
+ this.canvas.getObjects().forEach(this.enforceObjectProperties);
+
+ this.canvasManager.on('viewport:changed', this.onViewportChanged);
+ }
+
+ injectHiddenCursorCSS() {
+ if (document.getElementById('custom-brush-plugin-styles')) return;
+
+ const style = document.createElement('style');
+ style.id = 'custom-brush-plugin-styles';
+ style.type = 'text/css';
+ style.innerHTML = `
+
+ `;
+ document.head.appendChild(style);
+ }
+
+ // Helper function to convert HEX to RGBA
+ getFillColorWithOpacity(hex, alpha) {
+ // Remove '#' if present
+ hex = hex.replace('#', '');
+ let r, g, b;
+ if (hex.length === 3) {
+ r = parseInt(hex[0] + hex[0], 16);
+ g = parseInt(hex[1] + hex[1], 16);
+ b = parseInt(hex[2] + hex[2], 16);
+ } else if (hex.length === 6) {
+ r = parseInt(hex.substring(0, 2), 16);
+ g = parseInt(hex.substring(2, 4), 16);
+ b = parseInt(hex.substring(4, 6), 16);
+ } else {
+ // Invalid format
+ return 'rgba(0,0,0,1)';
+ }
+ return `rgba(${r},${g},${b},${alpha})`;
+ }
+
+ isDrawnObject(obj) {
+ return obj.type === 'path';
+ }
+
+ onObjectAdded(e) {
+ const obj = e.target;
+ if (obj && this.isDrawnObject(obj)) {
+ this.enforceObjectProperties(obj);
+ }
+ }
+
+ createUI() {
+ this.uiContainer = document.createElement('div');
+ this.uiContainer.className = 'cbp-brush-ui-container cbp-brush-ui-full';
+
+ this.uiContainer.innerHTML = `
+
+
+ ${this.showDownloadButton ? `
+
+
+ ` : ''}
+
+
+ 1x
+
+ 512x512
+
+
+ Brush Settings
+
+
+
+
+
+
+ `;
+
+ document.body.appendChild(this.uiContainer);
+
+ this.brushSizeInput = this.uiContainer.querySelector('#cbp-brush-size-input');
+ this.brushOpacityInput = this.uiContainer.querySelector('#cbp-brush-opacity-input');
+ this.colorPicker = this.uiContainer.querySelector('#cbp-color-picker');
+ this.toggleDrawBtn = this.uiContainer.querySelector('#cbp-toggle-drawing-mode-btn');
+ this.toggleBtnIcon = this.uiContainer.querySelector('#cbp-toggle-btn-icon');
+ this.minimizeBtn = this.uiContainer.querySelector('.cbp-brush-ui-minimize-btn');
+ this.uiHeader = this.uiContainer.querySelector('.cbp-brush-ui-header');
+
+ this.uiHeader.addEventListener('mousedown', this.onHeaderMouseDown);
+ this.minimizeBtn.addEventListener('click', this.onMinimize);
+ this.toggleDrawBtn.addEventListener('click', this.onToggleDrawingMode);
+ }
+
+ attachEventListeners() {
+ this.brushSizeInput.addEventListener('input', this.onBrushSizeChange);
+ this.brushOpacityInput.addEventListener('input', this.onBrushOpacityChange);
+ this.colorPicker.addEventListener('input', this.onColorChange);
+ window.addEventListener('keydown', this.onKeyDown);
+ }
+
+ detachEventListeners() {
+ this.brushSizeInput.removeEventListener('input', this.onBrushSizeChange);
+ this.brushOpacityInput.removeEventListener('input', this.onBrushOpacityChange);
+ this.colorPicker.removeEventListener('input', this.onColorChange);
+ window.removeEventListener('keydown', this.onKeyDown);
+
+ this.uiHeader.removeEventListener('mousedown', this.onHeaderMouseDown);
+ this.minimizeBtn.removeEventListener('click', this.onMinimize);
+ this.toggleDrawBtn.removeEventListener('click', this.onToggleDrawingMode);
+ }
+
+ onKeyDown(e) {
+ // // Toggle Drawing Mode (e.g., press 'D')
+ // if (e.key.toLowerCase() === 'd') {
+ // e.preventDefault();
+ // this.onToggleDrawingMode();
+ // }
+ }
+
+ onBrushSizeChange(e) {
+ this.brushSize = parseInt(e.target.value, 10);
+ if (this.drawingMode) {
+ this.updateCursorCircle();
+ this.canvas.requestRenderAll();
+ }
+ }
+
+ onBrushOpacityChange(e) {
+ this.brushOpacity = parseInt(e.target.value, 10) / 100;
+ if (this.drawingMode) {
+ this.updateCursorCircle();
+ this.canvas.requestRenderAll();
+ }
+ }
+
+ onColorChange() {
+ this.brushColor = this.colorPicker.value;
+ if (this.drawingMode) {
+ this.updateCursorCircle();
+ }
+ }
+
+ storeOriginalCanvasProperties() {
+ this.originalCanvasProperties = {
+ selection: this.canvas.selection,
+ selectionColor: this.canvas.selectionColor,
+ selectionBorderColor: this.canvas.selectionBorderColor,
+ selectionLineWidth: this.canvas.selectionLineWidth,
+ hoverCursor: this.canvas.hoverCursor,
+ moveCursor: this.canvas.moveCursor,
+ defaultCursor: this.canvas.defaultCursor,
+ freeDrawingCursor: this.canvas.freeDrawingCursor
+ };
+ }
+
+ disableSelectionBox() {
+ this.canvas.selection = false;
+ this.canvas.selectionColor = 'transparent';
+ this.canvas.selectionBorderColor = 'transparent';
+ this.canvas.selectionLineWidth = 0;
+
+ this.canvas.hoverCursor = 'default';
+ this.canvas.moveCursor = 'default';
+ this.canvas.freeDrawingCursor = 'none';
+
+ this.canvas.skipTargetFind = true;
+ this.canvas.preserveObjectStacking = true;
+ }
+
+ onToggleDrawingMode() {
+ this.drawingMode = !this.drawingMode;
+
+ const toggleButton = document.getElementById('cbp-toggle-drawing-mode-btn');
+ if (this.drawingMode) {
+ toggleButton.classList.add('active');
+ } else {
+ toggleButton.classList.remove('active');
+ }
+
+ this.toggleBtnIcon.src = this.brushIcon;
+
+
+ if (this.drawingMode) {
+ this.canvas.defaultCursor = this.showSystemCursor ? 'default' : 'none';
+
+ if (!this.showSystemCursor) {
+ this.canvas.lowerCanvasEl.classList.add(this.hiddenCursorClass);
+ this.canvas.upperCanvasEl.classList.add(this.hiddenCursorClass);
+ }
+ } else {
+ this.canvas.defaultCursor = this.originalCanvasProperties.defaultCursor || 'default';
+
+ this.canvas.lowerCanvasEl.classList.remove(this.hiddenCursorClass);
+ this.canvas.upperCanvasEl.classList.remove(this.hiddenCursorClass);
+ }
+
+ this.disableSelectionBox();
+
+ this.canvas.getObjects().forEach(obj => {
+ if (this.drawnObjects.has(obj)) {
+ obj.selectable = false;
+ obj.evented = false;
+ obj.hasControls = false;
+ obj.hasBorders = false;
+ obj.lockMovementX = true;
+ obj.lockMovementY = true;
+ }
+ });
+
+ if (this.drawingMode) {
+ this.attachDrawingEvents();
+ this.brushSizeInput.disabled = false;
+ this.brushOpacityInput.disabled = false;
+ this.colorPicker.disabled = false;
+ this.updateCursorCircle();
+ this.canvas.requestRenderAll();
+ this.setNonDrawnObjectsSelectable(false);
+ } else {
+ this.detachDrawingEvents();
+ if (this.cursorCircle) {
+ this.canvas.remove(this.cursorCircle);
+ this.cursorCircle = null;
+ }
+ if (this.secondaryCircle) {
+ this.canvas.remove(this.secondaryCircle);
+ this.secondaryCircle = null;
+ }
+ this.brushSizeInput.disabled = true;
+ this.brushOpacityInput.disabled = true;
+ this.colorPicker.disabled = true;
+ this.setNonDrawnObjectsSelectable(true);
+ }
+ }
+
+ enforceObjectProperties(obj) {
+ if (obj === this.cursorCircle || obj === this.secondaryCircle) return;
+
+ if (this.isDrawnObject(obj)) {
+ obj.selectable = false;
+ obj.evented = false;
+ obj.hasControls = false;
+ obj.hasBorders = false;
+ obj.lockMovementX = true;
+ obj.lockMovementY = true;
+ obj.hoverCursor = 'default';
+ this.drawnObjects.add(obj);
+ }
+ }
+
+ setNonDrawnObjectsSelectable(selectable) {
+ this.canvas.getObjects().forEach((obj) => {
+ if (!this.drawnObjects.has(obj) && obj !== this.cursorCircle && obj !== this.secondaryCircle) {
+ obj.selectable = selectable;
+ obj.evented = selectable;
+ obj.hoverCursor = selectable ? 'move' : 'default';
+ }
+ });
+ }
+
+ attachDrawingEvents() {
+ this.canvas.on('mouse:down', this.onMouseDown);
+ this.canvas.on('mouse:move', this.onMouseMove);
+ this.canvas.on('mouse:up', this.onMouseUp);
+ this.canvas.on('mouse:wheel', this.handleMouseWheel);
+ this.canvas.on('mouse:over', this.handleMouseOver);
+ this.canvas.on('mouse:out', this.handleMouseOut);
+ }
+
+ detachDrawingEvents() {
+ this.canvas.off('mouse:down', this.onMouseDown);
+ this.canvas.off('mouse:move', this.onMouseMove);
+ this.canvas.off('mouse:up', this.onMouseUp);
+ this.canvas.off('mouse:wheel', this.handleMouseWheel);
+ this.canvas.off('mouse:over', this.handleMouseOver);
+ this.canvas.off('mouse:out', this.handleMouseOut);
+ }
+
+ updateCursorCircle() {
+ const dashArray = this.getStrokeDashArray();
+ const isOutlined = this.cursorOutlineType === 'dashed' || this.cursorOutlineType === 'dotted';
+
+ if (!this.cursorCircle) {
+ this.cursorCircle = new fabric.Circle({
+ radius: this.brushSize / 2,
+ fill: this.cursorFill
+ ? (this.useBrushColorPrimaryColor
+ ? this.getFillColorWithOpacity(this.brushColor, this.brushOpacity)
+ : this.getFillColorWithOpacity(this.cursorPrimaryColor, this.cursorRingOpacityAffected ? this.brushOpacity : 1))
+ : 'transparent',
+ stroke: this.getCursorStrokeColor(),
+ strokeWidth: this.cursorOutlineType === 'none' ? 0 : this.cursorLineWidth,
+ selectable: false,
+ evented: false,
+ hasControls: false,
+ hasBorders: false,
+ originX: 'center',
+ originY: 'center',
+ strokeDashArray: dashArray,
+ hoverCursor: 'none'
+ });
+
+ if (isOutlined && !this.useBrushColorForCursorRing) {
+ this.secondaryCircle = new fabric.Circle({
+ radius: this.brushSize / 2,
+ fill: 'transparent',
+ stroke: this.cursorSecondaryColor,
+ strokeWidth: this.cursorLineWidth,
+ selectable: false,
+ evented: false,
+ hasControls: false,
+ hasBorders: false,
+ originX: 'center',
+ originY: 'center',
+ strokeDashArray: dashArray,
+ strokeDashOffset: this.cursorOutlineType === 'dashed' ? dashArray[0] : dashArray[0],
+ hoverCursor: 'none'
+ });
+ this.canvas.add(this.secondaryCircle);
+ }
+
+ this.canvas.add(this.cursorCircle);
+ if (this.secondaryCircle) {
+ this.secondaryCircle.bringToFront();
+ }
+ this.cursorCircle.bringToFront();
+ } else {
+ this.cursorCircle.set({
+ radius: this.brushSize / 2,
+ fill: this.cursorFill
+ ? (this.useBrushColorPrimaryColor
+ ? this.getFillColorWithOpacity(this.brushColor, this.brushOpacity)
+ : this.getFillColorWithOpacity(this.cursorPrimaryColor, this.cursorRingOpacityAffected ? this.brushOpacity : 1))
+ : 'transparent',
+ stroke: this.getCursorStrokeColor(),
+ strokeWidth: this.cursorOutlineType === 'none' ? 0 : this.cursorLineWidth,
+ strokeDashArray: dashArray
+ });
+
+ if (isOutlined && !this.useBrushColorForCursorRing) {
+ if (!this.secondaryCircle) {
+ this.secondaryCircle = new fabric.Circle({
+ radius: this.brushSize / 2,
+ fill: 'transparent',
+ stroke: this.cursorSecondaryColor,
+ strokeWidth: this.cursorLineWidth,
+ selectable: false,
+ evented: false,
+ hasControls: false,
+ hasBorders: false,
+ originX: 'center',
+ originY: 'center',
+ strokeDashArray: dashArray,
+ strokeDashOffset: this.cursorOutlineType === 'dashed' ? dashArray[0] : dashArray[0],
+ hoverCursor: 'none'
+ });
+ this.canvas.add(this.secondaryCircle);
+ } else {
+ this.secondaryCircle.set({
+ radius: this.brushSize / 2,
+ stroke: this.cursorSecondaryColor,
+ strokeWidth: this.cursorLineWidth,
+ strokeDashArray: dashArray,
+ strokeDashOffset: this.cursorOutlineType === 'dashed' ? dashArray[0] : dashArray[0]
+ });
+ }
+ } else if (this.secondaryCircle) {
+ this.canvas.remove(this.secondaryCircle);
+ this.secondaryCircle = null;
+ }
+ }
+
+ if (this.currentZoom !== 0) {
+ const scale = 1 / this.currentZoom;
+ this.cursorCircle.set({
+ scaleX: scale,
+ scaleY: scale
+ });
+ if (this.secondaryCircle) {
+ this.secondaryCircle.set({
+ scaleX: scale,
+ scaleY: scale
+ });
+ }
+ }
+ }
+
+ getCursorStrokeColor() {
+ if (this.cursorOutlineType === 'none') {
+ return 'transparent';
+ }
+
+ if (this.cursorOutlineType === 'solid') {
+ return this.useBrushColorForCursorRing ? this.brushColor : this.cursorPrimaryColor;
+ }
+
+ if (this.cursorOutlineType === 'dashed' || this.cursorOutlineType === 'dotted') {
+ return this.useBrushColorForCursorRing ? this.brushColor : this.cursorPrimaryColor;
+ }
+
+ return this.cursorPrimaryColor;
+ }
+
+ getStrokeDashArray() {
+ if (this.cursorOutlineType === 'solid') {
+ return [];
+ } else if (this.cursorOutlineType === 'dashed') {
+ return [4, 4];
+ } else if (this.cursorOutlineType === 'dotted') {
+ return [1, 2];
+ } else if (this.cursorOutlineType === 'none') {
+ return [];
+ }
+ return [];
+ }
+
+ handleMouseWheel(opt) {
+ if (!this.drawingMode) return;
+
+ const delta = opt.e.deltaY;
+ opt.e.preventDefault();
+ opt.e.stopPropagation();
+
+ let deltaSize = delta < 0 ? 1 : -1;
+ deltaSize *= this.brushTipResizeSpeed;
+ this.brushSize = Math.min(this.maxBrushSize, Math.max(this.minBrushSize, this.brushSize + deltaSize));
+ this.brushSizeInput.value = this.brushSize;
+ this.updateCursorCircle();
+ this.canvas.requestRenderAll();
+ }
+
+ handleMouseOver() {
+ if (this.drawingMode) {
+ if (this.cursorCircle) {
+ this.cursorCircle.visible = true;
+ }
+ if (this.secondaryCircle) {
+ this.secondaryCircle.visible = true;
+ }
+ this.canvas.requestRenderAll();
+ }
+ }
+
+ handleMouseOut() {
+ if (this.drawingMode) {
+ if (this.cursorCircle) {
+ this.cursorCircle.visible = false;
+ }
+ if (this.secondaryCircle) {
+ this.secondaryCircle.visible = false;
+ }
+ this.canvas.requestRenderAll();
+ }
+ }
+
+ updateCursorPosition(opt) {
+ if (!this.cursorCircle) return;
+
+ const pointer = this.canvas.getPointer(opt.e);
+
+ const scale = 1 / this.currentZoom;
+
+ this.cursorCircle.set({
+ left: pointer.x,
+ top: pointer.y,
+ scaleX: scale,
+ scaleY: scale
+ }).setCoords();
+
+ if (this.secondaryCircle) {
+ this.secondaryCircle.set({
+ left: pointer.x,
+ top: pointer.y,
+ scaleX: scale,
+ scaleY: scale
+ }).setCoords();
+
+ this.secondaryCircle.bringToFront();
+ }
+
+ this.cursorCircle.bringToFront();
+ }
+
+ onMouseMove(o) {
+ const pointer = this.canvas.getPointer(o.e);
+
+ this.updateCursorPosition(o);
+
+ if (this.isMouseDown && this.currentPath) {
+ const pathData = this.currentPath.path;
+ pathData.push(['L', pointer.x, pointer.y]);
+ this.currentPath.set({ path: pathData });
+
+ this.canvas.requestRenderAll();
+ }
+ }
+
+ onMouseDown(o) {
+ this.isMouseDown = true;
+ const pointer = this.canvas.getPointer(o.e);
+ this.lastPointer = pointer;
+
+ this.currentPath = new fabric.Path(`M ${pointer.x} ${pointer.y}`, {
+ stroke: this.brushColor,
+ strokeWidth: this.brushSize / this.currentZoom,
+ fill: null,
+ selectable: false,
+ evented: false,
+ opacity: this.brushOpacity,
+ originX: 'center',
+ originY: 'center',
+ objectCaching: false,
+ strokeLineCap: 'round',
+ strokeLineJoin: 'round',
+ brushStrokeId: `brush-stroke-${this.brushStrokeIdCounter++}`
+ });
+
+ this.canvas.add(this.currentPath);
+ this.drawnObjects.add(this.currentPath);
+ }
+
+ onMouseUp() {
+ if (this.isMouseDown && this.currentPath) {
+ this.isMouseDown = false;
+ this.currentPath.setCoords();
+ this.currentPath = null;
+ // No need to manually fire 'object:added'; Fabric.js handles it
+ }
+ }
+
+ onViewportChanged(event) {
+ const { transform } = event;
+ const zoom = transform[0];
+
+ this.currentZoom = zoom;
+
+ if (this.cursorCircle) {
+ const scale = 1 / zoom;
+ this.cursorCircle.set({
+ scaleX: scale,
+ scaleY: scale
+ });
+
+ if (this.secondaryCircle) {
+ this.secondaryCircle.set({
+ scaleX: scale,
+ scaleY: scale
+ });
+ }
+ }
+ }
+
+ onHeaderMouseDown(e) {
+ e.preventDefault();
+ this.isDragging = true;
+
+ const rect = this.uiContainer.getBoundingClientRect();
+ this.dragOffsetX = e.clientX - rect.left;
+ this.dragOffsetY = e.clientY - rect.top;
+
+ document.addEventListener('mousemove', this.onDocumentMouseMove);
+ document.addEventListener('mouseup', this.onDocumentMouseUp);
+ }
+
+ onDocumentMouseMove(e) {
+ if (!this.isDragging) return;
+
+ let newLeft = e.clientX - this.dragOffsetX;
+ let newTop = e.clientY - this.dragOffsetY;
+
+ // Constrain within the viewport
+ const containerWidth = this.uiContainer.offsetWidth;
+ const containerHeight = this.uiContainer.offsetHeight;
+ const windowWidth = window.innerWidth;
+ const windowHeight = window.innerHeight;
+
+ newLeft = Math.max(0, Math.min(newLeft, windowWidth - containerWidth));
+ newTop = Math.max(0, Math.min(newTop, windowHeight - containerHeight));
+
+ // Update UI container position
+ this.uiContainer.style.left = `${newLeft}px`;
+ this.uiContainer.style.top = `${newTop}px`;
+ this.uiContainer.style.bottom = 'auto';
+ this.uiContainer.style.right = 'auto';
+ }
+
+ onDocumentMouseUp(e) {
+ this.isDragging = false;
+
+ document.removeEventListener('mousemove', this.onDocumentMouseMove);
+ document.removeEventListener('mouseup', this.onDocumentMouseUp);
+ }
+
+ onMinimize() {
+ if (this.currentMode === 'minimized') {
+ this.currentMode = this.previousMode || 'full';
+ } else {
+ this.previousMode = this.currentMode;
+ this.currentMode = 'minimized';
+ }
+ this.onModeChange();
+ }
+
+ onModeChange() {
+ if (this.currentMode === 'full') {
+ this.uiContainer.classList.remove('cbp-brush-ui-mini', 'cbp-brush-ui-minimized');
+ this.uiContainer.classList.add('cbp-brush-ui-full');
+ this.minimizeBtn.title = 'Minimize';
+ this.minimizeBtn.textContent = '−';
+ this.toggleDrawBtn.style.display = 'block';
+ this.uiContainer.querySelector('.cbp-brush-ui-title').textContent = 'Brush Settings';
+ this.updateUIForMode();
+ } else if (this.currentMode === 'mini') {
+ this.uiContainer.classList.remove('cbp-brush-ui-full', 'cbp-brush-ui-minimized');
+ this.uiContainer.classList.add('cbp-brush-ui-mini');
+ this.minimizeBtn.title = 'Minimize';
+ this.minimizeBtn.textContent = '−';
+ this.toggleDrawBtn.style.display = 'block';
+ // this.uiContainer.querySelector('.cbp-brush-ui-title').textContent = 'Brush';
+ this.updateUIForMode();
+ } else if (this.currentMode === 'minimized') {
+ this.uiContainer.classList.remove('cbp-brush-ui-full', 'cbp-brush-ui-mini');
+ this.uiContainer.classList.add('cbp-brush-ui-minimized');
+ this.minimizeBtn.title = 'Maximize';
+ this.minimizeBtn.textContent = '+';
+ this.toggleDrawBtn.style.display = 'none';
+ this.uiContainer.querySelector('.cbp-brush-ui-title').textContent = '';
+ }
+ }
+
+ updateUIForMode() {
+ const content = this.uiContainer.querySelector('.cbp-brush-ui-content');
+
+ if (this.currentMode === 'full') {
+ content.innerHTML = `
+
+
+
+
+ `;
+ } else if (this.currentMode === 'mini') {
+ content.innerHTML = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+ }
+ this.brushSizeInput = this.uiContainer.querySelector('#cbp-brush-size-input');
+ this.brushOpacityInput = this.uiContainer.querySelector('#cbp-brush-opacity-input');
+ this.colorPicker = this.uiContainer.querySelector('#cbp-color-picker');
+ this.toggleDrawBtn = this.uiContainer.querySelector('#cbp-toggle-drawing-mode-btn');
+ this.toggleBtnIcon = this.uiContainer.querySelector('#cbp-toggle-btn-icon');
+
+ this.brushSizeInput.addEventListener('input', this.onBrushSizeChange);
+ this.brushOpacityInput.addEventListener('input', this.onBrushOpacityChange);
+ this.colorPicker.addEventListener('input', this.onColorChange);
+ this.toggleDrawBtn.addEventListener('click', this.onToggleDrawingMode);
+ }
+
+ switchToMiniMode() {
+ if (this.currentMode !== 'minimized') {
+ this.previousMode = this.currentMode;
+ this.currentMode = 'mini';
+ this.onModeChange();
+ }
+ }
+
+ switchToFullMode() {
+ if (this.currentMode !== 'minimized') {
+ this.currentMode = 'full';
+ this.onModeChange();
+ }
+ }
+
+ destroy() {
+ if (this.uiContainer) {
+ document.body.removeChild(this.uiContainer);
+ this.uiContainer = null;
+ }
+
+ this.detachEventListeners();
+
+ this.detachDrawingEvents();
+
+ if (this.cursorCircle) {
+ this.canvas.remove(this.cursorCircle);
+ this.cursorCircle = null;
+ }
+ if (this.secondaryCircle) {
+ this.canvas.remove(this.secondaryCircle);
+ this.secondaryCircle = null;
+ }
+
+ this.canvas.off('object:added', this.onObjectAdded);
+
+ // Remove viewport:changed listener
+ this.canvasManager.off('viewport:changed', this.onViewportChanged);
+
+ // Restore original canvas properties
+ if (this.originalCanvasProperties) {
+ this.canvas.selection = this.originalCanvasProperties.selection;
+ this.canvas.selectionColor = this.originalCanvasProperties.selectionColor;
+ this.canvas.selectionBorderColor = this.originalCanvasProperties.selectionBorderColor;
+ this.canvas.selectionLineWidth = this.originalCanvasProperties.selectionLineWidth;
+ this.canvas.hoverCursor = this.originalCanvasProperties.hoverCursor;
+ this.canvas.moveCursor = this.originalCanvasProperties.moveCursor;
+ this.canvas.defaultCursor = this.originalCanvasProperties.defaultCursor;
+ this.canvas.freeDrawingCursor = this.originalCanvasProperties.freeDrawingCursor;
+ }
+
+ super.destroy();
+ }
+}
+
diff --git a/web/core/js/common/components/canvas/EventEmitter.js b/web/core/js/common/components/canvas/EventEmitter.js
new file mode 100644
index 0000000..08dee88
--- /dev/null
+++ b/web/core/js/common/components/canvas/EventEmitter.js
@@ -0,0 +1,24 @@
+export class EventEmitter {
+ constructor() {
+ this.events = {};
+ }
+
+ on(event, listener) {
+ if (!this.events[event]) {
+ this.events[event] = new Set();
+ }
+ this.events[event].add(listener);
+ }
+
+ off(event, listener) {
+ if (!this.events[event]) return;
+ this.events[event].delete(listener);
+ }
+
+ emit(event, ...args) {
+ if (!this.events[event]) return;
+ for (let listener of this.events[event]) {
+ listener(...args);
+ }
+ }
+}
diff --git a/web/core/js/common/components/canvas/ImageAdderPlugin.js b/web/core/js/common/components/canvas/ImageAdderPlugin.js
new file mode 100644
index 0000000..6a94f0a
--- /dev/null
+++ b/web/core/js/common/components/canvas/ImageAdderPlugin.js
@@ -0,0 +1,129 @@
+import { CanvasPlugin } from './CanvasPlugin.js';
+
+export class ImageAdderPlugin extends CanvasPlugin {
+ constructor(options = {}) {
+ super('ImageAdderPlugin');
+
+ this.options = {
+ ...options
+ };
+
+ this.canvasManager = null;
+ this.canvas = null;
+
+ this.handleAddImage = this.handleAddImage.bind(this);
+ }
+
+ init(canvasManager) {
+ this.canvasManager = canvasManager;
+ this.canvas = canvasManager.canvas;
+
+ this.createUI();
+
+ this.attachEventListeners();
+ }
+
+ createUI() {
+ const html = `
+
+
+
+
+
+
+
+
+
+
+
+
+ `;
+
+ this.uiContainer = document.createElement('div');
+ this.uiContainer.innerHTML = html;
+ this.uiContainer.className = 'image-adder-plugin-container';
+
+ this.uiContainer.style.padding = '10px';
+ this.uiContainer.style.borderRadius = '5px';
+ this.uiContainer.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';
+ this.uiContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
+ this.uiContainer.style.marginTop = '10px';
+
+ const pluginUIContainer = document.getElementById('pluginUIContainer');
+ if (pluginUIContainer) {
+ pluginUIContainer.appendChild(this.uiContainer);
+ } else {
+ console.warn('pluginUIContainer element not found in the DOM.');
+ }
+ }
+
+ attachEventListeners() {
+ const addButton = this.uiContainer.querySelector('#add-image-button');
+ addButton.addEventListener('click', this.handleAddImage);
+ }
+
+ detachEventListeners() {
+ const addButton = this.uiContainer.querySelector('#add-image-button');
+ addButton.removeEventListener('click', this.handleAddImage);
+ }
+
+ handleAddImage() {
+ const colorPicker = this.uiContainer.querySelector('#image-color-picker');
+ const widthInput = this.uiContainer.querySelector('#image-width-input');
+ const heightInput = this.uiContainer.querySelector('#image-height-input');
+
+ const color = colorPicker.value;
+ const width = parseInt(widthInput.value, 10);
+ const height = parseInt(heightInput.value, 10);
+
+ if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0) {
+ alert('Please enter valid width and height values.');
+ return;
+ }
+
+ const rect = new fabric.Rect({
+ width: width,
+ height: height,
+ fill: color,
+ left: this.canvas.getWidth() / 2,
+ top: this.canvas.getHeight() / 2,
+ originX: 'center',
+ originY: 'center',
+ selectable: true,
+ hasControls: true,
+ hasBorders: true,
+ });
+
+ this.canvas.add(rect);
+ this.canvas.setActiveObject(rect);
+ this.canvas.requestRenderAll();
+
+ this.canvasManager.emit('image:added', {
+ type: 'rectangle',
+ object: rect,
+ color: color,
+ width: width,
+ height: height,
+ });
+ }
+
+ destroy() {
+ if (this.uiContainer && this.uiContainer.parentNode) {
+ this.uiContainer.parentNode.removeChild(this.uiContainer);
+ }
+ this.detachEventListeners();
+ }
+}
diff --git a/web/core/js/common/components/canvas/ImageCompareSliderPlugin.js b/web/core/js/common/components/canvas/ImageCompareSliderPlugin.js
new file mode 100644
index 0000000..03d2547
--- /dev/null
+++ b/web/core/js/common/components/canvas/ImageCompareSliderPlugin.js
@@ -0,0 +1,571 @@
+import { CanvasPlugin } from './CanvasPlugin.js';
+
+export class ImageCompareSliderPlugin extends CanvasPlugin {
+ constructor(options = {}) {
+ super('ImageCompareSliderPlugin');
+
+ this.options = {
+ sliderColor: '#570d7b',
+ sliderWidth: 2,
+ handleRadius: 18,
+ handleStrokeWidth: 4,
+ handleStrokeColor: '#fff',
+ topMargin: 23,
+ bottomMargin: 23,
+ mode: 'Pairs', // 'Pairs', 'Replace', 'Multi'
+ ...options
+ };
+
+ this.init = this.init.bind(this);
+ this.destroy = this.destroy.bind(this);
+ this.onImageLoaded = this.onImageLoaded.bind(this);
+ this.onImageRemoved = this.onImageRemoved.bind(this);
+ this.onImageListUpdated = this.onImageListUpdated.bind(this);
+ this.onViewportChanged = this.onViewportChanged.bind(this);
+ this.updateSliderElements = this.updateSliderElements.bind(this);
+ this.updateClipPath = this.updateClipPath.bind(this);
+ this.onMouseDown = this.onMouseDown.bind(this);
+ this.onMouseMove = this.onMouseMove.bind(this);
+ this.onMouseUp = this.onMouseUp.bind(this);
+ this.onMouseDoubleClick = this.onMouseDoubleClick.bind(this);
+ this.animateSlider = this.animateSlider.bind(this);
+ this.ensureSliderOnTop = this.ensureSliderOnTop.bind(this);
+ this.onAfterRender = this.onAfterRender.bind(this);
+ this.setupSliderWithImages = this.setupSliderWithImages.bind(this);
+ this.initializeMultiModeSelector = this.initializeMultiModeSelector.bind(this);
+ this.onMultiModeSelection = this.onMultiModeSelection.bind(this);
+
+ this.canvasManager = null;
+ this.canvas = null;
+ this.images = [];
+ this.sliderLine = null;
+ this.sliderHandle = null;
+ this.animating = false;
+ this.pingPong = true;
+ this.moveRight = true;
+ this.isInitialized = false;
+ this.isDragging = false;
+
+ this.multiModeUI = null;
+ this.imageListContainer = null;
+ this.compareButton = null;
+ }
+
+ init(canvasManager) {
+ this.canvasManager = canvasManager;
+ this.canvas = canvasManager.canvas;
+
+ this.canvasManager.on('image:loaded', this.onImageLoaded);
+ this.canvasManager.on('image:removed', this.onImageRemoved);
+ this.canvasManager.on('image:list:updated', this.onImageListUpdated);
+ this.canvasManager.on('viewport:changed', this.onViewportChanged);
+
+ this.canvas.on('mouse:down', this.onMouseDown);
+ this.canvas.on('mouse:move', this.onMouseMove);
+ this.canvas.on('mouse:up', this.onMouseUp);
+ this.canvas.on('mouse:out', this.onMouseUp);
+ this.canvas.on('mouse:dblclick', this.onMouseDoubleClick);
+
+ this.canvas.on('after:render', this.onAfterRender);
+
+ if (this.options.mode === 'Multi') {
+ this.initializeMultiModeSelector();
+ }
+
+ console.log('ImageCompareSliderPlugin initialized');
+ }
+
+ onAfterRender() {
+ this.ensureSliderOnTop();
+ }
+
+ ensureSliderOnTop() {
+ if (!this.isReady()) return;
+
+ const objects = this.canvas.getObjects();
+
+ const maxIndex = objects.length - 1;
+
+ const lineIndex = objects.indexOf(this.sliderLine);
+ const handleIndex = objects.indexOf(this.sliderHandle);
+
+ if (lineIndex !== maxIndex - 1) {
+ this.sliderLine.moveTo(maxIndex - 1);
+ console.log('sliderLine moved to top -1');
+ }
+ if (handleIndex !== maxIndex) {
+ this.sliderHandle.moveTo(maxIndex);
+ console.log('sliderHandle moved to top');
+ }
+ }
+
+ isReady() {
+ return this.isInitialized &&
+ this.sliderLine &&
+ this.sliderHandle &&
+ this.images.length === 2;
+ }
+
+ onImageListUpdated({ images }) {
+ console.log('Image list updated:', images);
+ this.images = images;
+ this.updateComparisonImages();
+ }
+
+ onImageLoaded({ image, id }) {
+ console.log(`Image loaded: ID=${id}`);
+ if (this.options.mode === 'Pairs') {
+ if (this.images.length > 1) {
+ const imagesToRemove = this.images.slice(0, this.images.length - 1);
+ imagesToRemove.forEach(img => {
+ console.log(`Removing image ID=${img.id} to maintain 'Pairs' mode`);
+ this.canvasManager.emit('image:remove', { id: img.id });
+ });
+ }
+ } else if (this.options.mode === 'Replace') {
+ if (this.images.length > 2) {
+ const imagesToRemove = this.images.slice(0, this.images.length - 2);
+ imagesToRemove.forEach(img => {
+ console.log(`Removing image ID=${img.id} to maintain 'Replace' mode`);
+ this.canvasManager.emit('image:remove', { id: img.id });
+ });
+ }
+ }
+ }
+
+ onImageRemoved({ id }) {
+ console.log(`Image removed: ID=${id}`);
+ this.images = this.images.filter(img => img.id !== id);
+ if (this.images.length < 2) {
+ this.destroySlider();
+ } else {
+ this.updateComparisonImages();
+ }
+ }
+
+ updateComparisonImages() {
+ console.log('Updating comparison images based on current mode:', this.options.mode);
+ if (this.images.length < 2) {
+ this.destroySlider();
+ return;
+ }
+
+ if (this.options.mode === 'Multi') {
+ this.updateMultiModeUI();
+
+ } else {
+ let img1, img2;
+
+ if (this.options.mode === 'Pairs') {
+
+ img1 = this.images[this.images.length - 2];
+ img2 = this.images[this.images.length - 1];
+ } else if (this.options.mode === 'Replace') {
+ img1 = this.images[this.images.length - 2];
+ img2 = this.images[this.images.length - 1];
+ }
+ if (img1 && img2) {
+ this.setupSliderWithImages(img1.id, img2.id);
+ }
+ }
+ }
+
+ setupSliderWithImages(id1, id2) {
+ console.log(`Setting up slider with images ID1=${id1}, ID2=${id2}`);
+ const imageData1 = this.canvasManager.getImageById(id1);
+ const imageData2 = this.canvasManager.getImageById(id2);
+
+ if (!imageData1 || !imageData2) {
+ console.warn('One or both images not found on canvas.');
+ return;
+ }
+
+ this.baseImage = imageData1;
+ this.comparisonImage = imageData2;
+ this.initializeSlider();
+ }
+
+ initializeSlider() {
+ if (!this.baseImage || !this.comparisonImage) return;
+
+ this.cleanupSliderElements();
+
+ const { sliderColor, sliderWidth, handleRadius, handleStrokeWidth, handleStrokeColor } = this.options;
+
+ try {
+ this.sliderLine = new fabric.Line(
+ [this.canvas.width / 2, 0, this.canvas.width / 2, this.canvas.height],
+ {
+ id: 'sliderLine',
+ stroke: sliderColor,
+ strokeWidth: sliderWidth,
+ selectable: false,
+ hasControls: false,
+ evented: false,
+ originX: 'center',
+ visible: true
+ }
+ );
+
+ this.sliderHandle = new fabric.Circle({
+ id: 'sliderHandle',
+ left: this.canvas.width / 2,
+ top: this.canvas.height / 2,
+ radius: handleRadius,
+ fill: sliderColor,
+ stroke: handleStrokeColor,
+ strokeWidth: handleStrokeWidth,
+ originX: 'center',
+ originY: 'center',
+ selectable: true,
+ hasBorders: false,
+ hasControls: false,
+ evented: true,
+ hoverCursor: 'move',
+ perPixelTargetFind: true
+ });
+
+ this.canvas.add(this.sliderLine);
+ this.canvas.add(this.sliderHandle);
+
+ this.ensureSliderOnTop();
+
+ this.updateClipPath();
+ this.isInitialized = true;
+
+ console.log('Slider initialized successfully');
+ this.canvasManager.emit('slider:initialized', {
+ baseImage: this.baseImage,
+ comparisonImage: this.comparisonImage
+ });
+ } catch (error) {
+ console.error('Error initializing slider:', error);
+ this.cleanupSliderElements();
+ }
+ }
+
+ updateSliderElements() {
+ if (!this.isReady()) return;
+
+ const zoom = this.canvas.getZoom();
+
+ this.sliderLine.set({
+ x1: this.sliderHandle.left,
+ x2: this.sliderHandle.left,
+ y1: 0,
+ y2: this.canvas.height
+ });
+
+ const scaledRadius = this.options.handleRadius / zoom;
+ const scaledStroke = this.options.handleStrokeWidth / zoom;
+
+ this.sliderHandle.set({
+ radius: scaledRadius,
+ strokeWidth: scaledStroke
+ });
+
+ this.ensureSliderOnTop();
+ }
+
+ updateClipPath() {
+ if (!this.isReady()) return;
+
+ try {
+ const imageWidth = this.comparisonImage.getScaledWidth();
+ const leftEdge = this.comparisonImage.left - imageWidth / 2;
+
+ this.comparisonImage.clipPath = new fabric.Rect({
+ originX: 'left',
+ originY: 'top',
+ left: leftEdge,
+ top: 0,
+ width: this.sliderHandle.left - leftEdge,
+ height: this.canvas.height,
+ absolutePositioned: true
+ });
+
+ this.canvas.requestRenderAll();
+ console.log('Clip path updated');
+ } catch (error) {
+ console.error('Error updating clip path:', error);
+ }
+ }
+
+ onViewportChanged({ transform }) {
+ if (!this.isReady()) return;
+ this.updateSliderElements();
+ this.updateClipPath();
+ this.ensureSliderOnTop();
+ }
+
+ onMouseDown(event) {
+ if (!this.isReady()) return;
+
+ const pointer = this.canvas.getPointer(event.e);
+ const zoom = this.canvas.getZoom();
+ const handleRadius = this.options.handleRadius / zoom;
+
+ const dx = pointer.x - this.sliderHandle.left;
+ const dy = pointer.y - this.sliderHandle.top;
+ const distance = Math.sqrt(dx * dx + dy * dy);
+
+ if (distance <= handleRadius * 1.5) {
+ this.isDragging = true;
+ this.canvas.defaultCursor = 'move';
+ this.ensureSliderOnTop();
+
+ event.e.preventDefault();
+ event.e.stopPropagation();
+ console.log('Slider handle drag started');
+ }
+ }
+
+ onMouseMove(event) {
+ if (!this.isReady() || !this.isDragging) return;
+
+ const pointer = this.canvas.getPointer(event.e);
+
+ const imageWidth = this.baseImage.getScaledWidth();
+ const leftEdge = this.baseImage.left - imageWidth / 2;
+ const rightEdge = this.baseImage.left + imageWidth / 2;
+
+ const newX = Math.max(leftEdge, Math.min(pointer.x, rightEdge));
+
+ this.sliderHandle.set({
+ left: newX,
+ top: Math.max(
+ this.options.topMargin,
+ Math.min(pointer.y, this.canvas.height - this.options.bottomMargin)
+ )
+ });
+
+ this.updateSliderElements();
+ this.updateClipPath();
+ this.ensureSliderOnTop();
+
+ this.canvas.requestRenderAll();
+ event.e.preventDefault();
+ event.e.stopPropagation();
+ console.log(`Slider handle moved to (${newX}, ${this.sliderHandle.top})`);
+ }
+
+ onMouseUp(event) {
+ if (this.isDragging) {
+ this.isDragging = false;
+ this.canvas.defaultCursor = 'default';
+ this.ensureSliderOnTop();
+ this.canvas.requestRenderAll();
+
+ if (event.e) {
+ event.e.preventDefault();
+ event.e.stopPropagation();
+ }
+ console.log('Slider handle drag ended');
+ }
+ }
+
+ onMouseDoubleClick(e) {
+ if (!this.isReady()) return;
+
+ const pointer = this.canvas.getPointer(e.e);
+ const zoom = this.canvas.getZoom();
+ const handleRadius = this.options.handleRadius / zoom;
+
+ const dx = pointer.x - this.sliderHandle.left;
+ const dy = pointer.y - this.sliderHandle.top;
+ const distance = Math.sqrt(dx * dx + dy * dy);
+
+ if (distance <= handleRadius * 1.5) {
+ this.sliderLine.visible = !this.sliderLine.visible;
+ this.canvas.requestRenderAll();
+ console.log(`Slider line visibility toggled to ${this.sliderLine.visible}`);
+ } else if (!this.animating) {
+ this.animateSlider();
+ } else {
+ this.animating = false;
+ console.log('Slider animation stopped');
+ }
+ }
+
+ animateSlider() {
+ if (!this.isReady()) return;
+
+ this.animating = true;
+ const imageWidth = this.baseImage.getScaledWidth();
+ const leftEdge = this.baseImage.left - imageWidth / 2;
+ const rightEdge = this.baseImage.left + imageWidth / 2;
+
+ const startPosition = this.sliderHandle.left;
+ const endValue = this.moveRight ? rightEdge : leftEdge;
+ const distance = Math.abs(endValue - startPosition);
+ const duration = (distance / (rightEdge - leftEdge)) * 1500;
+
+ console.log(`Animating slider from ${startPosition} to ${endValue} over ${duration}ms`);
+
+ fabric.util.animate({
+ startValue: startPosition,
+ endValue: endValue,
+ duration: duration,
+ onChange: (value) => {
+ if (!this.animating || !this.isReady()) return;
+ const adjustedValue = Math.max(leftEdge, Math.min(value, rightEdge));
+ this.sliderHandle.set({ left: adjustedValue });
+ this.updateSliderElements();
+ this.updateClipPath();
+ this.ensureSliderOnTop();
+ this.canvas.requestRenderAll();
+ console.log(`Slider handle animating to (${adjustedValue}, ${this.sliderHandle.top})`);
+ },
+ onComplete: () => {
+ if (this.pingPong && this.animating && this.isReady()) {
+ this.moveRight = !this.moveRight;
+ this.animateSlider();
+ } else {
+ this.animating = false;
+ this.updateClipPath();
+ this.ensureSliderOnTop();
+ console.log('Slider animation completed');
+ }
+ }
+ });
+ }
+
+ cleanupSliderElements() {
+ if (this.sliderLine) {
+ this.canvas.remove(this.sliderLine);
+ this.sliderLine = null;
+ console.log('Slider line removed');
+ }
+ if (this.sliderHandle) {
+ this.canvas.remove(this.sliderHandle);
+ this.sliderHandle = null;
+ console.log('Slider handle removed');
+ }
+ if (this.comparisonImage && this.comparisonImage.clipPath) {
+ this.comparisonImage.clipPath = null;
+ console.log('Clip path removed from comparison image');
+ }
+ this.isInitialized = false;
+ this.isDragging = false;
+ }
+
+ destroySlider() {
+ console.log('Destroying slider');
+ this.cleanupSliderElements();
+
+ if (this.options.mode === 'Multi') {
+ this.resetMultiModeSelection();
+ }
+ }
+
+ destroy() {
+ this.animating = false;
+
+ this.canvasManager.off('image:loaded', this.onImageLoaded);
+ this.canvasManager.off('image:removed', this.onImageRemoved);
+ this.canvasManager.off('image:list:updated', this.onImageListUpdated);
+ this.canvasManager.off('viewport:changed', this.onViewportChanged);
+
+ this.canvas.off('mouse:down', this.onMouseDown);
+ this.canvas.off('mouse:move', this.onMouseMove);
+ this.canvas.off('mouse:up', this.onMouseUp);
+ this.canvas.off('mouse:out', this.onMouseUp);
+ this.canvas.off('mouse:dblclick', this.onMouseDoubleClick);
+ this.canvas.off('after:render', this.onAfterRender);
+
+ this.destroySlider();
+
+ if (this.multiModeUI) {
+ this.multiModeUI.remove();
+ this.multiModeUI = null;
+ }
+
+ this.baseImage = null;
+ this.comparisonImage = null;
+ this.images = [];
+
+ this.canvas.requestRenderAll();
+ console.log('ImageCompareSliderPlugin destroyed');
+ }
+
+
+ initializeMultiModeSelector() {
+ this.multiModeUI = document.createElement('div');
+ this.multiModeUI.className = 'multi-mode-selector';
+ this.multiModeUI.style.position = 'absolute';
+ this.multiModeUI.style.top = '10px';
+ this.multiModeUI.style.right = '10px';
+ this.multiModeUI.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
+ this.multiModeUI.style.padding = '10px';
+ this.multiModeUI.style.borderRadius = '5px';
+ this.multiModeUI.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)';
+ this.multiModeUI.style.zIndex = '1000';
+
+ const title = document.createElement('h3');
+ title.textContent = 'Select Images to Compare';
+ title.style.margin = '0 0 10px 0';
+ this.multiModeUI.appendChild(title);
+
+ this.imageListContainer = document.createElement('div');
+ this.imageListContainer.className = 'image-list-container';
+ this.imageListContainer.style.maxHeight = '200px';
+ this.imageListContainer.style.overflowY = 'auto';
+ this.multiModeUI.appendChild(this.imageListContainer);
+
+ this.compareButton = document.createElement('button');
+ this.compareButton.textContent = 'Compare Selected';
+ this.compareButton.disabled = true;
+ this.compareButton.style.marginTop = '10px';
+ this.multiModeUI.appendChild(this.compareButton);
+
+ const pluginUIContainer = document.getElementById('pluginUIContainer');
+ if (pluginUIContainer) {
+ pluginUIContainer.appendChild(this.multiModeUI);
+ } else {
+ console.warn('pluginUIContainer element not found in the DOM.');
+ }
+
+ this.imageListContainer.addEventListener('change', this.onMultiModeSelection);
+ this.compareButton.addEventListener('click', () => {
+ const selectedIds = Array.from(this.imageListContainer.querySelectorAll('input[name="compareSelect"]:checked'))
+ .map(input => input.value);
+ if (selectedIds.length === 2) {
+ this.setupSliderWithImages(selectedIds[0], selectedIds[1]);
+ console.log(`Comparing images: ${selectedIds[0]} and ${selectedIds[1]}`);
+ }
+ });
+
+ this.updateMultiModeUI();
+ }
+
+ updateMultiModeUI() {
+ if (this.options.mode !== 'Multi') return;
+
+ this.imageListContainer.innerHTML = '';
+
+ this.images.forEach(img => {
+ const label = document.createElement('label');
+ label.style.display = 'block';
+ label.style.marginBottom = '5px';
+ label.innerHTML = `
+
+ Image ${img.id}
+ `;
+ this.imageListContainer.appendChild(label);
+ });
+ }
+
+ onMultiModeSelection() {
+ const checked = this.imageListContainer.querySelectorAll('input[name="compareSelect"]:checked').length;
+ this.compareButton.disabled = checked !== 2;
+ }
+
+ resetMultiModeSelection() {
+ if (this.multiModeUI) {
+ this.multiModeUI.querySelectorAll('input[name="compareSelect"]').forEach(input => {
+ input.checked = false;
+ });
+ this.compareButton.disabled = true;
+ }
+ }
+}
diff --git a/web/core/js/common/components/canvas/ImageLoaderPlugin.js b/web/core/js/common/components/canvas/ImageLoaderPlugin.js
new file mode 100644
index 0000000..5d40df6
--- /dev/null
+++ b/web/core/js/common/components/canvas/ImageLoaderPlugin.js
@@ -0,0 +1,479 @@
+
+import { CanvasPlugin } from './CanvasPlugin.js';
+
+export class ImageLoaderPlugin extends CanvasPlugin {
+ constructor(options = {}) {
+ super('ImageLoaderPlugin');
+
+ this.options = {
+ mode: 'Single', // 'Single' or 'Multi'
+ ...options
+ };
+
+ this.canvasManager = null;
+ this.canvas = null;
+
+ this.uiContainer = null;
+ this.toggleButton = null;
+ this.loadButton = null;
+ this.fileInput = null;
+
+ this.loadedImages = [];
+ this.originalImages = {};
+
+ this.onImageDrop = this.onImageDrop.bind(this);
+ this.onDoubleClick = this.onDoubleClick.bind(this);
+ this.onToggleMode = this.onToggleMode.bind(this);
+ this.onCanvasResized = this.onCanvasResized.bind(this);
+ this.onDragOver = this.onDragOver.bind(this);
+ this.onImageRemove = this.onImageRemove.bind(this);
+ this.onLoadButtonClick = this.onLoadButtonClick.bind(this);
+ this.onFileInputChange = this.onFileInputChange.bind(this);
+ }
+
+ init(canvasManager) {
+ this.canvasManager = canvasManager;
+ this.canvas = canvasManager.canvas;
+
+ this.createUI();
+
+ this.attachEventListeners();
+
+ this.canvasManager.on('canvas:resized', this.onCanvasResized);
+
+ this.canvasManager.on('image:remove', this.onImageRemove);
+ }
+
+ createUI() {
+ if (!document.querySelector('style[data-plugin="image-loader"]')) {
+ const styleSheet = document.createElement('style');
+ styleSheet.setAttribute('data-plugin', 'image-loader');
+ styleSheet.textContent = `
+ .il-container * {
+ box-sizing: border-box;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ }
+
+ .il-container {
+ display: inline-flex;
+ padding: 0.5rem;
+ gap: 0.5rem;
+ }
+
+ .il-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ padding: 0.5rem;
+ background: var(--color-button-primary, #007BFF);
+ border: none;
+ cursor: pointer;
+ transition: background 0.2s;
+ color: var(--color-primary-text, #FFFFFF);
+ height: 36px;
+ }
+
+ .il-button:hover {
+ background: var(--color-button-primary-hover, #0056b3);
+ }
+
+ .il-button svg {
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+
+ .il-toggle-button[data-mode="Multi"] {
+ border: 1px dashed var(--color-button-secondary-text-active, #FFC107);
+ }
+
+ .il-hidden-file-input {
+ display: none;
+ }
+ /* Temporary fix for hidden future functionality */
+ #toggleModeBtn {
+ display: none;
+ }
+ `;
+ document.head.appendChild(styleSheet);
+ }
+
+ this.uiContainer = document.createElement('div');
+ this.uiContainer.className = 'il-container';
+
+ this.renderToggleButton();
+
+ this.renderLoadButton();
+
+ this.createHiddenFileInput();
+
+ const pluginUIContainer = document.getElementById('pluginUIContainer');
+ if (pluginUIContainer) {
+ pluginUIContainer.appendChild(this.uiContainer);
+ }
+ }
+
+ renderToggleButton() {
+ this.toggleButton = document.createElement('button');
+ this.toggleButton.className = 'il-button il-toggle-button';
+ this.toggleButton.id = 'toggleModeBtn';
+ this.toggleButton.setAttribute('data-mode', this.options.mode);
+ this.toggleButton.innerHTML = `
+
+ ${this.options.mode}
+ `;
+ this.toggleButton.addEventListener('click', this.onToggleMode);
+ this.uiContainer.appendChild(this.toggleButton);
+ }
+
+ renderLoadButton() {
+ this.loadButton = document.createElement('button');
+ this.loadButton.className = 'il-button il-load-button';
+ this.loadButton.id = 'loadImageBtn';
+ this.loadButton.innerHTML = `
+
+ `;
+ this.loadButton.addEventListener('click', this.onLoadButtonClick);
+ this.uiContainer.appendChild(this.loadButton);
+ }
+
+ createHiddenFileInput() {
+ this.fileInput = document.createElement('input');
+ this.fileInput.type = 'file';
+ this.fileInput.accept = 'image/*';
+ this.fileInput.className = 'il-hidden-file-input';
+ this.fileInput.addEventListener('change', this.onFileInputChange);
+ document.body.appendChild(this.fileInput);
+ }
+
+ onToggleMode() {
+ // Toggle between 'Single' and 'Multi' modes
+ this.options.mode = this.options.mode === 'Single' ? 'Multi' : 'Single';
+ this.toggleButton.setAttribute('data-mode', this.options.mode);
+ this.toggleButton.innerHTML = `
+
+ ${this.options.mode}
+ `;
+
+ if (this.options.mode === 'Single' && this.loadedImages.length > 1) {
+ const imagesToRemove = this.loadedImages.slice(0, -1);
+ imagesToRemove.forEach(({ id }) => {
+ this.removeImageById(id);
+ });
+ }
+ }
+
+ onLoadButtonClick() {
+ if (this.fileInput) {
+ this.fileInput.click();
+ }
+ }
+
+ onFileInputChange(event) {
+ const file = event.target.files[0];
+ if (file) {
+ this.handleImageFile(file);
+ }
+ event.target.value = '';
+ }
+
+ attachEventListeners() {
+ this.canvas.upperCanvasEl.addEventListener('dragover', this.onDragOver);
+ this.canvas.upperCanvasEl.addEventListener('drop', this.onImageDrop);
+ }
+
+ detachEventListeners() {
+ this.canvas.upperCanvasEl.removeEventListener('dragover', this.onDragOver);
+ this.canvas.upperCanvasEl.removeEventListener('drop', this.onImageDrop);
+
+ if (this.toggleButton) {
+ this.toggleButton.removeEventListener('click', this.onToggleMode);
+ }
+
+ if (this.loadButton) {
+ this.loadButton.removeEventListener('click', this.onLoadButtonClick);
+ }
+
+ if (this.fileInput) {
+ this.fileInput.removeEventListener('change', this.onFileInputChange);
+ }
+
+ this.canvasManager.off('canvas:resized', this.onCanvasResized);
+
+ this.canvasManager.off('image:remove', this.onImageRemove);
+ }
+
+ onCanvasResized({ width, height }) {
+ // Recalculate and apply scale to all images based on original dimensions
+ this.loadedImages.forEach(({ imageObject, borderRect }) => {
+ const img = imageObject;
+ const border = borderRect;
+
+ const strokeWidth = border.strokeWidth || 2;
+ const desiredWidth = width - strokeWidth * 2;
+ const desiredHeight = height - strokeWidth * 2;
+
+ const imgAspect = img.width / img.height;
+ const canvasAspect = width / height;
+
+ let scaleFactor;
+ if (imgAspect > canvasAspect) {
+ scaleFactor = desiredWidth / img.width;
+ } else {
+ scaleFactor = desiredHeight / img.height;
+ }
+
+ // Apply uniform scale to maintain aspect ratio
+ img.set({
+ scaleX: scaleFactor,
+ scaleY: scaleFactor,
+ left: width / 2,
+ top: height / 2,
+ originX: 'center',
+ originY: 'center',
+ selectable: false,
+ evented: false,
+ });
+
+ border.set({
+ scaleX: scaleFactor,
+ scaleY: scaleFactor,
+ left: width / 2,
+ top: height / 2,
+ originX: 'center',
+ originY: 'center',
+ });
+ });
+
+ this.canvas.requestRenderAll();
+ }
+
+ onDragOver(event) {
+ event.preventDefault();
+ event.dataTransfer.dropEffect = 'copy';
+ }
+
+ onImageDrop(event) {
+ event.preventDefault();
+ const files = event.dataTransfer.files;
+ if (files && files[0]) {
+ this.handleImageFile(files[0]);
+ }
+ }
+
+ onDoubleClick(event) {
+ const fileInput = document.createElement('input');
+ fileInput.type = 'file';
+ fileInput.accept = 'image/*';
+ fileInput.style.display = 'none';
+ fileInput.addEventListener('change', (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ this.handleImageFile(file);
+ }
+ });
+ document.body.appendChild(fileInput);
+ fileInput.click();
+ document.body.removeChild(fileInput);
+ }
+
+ handleImageFile(file) {
+ if (!file.type.startsWith('image/')) {
+ alert('Please drop a valid image file.');
+ return;
+ }
+
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ fabric.Image.fromURL(e.target.result, (img) => {
+ const uniqueId = `Image_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+ img.set({
+ id: uniqueId,
+ scaleX: 1,
+ scaleY: 1,
+ left: this.canvas.getWidth() / 2,
+ top: this.canvas.getHeight() / 2,
+ originX: 'center',
+ originY: 'center',
+ selectable: false,
+ evented: false,
+ });
+
+ const originalWidth = img.width;
+ const originalHeight = img.height;
+
+ const tempCanvas = document.createElement('canvas');
+ tempCanvas.width = img.width;
+ tempCanvas.height = img.height;
+ const tempCtx = tempCanvas.getContext('2d');
+
+ img.clone((clonedImg) => {
+ tempCtx.drawImage(clonedImg._element, 0, 0);
+ const originalDataURL = tempCanvas.toDataURL('image/png');
+ this.originalImages[uniqueId] = originalDataURL;
+ });
+
+ const canvasWidth = this.canvas.getWidth();
+ const canvasHeight = this.canvas.getHeight();
+ const imgAspect = originalWidth / originalHeight;
+ const canvasAspect = canvasWidth / canvasHeight;
+
+ const strokeWidth = 2;
+ const desiredWidth = canvasWidth - strokeWidth * 2;
+ const desiredHeight = canvasHeight - strokeWidth * 2;
+ let scaleFactor;
+ if (imgAspect > canvasAspect) {
+ scaleFactor = desiredWidth / originalWidth;
+ } else {
+ scaleFactor = desiredHeight / originalHeight;
+ }
+
+ img.set({
+ scaleX: scaleFactor,
+ scaleY: scaleFactor,
+ left: canvasWidth / 2,
+ top: canvasHeight / 2,
+ originX: 'center',
+ originY: 'center',
+ selectable: false,
+ evented: false,
+ });
+
+ const borderRect = new fabric.Rect({
+ width: img.getScaledWidth(),
+ height: img.getScaledHeight(),
+ originX: 'center',
+ originY: 'center',
+ left: canvasWidth / 2,
+ top: canvasHeight / 2,
+ fill: 'transparent',
+ // stroke: 'rgba(255, 0, 0, 0.5)',
+ strokeWidth: strokeWidth,
+ strokeDashArray: [10, 5],
+ strokeUniform: true,
+ selectable: false,
+ evented: false,
+ hasControls: false,
+ hasBorders: false,
+ lockMovementX: true,
+ lockMovementY: true,
+ });
+
+ this.canvas.add(img);
+ this.canvas.add(borderRect);
+
+ borderRect.bringToFront();
+
+ this.loadedImages.push({
+ id: uniqueId,
+ imageObject: img,
+ borderRect: borderRect,
+ originalWidth: originalWidth,
+ originalHeight: originalHeight,
+ scaleFactor: scaleFactor,
+ });
+
+ if (this.options.mode === 'Single' && this.loadedImages.length > 1) {
+ const imagesToRemove = this.loadedImages.slice(0, -1);
+ imagesToRemove.forEach(({ id }) => {
+ this.removeImageById(id);
+ });
+ }
+
+ this.canvasManager.emit('image:loaded', {
+ image: img,
+ id: uniqueId,
+ originalWidth: originalWidth,
+ originalHeight: originalHeight,
+ scaleFactor: scaleFactor,
+ });
+
+ this.canvasManager.emit('image:list:updated', {
+ images: this.loadedImages.map(img => ({
+ id: img.id,
+ left: img.imageObject.left,
+ top: img.imageObject.top,
+ scaleX: img.imageObject.scaleX,
+ scaleY: img.imageObject.scaleY,
+ })),
+ });
+ }, { crossOrigin: 'anonymous' });
+ };
+ reader.readAsDataURL(file);
+ }
+
+ getOriginalImage(id) {
+ if (this.loadedImages.length === 0) {
+ console.warn('No images loaded.');
+ return null;
+ }
+
+ if (id) {
+ return this.originalImages[id] || null;
+ }
+
+ const latestImage = this.loadedImages[this.loadedImages.length - 1];
+ return this.originalImages[latestImage.id] || null;
+ }
+
+ removeImageById(id) {
+ const imageIndex = this.loadedImages.findIndex(img => img.id === id);
+ if (imageIndex !== -1) {
+ const { imageObject, borderRect } = this.loadedImages[imageIndex];
+ this.canvas.remove(imageObject);
+ this.canvas.remove(borderRect);
+ this.loadedImages.splice(imageIndex, 1);
+
+ delete this.originalImages[id];
+
+ console.log(`ImageLoaderPlugin: Removed image with ID=${id}`);
+ this.canvasManager.emit('image:removed', { id });
+
+ this.canvasManager.emit('image:list:updated', {
+ images: this.loadedImages.map(img => ({
+ id: img.id,
+ left: img.imageObject.left,
+ top: img.imageObject.top,
+ scaleX: img.imageObject.scaleX,
+ scaleY: img.imageObject.scaleY,
+ })),
+ });
+
+ if (this.options.mode === 'Single' && this.loadedImages.length === 0) {
+ this.canvas.clear();
+ console.log('ImageLoaderPlugin: Canvas cleared in Single mode');
+ }
+
+ this.canvas.requestRenderAll();
+ } else {
+ console.warn(`ImageLoaderPlugin: Image with ID=${id} not found`);
+ }
+ }
+
+ onImageRemove({ id }) {
+ console.log(`ImageLoaderPlugin: Received request to remove image ID=${id}`);
+ this.removeImageById(id);
+ }
+
+ destroy() {
+ if (this.uiContainer && this.uiContainer.parentNode) {
+ this.uiContainer.parentNode.removeChild(this.uiContainer);
+ }
+ this.detachEventListeners();
+ this.loadedImages.forEach(({ imageObject, borderRect }) => {
+ this.canvas.remove(imageObject);
+ this.canvas.remove(borderRect);
+ });
+ this.loadedImages = [];
+ this.originalImages = {};
+ this.canvas.requestRenderAll();
+ }
+}
diff --git a/web/core/js/common/components/canvas/MaskBrushPlugin.js b/web/core/js/common/components/canvas/MaskBrushPlugin.js
new file mode 100644
index 0000000..14490e3
--- /dev/null
+++ b/web/core/js/common/components/canvas/MaskBrushPlugin.js
@@ -0,0 +1,1271 @@
+import { CustomBrushPlugin } from './CustomBrushPlugin.js';
+
+export class MaskBrushPlugin extends CustomBrushPlugin {
+ constructor(options = {}) {
+ super({ ...options, name: 'MaskBrushPlugin' });
+
+ this.masks = [];
+ this.currentMask = null;
+ this.maskStrokeHistory = {}; // { maskName: { undoStack: [], redoStack: [] } }
+ this.brushIcon = '/core/media/ui/double-face-mask.png';
+
+ this.onAddMask = this.onAddMask.bind(this);
+ this.onChangeMask = this.onChangeMask.bind(this);
+ this.onChangeMaskColor = this.onChangeMaskColor.bind(this);
+ this.onMoveMaskUp = this.onMoveMaskUp.bind(this);
+ this.onMoveMaskDown = this.onMoveMaskDown.bind(this);
+ this.onApplyColorToExistingMaskChange = this.onApplyColorToExistingMaskChange.bind(this);
+ this.onHandleSave = this.onHandleSave.bind(this);
+ this.onRemoveMask = this.onRemoveMask.bind(this);
+ this.onImageLoaded = this.onImageLoaded.bind(this);
+ this.onCanvasStateChanged = this.onCanvasStateChanged.bind(this);
+ this.onHandleSaveFromCanvas = this.onHandleSaveFromCanvas.bind(this);
+ this.onWindowResize = this.onWindowResize.bind(this);
+ this.onUndoMaskStroke = this.onUndoMaskStroke.bind(this);
+ this.onRedoMaskStroke = this.onRedoMaskStroke.bind(this);
+ }
+
+ init(canvasManager) {
+ super.init(canvasManager);
+
+ if (this.brushOpacityInput && this.brushOpacityInput.parentElement) {
+ this.brushOpacityInput.parentElement.style.display = 'none';
+ }
+
+ this.extendUI();
+
+ this.attachAdditionalEventListeners();
+
+ this.canvasManager.on('image:loaded', this.onImageLoaded);
+ this.canvasManager.on('canvas:state:changed', this.onCanvasStateChanged);
+ this.canvasManager.on('undo:mask:stroke', this.onUndoMaskStroke);
+ this.canvasManager.on('redo:mask:stroke', this.onRedoMaskStroke);
+
+ window.addEventListener('resize', this.onWindowResize);
+
+ this.canvasManager.on('save:trigger', this.onHandleSaveFromCanvas);
+ }
+
+ extendUI() {
+ const styleSheet = document.createElement('style');
+ styleSheet.textContent = `
+
+ `;
+ document.head.appendChild(styleSheet);
+
+ const temp = document.createElement('div');
+ temp.innerHTML = `
+
+
+ `;
+
+ while (temp.firstChild) {
+ this.uiContainer.appendChild(temp.firstChild);
+ }
+
+ this.addMaskBtn = this.uiContainer.querySelector('#addMaskBtn');
+ this.maskList = this.uiContainer.querySelector('#maskList');
+ this.applyColorToMaskCheckbox = this.uiContainer.querySelector('#applyColorToMaskCheckbox');
+ this.moveMaskUpBtn = this.uiContainer.querySelector('#moveMaskUpBtn');
+ this.moveMaskDownBtn = this.uiContainer.querySelector('#moveMaskDownBtn');
+ this.removeMaskBtn = this.uiContainer.querySelector('#removeMaskBtn');
+ this.saveOptionsSelect = this.uiContainer.querySelector('#saveOptionsSelect');
+ this.saveMaskBtn = this.uiContainer.querySelector('#saveMaskBtn');
+
+ this.saveOptions = [
+ {
+ value: 'saveMaskAlphaOnImage',
+ text: 'Mask As Alpha on Image',
+ handler: () => this.saveMaskAlphaOnImage(),
+ exportFunction: () => this.exportMaskAlphaOnImage(),
+ show: true,
+ },
+ {
+ value: 'saveAllMasksAlphaOnImage',
+ text: 'All Masks As Alpha on Image',
+ handler: () => this.saveAllMasksAlphaOnImage(),
+ exportFunction: () => this.exportAllMasksAlphaOnImage(),
+ show: true,
+ },
+ {
+ value: 'saveAllMasksCombinedAlphaOnImage',
+ text: 'All Masks As Alpha Combined on Image',
+ handler: () => this.saveAllMasksCombinedAlphaOnImage(),
+ exportFunction: () => this.exportAllMasksCombinedAlphaOnImage(),
+ show: true,
+ },
+ {
+ value: 'saveMask',
+ text: 'Mask',
+ handler: () => this.saveMask(),
+ exportFunction: () => this.exportMask(),
+ show: true,
+ },
+ {
+ value: 'saveAllMasks',
+ text: 'All Masks',
+ handler: () => this.saveAllMasks(),
+ exportFunction: () => this.exportMasksImage(),
+ show: true,
+ },
+ {
+ value: 'saveAllMasksCombined',
+ text: 'All Masks Combined',
+ handler: () => this.saveAllMasksCombined(),
+ exportFunction: () => this.exportAllMasksCombined(),
+ show: true,
+ },
+ {
+ value: 'saveAllMasksCombinedBW',
+ text: 'All Masks Combined (B&W)',
+ handler: () => this.saveAllMasksCombinedBlackWhite(),
+ exportFunction: () => this.exportMasksCombinedBlackWhite(),
+ show: true,
+ },
+ {
+ value: 'saveMaskOnImage',
+ text: 'Mask on Image',
+ handler: () => this.saveMaskOnImage(),
+ exportFunction: () => this.exportMaskOnImage(),
+ show: true,
+ },
+ {
+ value: 'saveAllMasksOnImage',
+ text: 'All Masks on Image',
+ handler: () => this.saveAllMasksOnImage(),
+ exportFunction: () => this.exportAllMasksOnImage(),
+ show: true,
+ },
+ {
+ value: 'saveAllMasksCombinedOnImage',
+ text: 'All Masks Combined on Image',
+ handler: () => this.saveAllMasksCombinedOnImage(),
+ exportFunction: () => this.exportAllMasksCombinedOnImage(),
+ show: true,
+ },
+ {
+ value: 'saveAllMasksCombinedBWOnImage',
+ text: 'All Masks Combined (B&W) on Image',
+ handler: () => this.saveAllMasksCombinedBlackWhiteOnImage(),
+ exportFunction: () => this.exportAllMasksCombinedBlackWhiteOnImage(),
+ show: true,
+ },
+ ];
+
+ this.saveOptions.forEach(optionData => {
+ if (optionData.show) {
+ const option = document.createElement('option');
+ option.value = optionData.value;
+ option.text = optionData.text;
+ this.saveOptionsSelect.add(option);
+ }
+ });
+ }
+
+
+ attachAdditionalEventListeners() {
+ this.addMaskBtn.addEventListener('click', this.onAddMask);
+ this.maskList.addEventListener('change', this.onChangeMask);
+ this.colorPicker.addEventListener('input', this.onChangeMaskColor);
+ this.applyColorToMaskCheckbox.addEventListener('change', this.onApplyColorToExistingMaskChange);
+ this.moveMaskUpBtn.addEventListener('click', this.onMoveMaskUp);
+ this.moveMaskDownBtn.addEventListener('click', this.onMoveMaskDown);
+ this.removeMaskBtn.addEventListener('click', this.onRemoveMask);
+
+ this.saveMaskBtn.addEventListener('click', this.onHandleSave);
+ }
+
+ detachAdditionalEventListeners() {
+ this.addMaskBtn.removeEventListener('click', this.onAddMask);
+ this.maskList.removeEventListener('change', this.onChangeMask);
+ this.colorPicker.removeEventListener('input', this.onChangeMaskColor);
+ this.applyColorToMaskCheckbox.removeEventListener('change', this.onApplyColorToExistingMaskChange);
+ this.moveMaskUpBtn.removeEventListener('click', this.onMoveMaskUp);
+ this.moveMaskDownBtn.removeEventListener('click', this.onMoveMaskDown);
+ this.removeMaskBtn.removeEventListener('click', this.onRemoveMask);
+
+ this.saveMaskBtn.removeEventListener('click', this.onHandleSave);
+
+ this.canvasManager.off('image:loaded', this.onImageLoaded);
+ this.canvasManager.off('canvas:state:changed', this.onCanvasStateChanged);
+ this.canvasManager.off('undo:mask:stroke', this.onUndoMaskStroke);
+ this.canvasManager.off('redo:mask:stroke', this.onRedoMaskStroke);
+
+ window.removeEventListener('resize', this.onWindowResize);
+
+ this.canvasManager.off('save:trigger', this.onHandleSaveFromCanvas);
+ }
+
+ onWindowResize() {
+ if (typeof this.onImageModified === 'function') {
+ this.onImageModified();
+ } else {
+ console.error('onImageModified method is not defined or not bound correctly.');
+ }
+ }
+
+ onImageLoaded(event) {
+ const { image, originalWidth, originalHeight, scaleFactor } = event;
+
+ this.imageObject = image;
+ this.imageOriginalWidth = originalWidth;
+ this.imageOriginalHeight = originalHeight;
+ this.imageScaleFactor = scaleFactor;
+
+ this.imageObject.on('modified', this.onImageModified);
+
+ this.masks.forEach(mask => {
+ this.canvas.remove(mask.fabricImage);
+ });
+ this.masks = [];
+ this.currentMask = null;
+ this.maskList.options.length = 0;
+
+ this.maskStrokeHistory = {};
+
+ this.onAddMask();
+ }
+
+ onImageModified() {
+ if (!this.imageObject) {
+ console.error('Image object is not defined.');
+ return;
+ }
+
+ this.masks.forEach(mask => {
+ mask.fabricImage.set({
+ scaleX: this.imageObject.scaleX,
+ scaleY: this.imageObject.scaleY,
+ left: this.imageObject.left,
+ top: this.imageObject.top,
+ originX: this.imageObject.originX,
+ originY: this.imageObject.originY,
+ });
+ mask.fabricImage.setCoords();
+ });
+ this.canvas.renderAll();
+ }
+
+ onCanvasStateChanged() {
+ this.masks.forEach(mask => {
+ if (mask.fabricImage) {
+ mask.fabricImage.selectable = !this.drawingMode;
+ mask.fabricImage.evented = !this.drawingMode;
+ }
+ });
+ this.canvas.renderAll();
+ }
+
+ onAddMask() {
+ if (!this.imageObject) {
+ alert('Please load an image before adding masks.');
+ return;
+ }
+
+ const maskName = `Mask ${this.maskList.options.length + 1}`;
+ const color = this.brushColor;
+
+ const maskCanvas = document.createElement('canvas');
+ maskCanvas.width = this.imageOriginalWidth;
+ maskCanvas.height = this.imageOriginalHeight;
+ const maskCtx = maskCanvas.getContext('2d');
+
+ maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
+
+ const maskFabricImage = new fabric.Image(maskCanvas, {
+ left: this.imageObject.left,
+ top: this.imageObject.top,
+ originX: this.imageObject.originX,
+ originY: this.imageObject.originY,
+ selectable: false,
+ evented: false,
+ lockMovementX: true,
+ lockMovementY: true,
+ lockRotation: true,
+ lockScalingX: true,
+ lockScalingY: true,
+ hasControls: false,
+ hasBorders: false,
+ hoverCursor: 'default',
+ opacity: this.brushOpacity,
+ scaleX: this.imageObject.scaleX,
+ scaleY: this.imageObject.scaleY,
+ willReadFrequently: true,
+ });
+
+ this.canvas.add(maskFabricImage);
+ maskFabricImage.bringToFront();
+
+ const mask = {
+ name: maskName,
+ color: color,
+ fabricImage: maskFabricImage,
+ canvasEl: maskCanvas,
+ ctx: maskCtx,
+ };
+
+ this.masks.push(mask);
+ this.currentMask = mask;
+
+ this.maskStrokeHistory[maskName] = {
+ undoStack: [],
+ redoStack: []
+ };
+
+ const option = document.createElement('option');
+ option.value = maskName;
+ option.text = maskName;
+ option.dataset.color = color;
+ this.maskList.add(option);
+ this.maskList.value = maskName;
+
+ this.updateBrushColorAndCursor();
+ }
+
+ onChangeMask() {
+ const selectedOption = this.maskList.options[this.maskList.selectedIndex];
+ const maskName = selectedOption.value;
+ const color = selectedOption.dataset.color;
+
+ this.currentMask = this.masks.find(m => m.name === maskName);
+ this.brushColor = color;
+
+ this.colorPicker.value = color;
+
+ this.updateBrushColorAndCursor();
+ }
+
+ onChangeMaskColor() {
+ const color = this.brushColor = this.colorPicker.value;
+ const selectedOption = this.maskList.options[this.maskList.selectedIndex];
+ if (selectedOption) {
+ selectedOption.dataset.color = color;
+ }
+
+ const applyToExistingMask = this.applyColorToMaskCheckbox.checked;
+
+ if (this.currentMask) {
+ this.currentMask.color = color;
+
+ if (applyToExistingMask) {
+ this.applyColorToExistingMask(this.currentMask, color);
+ this.canvas.renderAll();
+ }
+
+ this.updateBrushColorAndCursor();
+ }
+ }
+
+ applyColorToExistingMask(mask, newColor) {
+ if (!mask || !mask.ctx) {
+ console.error('Cannot apply color: mask or its context is null.');
+ return;
+ }
+
+ const ctx = mask.ctx;
+ const canvasEl = mask.canvasEl;
+ const imageData = ctx.getImageData(0, 0, canvasEl.width, canvasEl.height);
+ const data = imageData.data;
+
+ const tempElem = document.createElement('div');
+ tempElem.style.color = newColor;
+ document.body.appendChild(tempElem);
+ const rgbColor = window.getComputedStyle(tempElem).color;
+ document.body.removeChild(tempElem);
+
+ const rgbMatch = rgbColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+ if (!rgbMatch) {
+ console.error('Failed to parse new color.');
+ return;
+ }
+
+ const rNew = parseInt(rgbMatch[1]);
+ const gNew = parseInt(rgbMatch[2]);
+ const bNew = parseInt(rgbMatch[3]);
+
+ for (let i = 0; i < data.length; i += 4) {
+ const alpha = data[i + 3];
+ if (alpha > 0) {
+ data[i] = rNew; // Red
+ data[i + 1] = gNew; // Green
+ data[i + 2] = bNew; // Blue
+ }
+ }
+
+ ctx.putImageData(imageData, 0, 0);
+ mask.fabricImage.dirty = true;
+ }
+
+ onApplyColorToExistingMaskChange() {
+ //can be used if additional actions are needed when the checkbox state changes
+ }
+
+ onMoveMaskUp() {
+ const index = this.maskList.selectedIndex;
+ if (index > 0) {
+ const option = this.maskList.options[index];
+ this.maskList.remove(index);
+ this.maskList.add(option, index - 1);
+ this.maskList.selectedIndex = index - 1;
+
+ const mask = this.masks.splice(index, 1)[0];
+ this.masks.splice(index - 1, 0, mask);
+
+ const imageIndex = this.canvas.getObjects().indexOf(this.imageObject);
+ const newZIndex = imageIndex + 1 + (index - 1);
+ this.canvas.moveTo(mask.fabricImage, newZIndex);
+ this.canvas.renderAll();
+ }
+ }
+
+ onMoveMaskDown() {
+ const index = this.maskList.selectedIndex;
+ if (index < this.maskList.options.length - 1) {
+ const option = this.maskList.options[index];
+ this.maskList.remove(index);
+ this.maskList.add(option, index + 1);
+ this.maskList.selectedIndex = index + 1;
+
+ const mask = this.masks.splice(index, 1)[0];
+ this.masks.splice(index + 1, 0, mask);
+
+ const imageIndex = this.canvas.getObjects().indexOf(this.imageObject);
+ const newZIndex = imageIndex + 1 + (index + 1);
+ this.canvas.moveTo(mask.fabricImage, newZIndex);
+ this.canvas.renderAll();
+ }
+ }
+
+ onRemoveMask() {
+ if (this.masks.length === 0) {
+ alert('No masks available to remove.');
+ return;
+ }
+
+ const selectedIndex = this.maskList.selectedIndex;
+ if (selectedIndex === -1) {
+ alert('Please select a mask to remove.');
+ return;
+ }
+
+ const maskName = this.maskList.options[selectedIndex].value;
+ const mask = this.masks.find(m => m.name === maskName);
+
+ if (!mask) {
+ alert('Selected mask not found.');
+ return;
+ }
+
+ const confirmRemoval = confirm(`Are you sure you want to remove "${maskName}"?`);
+ if (!confirmRemoval) {
+ return;
+ }
+
+ this.canvas.remove(mask.fabricImage);
+
+ this.masks = this.masks.filter(m => m.name !== maskName);
+
+ delete this.maskStrokeHistory[maskName];
+
+ this.maskList.remove(selectedIndex);
+
+ if (this.masks.length > 0) {
+ const newIndex = selectedIndex > 0 ? selectedIndex - 1 : 0;
+ this.maskList.selectedIndex = newIndex;
+ this.currentMask = this.masks[newIndex];
+ } else {
+ this.currentMask = null;
+ }
+
+ this.updateBrushColorAndCursor();
+
+ this.canvas.renderAll();
+ }
+
+ updateBrushColorAndCursor() {
+ if (this.currentMask) {
+ this.brushColor = this.currentMask.color;
+ this.updateCursorCircle();
+ this.canvas.requestRenderAll();
+ } else {
+
+ this.brushColor = '#FF0000';
+ this.updateCursorCircle();
+ this.canvas.requestRenderAll();
+ }
+ }
+
+ onMouseDown(o) {
+ if (!this.currentMask || !this.currentMask.ctx) {
+ console.error('Cannot draw: currentMask or its context is null.');
+ return;
+ }
+
+ this.isMouseDown = true;
+ this.isStrokeInProgress = true;
+
+ const pointer = this.canvas.getPointer(o.e, true);
+ const transformedPointer = this.mapPointerToImageSpace(pointer);
+
+ if (!this.isPointerInsideImage(transformedPointer)) {
+ this.isMouseDown = false;
+ this.isStrokeInProgress = false;
+ return;
+ }
+
+ this.lastPointer = transformedPointer;
+
+ const imageDataBefore = this.currentMask.ctx.getImageData(0, 0, this.currentMask.canvasEl.width, this.currentMask.canvasEl.height);
+ this.maskStrokeHistory[this.currentMask.name].undoStack.push(imageDataBefore);
+ if (this.maskStrokeHistory[this.currentMask.name].undoStack.length > this.maxHistory) {
+ this.maskStrokeHistory[this.currentMask.name].undoStack.shift();
+ }
+
+ this.maskStrokeHistory[this.currentMask.name].redoStack = [];
+
+ this.drawOnMask(transformedPointer);
+ }
+
+ onMouseMove(o) {
+ if (!this.currentMask || !this.currentMask.ctx) {
+ console.error('Cannot draw: currentMask or its context is null.');
+ return;
+ }
+
+ const pointer = this.canvas.getPointer(o.e, true);
+ const transformedPointer = this.mapPointerToImageSpace(pointer);
+
+ this.updateCursorPosition(o);
+
+ if (this.isMouseDown && this.isStrokeInProgress) {
+ if (!this.isPointerInsideImage(transformedPointer)) {
+ return;
+ }
+
+ this.drawLineOnMask(this.lastPointer, transformedPointer);
+ this.lastPointer = transformedPointer;
+ }
+
+ this.canvas.requestRenderAll();
+ }
+
+ onMouseUp() {
+ if (this.isMouseDown) {
+ this.isMouseDown = false;
+ this.isStrokeInProgress = false;
+ }
+ }
+
+ onUndoMaskStroke(strokeData) {
+ console.log('MaskBrushPlugin: Undoing mask stroke', strokeData);
+ if (strokeData.type === 'add') {
+ this.undoLastStroke(strokeData.maskName);
+ }
+ }
+
+ onRedoMaskStroke(strokeData) {
+ console.log('MaskBrushPlugin: Redoing mask stroke', strokeData);
+ if (strokeData.type === 'add') {
+ this.redoLastStroke(strokeData.maskName, strokeData);
+ }
+ }
+
+ undoLastStroke(maskName) {
+ const history = this.maskStrokeHistory[maskName];
+ if (!history || history.undoStack.length === 0) {
+ console.warn(`No undo actions available for mask "${maskName}".`);
+ return;
+ }
+
+ const lastState = history.undoStack.pop();
+
+ const currentState = this.currentMask.ctx.getImageData(0, 0, this.currentMask.canvasEl.width, this.currentMask.canvasEl.height);
+ history.redoStack.push(currentState);
+
+ this.currentMask.ctx.putImageData(lastState, 0, 0);
+ this.currentMask.fabricImage.dirty = true;
+ this.canvas.renderAll();
+ }
+
+ redoLastStroke(maskName, strokeData) {
+ const history = this.maskStrokeHistory[maskName];
+ if (!history || history.redoStack.length === 0) {
+ console.warn(`No redo actions available for mask "${maskName}".`);
+ return;
+ }
+
+ const redoState = history.redoStack.pop();
+ const currentState = this.currentMask.ctx.getImageData(0, 0, this.currentMask.canvasEl.width, this.currentMask.canvasEl.height);
+ history.undoStack.push(currentState);
+
+ this.currentMask.ctx.putImageData(redoState, 0, 0);
+ this.currentMask.fabricImage.dirty = true;
+ this.canvas.renderAll();
+ }
+
+ mapPointerToImageSpace(pointer) {
+ if (!this.imageObject) {
+ console.error('Image object is not defined.');
+ return { x: 0, y: 0 };
+ }
+
+ const img = this.imageObject;
+ const viewportTransform = this.canvas.viewportTransform;
+ const invViewportTransform = fabric.util.invertTransform(viewportTransform);
+
+ const canvasPoint = new fabric.Point(pointer.x, pointer.y);
+
+ const imagePoint = fabric.util.transformPoint(canvasPoint, invViewportTransform);
+ const relativeX = (imagePoint.x - img.left) / img.scaleX + (this.imageOriginalWidth / 2);
+ const relativeY = (imagePoint.y - img.top) / img.scaleY + (this.imageOriginalHeight / 2);
+
+ return { x: relativeX, y: relativeY };
+ }
+
+ isPointerInsideImage(point) {
+ return (
+ point.x >= 0 &&
+ point.x <= this.imageOriginalWidth &&
+ point.y >= 0 &&
+ point.y <= this.imageOriginalHeight
+ );
+ }
+
+ drawOnMask(point) {
+ if (!this.imageObject) {
+ console.error('Image object is not defined.');
+ return;
+ }
+
+ this.currentMask.ctx.globalAlpha = 1;
+
+ const adjustedBrushSize = this.brushSize / (this.currentZoom * this.imageObject.scaleX);
+
+ this.currentMask.ctx.fillStyle = this.brushColor;
+ this.currentMask.ctx.beginPath();
+ this.currentMask.ctx.arc(point.x, point.y, adjustedBrushSize / 2, 0, Math.PI * 2);
+ this.currentMask.ctx.fill();
+ this.currentMask.fabricImage.dirty = true;
+
+ const strokeData = {
+ type: 'add',
+ maskName: this.currentMask.name,
+ color: this.brushColor,
+ position: { x: point.x, y: point.y },
+ brushSize: adjustedBrushSize
+ };
+ this.canvasManager.emit('mask:stroke:added', strokeData);
+ }
+
+ drawLineOnMask(fromPoint, toPoint) {
+ if (!this.imageObject) {
+ console.error('Image object is not defined.');
+ return;
+ }
+
+ this.currentMask.ctx.globalAlpha = 1;
+
+ const adjustedBrushSize = this.brushSize / (this.currentZoom * this.imageObject.scaleX);
+
+ this.currentMask.ctx.strokeStyle = this.brushColor;
+ this.currentMask.ctx.lineWidth = adjustedBrushSize;
+ this.currentMask.ctx.lineCap = 'round';
+ this.currentMask.ctx.beginPath();
+ this.currentMask.ctx.moveTo(fromPoint.x, fromPoint.y);
+ this.currentMask.ctx.lineTo(toPoint.x, toPoint.y);
+ this.currentMask.ctx.stroke();
+ this.currentMask.fabricImage.dirty = true;
+
+ const strokeData = {
+ type: 'add',
+ maskName: this.currentMask.name,
+ color: this.brushColor,
+ from: { x: fromPoint.x, y: fromPoint.y },
+ to: { x: toPoint.x, y: toPoint.y },
+ brushSize: adjustedBrushSize
+ };
+ this.canvasManager.emit('mask:stroke:added', strokeData);
+ }
+
+ onHandleSave() {
+ const selectedOption = this.saveOptionsSelect.value;
+
+ const option = this.saveOptions.find(opt => opt.value === selectedOption);
+ if (option && option.handler) {
+ option.handler();
+ } else {
+ console.error('Unknown save option selected.');
+ }
+ }
+
+ onHandleSaveFromCanvas(selectedOption) {
+ const option = this.saveOptions.find(opt => opt.value === selectedOption);
+ if (option && option.handler) {
+ option.handler();
+ } else {
+ console.error('Unknown save option selected.');
+ }
+ }
+
+ getExportFunction(optionValue) {
+ return this.saveOptions.find(opt => opt.value === optionValue)?.exportFunction || null;
+ }
+
+ createCombinedAlphaMask() {
+ const alphaCanvas = document.createElement('canvas');
+ alphaCanvas.width = this.imageOriginalWidth;
+ alphaCanvas.height = this.imageOriginalHeight;
+ const alphaCtx = alphaCanvas.getContext('2d');
+
+ alphaCtx.clearRect(0, 0, alphaCanvas.width, alphaCanvas.height);
+ this.masks.forEach(mask => {
+ alphaCtx.drawImage(mask.canvasEl, 0, 0, alphaCanvas.width, alphaCanvas.height);
+ });
+
+ return alphaCanvas;
+ }
+
+ exportMaskAlphaOnImage() {
+ if (!this.imageObject) {
+ alert('No image loaded to save the alpha on.');
+ return null;
+ }
+
+ if (!this.currentMask) {
+ alert('No mask selected to save as alpha.');
+ return null;
+ }
+
+ try {
+ const combinedCanvas = document.createElement('canvas');
+ combinedCanvas.width = this.imageOriginalWidth;
+ combinedCanvas.height = this.imageOriginalHeight;
+ const combinedCtx = combinedCanvas.getContext('2d');
+
+ combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+ const alphaMask = document.createElement('canvas');
+ alphaMask.width = this.imageOriginalWidth;
+ alphaMask.height = this.imageOriginalHeight;
+ const alphaCtx = alphaMask.getContext('2d');
+ alphaCtx.drawImage(this.currentMask.canvasEl, 0, 0, alphaMask.width, alphaMask.height);
+
+ combinedCtx.globalCompositeOperation = 'destination-out';
+ combinedCtx.drawImage(alphaMask, 0, 0, combinedCanvas.width, combinedCanvas.height);
+ combinedCtx.globalCompositeOperation = 'source-over';
+
+ const combinedDataURL = combinedCanvas.toDataURL('image/png');
+ return combinedDataURL;
+
+ } catch (error) {
+ console.error('Error saving single mask alpha on image:', error);
+ alert('An error occurred while saving the single mask alpha on image.');
+ return null;
+ }
+ }
+
+ exportAllMasksAlphaOnImage() {
+ if (!this.imageObject) {
+ alert('No image loaded to save the alphas on.');
+ return null;
+ }
+
+ if (this.masks.length === 0) {
+ alert('No masks available to save as alphas.');
+ return null;
+ }
+
+ try {
+ const dataURLs = this.masks.map(mask => {
+ const combinedCanvas = document.createElement('canvas');
+ combinedCanvas.width = this.imageOriginalWidth;
+ combinedCanvas.height = this.imageOriginalHeight;
+ const combinedCtx = combinedCanvas.getContext('2d');
+
+ combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+ const alphaMask = document.createElement('canvas');
+ alphaMask.width = this.imageOriginalWidth;
+ alphaMask.height = this.imageOriginalHeight;
+ const alphaCtx = alphaMask.getContext('2d');
+ alphaCtx.drawImage(mask.canvasEl, 0, 0, alphaMask.width, alphaMask.height);
+
+ combinedCtx.globalCompositeOperation = 'destination-out';
+ combinedCtx.drawImage(alphaMask, 0, 0, combinedCanvas.width, combinedCanvas.height);
+ combinedCtx.globalCompositeOperation = 'source-over';
+
+ return {
+ dataURL: combinedCanvas.toDataURL('image/png'),
+ filename: `${mask.name}_alpha_on_image.png`
+ };
+ });
+
+ return dataURLs;
+
+ } catch (error) {
+ console.error('Error saving all masks alphas on image:', error);
+ alert('An error occurred while saving all masks alphas on image.');
+ return null;
+ }
+ }
+
+ exportAllMasksCombinedAlphaOnImage() {
+ if (!this.imageObject) {
+ alert('No image loaded to save the combined alpha on.');
+ return null;
+ }
+
+ if (this.masks.length === 0) {
+ alert('No masks available to save as combined alpha.');
+ return null;
+ }
+
+ try {
+ const combinedCanvas = document.createElement('canvas');
+ combinedCanvas.width = this.imageOriginalWidth;
+ combinedCanvas.height = this.imageOriginalHeight;
+ const combinedCtx = combinedCanvas.getContext('2d');
+
+ combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+ const alphaMask = this.createCombinedAlphaMask();
+
+ combinedCtx.globalCompositeOperation = 'destination-out';
+ combinedCtx.drawImage(alphaMask, 0, 0, combinedCanvas.width, combinedCanvas.height);
+ combinedCtx.globalCompositeOperation = 'source-over';
+
+ const combinedDataURL = combinedCanvas.toDataURL('image/png');
+ return combinedDataURL;
+
+ } catch (error) {
+ console.error('Error saving combined masks alpha on image:', error);
+ alert('An error occurred while saving the combined masks alpha on image.');
+ return null;
+ }
+ }
+
+ //Mask
+ exportMask() {
+ if (!this.currentMask) {
+ alert('No mask selected to export.');
+ return null;
+ }
+
+ try {
+ const dataURL = this.currentMask.canvasEl.toDataURL('image/png');
+ return dataURL;
+ } catch (error) {
+ console.error('Error exporting single mask image:', error);
+ alert('An error occurred while exporting the single mask image.');
+ return null;
+ }
+ }
+
+ exportAllMasks() {
+ if (!this.imageObject) {
+ alert('No image loaded to export masks on.');
+ return null;
+ }
+
+ if (this.masks.length === 0) {
+ alert('No masks available to export on image.');
+ return null;
+ }
+
+ const combinedCanvas = document.createElement('canvas');
+ combinedCanvas.width = this.imageOriginalWidth;
+ combinedCanvas.height = this.imageOriginalHeight;
+ const combinedCtx = combinedCanvas.getContext('2d');
+
+ combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+ this.masks.forEach(mask => {
+ combinedCtx.drawImage(mask.canvasEl, 0, 0, combinedCanvas.width, combinedCanvas.height);
+ });
+
+ const combinedDataURL = combinedCanvas.toDataURL('image/png');
+ return combinedDataURL;
+ }
+
+ exportAllMasksCombined() {
+ if (this.masks.length === 0) {
+ alert('No masks available to export.');
+ return null;
+ }
+
+ try {
+ const combinedCanvas = document.createElement('canvas');
+ combinedCanvas.width = this.imageOriginalWidth;
+ combinedCanvas.height = this.imageOriginalHeight;
+ const combinedCtx = combinedCanvas.getContext('2d');
+ this.masks.forEach(mask => {
+ combinedCtx.drawImage(mask.canvasEl, 0, 0, combinedCanvas.width, combinedCanvas.height);
+ });
+
+ const combinedDataURL = combinedCanvas.toDataURL('image/png');
+ return combinedDataURL;
+ } catch (error) {
+ console.error('Error exporting combined masks image:', error);
+ alert('An error occurred while exporting the combined masks image.');
+ return null;
+ }
+ }
+
+ exportMasksCombinedBlackWhite() {
+ if (this.masks.length === 0) {
+ alert('No masks available to export.');
+ return null;
+ }
+
+ const combinedCanvas = document.createElement('canvas');
+ combinedCanvas.width = this.imageOriginalWidth;
+ combinedCanvas.height = this.imageOriginalHeight;
+ const combinedCtx = combinedCanvas.getContext('2d');
+
+ combinedCtx.fillStyle = 'black';
+ combinedCtx.fillRect(0, 0, combinedCanvas.width, combinedCanvas.height);
+
+ this.masks.forEach(mask => {
+ const maskCanvas = document.createElement('canvas');
+ maskCanvas.width = this.imageOriginalWidth;
+ maskCanvas.height = this.imageOriginalHeight;
+ const maskCtx = maskCanvas.getContext('2d');
+
+ maskCtx.drawImage(mask.canvasEl, 0, 0, maskCanvas.width, maskCanvas.height);
+
+ const imageData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
+ const data = imageData.data;
+
+ for (let i = 0; i < data.length; i += 4) {
+ const alpha = data[i + 3];
+ if (alpha > 0) {
+ data[i] = 255;
+ data[i + 1] = 255;
+ data[i + 2] = 255;
+ }
+ }
+
+ maskCtx.putImageData(imageData, 0, 0);
+
+ combinedCtx.drawImage(maskCanvas, 0, 0, combinedCanvas.width, combinedCanvas.height);
+ });
+
+ const combinedDataURL = combinedCanvas.toDataURL('image/png');
+ return combinedDataURL;
+ }
+
+ //Mask on image
+ exportMaskOnImage() {
+ if (!this.imageObject) {
+ alert('No image loaded to export mask on.');
+ return null;
+ }
+
+ if (!this.currentMask) {
+ alert('No mask selected to export on image.');
+ return null;
+ }
+
+ try {
+ const combinedCanvas = document.createElement('canvas');
+ combinedCanvas.width = this.imageOriginalWidth;
+ combinedCanvas.height = this.imageOriginalHeight;
+ const combinedCtx = combinedCanvas.getContext('2d');
+
+ combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+ combinedCtx.drawImage(this.currentMask.canvasEl, 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+ const combinedDataURL = combinedCanvas.toDataURL('image/png');
+ return combinedDataURL;
+ } catch (error) {
+ console.error('Error exporting single mask on image:', error);
+ alert('An error occurred while exporting the single mask on image.');
+ return null;
+ }
+ }
+
+ exportAllMasksOnImage() {
+ if (!this.imageObject) {
+ alert('No image loaded to export masks on.');
+ return null;
+ }
+
+ if (this.masks.length === 0) {
+ alert('No masks available to export on image.');
+ return null;
+ }
+
+ try {
+ const combinedCanvas = document.createElement('canvas');
+ combinedCanvas.width = this.imageOriginalWidth;
+ combinedCanvas.height = this.imageOriginalHeight;
+ const combinedCtx = combinedCanvas.getContext('2d');
+
+ combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+ this.masks.forEach(mask => {
+ combinedCtx.drawImage(mask.canvasEl, 0, 0, combinedCanvas.width, combinedCanvas.height);
+ });
+
+ const combinedDataURL = combinedCanvas.toDataURL('image/png');
+ return combinedDataURL;
+ } catch (error) {
+ console.error('Error exporting all masks on image:', error);
+ alert('An error occurred while exporting all masks on image.');
+ return null;
+ }
+ }
+
+ exportAllMasksCombinedOnImage() {
+ if (!this.imageObject) {
+ alert('No image loaded to export combined masks on.');
+ return null;
+ }
+
+ if (this.masks.length === 0) {
+ alert('No masks available to export combined on image.');
+ return null;
+ }
+
+ try {
+ const combinedCanvas = document.createElement('canvas');
+ combinedCanvas.width = this.imageOriginalWidth;
+ combinedCanvas.height = this.imageOriginalHeight;
+ const combinedCtx = combinedCanvas.getContext('2d');
+
+ combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+ const combinedMaskCanvas = this.createCombinedAlphaMask();
+ combinedCtx.drawImage(combinedMaskCanvas, 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+ const combinedDataURL = combinedCanvas.toDataURL('image/png');
+ return combinedDataURL;
+ } catch (error) {
+ console.error('Error exporting combined masks on image:', error);
+ alert('An error occurred while exporting combined masks on image.');
+ return null;
+ }
+ }
+
+ exportAllMasksCombinedBlackWhiteOnImage() {
+ if (!this.imageObject) {
+ alert('No image loaded to export masks on.');
+ return null;
+ }
+
+ if (this.masks.length === 0) {
+ alert('No masks available to export on image.');
+ return null;
+ }
+
+ const combinedCanvas = document.createElement('canvas');
+ combinedCanvas.width = this.imageOriginalWidth;
+ combinedCanvas.height = this.imageOriginalHeight;
+ const combinedCtx = combinedCanvas.getContext('2d');
+
+ combinedCtx.drawImage(this.imageObject.getElement(), 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+ const tempMasksCanvas = document.createElement('canvas');
+ tempMasksCanvas.width = this.imageOriginalWidth;
+ tempMasksCanvas.height = this.imageOriginalHeight;
+ const tempMasksCtx = tempMasksCanvas.getContext('2d');
+
+ tempMasksCtx.fillStyle = 'black';
+ tempMasksCtx.fillRect(0, 0, tempMasksCanvas.width, tempMasksCanvas.height);
+
+ this.masks.forEach(mask => {
+ const maskCanvas = document.createElement('canvas');
+ maskCanvas.width = this.imageOriginalWidth;
+ maskCanvas.height = this.imageOriginalHeight;
+ const maskCtx = maskCanvas.getContext('2d');
+
+ maskCtx.drawImage(mask.canvasEl, 0, 0, maskCanvas.width, maskCanvas.height);
+
+ const imageData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
+ const data = imageData.data;
+
+ for (let i = 0; i < data.length; i += 4) {
+ const alpha = data[i + 3];
+ if (alpha > 0) {
+ data[i] = 255;
+ data[i + 1] = 255;
+ data[i + 2] = 255;
+ }
+ }
+
+ maskCtx.putImageData(imageData, 0, 0);
+
+ tempMasksCtx.drawImage(maskCanvas, 0, 0, tempMasksCanvas.width, tempMasksCanvas.height);
+ });
+
+ combinedCtx.drawImage(tempMasksCanvas, 0, 0, combinedCanvas.width, combinedCanvas.height);
+
+ const combinedDataURL = combinedCanvas.toDataURL('image/png');
+ return combinedDataURL;
+ }
+
+ saveMaskAlphaOnImage() {
+ const dataURL = this.exportMaskAlphaOnImage();
+ if (dataURL) {
+ this.downloadImage(dataURL, `${this.currentMask.name}_alpha_on_image.png`);
+ }
+ }
+
+ saveAllMasksAlphaOnImage() {
+ const dataURLs = this.exportAllMasksAlphaOnImage();
+ if (dataURLs) {
+ dataURLs.forEach(({ dataURL, filename }) => {
+ this.downloadImage(dataURL, filename);
+ });
+ }
+ }
+
+ saveAllMasksCombinedAlphaOnImage() {
+ const dataURL = this.exportAllMasksCombinedAlphaOnImage();
+ if (dataURL) {
+ this.downloadImage(dataURL, 'combined_masks_alpha_on_image.png');
+ }
+ }
+
+ saveMask() {
+ if (this.currentMask && this.currentMask.canvasEl) {
+ const dataURL = this.exportMask();
+ if (dataURL) {
+ this.downloadImage(dataURL, `${this.currentMask.name}.png`);
+ }
+ } else {
+ alert('No current mask data available to save.');
+ }
+ }
+
+ saveAllMasks() {
+ if (this.masks.length > 0) {
+ this.masks.forEach((mask) => {
+ const dataURL = mask.canvasEl.toDataURL('image/png');
+ this.downloadImage(dataURL, `${mask.name}.png`);
+ });
+ } else {
+ alert('No mask data available to save.');
+ }
+ }
+
+ saveAllMasksCombined() {
+ const combinedDataURL = this.exportAllMasksCombined();
+ if (combinedDataURL) {
+ this.downloadImage(combinedDataURL, 'combined_masks.png');
+ }
+ }
+
+ saveAllMasksCombinedBlackWhite() {
+ const combinedDataURL = this.exportMasksCombinedBlackWhite();
+ if (combinedDataURL) {
+ this.downloadImage(combinedDataURL, 'combined_masks_black_white.png');
+ }
+ }
+
+ saveMaskOnImage() {
+ const dataURL = this.exportMaskOnImage();
+ if (dataURL) {
+ this.downloadImage(dataURL, `${this.currentMask.name}_on_image.png`);
+ }
+ }
+
+ saveAllMasksOnImage() {
+ const dataURL = this.exportAllMasksOnImage();
+ if (dataURL) {
+ this.downloadImage(dataURL, 'all_masks_on_image.png');
+ }
+ }
+
+ saveAllMasksCombinedOnImage() {
+ const dataURL = this.exportAllMasksCombinedOnImage();
+ if (dataURL) {
+ this.downloadImage(dataURL, 'combined_masks_on_image.png');
+ }
+ }
+
+ saveAllMasksCombinedBlackWhiteOnImage() {
+ const combinedDataURL = this.exportAllMasksCombinedBlackWhiteOnImage();
+ if (combinedDataURL) {
+ this.downloadImage(combinedDataURL, 'combined_masks_black_white_on_image.png');
+ }
+ }
+
+ downloadImage(dataUrl, filename) {
+ const link = document.createElement('a');
+ link.href = dataUrl;
+ link.download = filename;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ }
+
+ destroy() {
+ this.detachAdditionalEventListeners();
+
+ this.masks.forEach(mask => {
+ this.canvas.remove(mask.fabricImage);
+ });
+ this.masks = [];
+ this.currentMask = null;
+
+ if (this.imageObject) {
+ this.imageObject.off('modified', this.onImageModified);
+ }
+
+ this.canvasManager.off('undo:mask:stroke', this.onUndoMaskStroke);
+ this.canvasManager.off('redo:mask:stroke', this.onRedoMaskStroke);
+
+ super.destroy();
+ }
+}
diff --git a/web/core/js/common/components/canvas/UndoRedoPlugin.js b/web/core/js/common/components/canvas/UndoRedoPlugin.js
new file mode 100644
index 0000000..5f4f8e6
--- /dev/null
+++ b/web/core/js/common/components/canvas/UndoRedoPlugin.js
@@ -0,0 +1,362 @@
+import { CanvasPlugin } from './CanvasPlugin.js';
+
+export class UndoRedoPlugin extends CanvasPlugin {
+ constructor(options = {}) {
+ super(options.name || 'UndoRedoPlugin');
+
+ this.maxHistory = options.maxHistory || 50;
+
+ this.undoStack = [];
+ this.redoStack = [];
+
+ this.canvasManager = null;
+ this.canvas = null;
+
+ this.undoBtn = null;
+ this.redoBtn = null;
+
+ this.isPerformingUndoRedo = false;
+
+ this.handleObjectAdded = this.handleObjectAdded.bind(this);
+ this.handleObjectRemoved = this.handleObjectRemoved.bind(this);
+ this.handleMaskStrokeAdded = this.handleMaskStrokeAdded.bind(this);
+ this.handleMaskStrokeRemoved = this.handleMaskStrokeRemoved.bind(this);
+ this.onUndo = this.onUndo.bind(this);
+ this.onRedo = this.onRedo.bind(this);
+ this.updateButtons = this.updateButtons.bind(this);
+ this.onKeyDown = this.onKeyDown.bind(this);
+ this.onFocus = this.onFocus.bind(this);
+ this.onBlur = this.onBlur.bind(this);
+ this.onMouseEnter = this.onMouseEnter.bind(this);
+ }
+
+ init(canvasManager) {
+ this.canvasManager = canvasManager;
+ this.canvas = canvasManager.canvas;
+
+ this.makeFocusable();
+
+ this.createUI();
+
+ this.canvas.on('object:added', this.handleObjectAdded);
+ this.canvas.on('object:removed', this.handleObjectRemoved);
+ this.canvasManager.on('mask:stroke:added', this.handleMaskStrokeAdded);
+ this.canvasManager.on('mask:stroke:removed', this.handleMaskStrokeRemoved);
+
+ this.focusableElement.addEventListener('keydown', this.onKeyDown);
+ this.focusableElement.addEventListener('focus', this.onFocus);
+ this.focusableElement.addEventListener('blur', this.onBlur);
+
+ this.focusableElement.addEventListener('mouseenter', this.onMouseEnter);
+
+ this.updateButtons();
+ }
+
+ makeFocusable() {
+ const container = this.canvas.lowerCanvasEl.parentElement;
+ if (!container) {
+ console.error('UndoRedoPlugin: Canvas container not found.');
+ return;
+ }
+
+ container.setAttribute('tabindex', '0');
+ container.style.outline = 'none';
+
+ this.focusableElement = container;
+ }
+
+ handleObjectAdded(e) {
+ if (this.isPerformingUndoRedo) return;
+
+ const obj = e.target;
+ if (this.isBrushStroke(obj)) {
+ // console.log('UndoRedoPlugin: Brush stroke added', obj);
+
+ if (!obj.brushStrokeId) {
+ obj.brushStrokeId = `stroke_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+ obj.set('brushStrokeId', obj.brushStrokeId);
+ }
+ this.undoStack.push(obj.toObject(['type', 'path', 'stroke', 'strokeWidth', 'opacity', 'brushStrokeId']));
+ if (this.undoStack.length > this.maxHistory) {
+ this.undoStack.shift();
+ }
+ this.redoStack = [];
+ this.updateButtons();
+ }
+ }
+
+ handleObjectRemoved(e) {
+ if (this.isPerformingUndoRedo) return;
+
+ const obj = e.target;
+ if (this.isBrushStroke(obj)) {
+ // console.log('UndoRedoPlugin: Brush stroke removed', obj);
+ this.redoStack.push(obj.toObject(['type', 'path', 'stroke', 'strokeWidth', 'opacity', 'brushStrokeId']));
+ if (this.redoStack.length > this.maxHistory) {
+ this.redoStack.shift();
+ }
+ this.updateButtons();
+ }
+ }
+
+ isBrushStroke(obj) {
+ const isPath = obj && obj.type === 'path';
+ // console.log(`UndoRedoPlugin: isBrushStroke check for object type '${obj.type}': ${isPath}`);
+ return isPath;
+ }
+
+ handleMaskStrokeAdded(strokeData) {
+ // console.log('UndoRedoPlugin: Mask stroke added', strokeData);
+ this.undoStack.push({
+ type: 'mask_add',
+ maskName: strokeData.maskName,
+ strokeData: strokeData
+ });
+ if (this.undoStack.length > this.maxHistory) {
+ this.undoStack.shift();
+ }
+ this.redoStack = [];
+ this.updateButtons();
+ }
+
+ handleMaskStrokeRemoved(strokeData) {
+ // console.log('UndoRedoPlugin: Mask stroke removed', strokeData);
+ this.redoStack.push({
+ type: 'mask_remove',
+ maskName: strokeData.maskName,
+ strokeData: strokeData
+ });
+ if (this.redoStack.length > this.maxHistory) {
+ this.redoStack.shift();
+ }
+ this.updateButtons();
+ }
+
+ createUI() {
+ if (!document.querySelector('style[data-plugin="undo-redo"]')) {
+ const styleSheet = document.createElement('style');
+ styleSheet.setAttribute('data-plugin', 'undo-redo');
+ styleSheet.textContent = `
+ .ur-container * {
+ box-sizing: border-box;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ }
+
+ .ur-container {
+ display: inline-flex;
+ gap: 0.5rem;
+ padding: 0.5rem;
+ /* background: var(--color-background); */
+ /* border: 1px dashed var(--color-border); */
+ }
+
+ .ur-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.5rem;
+ background: var(--color-button-primary);
+ border: none;
+ cursor: pointer;
+ transition: all 0.2s;
+ color: var(--color-primary-text);
+ height: 36px;
+ min-width: 36px;
+ }
+
+ .ur-button:hover {
+ background: var(--color-button-primary-hover);
+ }
+
+ .ur-button svg {
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+
+ .ur-button:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ .ur-button:disabled:hover {
+ background: var(--color-button-primary);
+ }
+ `;
+ document.head.appendChild(styleSheet);
+ }
+
+ const container = document.createElement('div');
+ container.className = 'ur-container';
+
+ this.undoBtn = document.createElement('button');
+ this.undoBtn.className = 'ur-button';
+ this.undoBtn.innerHTML = `
+
+ `;
+ this.undoBtn.title = 'Undo (Ctrl+Z)';
+ this.undoBtn.disabled = true;
+ this.undoBtn.addEventListener('click', this.onUndo);
+
+ this.redoBtn = document.createElement('button');
+ this.redoBtn.className = 'ur-button';
+ this.redoBtn.innerHTML = `
+
+ `;
+ this.redoBtn.title = 'Redo (Ctrl+Y)';
+ this.redoBtn.disabled = true;
+ this.redoBtn.addEventListener('click', this.onRedo);
+
+ container.appendChild(this.undoBtn);
+ container.appendChild(this.redoBtn);
+
+ const pluginUIContainer = document.getElementById('pluginUIContainer');
+ if (pluginUIContainer) {
+ pluginUIContainer.appendChild(container);
+ } else {
+ console.error('UndoRedoPlugin: #pluginUIContainer not found in the DOM.');
+ }
+ }
+
+ onUndo() {
+ // console.log('UndoRedoPlugin: Undo.');
+
+ if (this.undoStack.length === 0) {
+ console.log('UndoRedoPlugin: Undo stack is empty.');
+ return;
+ }
+
+ const lastAction = this.undoStack.pop();
+ // console.log('UndoRedoPlugin: Performing Undo', lastAction);
+
+ this.isPerformingUndoRedo = true;
+
+ if (lastAction.type === 'mask_add') {
+ this.canvasManager.emit('undo:mask:stroke', lastAction.strokeData);
+ this.redoStack.push(lastAction);
+ } else if (lastAction.type === 'mask_remove') {
+ this.canvasManager.emit('redo:mask:stroke', lastAction.strokeData);
+ this.redoStack.push(lastAction);
+ } else {
+ const brushStrokeId = lastAction.brushStrokeId;
+ const targetObj = this.canvas.getObjects('path').find(obj => obj.brushStrokeId === brushStrokeId);
+ if (targetObj) {
+ this.canvas.remove(targetObj);
+ this.redoStack.push(lastAction);
+ // console.log('UndoRedoPlugin: Brush stroke removed for Undo');
+ } else {
+ console.warn('UndoRedoPlugin: Could not find the brush stroke object to undo.');
+ }
+ }
+
+ this.isPerformingUndoRedo = false;
+
+ this.updateButtons();
+ }
+
+ onRedo() {
+ // console.log('UndoRedoPlugin: Redo.');
+
+ if (this.redoStack.length === 0) {
+ // console.log('UndoRedoPlugin: Redo stack is empty.');
+ return;
+ }
+
+ const lastUndone = this.redoStack.pop();
+ // console.log('UndoRedoPlugin: Performing Redo', lastUndone);
+
+ this.isPerformingUndoRedo = true;
+
+ if (lastUndone.type === 'mask_add') {
+ this.canvasManager.emit('redo:mask:stroke', lastUndone.strokeData);
+ this.undoStack.push(lastUndone);
+ } else if (lastUndone.type === 'mask_remove') {
+ this.canvasManager.emit('undo:mask:stroke', lastUndone.strokeData);
+ this.undoStack.push(lastUndone);
+ } else {
+ const path = new fabric.Path(lastUndone.path, {
+ stroke: lastUndone.stroke,
+ strokeWidth: lastUndone.strokeWidth,
+ fill: null,
+ selectable: false,
+ evented: false,
+ hasControls: false,
+ hasBorders: false,
+ lockMovementX: true,
+ lockMovementY: true,
+ opacity: lastUndone.opacity,
+ brushStrokeId: lastUndone.brushStrokeId
+ });
+ this.canvas.add(path);
+ this.undoStack.push(lastUndone);
+ // console.log('UndoRedoPlugin: Brush stroke re-added for Redo');
+ }
+
+ this.isPerformingUndoRedo = false;
+
+ this.updateButtons();
+ }
+
+ updateButtons() {
+ this.undoBtn.disabled = this.undoStack.length === 0;
+ this.redoBtn.disabled = this.redoStack.length === 0;
+ // console.log(`UndoRedoPlugin: Update Buttons - Undo: ${!this.undoBtn.disabled}, Redo: ${!this.redoBtn.disabled}`);
+ }
+
+ onKeyDown(e) {
+ if (this.isFocused) {
+ if (e.ctrlKey && (e.key === 'z' || e.key === 'Z')) {
+ e.preventDefault();
+ this.onUndo();
+ }
+ if (e.ctrlKey && (e.key === 'y' || e.key === 'Y')) {
+ e.preventDefault();
+ this.onRedo();
+ }
+ }
+ }
+
+ onFocus() {
+ this.isFocused = true;
+ // console.log('UndoRedoPlugin: Canvas focused.');
+ }
+
+ onBlur() {
+ this.isFocused = false;
+ // console.log('UndoRedoPlugin: Canvas lost focus.');
+ }
+
+ onMouseEnter() {
+ this.focusableElement.focus();
+ // console.log('UndoRedoPlugin: Canvas focused via mouse enter.');
+ }
+
+ destroy() {
+ this.canvas.off('object:added', this.handleObjectAdded);
+ this.canvas.off('object:removed', this.handleObjectRemoved);
+ this.canvasManager.off('mask:stroke:added', this.handleMaskStrokeAdded);
+ this.canvasManager.off('mask:stroke:removed', this.handleMaskStrokeRemoved);
+ if (this.focusableElement) {
+ this.focusableElement.removeEventListener('keydown', this.onKeyDown);
+ this.focusableElement.removeEventListener('focus', this.onFocus);
+ this.focusableElement.removeEventListener('blur', this.onBlur);
+ this.focusableElement.removeEventListener('mouseenter', this.onMouseEnter);
+ }
+
+ const container = document.querySelector('.ur-container');
+ if (container && this.undoBtn && this.redoBtn) {
+ container.removeChild(this.undoBtn);
+ container.removeChild(this.redoBtn);
+ }
+
+ this.undoStack = [];
+ this.redoStack = [];
+
+ super.destroy();
+ }
+}
diff --git a/web/core/js/common/components/canvas/fabric.5.2.4.min.js b/web/core/js/common/components/canvas/fabric.5.2.4.min.js
new file mode 100644
index 0000000..d28da51
--- /dev/null
+++ b/web/core/js/common/components/canvas/fabric.5.2.4.min.js
@@ -0,0 +1 @@
+var jsdom,virtualWindow,fabric=fabric||{version:"5.2.4"};function resizeCanvasIfNeeded(t){var e=t.targetCanvas,i=e.width,r=e.height,n=t.destinationWidth,t=t.destinationHeight;i===n&&r===t||(e.width=n,e.height=t)}function copyGLTo2DDrawImage(t,e){var t=t.canvas,e=e.targetCanvas,i=e.getContext("2d"),r=(i.translate(0,e.height),i.scale(1,-1),t.height-e.height);i.drawImage(t,0,r,e.width,e.height,0,0,e.width,e.height)}function copyGLTo2DPutImageData(t,e){var i=e.targetCanvas.getContext("2d"),r=e.destinationWidth,e=e.destinationHeight,n=r*e*4,s=new Uint8Array(this.imageBuffer,0,n),n=new Uint8ClampedArray(this.imageBuffer,0,n),t=(t.readPixels(0,0,r,e,t.RGBA,t.UNSIGNED_BYTE,s),new ImageData(n,r,e));i.putImageData(t,0,0)}"undefined"!=typeof exports?exports.fabric=fabric:"function"==typeof define&&define.amd&&define([],function(){return fabric}),"undefined"!=typeof document&&"undefined"!=typeof window?(document instanceof("undefined"!=typeof HTMLDocument?HTMLDocument:Document)?fabric.document=document:fabric.document=document.implementation.createHTMLDocument(""),fabric.window=window):(jsdom=require("jsdom"),virtualWindow=new jsdom.JSDOM(decodeURIComponent("%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E"),{features:{FetchExternalResources:["img"]},resources:"usable"}).window,fabric.document=virtualWindow.document,fabric.jsdomImplForWrapper=require("jsdom/lib/jsdom/living/generated/utils").implForWrapper,fabric.nodeCanvas=require("jsdom/lib/jsdom/utils").Canvas,fabric.window=virtualWindow,DOMParser=fabric.window.DOMParser),fabric.isTouchSupported="ontouchstart"in fabric.window||"ontouchstart"in fabric.document||fabric.window&&fabric.window.navigator&&0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+