Split node into two One for transmitting to editor one for receiving from editor. Added the ability to close images,

web/main.js

@@ -64,11 +64,17 @@ app.registerExtension({
     if (title==="Edit In Another Tab") {
       initEditorNode(node) 
     }
+    else if (title==="Send to Editor Tab") {
+      initTransmitNode(node) 
+    }
+
+
   }
 });
 
 
 
+
 function initEditorNode(node)
 {
   node.collected_images = [];
@@ -81,15 +87,31 @@ function initEditorNode(node)
   
   node.maskWidget.onTopOf = node.canvasWidget;
 
+  /*
   node.onExecuted = (output)=> {
     if (output?.collected_images && editor.channel) {
       editor.channel.port1.postMessage( {images:output.collected_images})
-    }
-      
+    }      
   }
+  */
   return;
 }
 
+function initTransmitNode(node)
+{
+  node.collected_images = [];
+
+  node.onExecuted = (output)=> {
+    if (output?.collected_images && editor.channel) {
+      editor.channel.port1.postMessage( {images:output.collected_images})
+    }      
+  }
+  
+  return;
+}
+
+
+
 function openOrFocusEditor() {
   if (!editor.window || editor.window.closed) {
       if (getSignal('clientPage')) {

web/page/bspaint.js

@@ -47,8 +47,9 @@ var activePic;
 
 function setActivePic(newValue) {
   activePic=newValue;
-  activePic.bringToFront();
   updateLayerList()
+  if (!activePic) return;
+  activePic.bringToFront();
 
 }
 
@@ -71,6 +72,15 @@ function setExportPic(pic) {
   transmitMask(pic.mask.canvas);
 }
 
+function closePic(pic) {
+
+  pic.element.parentElement.removeChild(pic.element);
+  if (pic === activePic) {
+    const newActive = document.querySelector("#workspace .pic");
+    setActivePic(newActive.pic);
+  }
+}
+
 var lastUsedMaskColor = "#402040";
 
 class Layer {
@@ -121,13 +131,18 @@ function createDrawArea(canvas = blankCanvas()) {
   const ctx=canvas.getContext("2d");
   const eventOverlay = document.createElement("div");
   const sidebar = document.createElement("div");
+  const closeButton = document.createElement("div");
+
   sidebar.className = "sidebutton";
+  closeButton.className = "closebutton";
+
   element.className="pic";
   eventOverlay.className="eventoverlay fillparent";
 
   element.appendChild(sidebar);
   element.appendChild(canvas);
   element.appendChild(eventOverlay);
+  element.appendChild(closeButton);
   canvas.ctx=ctx;
   
   const activeOperationCanvas = document.createElement("canvas");
@@ -272,6 +287,7 @@ function createDrawArea(canvas = blankCanvas()) {
   }
   eventOverlay.pic = result;
   sidebar.addEventListener("mousedown",_=>  setExportPic(result))
+  closeButton.addEventListener("click",_=>  closePic(result))
 
   result.setTransform();
   setActivePic(result)
@@ -361,6 +377,7 @@ function addNewLayer(image) {
     console.log("new layer", layer)
     console.log(layer.canvas.width, layer.canvas.height)
     pic.layers.push(layer);
+    pic.activeLayer=layer;
     updateLayerList();
     pic.updateVisualRepresentation();
   }
@@ -683,7 +700,7 @@ function poulateLayerControl() {
   const content = $(`
     <div class="layer-attributes">
       <div class="imageLayer">      
-      <select class="composite-mode">
+      <select name="composite-node" class="composite-mode">
         <option value="source-over">Color</option>
         <option value="lighter">Lighter</option>
         <option value="multiply">Multiply</option>
@@ -780,10 +797,12 @@ function updateLayerList() {
 
   const layer_control=document.querySelector("#layer_control") 
   const layer_list =layer_control.querySelector(".layer_list") 
-  const newControls = activePic.layers.map(makeLayerWidget);
-
   while(layer_list.firstChild) layer_list.removeChild(layer_list.firstChild)
 
+  if (!activePic) return;
+  
+  const newControls = activePic.layers.map(makeLayerWidget);
+
   newControls.reverse().forEach(element=>layer_list.appendChild(element))  
 
   $(".layer-attributes").toggleClass("mask", activePic.activeLayer.mask)

web/page/main.js

@@ -146,7 +146,10 @@ window.addEventListener('message', (event) => {
       portToMain.onmessage = (messageEvent) => {
         console.log(messageEvent)
         if (messageEvent.data instanceof Object) {
-          loadImagefromURL(messageEvent.data.images[0]);
+            const images=messageEvent.data.images[0];
+            if (images?.length > 0) {
+                loadImagefromURL(messageEvent.data.images[0]);
+            }
         } else console.log('Message received from main page:', messageEvent.data);
      };
 }

web/page/style.css

@@ -6,7 +6,7 @@ body {
   --left-panel-width : 80px;
   --right-panel-width : 210px;
   background:#f8fcff;
-
+  --label : "image";
 }
 canvas {
   display: block;
@@ -114,6 +114,29 @@ canvas {
   transform: translate(var(--translateX),var(--translateY))  scale(var(--scalefactor) )
 }
 
+.pic .closebutton {
+  position: absolute;
+  top: -20px;
+  left: 3px;
+  width: 16px;
+  height: 16px;
+  background: #8008;
+  border-radius: 16px;
+  box-sizing: border-box;
+  border: 1px solid black;
+  cursor: default;
+}
+
+.pic .closebutton:hover {
+  background: #f33f;
+}
+
+.pic .closebutton:active {
+  background: #f00f;
+  border: 3px solid black;
+
+}
+
 input[type="color"] {
   width:48px;
   height:32px;
@@ -155,7 +178,7 @@ input[type="color"] {
 }
 
 .pic>.eventoverlay::before {
-  content: "label";
+  content: var(--label);
   position: absolute;
   height: 19px;
   display: inline-block;
@@ -163,7 +186,7 @@ input[type="color"] {
   transform-origin: left;
   background-color: palegoldenrod;
   border-radius: 0 11px 0 0;
-  padding-left: 8px;
+  padding-left: 32px;
   padding-right: 17px;
   box-shadow: 0px 0px 0px 2px;
   font-family: sans-serif;