Add files via upload

2024-01-19 18:36:23 +08:00
parent b4f2843a8b
commit 9b2bb3ca13
3 changed files with 813 additions and 0 deletions
@@ -0,0 +1,342 @@
+/**
+ * File: comfy_shared.js
+ * Project: comfy_mtb
+ * Author: Mel Massadian
+ *
+ * Copyright (c) 2023 Mel Massadian
+ *
+ */
+
+import { app } from '../../scripts/app.js'
+
+export const log = (...args) => {
+  if (window.MTB?.DEBUG) {
+    console.debug(...args)
+  }
+}
+
+//- WIDGET UTILS
+export const CONVERTED_TYPE = 'converted-widget'
+
+export const hasWidgets = (node) => {
+  if (!node.widgets || !node.widgets?.[Symbol.iterator]) {
+    return false
+  }
+  return true
+}
+
+export const cleanupNode = (node) => {
+  if (!hasWidgets(node)) {
+    return
+  }
+
+  for (const w of node.widgets) {
+    if (w.canvas) {
+      w.canvas.remove()
+    }
+    if (w.inputEl) {
+      w.inputEl.remove()
+    }
+    // calls the widget remove callback
+    w.onRemoved?.()
+  }
+}
+
+export function offsetDOMWidget(
+  widget,
+  ctx,
+  node,
+  widgetWidth,
+  widgetY,
+  height
+) {
+  const margin = 10
+  const elRect = ctx.canvas.getBoundingClientRect()
+  const transform = new DOMMatrix()
+    .scaleSelf(
+      elRect.width / ctx.canvas.width,
+      elRect.height / ctx.canvas.height
+    )
+    .multiplySelf(ctx.getTransform())
+    .translateSelf(margin, margin + widgetY)
+
+  const scale = new DOMMatrix().scaleSelf(transform.a, transform.d)
+  Object.assign(widget.inputEl.style, {
+    transformOrigin: '0 0',
+    transform: scale,
+    left: `${transform.a + transform.e}px`,
+    top: `${transform.d + transform.f}px`,
+    width: `${widgetWidth - margin * 2}px`,
+    // height: `${(widget.parent?.inputHeight || 32) - (margin * 2)}px`,
+    height: `${(height || widget.parent?.inputHeight || 32) - margin * 2}px`,
+
+    position: 'absolute',
+    background: !node.color ? '' : node.color,
+    color: !node.color ? '' : 'white',
+    zIndex: 5, //app.graph._nodes.indexOf(node),
+  })
+}
+
+/**
+ * Extracts the type and link type from a widget config object.
+ * @param {*} config
+ * @returns
+ */
+export function getWidgetType(config) {
+  // Special handling for COMBO so we restrict links based on the entries
+  let type = config?.[0]
+  let linkType = type
+  if (type instanceof Array) {
+    type = 'COMBO'
+    linkType = linkType.join(',')
+  }
+  return { type, linkType }
+}
+
+export const dynamic_connection = (
+  node,
+  index,
+  connected,
+  connectionPrefix = 'input_',
+  connectionType = 'PSDLAYER'
+) => {
+  // remove all non connected inputs
+  if (!connected && node.inputs.length > 1) {
+    log(`Removing input ${index} (${node.inputs[index].name})`)
+    if (node.widgets) {
+      const w = node.widgets.find((w) => w.name === node.inputs[index].name)
+      if (w) {
+        w.onRemoved?.()
+        node.widgets.length = node.widgets.length - 1
+      }
+    }
+    node.removeInput(index)
+
+    // make inputs sequential again
+    for (let i = 0; i < node.inputs.length; i++) {
+      node.inputs[i].label = `${connectionPrefix}${i + 1}`
+    }
+  }
+
+  // add an extra input
+  if (node.inputs[node.inputs.length - 1].link != undefined) {
+    log(
+      `Adding input ${node.inputs.length + 1} (${connectionPrefix}${
+        node.inputs.length + 1
+      })`
+    )
+
+    node.addInput(
+      `${connectionPrefix}${node.inputs.length + 1}`,
+      connectionType
+    )
+  }
+}
+
+/**
+ * Appends a callback to the extra menu options of a given node type.
+ * @param {*} nodeType
+ * @param {*} cb
+ */
+export function addMenuHandler(nodeType, cb) {
+  const getOpts = nodeType.prototype.getExtraMenuOptions
+  nodeType.prototype.getExtraMenuOptions = function () {
+    const r = getOpts.apply(this, arguments)
+    cb.apply(this, arguments)
+    return r
+  }
+}
+
+export function hideWidget(node, widget, suffix = '') {
+  widget.origType = widget.type
+  widget.hidden = true
+  widget.origComputeSize = widget.computeSize
+  widget.origSerializeValue = widget.serializeValue
+  widget.computeSize = () => [0, -4] // -4 is due to the gap litegraph adds between widgets automatically
+  widget.type = CONVERTED_TYPE + suffix
+  widget.serializeValue = () => {
+    // Prevent serializing the widget if we have no input linked
+    const { link } = node.inputs.find((i) => i.widget?.name === widget.name)
+    if (link == null) {
+      return undefined
+    }
+    return widget.origSerializeValue
+      ? widget.origSerializeValue()
+      : widget.value
+  }
+
+  // Hide any linked widgets, e.g. seed+seedControl
+  if (widget.linkedWidgets) {
+    for (const w of widget.linkedWidgets) {
+      hideWidget(node, w, ':' + widget.name)
+    }
+  }
+}
+
+export function showWidget(widget) {
+  widget.type = widget.origType
+  widget.computeSize = widget.origComputeSize
+  widget.serializeValue = widget.origSerializeValue
+
+  delete widget.origType
+  delete widget.origComputeSize
+  delete widget.origSerializeValue
+
+  // Hide any linked widgets, e.g. seed+seedControl
+  if (widget.linkedWidgets) {
+    for (const w of widget.linkedWidgets) {
+      showWidget(w)
+    }
+  }
+}
+
+export function convertToWidget(node, widget) {
+  showWidget(widget)
+  const sz = node.size
+  node.removeInput(node.inputs.findIndex((i) => i.widget?.name === widget.name))
+
+  for (const widget of node.widgets) {
+    widget.last_y -= LiteGraph.NODE_SLOT_HEIGHT
+  }
+
+  // Restore original size but grow if needed
+  node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])])
+}
+
+export function convertToInput(node, widget, config) {
+  hideWidget(node, widget)
+
+  const { linkType } = getWidgetType(config)
+
+  // Add input and store widget config for creating on primitive node
+  const sz = node.size
+  node.addInput(widget.name, linkType, {
+    widget: { name: widget.name, config },
+  })
+
+  for (const widget of node.widgets) {
+    widget.last_y += LiteGraph.NODE_SLOT_HEIGHT
+  }
+
+  // Restore original size but grow if needed
+  node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])])
+}
+
+export function hideWidgetForGood(node, widget, suffix = '') {
+  widget.origType = widget.type
+  widget.origComputeSize = widget.computeSize
+  widget.origSerializeValue = widget.serializeValue
+  widget.computeSize = () => [0, -4] // -4 is due to the gap litegraph adds between widgets automatically
+  widget.type = CONVERTED_TYPE + suffix
+  // widget.serializeValue = () => {
+  //     // Prevent serializing the widget if we have no input linked
+  //     const w = node.inputs?.find((i) => i.widget?.name === widget.name);
+  //     if (w?.link == null) {
+  //         return undefined;
+  //     }
+  //     return widget.origSerializeValue ? widget.origSerializeValue() : widget.value;
+  // };
+
+  // Hide any linked widgets, e.g. seed+seedControl
+  if (widget.linkedWidgets) {
+    for (const w of widget.linkedWidgets) {
+      hideWidgetForGood(node, w, ':' + widget.name)
+    }
+  }
+}
+
+export function fixWidgets(node) {
+  if (node.inputs) {
+    for (const input of node.inputs) {
+      log(input)
+      if (input.widget || node.widgets) {
+        // if (newTypes.includes(input.type)) {
+        const matching_widget = node.widgets.find((w) => w.name === input.name)
+        if (matching_widget) {
+          // if (matching_widget.hidden) {
+          //     log(`Already hidden skipping ${matching_widget.name}`)
+          //     continue
+          // }
+          const w = node.widgets.find((w) => w.name === matching_widget.name)
+          if (w && w.type != CONVERTED_TYPE) {
+            log(w)
+            log(`hidding ${w.name}(${w.type}) from ${node.type}`)
+            log(node)
+            hideWidget(node, w)
+          } else {
+            log(`converting to widget ${w}`)
+
+            convertToWidget(node, input)
+          }
+        }
+      }
+    }
+  }
+}
+export function inner_value_change(widget, value, event = undefined) {
+  if (widget.type == 'number' || widget.type == 'BBOX') {
+    value = Number(value)
+  } else if (widget.type == 'BOOL') {
+    value = Boolean(value)
+  }
+  widget.value = value
+  if (
+    widget.options &&
+    widget.options.property &&
+    node.properties[widget.options.property] !== undefined
+  ) {
+    node.setProperty(widget.options.property, value)
+  }
+  if (widget.callback) {
+    widget.callback(widget.value, app.canvas, node, pos, event)
+  }
+}
+
+//- COLOR UTILS
+export function isColorBright(rgb, threshold = 240) {
+  const brightess = getBrightness(rgb)
+  return brightess > threshold
+}
+
+function getBrightness(rgbObj) {
+  return Math.round(
+    (parseInt(rgbObj[0]) * 299 +
+      parseInt(rgbObj[1]) * 587 +
+      parseInt(rgbObj[2]) * 114) /
+      1000
+  )
+}
+
+//- HTML / CSS UTILS
+export function defineClass(className, classStyles) {
+  const styleSheets = document.styleSheets
+
+  // Helper function to check if the class exists in a style sheet
+  function classExistsInStyleSheet(styleSheet) {
+    const rules = styleSheet.rules || styleSheet.cssRules
+    for (const rule of rules) {
+      if (rule.selectorText === `.${className}`) {
+        return true
+      }
+    }
+    return false
+  }
+
+  // Check if the class is already defined in any of the style sheets
+  let classExists = false
+  for (const styleSheet of styleSheets) {
+    if (classExistsInStyleSheet(styleSheet)) {
+      classExists = true
+      break
+    }
+  }
+
+  // If the class doesn't exist, add the new class definition to the first style sheet
+  if (!classExists) {
+    if (styleSheets[0].insertRule) {
+      styleSheets[0].insertRule(`.${className} { ${classStyles} }`, 0)
+    } else if (styleSheets[0].addRule) {
+      styleSheets[0].addRule(`.${className}`, classStyles, 0)
+    }
+  }
+}
@@ -0,0 +1,109 @@
+/**
+ * File: debug.js
+ * Project: comfy_mtb
+ * Author: Mel Massadian
+ *
+ * Copyright (c) 2023 Mel Massadian
+ *
+ */
+
+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'
+
+// TODO: respect inputs order...
+
+function escapeHtml(unsafe) {
+  return unsafe
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;')
+}
+app.registerExtension({
+  name: 'mtb.Debug',
+  async beforeRegisterNodeDef(nodeType, nodeData, app) {
+    if (nodeData.name === 'Debug (mtb)') {
+      const onConnectionsChange = nodeType.prototype.onConnectionsChange
+      nodeType.prototype.onConnectionsChange = function (
+        type,
+        index,
+        connected,
+        link_info
+      ) {
+        const r = onConnectionsChange
+          ? onConnectionsChange.apply(this, arguments)
+          : undefined
+        // TODO: remove all widgets on disconnect once computed
+        shared.dynamic_connection(this, index, connected, 'anything_', '*')
+
+        //- infer type
+        if (link_info) {
+          const fromNode = this.graph._nodes.find(
+            (otherNode) => otherNode.id == link_info.origin_id
+          )
+          const type = fromNode.outputs[link_info.origin_slot].type
+          this.inputs[index].type = type
+          // this.inputs[index].label = type.toLowerCase()
+        }
+        //- restore dynamic input
+        if (!connected) {
+          this.inputs[index].type = '*'
+          this.inputs[index].label = `anything_${index + 1}`
+        }
+      }
+
+      const onExecuted = nodeType.prototype.onExecuted
+      nodeType.prototype.onExecuted = function (message) {
+        onExecuted?.apply(this, arguments)
+
+        const prefix = 'anything_'
+
+        if (this.widgets) {
+          // const pos = this.widgets.findIndex((w) => w.name === "anything_1");
+          // if (pos !== -1) {
+          for (let i = 0; i < this.widgets.length; i++) {
+            this.widgets[i].onRemoved?.()
+          }
+          this.widgets.length = 0
+        }
+        let widgetI = 1
+        if (message.text) {
+          for (const txt of message.text) {
+            const w = this.addCustomWidget(
+              MtbWidgets.DEBUG_STRING(`${prefix}_${widgetI}`, escapeHtml(txt))
+            )
+            w.parent = this
+            widgetI++
+          }
+        }
+        if (message.b64_images) {
+          for (const img of message.b64_images) {
+            const w = this.addCustomWidget(
+              MtbWidgets.DEBUG_IMG(`${prefix}_${widgetI}`, img)
+            )
+            w.parent = this
+            widgetI++
+          }
+          // this.onResize?.(this.size);
+          // this.resize?.(this.size)
+        }
+
+        this.setSize(this.computeSize())
+
+        this.onRemoved = function () {
+          // When removing this node we need to remove the input from the DOM
+          for (let y in this.widgets) {
+            if (this.widgets[y].canvas) {
+              this.widgets[y].canvas.remove()
+            }
+            this.widgets[y].onRemoved?.()
+          }
+        }
+      }
+    }
+  },
+})
@@ -0,0 +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;
+