From 347acf6b8db375eed4f434b1ae93ae1277727ca6 Mon Sep 17 00:00:00 2001 From: chflame163 Date: Wed, 21 Feb 2024 20:04:17 +0800 Subject: [PATCH] fix bug of web extensions --- __init__.py | 6 + js/{comfy_shared.js => dz_comfy_shared.js} | 4 +- js/{debug.js => dz_debug.js} | 8 +- js/{parse-css.js => dz_parse-css.js} | 724 ++++++++++----------- js/{mtb_widgets.js => dz_widgets.js} | 62 +- 5 files changed, 405 insertions(+), 399 deletions(-) rename js/{comfy_shared.js => dz_comfy_shared.js} (99%) rename js/{debug.js => dz_debug.js} (95%) rename js/{parse-css.js => dz_parse-css.js} (96%) rename js/{mtb_widgets.js => dz_widgets.js} (96%) diff --git a/__init__.py b/__init__.py index 8a24c56..70248bb 100644 --- a/__init__.py +++ b/__init__.py @@ -13,10 +13,16 @@ python = sys.executable extentions_folder = os.path.join(os.path.dirname(os.path.realpath(__main__.__file__)), "web" + os.sep + "extensions" + os.sep + "dzNodes") javascript_folder = os.path.join(os.path.dirname(os.path.realpath(__file__)), "js") +outdate_file_list = ['comfy_shared.js', 'debug.js', 'mtb_widgets.js', 'parse-css.js'] if not os.path.exists(extentions_folder): print('# 😺dzNodes: Making the "web\extensions\dzNodes" folder') os.mkdir(extentions_folder) +else: + for i in outdate_file_list: + outdate_file = os.path.join(extentions_folder, i) + if os.path.exists(outdate_file): + os.remove(outdate_file) result = filecmp.dircmp(javascript_folder, extentions_folder) diff --git a/js/comfy_shared.js b/js/dz_comfy_shared.js similarity index 99% rename from js/comfy_shared.js rename to js/dz_comfy_shared.js index c96fbdd..38bf6b4 100644 --- a/js/comfy_shared.js +++ b/js/dz_comfy_shared.js @@ -1,6 +1,6 @@ /** * File: comfy_shared.js - * Project: comfy_mtb + * Project: comfy_dz * Author: Mel Massadian * * Copyright (c) 2023 Mel Massadian @@ -10,7 +10,7 @@ import { app } from '../../scripts/app.js' export const log = (...args) => { - if (window.MTB?.DEBUG) { + if (window.DZ?.DEBUG) { console.debug(...args) } } diff --git a/js/debug.js b/js/dz_debug.js similarity index 95% rename from js/debug.js rename to js/dz_debug.js index 0f144c7..33d1b58 100644 --- a/js/debug.js +++ b/js/dz_debug.js @@ -1,6 +1,6 @@ /** * File: debug.js - * Project: comfy_mtb + * Project: comfy_dz * Author: Mel Massadian * * Copyright (c) 2023 Mel Massadian @@ -11,7 +11,7 @@ import { app } from '../../scripts/app.js' import * as shared from './comfy_shared.js' import { log } from './comfy_shared.js' -import { MtbWidgets } from './mtb_widgets.js' +import { MtbWidgets } from './dz_widgets.js' // TODO: respect inputs order... @@ -24,9 +24,9 @@ function escapeHtml(unsafe) { .replace(/'/g, ''') } app.registerExtension({ - name: 'mtb.Debug', + name: 'dz.Debug', async beforeRegisterNodeDef(nodeType, nodeData, app) { - if (nodeData.name === 'Debug (mtb)') { + if (nodeData.name === 'Debug (dz)') { const onConnectionsChange = nodeType.prototype.onConnectionsChange nodeType.prototype.onConnectionsChange = function ( type, diff --git a/js/parse-css.js b/js/dz_parse-css.js similarity index 96% rename from js/parse-css.js rename to js/dz_parse-css.js index 1ae53b0..b77811f 100644 --- a/js/parse-css.js +++ b/js/dz_parse-css.js @@ -1,362 +1,362 @@ - -// #region patterns -const float = '-?\\d*(?:\\.\\d+)'; -export const number = `(${float}?)`; -export const percentage = `(${float}?%)`; -export const numberOrPercentage = `(${float}?%?)`; -const clamp = (num, min, max) => Math.min(Math.max(min, num), max); - -const hexCharacters = 'a-f\\d'; -const match3or4Hex = `#?[${hexCharacters}]{3}[${hexCharacters}]?`; -const match6or8Hex = `#?[${hexCharacters}]{6}([${hexCharacters}]{2})?`; -const nonHexChars = new RegExp(`[^#${hexCharacters}]`, 'gi'); -const validHexSize = new RegExp(`^${match3or4Hex}$|^${match6or8Hex}$`, 'i'); - - -export const hex_pattern = new RegExp(/^#([a-f0-9]{3,4}|[a-f0-9]{4}(?:[a-f0-9]{2}){1,2})\b$/, "i"); - -export const hsl3_pattern = new RegExp(`^ - hsla?\\( - \\s*(-?\\d*(?:\\.\\d+)?(?:deg|rad|turn)?)\\s*, - \\s*${percentage}\\s*, - \\s*${percentage}\\s* - (?:,\\s*${numberOrPercentage}\\s*)? - \\) - $ -`.replace(/\n|\s/g, '')) - -export const hsl4_pattern = new RegExp(`^ - hsla?\\( - \\s*(-?\\d*(?:\\.\\d+)?(?:deg|rad|turn)?)\\s* - \\s+${percentage} - \\s+${percentage} - \\s*(?:\\s*\\/\\s*${numberOrPercentage}\\s*)? - \\) - $ -`.replace(/\n|\s/g, '')) - -export const rgb3_pattern = new RegExp(`^ - rgba?\\( - \\s*${number}\\s*, - \\s*${number}\\s*, - \\s*${number}\\s* - (?:,\\s*${numberOrPercentage}\\s*)? - \\) - $ -`.replace(/\n|\s/g, '')) - -export const rgb4_pattern = new RegExp(`^ - rgba?\\( - \\s*${number} - \\s+${number} - \\s+${number} - \\s*(?:\\s*\\/\\s*${numberOrPercentage}\\s*)? - \\) -$ -`.replace(/\n|\s/g, '')); - -export const transparent_pattern = new RegExp(/^transparent$/, 'i'); -// #endregion - - -// #region utils - - -/* 500 => 255, -10 => 0, 128 => 128 */ -const parseRGB = (num) => { - let n = num; - if (typeof n !== 'number') { - n = n.endsWith('%') ? (parseFloat(n) * 255) / 100 : parseFloat(n); - } - return clamp(Math.round(n), 0, 255); -}; - -/* 200 => 100, -100 => 0, 50 => 50 */ -const parsePercentage = (percentage) => clamp(parseFloat(percentage), 0, 100); - -/* '50%' => 5.0, 200 => 1, -10 => 0 */ -function parseAlpha(alpha) { - let a = alpha; - if (typeof a !== 'number') { - a = a.endsWith('%') ? parseFloat(a) / 100 : parseFloat(a); - } - return clamp(a, 0, 1); -} - -export function getHEX(hex) { - const [r, g, b, a] = hex2Rgb(hex, { format: 'array' }); - return getRGB([null, ...[r, g, b, a]]); -} - -export function getHSL([, h, s, l, a = 1]) { - let hh = h; - if (hh.endsWith('turn')) { - hh = (parseFloat(hh) * 360) / 1; - } else if (hh.endsWith('rad')) { - hh = Math.round((parseFloat(hh) * 180) / Math.PI); - } else { - hh = parseFloat(hh); - } - return { - type: 'hsl', - values: [hh, parsePercentage(s), parsePercentage(l)], - alpha: parseAlpha(a === null ? 1 : a) - }; -} - -export function getRGB([, r, g, b, a = 1]) { - return { - type: 'rgb', - values: [r, g, b].map(parseRGB), - alpha: parseAlpha(a === null ? 1 : a) - }; -} -export function hex2Rgb(hex, options = {}) { - if (typeof hex !== 'string' || nonHexChars.test(hex) || !validHexSize.test(hex)) { - throw new TypeError('Expected a valid hex string'); - } - - hex = hex.replace(/^#/, ''); - let alphaFromHex = 1; - - if (hex.length === 8) { - alphaFromHex = Number.parseInt(hex.slice(6, 8), 16) / 255; - hex = hex.slice(0, 6); - } - - if (hex.length === 4) { - alphaFromHex = Number.parseInt(hex.slice(3, 4).repeat(2), 16) / 255; - hex = hex.slice(0, 3); - } - - if (hex.length === 3) { - hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; - } - - const number = Number.parseInt(hex, 16); - const red = number >> 16; - const green = (number >> 8) & 255; - const blue = number & 255; - const alpha = typeof options.alpha === 'number' ? options.alpha : alphaFromHex; - - if (options.format === 'array') { - return [red, green, blue, alpha]; - } - - if (options.format === 'css') { - const alphaString = alpha === 1 ? '' : ` / ${Number((alpha * 100).toFixed(2))}%`; - return `rgb(${red} ${green} ${blue}${alphaString})`; - } - - return {red, green, blue, alpha}; -} -// #endregion - - -// #region colorNames -export const colorName = { - aliceblue: [240, 248, 255], - antiquewhite: [250, 235, 215], - aqua: [0, 255, 255], - aquamarine: [127, 255, 212], - azure: [240, 255, 255], - beige: [245, 245, 220], - bisque: [255, 228, 196], - black: [0, 0, 0], - blanchedalmond: [255, 235, 205], - blue: [0, 0, 255], - blueviolet: [138, 43, 226], - brown: [165, 42, 42], - burlywood: [222, 184, 135], - cadetblue: [95, 158, 160], - chartreuse: [127, 255, 0], - chocolate: [210, 105, 30], - coral: [255, 127, 80], - cornflowerblue: [100, 149, 237], - cornsilk: [255, 248, 220], - crimson: [220, 20, 60], - cyan: [0, 255, 255], - darkblue: [0, 0, 139], - darkcyan: [0, 139, 139], - darkgoldenrod: [184, 134, 11], - darkgray: [169, 169, 169], - darkgreen: [0, 100, 0], - darkgrey: [169, 169, 169], - darkkhaki: [189, 183, 107], - darkmagenta: [139, 0, 139], - darkolivegreen: [85, 107, 47], - darkorange: [255, 140, 0], - darkorchid: [153, 50, 204], - darkred: [139, 0, 0], - darksalmon: [233, 150, 122], - darkseagreen: [143, 188, 143], - darkslateblue: [72, 61, 139], - darkslategray: [47, 79, 79], - darkslategrey: [47, 79, 79], - darkturquoise: [0, 206, 209], - darkviolet: [148, 0, 211], - deeppink: [255, 20, 147], - deepskyblue: [0, 191, 255], - dimgray: [105, 105, 105], - dimgrey: [105, 105, 105], - dodgerblue: [30, 144, 255], - firebrick: [178, 34, 34], - floralwhite: [255, 250, 240], - forestgreen: [34, 139, 34], - fuchsia: [255, 0, 255], - gainsboro: [220, 220, 220], - ghostwhite: [248, 248, 255], - gold: [255, 215, 0], - goldenrod: [218, 165, 32], - gray: [128, 128, 128], - green: [0, 128, 0], - greenyellow: [173, 255, 47], - grey: [128, 128, 128], - honeydew: [240, 255, 240], - hotpink: [255, 105, 180], - indianred: [205, 92, 92], - indigo: [75, 0, 130], - ivory: [255, 255, 240], - khaki: [240, 230, 140], - lavender: [230, 230, 250], - lavenderblush: [255, 240, 245], - lawngreen: [124, 252, 0], - lemonchiffon: [255, 250, 205], - lightblue: [173, 216, 230], - lightcoral: [240, 128, 128], - lightcyan: [224, 255, 255], - lightgoldenrodyellow: [250, 250, 210], - lightgray: [211, 211, 211], - lightgreen: [144, 238, 144], - lightgrey: [211, 211, 211], - lightpink: [255, 182, 193], - lightsalmon: [255, 160, 122], - lightseagreen: [32, 178, 170], - lightskyblue: [135, 206, 250], - lightslategray: [119, 136, 153], - lightslategrey: [119, 136, 153], - lightsteelblue: [176, 196, 222], - lightyellow: [255, 255, 224], - lime: [0, 255, 0], - limegreen: [50, 205, 50], - linen: [250, 240, 230], - magenta: [255, 0, 255], - maroon: [128, 0, 0], - mediumaquamarine: [102, 205, 170], - mediumblue: [0, 0, 205], - mediumorchid: [186, 85, 211], - mediumpurple: [147, 112, 219], - mediumseagreen: [60, 179, 113], - mediumslateblue: [123, 104, 238], - mediumspringgreen: [0, 250, 154], - mediumturquoise: [72, 209, 204], - mediumvioletred: [199, 21, 133], - midnightblue: [25, 25, 112], - mintcream: [245, 255, 250], - mistyrose: [255, 228, 225], - moccasin: [255, 228, 181], - navajowhite: [255, 222, 173], - navy: [0, 0, 128], - oldlace: [253, 245, 230], - olive: [128, 128, 0], - olivedrab: [107, 142, 35], - orange: [255, 165, 0], - orangered: [255, 69, 0], - orchid: [218, 112, 214], - palegoldenrod: [238, 232, 170], - palegreen: [152, 251, 152], - paleturquoise: [175, 238, 238], - palevioletred: [219, 112, 147], - papayawhip: [255, 239, 213], - peachpuff: [255, 218, 185], - peru: [205, 133, 63], - pink: [255, 192, 203], - plum: [221, 160, 221], - powderblue: [176, 224, 230], - purple: [128, 0, 128], - rebeccapurple: [102, 51, 153], - red: [255, 0, 0], - rosybrown: [188, 143, 143], - royalblue: [65, 105, 225], - saddlebrown: [139, 69, 19], - salmon: [250, 128, 114], - sandybrown: [244, 164, 96], - seagreen: [46, 139, 87], - seashell: [255, 245, 238], - sienna: [160, 82, 45], - silver: [192, 192, 192], - skyblue: [135, 206, 235], - slateblue: [106, 90, 205], - slategray: [112, 128, 144], - slategrey: [112, 128, 144], - snow: [255, 250, 250], - springgreen: [0, 255, 127], - steelblue: [70, 130, 180], - tan: [210, 180, 140], - teal: [0, 128, 128], - thistle: [216, 191, 216], - tomato: [255, 99, 71], - turquoise: [64, 224, 208], - violet: [238, 130, 238], - wheat: [245, 222, 179], - white: [255, 255, 255], - whitesmoke: [245, 245, 245], - yellow: [255, 255, 0], - yellowgreen: [154, 205, 50] -} -// #endregion - - -export const parseCSSColor = (str, debug=false) => { - if (typeof str !== 'string') { - console.error(`parseCSSColor: expected a string found ${typeof str}`,str); - return null; - } - - const hex = hex_pattern.exec(str); - if (hex) { - if (debug){ - console.debug('parseCSSColor: hex', hex); - } - return getHEX(hex[0]); - } - - const hsl = hsl4_pattern.exec(str) || hsl3_pattern.exec(str); - if (hsl) { - if (debug){ - console.debug('parseCSSColor: hsl', hsl); - } - return getHSL(hsl); - } - - const rgb = - rgb4_pattern.exec(str) || - rgb3_pattern.exec(str) - if (rgb) { - if (debug){ - console.debug('parseCSSColor: rgb', rgb); - } - return getRGB(rgb); - } - - if (transparent_pattern.exec(str)) { - if (debug){ - console.debug('parseCSSColor: transparent'); - } - return getRGB([null, 0, 0, 0, 0]); - } - - const cn = colorName[str.toLowerCase()]; - if (cn) { - if (debug){ - console.debug('parseCSSColor: colorName', cn); - } - return getRGB([null, cn[0], cn[1], cn[2], 1]); - } - - console.error('parseCSSColor: unknown color', str); - return null; -}; - -export default parseCSSColor; - + +// #region patterns +const float = '-?\\d*(?:\\.\\d+)'; +export const number = `(${float}?)`; +export const percentage = `(${float}?%)`; +export const numberOrPercentage = `(${float}?%?)`; +const clamp = (num, min, max) => Math.min(Math.max(min, num), max); + +const hexCharacters = 'a-f\\d'; +const match3or4Hex = `#?[${hexCharacters}]{3}[${hexCharacters}]?`; +const match6or8Hex = `#?[${hexCharacters}]{6}([${hexCharacters}]{2})?`; +const nonHexChars = new RegExp(`[^#${hexCharacters}]`, 'gi'); +const validHexSize = new RegExp(`^${match3or4Hex}$|^${match6or8Hex}$`, 'i'); + + +export const hex_pattern = new RegExp(/^#([a-f0-9]{3,4}|[a-f0-9]{4}(?:[a-f0-9]{2}){1,2})\b$/, "i"); + +export const hsl3_pattern = new RegExp(`^ + hsla?\\( + \\s*(-?\\d*(?:\\.\\d+)?(?:deg|rad|turn)?)\\s*, + \\s*${percentage}\\s*, + \\s*${percentage}\\s* + (?:,\\s*${numberOrPercentage}\\s*)? + \\) + $ +`.replace(/\n|\s/g, '')) + +export const hsl4_pattern = new RegExp(`^ + hsla?\\( + \\s*(-?\\d*(?:\\.\\d+)?(?:deg|rad|turn)?)\\s* + \\s+${percentage} + \\s+${percentage} + \\s*(?:\\s*\\/\\s*${numberOrPercentage}\\s*)? + \\) + $ +`.replace(/\n|\s/g, '')) + +export const rgb3_pattern = new RegExp(`^ + rgba?\\( + \\s*${number}\\s*, + \\s*${number}\\s*, + \\s*${number}\\s* + (?:,\\s*${numberOrPercentage}\\s*)? + \\) + $ +`.replace(/\n|\s/g, '')) + +export const rgb4_pattern = new RegExp(`^ + rgba?\\( + \\s*${number} + \\s+${number} + \\s+${number} + \\s*(?:\\s*\\/\\s*${numberOrPercentage}\\s*)? + \\) +$ +`.replace(/\n|\s/g, '')); + +export const transparent_pattern = new RegExp(/^transparent$/, 'i'); +// #endregion + + +// #region utils + + +/* 500 => 255, -10 => 0, 128 => 128 */ +const parseRGB = (num) => { + let n = num; + if (typeof n !== 'number') { + n = n.endsWith('%') ? (parseFloat(n) * 255) / 100 : parseFloat(n); + } + return clamp(Math.round(n), 0, 255); +}; + +/* 200 => 100, -100 => 0, 50 => 50 */ +const parsePercentage = (percentage) => clamp(parseFloat(percentage), 0, 100); + +/* '50%' => 5.0, 200 => 1, -10 => 0 */ +function parseAlpha(alpha) { + let a = alpha; + if (typeof a !== 'number') { + a = a.endsWith('%') ? parseFloat(a) / 100 : parseFloat(a); + } + return clamp(a, 0, 1); +} + +export function getHEX(hex) { + const [r, g, b, a] = hex2Rgb(hex, { format: 'array' }); + return getRGB([null, ...[r, g, b, a]]); +} + +export function getHSL([, h, s, l, a = 1]) { + let hh = h; + if (hh.endsWith('turn')) { + hh = (parseFloat(hh) * 360) / 1; + } else if (hh.endsWith('rad')) { + hh = Math.round((parseFloat(hh) * 180) / Math.PI); + } else { + hh = parseFloat(hh); + } + return { + type: 'hsl', + values: [hh, parsePercentage(s), parsePercentage(l)], + alpha: parseAlpha(a === null ? 1 : a) + }; +} + +export function getRGB([, r, g, b, a = 1]) { + return { + type: 'rgb', + values: [r, g, b].map(parseRGB), + alpha: parseAlpha(a === null ? 1 : a) + }; +} +export function hex2Rgb(hex, options = {}) { + if (typeof hex !== 'string' || nonHexChars.test(hex) || !validHexSize.test(hex)) { + throw new TypeError('Expected a valid hex string'); + } + + hex = hex.replace(/^#/, ''); + let alphaFromHex = 1; + + if (hex.length === 8) { + alphaFromHex = Number.parseInt(hex.slice(6, 8), 16) / 255; + hex = hex.slice(0, 6); + } + + if (hex.length === 4) { + alphaFromHex = Number.parseInt(hex.slice(3, 4).repeat(2), 16) / 255; + hex = hex.slice(0, 3); + } + + if (hex.length === 3) { + hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; + } + + const number = Number.parseInt(hex, 16); + const red = number >> 16; + const green = (number >> 8) & 255; + const blue = number & 255; + const alpha = typeof options.alpha === 'number' ? options.alpha : alphaFromHex; + + if (options.format === 'array') { + return [red, green, blue, alpha]; + } + + if (options.format === 'css') { + const alphaString = alpha === 1 ? '' : ` / ${Number((alpha * 100).toFixed(2))}%`; + return `rgb(${red} ${green} ${blue}${alphaString})`; + } + + return {red, green, blue, alpha}; +} +// #endregion + + +// #region colorNames +export const colorName = { + aliceblue: [240, 248, 255], + antiquewhite: [250, 235, 215], + aqua: [0, 255, 255], + aquamarine: [127, 255, 212], + azure: [240, 255, 255], + beige: [245, 245, 220], + bisque: [255, 228, 196], + black: [0, 0, 0], + blanchedalmond: [255, 235, 205], + blue: [0, 0, 255], + blueviolet: [138, 43, 226], + brown: [165, 42, 42], + burlywood: [222, 184, 135], + cadetblue: [95, 158, 160], + chartreuse: [127, 255, 0], + chocolate: [210, 105, 30], + coral: [255, 127, 80], + cornflowerblue: [100, 149, 237], + cornsilk: [255, 248, 220], + crimson: [220, 20, 60], + cyan: [0, 255, 255], + darkblue: [0, 0, 139], + darkcyan: [0, 139, 139], + darkgoldenrod: [184, 134, 11], + darkgray: [169, 169, 169], + darkgreen: [0, 100, 0], + darkgrey: [169, 169, 169], + darkkhaki: [189, 183, 107], + darkmagenta: [139, 0, 139], + darkolivegreen: [85, 107, 47], + darkorange: [255, 140, 0], + darkorchid: [153, 50, 204], + darkred: [139, 0, 0], + darksalmon: [233, 150, 122], + darkseagreen: [143, 188, 143], + darkslateblue: [72, 61, 139], + darkslategray: [47, 79, 79], + darkslategrey: [47, 79, 79], + darkturquoise: [0, 206, 209], + darkviolet: [148, 0, 211], + deeppink: [255, 20, 147], + deepskyblue: [0, 191, 255], + dimgray: [105, 105, 105], + dimgrey: [105, 105, 105], + dodgerblue: [30, 144, 255], + firebrick: [178, 34, 34], + floralwhite: [255, 250, 240], + forestgreen: [34, 139, 34], + fuchsia: [255, 0, 255], + gainsboro: [220, 220, 220], + ghostwhite: [248, 248, 255], + gold: [255, 215, 0], + goldenrod: [218, 165, 32], + gray: [128, 128, 128], + green: [0, 128, 0], + greenyellow: [173, 255, 47], + grey: [128, 128, 128], + honeydew: [240, 255, 240], + hotpink: [255, 105, 180], + indianred: [205, 92, 92], + indigo: [75, 0, 130], + ivory: [255, 255, 240], + khaki: [240, 230, 140], + lavender: [230, 230, 250], + lavenderblush: [255, 240, 245], + lawngreen: [124, 252, 0], + lemonchiffon: [255, 250, 205], + lightblue: [173, 216, 230], + lightcoral: [240, 128, 128], + lightcyan: [224, 255, 255], + lightgoldenrodyellow: [250, 250, 210], + lightgray: [211, 211, 211], + lightgreen: [144, 238, 144], + lightgrey: [211, 211, 211], + lightpink: [255, 182, 193], + lightsalmon: [255, 160, 122], + lightseagreen: [32, 178, 170], + lightskyblue: [135, 206, 250], + lightslategray: [119, 136, 153], + lightslategrey: [119, 136, 153], + lightsteelblue: [176, 196, 222], + lightyellow: [255, 255, 224], + lime: [0, 255, 0], + limegreen: [50, 205, 50], + linen: [250, 240, 230], + magenta: [255, 0, 255], + maroon: [128, 0, 0], + mediumaquamarine: [102, 205, 170], + mediumblue: [0, 0, 205], + mediumorchid: [186, 85, 211], + mediumpurple: [147, 112, 219], + mediumseagreen: [60, 179, 113], + mediumslateblue: [123, 104, 238], + mediumspringgreen: [0, 250, 154], + mediumturquoise: [72, 209, 204], + mediumvioletred: [199, 21, 133], + midnightblue: [25, 25, 112], + mintcream: [245, 255, 250], + mistyrose: [255, 228, 225], + moccasin: [255, 228, 181], + navajowhite: [255, 222, 173], + navy: [0, 0, 128], + oldlace: [253, 245, 230], + olive: [128, 128, 0], + olivedrab: [107, 142, 35], + orange: [255, 165, 0], + orangered: [255, 69, 0], + orchid: [218, 112, 214], + palegoldenrod: [238, 232, 170], + palegreen: [152, 251, 152], + paleturquoise: [175, 238, 238], + palevioletred: [219, 112, 147], + papayawhip: [255, 239, 213], + peachpuff: [255, 218, 185], + peru: [205, 133, 63], + pink: [255, 192, 203], + plum: [221, 160, 221], + powderblue: [176, 224, 230], + purple: [128, 0, 128], + rebeccapurple: [102, 51, 153], + red: [255, 0, 0], + rosybrown: [188, 143, 143], + royalblue: [65, 105, 225], + saddlebrown: [139, 69, 19], + salmon: [250, 128, 114], + sandybrown: [244, 164, 96], + seagreen: [46, 139, 87], + seashell: [255, 245, 238], + sienna: [160, 82, 45], + silver: [192, 192, 192], + skyblue: [135, 206, 235], + slateblue: [106, 90, 205], + slategray: [112, 128, 144], + slategrey: [112, 128, 144], + snow: [255, 250, 250], + springgreen: [0, 255, 127], + steelblue: [70, 130, 180], + tan: [210, 180, 140], + teal: [0, 128, 128], + thistle: [216, 191, 216], + tomato: [255, 99, 71], + turquoise: [64, 224, 208], + violet: [238, 130, 238], + wheat: [245, 222, 179], + white: [255, 255, 255], + whitesmoke: [245, 245, 245], + yellow: [255, 255, 0], + yellowgreen: [154, 205, 50] +} +// #endregion + + +export const parseCSSColor = (str, debug=false) => { + if (typeof str !== 'string') { + console.error(`parseCSSColor: expected a string found ${typeof str}`,str); + return null; + } + + const hex = hex_pattern.exec(str); + if (hex) { + if (debug){ + console.debug('parseCSSColor: hex', hex); + } + return getHEX(hex[0]); + } + + const hsl = hsl4_pattern.exec(str) || hsl3_pattern.exec(str); + if (hsl) { + if (debug){ + console.debug('parseCSSColor: hsl', hsl); + } + return getHSL(hsl); + } + + const rgb = + rgb4_pattern.exec(str) || + rgb3_pattern.exec(str) + if (rgb) { + if (debug){ + console.debug('parseCSSColor: rgb', rgb); + } + return getRGB(rgb); + } + + if (transparent_pattern.exec(str)) { + if (debug){ + console.debug('parseCSSColor: transparent'); + } + return getRGB([null, 0, 0, 0, 0]); + } + + const cn = colorName[str.toLowerCase()]; + if (cn) { + if (debug){ + console.debug('parseCSSColor: colorName', cn); + } + return getRGB([null, cn[0], cn[1], cn[2], 1]); + } + + console.error('parseCSSColor: unknown color', str); + return null; +}; + +export default parseCSSColor; + diff --git a/js/mtb_widgets.js b/js/dz_widgets.js similarity index 96% rename from js/mtb_widgets.js rename to js/dz_widgets.js index da11de2..f9b1243 100644 --- a/js/mtb_widgets.js +++ b/js/dz_widgets.js @@ -1,6 +1,6 @@ /** - * File: mtb_widgets.js - * Project: comfy_mtb + * File: dz_widgets.js + * Project: comfy_dz * Author: Mel Massadian * * Copyright (c) 2023 Mel Massadian @@ -397,18 +397,18 @@ export const MtbWidgets = { /** * @returns {import("./types/comfy").ComfyExtension} extension */ -const mtb_widgets = { - name: 'mtb.widgets', +const dz_widgets = { + name: 'dz.widgets', init: async () => { - log('Registering mtb.widgets') + log('Registering dz.widgets') try { - const res = await api.fetchApi('/mtb/debug') + const res = await api.fetchApi('/dz/debug') const msg = await res.json() - if (!window.MTB) { - window.MTB = {} + if (!window.DZ) { + window.DZ = {} } - window.MTB.DEBUG = msg.enabled + window.DZ.DEBUG = msg.enabled } catch (e) { console.error('Error:', error) } @@ -416,8 +416,8 @@ const mtb_widgets = { setup: () => { app.ui.settings.addSetting({ - id: 'mtb.Debug.enabled', - name: '[mtb] Enable Debug (py and js)', + id: 'dz.Debug.enabled', + name: '[dz] Enable Debug (py and js)', type: 'boolean', defaultValue: false, @@ -432,12 +432,12 @@ const mtb_widgets = { if (value) { console.log('Enabled DEBUG mode') } - if (!window.MTB) { - window.MTB = {} + if (!window.DZ) { + window.DZ = {} } - window.MTB.DEBUG = value + window.DZ.DEBUG = value await api - .fetchApi('/mtb/debug', { + .fetchApi('/dz/debug', { method: 'POST', body: JSON.stringify({ enabled: value, @@ -563,7 +563,7 @@ const mtb_widgets = { //- Extending Python Nodes switch (nodeData.name) { - case 'Psd Save (mtb)': { + case 'Psd Save (dz)': { const onConnectionsChange = nodeType.prototype.onConnectionsChange nodeType.prototype.onConnectionsChange = function ( type, @@ -580,7 +580,7 @@ const mtb_widgets = { break } //TODO: remove this non sense - case 'Get Batch From History (mtb)': { + case 'Get Batch From History (dz)': { const onNodeCreated = nodeType.prototype.onNodeCreated nodeType.prototype.onNodeCreated = function () { const r = onNodeCreated @@ -605,8 +605,8 @@ const mtb_widgets = { break } - case 'Save Gif (mtb)': - case 'Save Animated Image (mtb)': { + case 'Save Gif (dz)': + case 'Save Animated Image (dz)': { const onExecuted = nodeType.prototype.onExecuted nodeType.prototype.onExecuted = function (message) { const prefix = 'anything_' @@ -662,7 +662,7 @@ const mtb_widgets = { break } - case 'Animation Builder (mtb)': { + case 'Animation Builder (dz)': { const onNodeCreated = nodeType.prototype.onNodeCreated nodeType.prototype.onNodeCreated = function () { const r = onNodeCreated @@ -716,7 +716,7 @@ const mtb_widgets = { const run_button = this.addWidget('button', `Queue`, 'queue', () => { onReset() // this could maybe be a setting or checkbox app.queuePrompt(0, total_frames.value * loop_count.value) - window.MTB?.notify?.( + window.DZ?.notify?.( `Started a queue of ${total_frames.value} frames (for ${ loop_count.value } loop, so ${total_frames.value * loop_count.value})`, @@ -751,7 +751,7 @@ const mtb_widgets = { break } - case 'Text Encore Frames (mtb)': { + case 'Text Encore Frames (dz)': { const onConnectionsChange = nodeType.prototype.onConnectionsChange nodeType.prototype.onConnectionsChange = function ( type, @@ -768,7 +768,7 @@ const mtb_widgets = { } break } - case 'Interpolate Clip Sequential (mtb)': { + case 'Interpolate Clip Sequential (dz)': { const onNodeCreated = nodeType.prototype.onNodeCreated nodeType.prototype.onNodeCreated = function () { const r = onNodeCreated @@ -802,7 +802,7 @@ const mtb_widgets = { } break } - case 'Styles Loader (mtb)': { + case 'Styles Loader (dz)': { const origGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions nodeType.prototype.getExtraMenuOptions = function (_, options) { const r = origGetExtraMenuOptions @@ -811,7 +811,7 @@ const mtb_widgets = { const getStyle = async (node) => { try { - const getStyles = await api.fetchApi('/mtb/actions', { + const getStyles = await api.fetchApi('/dz/actions', { method: 'POST', body: JSON.stringify({ name: 'getStyles', @@ -835,7 +835,7 @@ const mtb_widgets = { const style = await getStyle(this) if (style && style.length >= 1) { if (style[0]) { - window.MTB?.notify?.( + window.DZ?.notify?.( `Extracted positive from ${this.widgets[0].value}` ) const tn = LiteGraph.createNode('Text box') @@ -843,7 +843,7 @@ const mtb_widgets = { tn.title = `${this.widgets[0].value} (Positive)` tn.widgets[0].value = style[0] } else { - window.MTB?.notify?.( + window.DZ?.notify?.( `No positive to extract for ${this.widgets[0].value}` ) } @@ -856,7 +856,7 @@ const mtb_widgets = { const style = await getStyle(this) if (style && style.length >= 2) { if (style[1]) { - window.MTB?.notify?.( + window.DZ?.notify?.( `Extracted negative from ${this.widgets[0].value}` ) const tn = LiteGraph.createNode('Text box') @@ -864,7 +864,7 @@ const mtb_widgets = { tn.title = `${this.widgets[0].value} (Negative)` tn.widgets[0].value = style[1] } else { - window.MTB.notify( + window.DZ.notify( `No negative to extract for ${this.widgets[0].value}` ) } @@ -877,7 +877,7 @@ const mtb_widgets = { break } - case 'Save Tensors (mtb)': { + case 'Save Tensors (dz)': { const onDrawBackground = nodeType.prototype.onDrawBackground nodeType.prototype.onDrawBackground = function (ctx, canvas) { const r = onDrawBackground @@ -905,4 +905,4 @@ const mtb_widgets = { }, } -app.registerExtension(mtb_widgets) +app.registerExtension(dz_widgets)