@needle-tools/engine 2.66.1-pre → 2.67.0-pre

package/src/engine-components/postprocessing/Volume.ts

@@ -0,0 +1,194 @@
+import { Behaviour, GameObject } from "../Component";
+import { serializeable } from "../../engine/engine_serialization_decorator";
+import { getParam } from "../../engine/engine_utils";
+import { VolumeProfile } from "./VolumeProfile";
+import { EditorModification, IEditorModification as IEditorModificationReceiver } from "../../engine/engine_editor-sync";
+import { PostProcessingHandler } from "./PostProcessingHandler";
+import { PostProcessingEffect } from "./PostProcessingEffect";
+import { VolumeParameter } from "./VolumeParameter";
+import { getEditorModificationCache } from "../../engine/engine_editor-sync";
+import { isDevEnvironment } from "../../engine/debug";
+// import { CustomPostProcessingEffect } from "./CustomPostProcessingEffect";
+
+const debug = getParam("debugpost");
+
+export class Volume extends Behaviour implements IEditorModificationReceiver {
+
+    @serializeable(VolumeProfile)
+    sharedProfile?: VolumeProfile;
+
+    private _postprocessing: PostProcessingHandler = new PostProcessingHandler();
+    private _effects: PostProcessingEffect[] = [];
+
+    awake() {
+        // ensure the profile is initialized
+        this.sharedProfile?.init();
+
+        if (debug) {
+            console.log(this);
+            console.log("Press P to toggle post processing");
+            window.addEventListener("keydown", (e) => {
+                if (e.key === "p") {
+                    console.log("Toggle volume: " + this.name, !this.enabled);
+                    this.enabled = !this.enabled;
+                }
+            });
+        }
+    }
+
+    start() {
+        this.apply();
+        this.tryApplyCache();
+    }
+
+    onEnable() {
+        // We need to wait for the camera to be ready
+        if (this.__internalDidAwakeAndStart)
+            this.apply();
+    }
+
+    onDisable() {
+        this._postprocessing?.unapply(this.context);
+    }
+
+    onBeforeRender(): void {
+        if (!this.context.isInXR && this.context.composer && this.context.mainCamera) {
+            this.context.composer.setRenderer(this.context.renderer);
+            this.context.composer.setMainScene(this.context.scene);
+            this.context.composer.setMainCamera(this.context.mainCamera);
+        }
+    }
+
+    onDestroy(): void {
+        this._postprocessing?.dispose(this.context);
+    }
+
+    private _lastApplyTime?: number;
+    private _rapidApplyCount = 0;
+
+    private apply() {
+        if (debug) console.log("Apply PostProcessing", this);
+
+        if (isDevEnvironment()) {
+            if (this._lastApplyTime !== undefined && Date.now() - this._lastApplyTime < 100) {
+                this._rapidApplyCount++;
+                if (this._rapidApplyCount === 5)
+                    console.warn("Detected rapid post processing modifications - this might be a bug", this);
+            }
+            this._lastApplyTime = Date.now();
+        }
+
+
+        this.unapply();
+
+        this._effects.length = 0;
+        // get from profile
+        if (this.sharedProfile?.components) {
+            this._effects.push(...this.sharedProfile.components);
+        }
+        // get additional effects
+        const additionalComponents = this.gameObject.getComponentsInChildren(PostProcessingEffect);
+        if (debug && additionalComponents?.length)
+            console.log("Additional", additionalComponents);
+        if (additionalComponents) {
+            for (const comp of additionalComponents) {
+                if (comp.active) this._effects.push(comp);
+            }
+        }
+        if (this._effects.length > 0) {
+            this._postprocessing.apply(this.context, this._effects);
+        }
+    }
+
+    private unapply() {
+        this._postprocessing.unapply(this.context);
+    }
+
+
+    private tryApplyCache() {
+        const cache = getEditorModificationCache();
+        if (cache) {
+            for (const entry of cache.values()) this.onEditorModification(entry);
+        }
+    }
+
+
+    /** called from needle editor sync package if its active */
+    onEditorModification(modification: EditorModification): void | boolean | undefined {
+
+        if (modification.propertyName.startsWith("postprocessing.")) {
+            if (!this._effects?.length) return;
+            const path = modification.propertyName.split(".");
+            if (path.length === 3 || path.length === 4) {
+                const componentName = path[1];
+                const propertyName = path[2];
+                for (const comp of this._effects) {
+                    if (comp.typeName?.toLowerCase() === componentName.toLowerCase()) {
+
+                        if (propertyName === "active") {
+                            comp.active = modification.value;
+                            this.scheduleRecreate();
+                            return;
+                        }
+
+                        // cache the volume parameters
+                        if (!effectVolumeProperties.has(componentName)) {
+                            const volumeParameterKeys = new Array<string>();
+                            effectVolumeProperties.set(componentName, volumeParameterKeys);
+                            const keys = Object.keys(comp);
+                            for (const key of keys) {
+                                const prop = comp[key];
+                                if (prop instanceof VolumeParameter) {
+                                    volumeParameterKeys.push(key);
+                                }
+                            }
+                        }
+
+                        if (effectVolumeProperties.has(componentName)) {
+                            const paramName = propertyName.toLowerCase();
+                            const volumeParameterKeys = effectVolumeProperties.get(componentName)!;
+                            for (const key of volumeParameterKeys) {
+                                if (key.toLowerCase() === paramName) {
+                                    const prop = comp[key] as VolumeParameter;
+                                    if (prop instanceof VolumeParameter) {
+                                        const isActiveStateChange = path.length === 4 && path[3] === "active";
+                                        if (isActiveStateChange) {
+                                            prop.overrideState = modification.value;
+                                            this.scheduleRecreate();
+                                        }
+                                        else if (prop && prop.value !== undefined) {
+                                            prop.value = modification.value;
+                                        }
+                                    }
+                                    return;
+                                }
+                            }
+                        }
+
+                        console.warn("Unknown modification", propertyName);
+                        return;
+                    }
+                }
+            }
+            return true;
+        }
+
+        return false;
+    }
+
+    private _recreateId: number = -1;
+    private scheduleRecreate() {
+        // When the editor modifications come in with changed active effects we want/need to re-create the effects
+        // We defer it slightly because multiple active changes could be made and we dont want to recreate the full effect stack multiple times
+        const id = ++this._recreateId;
+        setTimeout(() => {
+            if (id !== this._recreateId) return;
+            this.onDisable();
+            this.onEnable();
+        }, 200);
+    }
+
+}
+
+/** cached VolumeParameter keys per object */
+const effectVolumeProperties: Map<string, string[]> = new Map<string, string[]>();

package/src/engine-components/postprocessing/VolumeParameter.ts

@@ -0,0 +1,85 @@
+import { serializable } from "../../engine/engine_serialization";
+
+export declare type VolumeParameterChangedEvent = (newValue: any, oldValue: any, parameter: VolumeParameter) => void;
+export declare type VolumeParameterValueProcessor = (value: any) => any;
+
+export class VolumeParameter {
+
+    @serializable()
+    get overrideState(): boolean {
+        return this._active;
+    }
+    set overrideState(val: boolean) {
+        if (this._active === val) return;
+        this._active = val;
+        const value = val ? this._lastActiveSetValue : this._defaultValue;
+        this.processValue(value, true);
+    }
+    private _active: boolean = false;
+
+
+
+    @serializable()
+    get value() {
+        return this._value;
+    }
+    set value(val: any) {
+        this.processValue(val, false);
+    }
+    private _value: any;
+    private _lastActiveSetValue?: any;
+
+
+    set defaultValue(val: any) {
+        this._defaultValue = val;
+    }
+    private _defaultValue: any = undefined;
+
+
+    /** enforce the value to be set and onValueChanged to be called if assigned */
+    __init() {
+        this.processValue(this._lastActiveSetValue, true);
+    }
+
+    /** called to modify a changing value before it is saved */
+    valueProcessor: VolumeParameterValueProcessor | undefined;
+    /** called when a value has changed (with the final value) */
+    onValueChanged: VolumeParameterChangedEvent | undefined;
+
+
+    private processValue(val: any, forceUpdate: boolean): any {
+        if (val === null || val === undefined) return;
+
+        if (!forceUpdate && this.testIfValueChanged(val) === false)
+            return;
+
+        const oldValue = this._value;
+
+        if (!this._active && this._defaultValue !== undefined) {
+            // when setting the default value we dont process them (default values are explicitly set from the effect that declares them 
+            // with the value that is expected to received when the parameter is disabled)
+            this._value = this._defaultValue;
+            val = this._defaultValue;
+        }
+        else {
+            this._lastActiveSetValue = val;
+            if (this._active && this.valueProcessor)
+                val = this.valueProcessor(val);
+            this._value = val;
+        }
+
+        if (this.onValueChanged) {
+            this.onValueChanged(val, oldValue, this);
+        }
+    }
+
+    private testIfValueChanged(newValue: any): boolean {
+
+        if (this._lastActiveSetValue === newValue)
+            return false;
+
+        // TODO: may need checks for colors or vectors (check by xyz,rgb because they might come in as anonymous objects via editor modifications)
+
+        return true;
+    }
+}

package/src/engine-components/postprocessing/VolumeProfile.ts

@@ -0,0 +1,40 @@
+import { serializeable } from "../../engine/engine_serialization_decorator";
+import { getParam } from "../../engine/engine_utils";
+import { PostProcessingEffect } from "./PostProcessingEffect";
+
+const debug = getParam("debugpost");
+
+const customEffects: { [name: string]: typeof PostProcessingEffect } = {};
+export function registerCustomEffectType(name: string, effect: typeof PostProcessingEffect) {
+    customEffects[name] = effect;
+}
+
+// resolve the types:
+function resolveComponentType(data: { __type: string }) {
+    if (data.__type in customEffects)
+        return customEffects[data.__type];
+    // if ("mode" in data) return ToneMapping;
+    // if ("postExposure" in data) return ColorAdjustments;
+    // switch (data.__type) {
+    //     // case "Bloom": return Bloom;
+    //     // case "DepthOfField": return DepthOfField;
+    //     // case "Vignette": return Vignette
+    //     // case "ColorAdjustments": return ColorAdjustments;
+    //     // case "Tonemapping": return ToneMapping;
+    // }
+    if (debug && data.__type)
+        console.warn("Unknown postprocessing type", data.__type, data)
+    return PostProcessingEffect;
+}
+
+export class VolumeProfile {
+
+    @serializeable([d => resolveComponentType(d), PostProcessingEffect])
+    components?: PostProcessingEffect[];
+
+    /** call init on all components */
+    init() {
+        this.components?.forEach(c => c.init());
+    }
+}
+

package/src/engine-components/timeline/TimelineTracks.ts

@@ -658,25 +658,24 @@ export class AudioTrackHandler extends TrackHandler {
 
     private handleAudioLoading(model: Models.ClipModel, audio: THREE.Audio): Promise<AudioBuffer | null> | null {
         if (!this._audioLoader) {
-            const path = this.getAudioFilePath(model.asset.clip);
             this._audioLoader = new THREE.AudioLoader();
-            // TODO: maybe we should cache the loaders / buffers here by path
-            if (debug) console.warn("LOAD audio track", path, this.director.sourceId);
-            const loadingPromise = new Promise<AudioBuffer | null>((resolve, _reject) => {
-                this._audioLoader!.load(path,
-                    buffer => {
-                        audio.setBuffer(buffer);
-                        resolve(buffer);
-                    },
-                    undefined,
-                    err => {
-                        console.error("Error loading audio", err);
-                        resolve(null);
-                    });
-            });
-            return loadingPromise;
         }
-        return null;
+        // TODO: maybe we should cache the loaders / buffers here by path
+        const path = this.getAudioFilePath(model.asset.clip);
+        if (debug) console.warn("LOAD audio track", path, this.director.sourceId);
+        const loadingPromise = new Promise<AudioBuffer | null>((resolve, _reject) => {
+            this._audioLoader!.load(path,
+                buffer => {
+                    audio.setBuffer(buffer);
+                    resolve(buffer);
+                },
+                undefined,
+                err => {
+                    console.error("Error loading audio", err);
+                    resolve(null);
+                });
+        });
+        return loadingPromise;
     }
 }
 

package/src/engine-components/ui/Text.ts

@@ -167,6 +167,8 @@ export class Text extends Graphic {
         // if (this.canvas) {
         //     fontSize /= this.canvas?.scaleFactor;
         // }
+
+        // @TODO : THH check for changes. fontColor => color?
         const textOpts = {
             content: this.text,
             fontColor: this.color,
@@ -203,8 +205,13 @@ export class Text extends Graphic {
     private createBlock(rt: RectTransform, hideOverflow: boolean, content: THREE.Object3D | Array<THREE.Object3D> | null, isTextIntermediate: boolean = false): ThreeMeshUI.Block | null {
         //@ts-ignore
         const opts: ThreeMeshUI.BlockOptions = {};
+
+        // @TODO : THH would require update for 7.x
         opts.hiddenOverflow = hideOverflow;
+
+        // @TODO : THH would require update for 7.x
         opts.interLine = (this.lineSpacing - 1) * this.fontSize * 1.333;
+
         this.getAlignment(opts, isTextIntermediate);
         const block = rt.createNewBlock(opts);
         if (content) {
@@ -219,9 +226,31 @@ export class Text extends Graphic {
 
 
     private getAlignment(opts: ThreeMeshUI.BlockOptions | any, isTextIntermediate: boolean = false): ThreeMeshUI.BlockOptions {
-        if (!isTextIntermediate)
+        if (!isTextIntermediate) {
             opts.contentDirection = "row";
+
+            switch (this.alignment) {
+                case TextAnchor.UpperLeft:
+                case TextAnchor.MiddleLeft:
+                case TextAnchor.LowerLeft:
+                    opts.textAlign = "left";
+                    break;
+                case TextAnchor.UpperCenter:
+                case TextAnchor.MiddleCenter:
+                case TextAnchor.LowerCenter:
+                    opts.textAlign = "center";
+
+                    break;
+                case TextAnchor.UpperRight:
+                case TextAnchor.MiddleRight:
+                case TextAnchor.LowerRight:
+                    opts.textAlign = "right";
+                    break;
+            }
+        }
+
         switch (this.alignment) {
+            // @info ThreeMeshUI remaining alignment : space-between|space-around|"stretch(experimental)"
             default:
             case TextAnchor.UpperLeft:
             case TextAnchor.UpperCenter:
@@ -239,21 +268,24 @@ export class Text extends Graphic {
                 opts.justifyContent = "end";
                 break;
         }
+
+        // @TODO :  THH evaluate this is still useful. In case of texts, horizontal alignments are made with textAlign
         switch (this.alignment) {
             case TextAnchor.UpperLeft:
             case TextAnchor.MiddleLeft:
             case TextAnchor.LowerLeft:
-                opts.alignContent = isTextIntermediate ? "left" : "top";
+                opts.alignItems = "start";
                 break;
             case TextAnchor.UpperCenter:
             case TextAnchor.MiddleCenter:
             case TextAnchor.LowerCenter:
-                opts.alignContent = "center";
+                opts.alignItems = "center";
+
                 break;
             case TextAnchor.UpperRight:
             case TextAnchor.MiddleRight:
             case TextAnchor.LowerRight:
-                opts.alignContent = isTextIntermediate ? "right" : "bottom";
+                opts.alignItems = "end";
                 break;
         }
         return opts;
@@ -378,7 +410,7 @@ export class Text extends Graphic {
                 if (tag.type.length > 6) // color=
                 {
                     const col = tag.type.substring(6);
-                    opts.fontColor = getColorFromString(col);
+                    opts.fontColor = new Color(col);
                 }
                 else {
                     // if it does not contain a color it is white
@@ -477,174 +509,5 @@ declare type TagInfo = {
     isEndTag: boolean
 }
 
-
-function getColorFromString(str: string): Color {
-    if (str.startsWith("#")) {
-        const hex = str.substring(1);
-        var bigint = parseInt(hex, 16);
-        const r = (bigint >> 16) & 255;
-        const g = (bigint >> 8) & 255;
-        const b = bigint & 255;
-        return new Color(r / 255, g / 255, b / 255);
-    }
-    switch (str) {
-        // basic colors // https://www.rapidtables.com/web/color/RGB_Color.html
-        case "black": return new Color(0, 0, 0);
-        case "white": return new Color(1, 1, 1);
-        case "red": return new Color(1, 0, 0);
-        case "lime": return new Color(0, 1, 0);
-        case "blue": return new Color(0, 0, 1);
-        case "yellow": return new Color(1, 1, 0);
-        case "cyan": return new Color(0, 1, 1);
-        case "magenta": return new Color(1, 0, 1);
-        case "silver": return new Color(0.75, 0.75, 0.75);
-        case "gray": return new Color(0.5, 0.5, 0.5);
-        case "maroon": return new Color(0.5, 0, 0);
-        case "olive": return new Color(0.5, 0.5, 0);
-        case "green": return new Color(0, 0.5, 0);
-        case "purple": return new Color(0.5, 0, 0.5);
-        case "teal": return new Color(0, 0.5, 0.5);
-        case "navy": return new Color(0, 0, 0.5);
-
-        // case "maroon": return new Color(0.5, 0, 0);
-        case "darkred": return new Color(0.54, 0, 0);
-        case "brown": return new Color(0.55, 0.27, 0);
-        case "firebrick": return new Color(0.69, 0.13, 0.13);
-        case "crimson": return new Color(0.86, 0.08, 0.24);
-        // case "red": return new Color(1, 0, 0);
-        case "tomato": return new Color(1, 0.39, 0.28);
-        case "coral": return new Color(1, 0.49, 0.31);
-        case "indianred": return new Color(0.6, 0.31, 0.51);
-        case "lightcoral": return new Color(0.94, 0.5, 0.5);
-        case "darkorange": return new Color(1, 0.55, 0);
-        case "orange": return new Color(1, 0.65, 0);
-        case "gold": return new Color(1, 0.84, 0);
-        case "darkgoldenrod": return new Color(0.72, 0.53, 0.04);
-        case "goldenrod": return new Color(0.85, 0.65, 0.13);
-        case "palegoldenrod": return new Color(0.93, 0.87, 0.67);
-        case "darkkhaki": return new Color(0.74, 0.7, 0.42);
-        case "khaki": return new Color(0.94, 0.9, 0.55);
-        // case "olive": return new Color(0.5, 0.5, 0);
-        // case "yellow": return new Color(1, 1, 0);
-        case "yellowgreen": return new Color(0.6, 0.8, 0.19);
-        case "darkolivegreen": return new Color(0.33, 0.42, 0.18);
-        case "olivedrab": return new Color(0.42, 0.56, 0.14);
-        case "lawngreen": return new Color(0.49, 0.99, 0.0);
-        case "chartreuse": return new Color(0.5, 1, 0);
-        case "greenyellow": return new Color(0.68, 1, 0.18);
-        case "darkgreen": return new Color(0, 0.39, 0);
-        // case "green": return new Color(0, 1, 0);
-        case "forestgreen": return new Color(0.13, 0.55, 0.13);
-        // case "lime": return new Color(0, 1, 0);
-        case "limegreen": return new Color(0.19, 0.80, 0.19);
-        case "lightgreen": return new Color(0.56, 0.93, 0.56);
-        case "palegreen": return new Color(0.59, 0.98, 0.59);
-        case "darkseagreen": return new Color(0.56, 0.74, 0.56);
-        case "mediumspringgreen": return new Color(0, 0.98, 0.6);
-        case "springgreen": return new Color(0, 1, 0.5);
-        case "seagreen": return new Color(0.18, 0.31, 0.31);
-        case "mediumaquamarine": return new Color(0.4, 0.8, 0.66);
-        case "mediumseagreen": return new Color(0.24, 0.70, 0.44);
-        case "lightseagreen": return new Color(0.13, 0.70, 0.67);
-        case "darkslategray": return new Color(0.18, 0.31, 0.31);
-        // case "teal": return new Color(0, 0.5, 0.5);
-        case "darkcyan": return new Color(0, 0.55, 0.55);
-        case "aqua": return new Color(0, 1, 1);
-        // case "cyan": return new Color(0, 1, 1);
-        case "lightcyan": return new Color(0.8, 1, 1);
-        case "darkturquoise": return new Color(0, 0.81, 0.82);
-        case "turquoise": return new Color(0, 0.82, 0.82);
-        case "mediumturquoise": return new Color(0.28, 0.82, 0.8);
-        case "paleturquoise": return new Color(0.68, 1, 0.93);
-        case "aquamarine": return new Color(0.5, 1, 0.83);
-        case "powderblue": return new Color(0.69, 0.88, 0.9);
-        case "cadetblue": return new Color(0.37, 0.62, 0.63);
-        case "steelblue": return new Color(0.27, 0.51, 0.71);
-        case "cornflowerblue": return new Color(0.39, 0.58, 0.93);
-        case "deepskyblue": return new Color(0, 0.7, 1);
-        case "dodgerblue": return new Color(0.12, 0.56, 1);
-        case "lightblue": return new Color(0.68, 0.85, 0.9);
-        case "skyblue": return new Color(0.53, 0.81, 0.92);
-        case "lightskyblue": return new Color(0.53, 0.81, 0.98);
-        case "midnightblue": return new Color(0.18, 0.18, 0.31);
-        // case "navy": return new Color(0, 0, 0.5);
-        case "darkblue": return new Color(0, 0, 0.55);
-        case "mediumblue": return new Color(0, 0, 0.82);
-        // case "blue": return new Color(0, 0, 1);
-        case "royalblue": return new Color(0.25, 0.41, 0.88);
-        case "blueviolet": return new Color(0.54, 0.17, 0.89);
-        case "indigo": return new Color(0.29, 0, 0.51);
-        case "darkslateblue": return new Color(0.28, 0.24, 0.55);
-        case "slateblue": return new Color(0.42, 0.35, 0.80);
-        case "mediumslateblue": return new Color(0.48, 0.41, 0.9);
-        case "mediumpurple": return new Color(0.58, 0.44, 0.86);
-        case "darkmagenta": return new Color(0.55, 0, 0.55);
-        case "darkviolet": return new Color(0.58, 0, 0.83);
-        case "darkorchid": return new Color(0.6, 0.2, 0.8);
-        case "mediumorchid": return new Color(0.73, 0.33, 0.83);
-        // case "purple": return new Color(0.5, 0, 0.5);
-        case "thistle": return new Color(0.84, 0.75, 0.85);
-        case "plum": return new Color(0.87, 0.63, 0.87);
-        case "violet": return new Color(0.93, 0.51, 0.93);
-        // case "magenta": return new Color(1, 0, 1);
-        case "fuchsia": return new Color(1, 0, 1);
-        case "orchid": return new Color(0.85, 0.44, 0.84);
-        case "mediumvioletred": return new Color(0.78, 0.08, 0.52);
-        case "palevioletred": return new Color(0.86, 0.44, 0.58);
-        case "hotpink": return new Color(1, 0.4, 0.71);
-        case "deeppink": return new Color(1, 0.08, 0.58);
-        case "lightpink": return new Color(1, 0.71, 0.76);
-        case "pink": return new Color(1, 0.75, 0.78);
-        case "antiquewhite": return new Color(0.98, 0.92, 0.84);
-        case "beige": return new Color(0.96, 0.96, 0.86);
-        case "bisque": return new Color(1, 0.89, 0.77);
-        case "blanchedalmond": return new Color(1, 0.92, 0.82);
-        case "wheat": return new Color(0.96, 0.87, 0.87);
-        case "cornsilk": return new Color(1, 0.97, 0.86);
-        case "lemonchiffon": return new Color(1, 0.98, 0.8);
-        case "lightgoldenrodyellow": return new Color(0.98, 0.98, 0.82);
-        case "lightyellow": return new Color(1, 1, 0.8);
-        case "saddlebrown": return new Color(0.55, 0.27, 0.07);
-        case "sienna": return new Color(0.63, 0.32, 0.18);
-        case "chocolate": return new Color(0.82, 0.41, 0.12);
-        case "peru": return new Color(0.82, 0.52, 0.25);
-        case "sandybrown": return new Color(0.96, 0.64, 0.38);
-        case "burlywood": return new Color(0.87, 0.72, 0.53);
-        case "tan": return new Color(0.82, 0.71, 0.55);
-        case "rosybrown": return new Color(0.74, 0.56, 0.56);
-        case "moccasin": return new Color(1, 0.89, 0.71);
-        case "navajowhite": return new Color(1, 0.87, 0.68);
-        case "peachpuff": return new Color(1, 0.85, 0.73);
-        case "mistyrose": return new Color(1, 0.89, 0.88);
-        case "lavenderblush": return new Color(1, 0.94, 0.93);
-        case "linen": return new Color(0.98, 0.94, 0.9);
-        case "oldlace": return new Color(0.99, 0.96, 0.9);
-        case "papayawhip": return new Color(1, 0.94, 0.84);
-        case "seashell": return new Color(1, 0.96, 0.93);
-        case "mintcream": return new Color(0.98, 1, 0.98);
-        case "slategray": return new Color(0.44, 0.5, 0.56);
-        case "lightslategray": return new Color(0.47, 0.53, 0.6);
-        case "lightsteelblue": return new Color(0.69, 0.77, 0.87);
-        case "lavender": return new Color(0.9, 0.9, 0.98);
-        case "floralwhite": return new Color(1, 0.98, 0.98);
-        case "aliceblue": return new Color(0.94, 0.97, 1);
-        case "ghostwhite": return new Color(0.97, 0.97, 1);
-        case "honeydew": return new Color(0.94, 1, 0.94);
-        case "ivory": return new Color(1, 1, 0.94);
-        case "azure": return new Color(0.94, 1, 1);
-        case "snow": return new Color(1, 0.98, 0.98);
-        // case "black": return new Color(0, 0, 0);
-        case "dimgray": return new Color(0.4, 0.4, 0.4);
-        // case "gray": return new Color(0.5, 0.5, 0.5);
-        case "darkgray": return new Color(0.66, 0.66, 0.66);
-        // case "silver": return new Color(0.75, 0.75, 0.75);
-        case "lightgray": return new Color(0.83, 0.83, 0.83);
-        case "gainsboro": return new Color(0.86, 0.86, 0.86);
-        case "whitesmoke": return new Color(0.96, 0.96, 0.96);
-
-    }
-    return new Color(1, 1, 1);
-}
-
 // const anyTag = new RegExp('<.+?>', 'g');
 // const regex = new RegExp('<(?<type>.+?)>(?<text>.+?)<\/.+?>', 'g');