73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import type { Socket } from "@nodes/types";
|
|
import { writable, type Writable } from "svelte/store";
|
|
import { Color } from "three/src/math/Color.js";
|
|
|
|
export const activeNodeId: Writable<number> = writable(-1);
|
|
export const selectedNodes: Writable<Set<number> | null> = writable(new Set());
|
|
|
|
export const activeSocket: Writable<Socket | null> = writable(null);
|
|
export const hoveredSocket: Writable<Socket | null> = writable(null);
|
|
export const possibleSockets: Writable<Socket[]> = writable([]);
|
|
export const possibleSocketIds: Writable<Set<string> | null> = writable(null);
|
|
|
|
export const colors = writable({
|
|
layer0: new Color().setStyle("#060606"),
|
|
layer1: new Color().setStyle("#171717"),
|
|
layer2: new Color().setStyle("#2D2D2D"),
|
|
layer3: new Color().setStyle("#A6A6A6"),
|
|
outline: new Color().setStyle("#000000"),
|
|
active: new Color().setStyle("#c65a19"),
|
|
selected: new Color().setStyle("#ffffff"),
|
|
});
|
|
|
|
if ("getComputedStyle" in globalThis) {
|
|
|
|
const body = document.body;
|
|
|
|
let lastStyle = "";
|
|
|
|
function updateColors() {
|
|
|
|
const style = getComputedStyle(body);
|
|
const layer0 = style.getPropertyValue("--layer-0");
|
|
const layer1 = style.getPropertyValue("--layer-1");
|
|
const layer2 = style.getPropertyValue("--layer-2");
|
|
const layer3 = style.getPropertyValue("--layer-3");
|
|
const outline = style.getPropertyValue("--outline");
|
|
const active = style.getPropertyValue("--active");
|
|
const selected = style.getPropertyValue("--selected");
|
|
|
|
const newStyle = `${layer0}${layer1}${layer2}${layer3}${outline}${active}${selected}`;
|
|
|
|
if (newStyle === lastStyle) return;
|
|
lastStyle = newStyle;
|
|
|
|
colors.update(col => {
|
|
col.layer0.setStyle(layer0);
|
|
col.layer0.convertLinearToSRGB();
|
|
col.layer1.setStyle(layer1);
|
|
col.layer1.convertLinearToSRGB();
|
|
col.layer2.setStyle(layer2);
|
|
col.layer2.convertLinearToSRGB();
|
|
col.layer3.setStyle(layer3);
|
|
col.layer3.convertLinearToSRGB();
|
|
col.outline.setStyle(outline);
|
|
col.outline.convertLinearToSRGB();
|
|
col.active.setStyle(active);
|
|
col.active.convertLinearToSRGB();
|
|
col.selected.setStyle(selected);
|
|
col.selected.convertLinearToSRGB();
|
|
return col;
|
|
});
|
|
|
|
}
|
|
|
|
updateColors();
|
|
|
|
window.onload = updateColors;
|
|
|
|
body.addEventListener("transitionstart", () => {
|
|
updateColors();
|
|
})
|
|
}
|