added DragNUWA image canvas node

Author: komojini

.gitignore

@@ -1,5 +1,6 @@
 .js/*
 json_data/*
+js/test.*
 
 # Byte-compiled / optimized / DLL files
 __pycache__/

__init__.py

@@ -18,6 +18,7 @@
     "ImageGetter": ImageGetter,
     "FlowBuilder": FlowBuilder,
     "CachedGetter": CachedGetter,
+    "DragNUWAImageCanvas": DragNUWAImageCanvas,
 }
 
 NODE_DISPLAY_NAME_MAPPINGS = {
@@ -32,6 +33,7 @@
     "CachedGetter": "CachedGetter",
     "ImageGetter": "ImageGetter",
     "FlowBuilder": END_EMOJI + " FlowBuilder",   
+    "DragNUWAImageCanvas": "DragNUWAImageCanvas",
 }
 
 

js/collor_setting_node.js

@@ -0,0 +1,27 @@
+import { app } from '../../scripts/app.js'
+import { api } from '../../scripts/api.js'
+
+import { log } from './comfy_shared.js'
+
+
+class ColorSettingNode {
+    defaultVisibility = true;
+    serialize_widgets = true;
+    constructor() {
+        if (!this.properties) {
+            this.properties = {};
+        }
+
+        const node = this;
+
+        this.addWidget(
+            "button",
+            "Add Color",
+            "",
+            () => {
+                
+            }
+        )
+    }
+
+}

js/extension_template.js

@@ -0,0 +1,107 @@
+import { ComfyWidgets } from "../../scripts/widgets.js";
+import { app } from "../../scripts/app.js";
+import * as shared from "./comfy_shared.js";
+
+
+class DragNUWAImageCanvas extends LiteGraph.LGraghNode {
+    title = "DragNUWACanvas"
+    category = "komojini/image"
+
+    color = LGraphCanvas.node_colors.yellow.color
+    bgcolor = LGraphCanvas.node_colors.yellow.bgcolor
+    groupcolor = LGraphCanvas.node_colors.yellow.groupcolor
+
+    constructor() {
+        super()
+        this.uuid = shared.makeUUID()
+
+        shared.log(`Constructing DRAGNUWACanvas instance`)
+
+        this.collapsable = true
+        this.isVirtualNode = true
+        this.shape = LiteGraph.BOX_SHAPE
+        this.serialize_widgets = true
+
+        const inner = document.createElement("div")
+        inner.style.margin = "0"
+        inner.style.padding = "0"
+        inner.style.pointerEvents = "none"
+
+        this.calculatedHeight = 0
+
+        this.htmlWidget = this.addDOMWidget("HTML", "html", inner, {
+            setValue: (val) => {
+                this._raw_html = val
+            },
+            getValue: () => this._raw_html,
+            getMinHeight: () => this.calculatedHeight,
+            hideOnZoom: false,
+        })
+
+        this.setupDialog()
+    }
+
+    setupDialog() {
+        this.dialog = new app.ui.dialog.constructor()
+        this.dialog.element.classList.add('comfy-settings')
+
+        const closeButton = this.dialog.element.querySelector('button')
+        closeButton.textContent = 'CANCEL'
+        const saveButton = document.createElement('button')
+        saveButton.textContent = 'SAVE'
+        saveButton.onclick = () => {
+        this.closeEditorDialog(true)
+        }
+        closeButton.onclick = () => {
+        this.closeEditorDialog(false)
+        }
+        closeButton.before(saveButton)
+    }
+
+    openEditorDialog() {
+        const container = document.createElement("div")
+        
+        Object.assign(container.style, {
+            display: 'flex',
+            gap: '10px',
+            flexDirection: 'column',
+          })
+      
+        const editorsContainer = document.createElement('div')
+        Object.assign(editorsContainer.style, {
+        display: 'flex',
+        gap: '10px',
+        flexDirection: 'row',
+        })
+    
+        container.append(editorsContainer)
+    
+        this.dialog.show('')
+        this.dialog.textElement.append(container)
+    }
+
+    onCreate() {}
+    onNodeCreated() {}
+    onRemoved() {}
+    getExtraMenuOptions() {}
+    setMode(mode) {}
+
+}
+
+const komojiniCanvas = {
+    name: "komojini.image",
+    init: async () => {},
+    setup: () => {},
+    async beforeRegisterNodeDef(nodeType, nodeData, app) {},
+
+    registerCustomNodes() {
+
+        LiteGraph.registerNodeType("DragNUWAImageCanvas", DragNUWAImageCanvas)
+        
+        DragNUWAImageCanvas.title_mode = LiteGraph.NO_TITLE
+
+        TestNode.category = "komojini.canvas";
+    },
+}
+
+app.registerExtension(komojiniCanvas)

js/getter_setter_nodes.js

@@ -87,7 +87,7 @@ export class JsSetter {
 					this.inputs[0].type = type;
 					this.inputs[0].name = type;
 
-					if (app.ui.settings.getSettingValue("KJNodes.nodeAutoColor")){
+					if (app.ui.settings.getSettingValue("komojini.NodeAutoColor")){
 						setColorAndBgColor.call(this, type);	
 					}
 				} else {
@@ -257,7 +257,7 @@ export class JsGetter {
 				this.setType(linkType);
 				this.title = "Get_" + setter.widgets[0].value;
 
-				if (app.ui.settings.getSettingValue("KJNodes.nodeAutoColor")){
+				if (app.ui.settings.getSettingValue("komojini.NodeAutoColor")){
 					setColorAndBgColor.call(this, linkType);	
 				}