chore: setup linting
This commit is contained in:
@@ -74,7 +74,7 @@
|
||||
|
||||
const output = newNode.state?.type?.outputs?.find((out) => {
|
||||
if (socketType?.type === out) return true;
|
||||
if (socketType?.accepts?.includes(out as any)) return true;
|
||||
if ((socketType?.accepts as string[])?.includes(out)) return true;
|
||||
return false;
|
||||
});
|
||||
|
||||
@@ -172,7 +172,7 @@
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#each graph.edges as edge}
|
||||
{#each graph.edges as edge (edge)}
|
||||
{@const [x1, y1, x2, y2] = getEdgePosition(edge)}
|
||||
<EdgeEl
|
||||
id={graph.getEdgeId(edge)}
|
||||
|
||||
@@ -1,29 +1,25 @@
|
||||
<script lang="ts">
|
||||
import type { Graph, NodeInstance, NodeRegistry } from "@nodarium/types";
|
||||
import GraphEl from "./Graph.svelte";
|
||||
import { GraphManager } from "../graph-manager.svelte";
|
||||
import { createKeyMap } from "$lib/helpers/createKeyMap";
|
||||
import {
|
||||
GraphState,
|
||||
setGraphManager,
|
||||
setGraphState,
|
||||
} from "../graph-state.svelte";
|
||||
import { setupKeymaps } from "../keymaps";
|
||||
import { createKeyMap } from '$lib/helpers/createKeyMap';
|
||||
import type { Graph, NodeInstance, NodeRegistry } from '@nodarium/types';
|
||||
import { GraphManager } from '../graph-manager.svelte';
|
||||
import { GraphState, setGraphManager, setGraphState } from '../graph-state.svelte';
|
||||
import { setupKeymaps } from '../keymaps';
|
||||
import GraphEl from './Graph.svelte';
|
||||
|
||||
type Props = {
|
||||
graph?: Graph;
|
||||
registry: NodeRegistry;
|
||||
|
||||
settings?: Record<string, any>;
|
||||
settings?: Record<string, unknown>;
|
||||
|
||||
activeNode?: NodeInstance;
|
||||
showGrid?: boolean;
|
||||
snapToGrid?: boolean;
|
||||
showHelp?: boolean;
|
||||
settingTypes?: Record<string, any>;
|
||||
settingTypes?: Record<string, unknown>;
|
||||
|
||||
onsave?: (save: Graph) => void;
|
||||
onresult?: (result: any) => void;
|
||||
onresult?: (result: unknown) => void;
|
||||
};
|
||||
|
||||
let {
|
||||
@@ -36,11 +32,12 @@
|
||||
showHelp = $bindable(false),
|
||||
settingTypes = $bindable(),
|
||||
onsave,
|
||||
onresult,
|
||||
onresult
|
||||
}: Props = $props();
|
||||
|
||||
export const keymap = createKeyMap([]);
|
||||
|
||||
// svelte-ignore state_referenced_locally
|
||||
export const manager = new GraphManager(registry);
|
||||
setGraphManager(manager);
|
||||
|
||||
@@ -70,14 +67,14 @@
|
||||
}
|
||||
});
|
||||
|
||||
manager.on("settings", (_settings) => {
|
||||
manager.on('settings', (_settings) => {
|
||||
settingTypes = { ...settingTypes, ..._settings.types };
|
||||
settings = _settings.values;
|
||||
});
|
||||
|
||||
manager.on("result", (result) => onresult?.(result));
|
||||
manager.on('result', (result) => onresult?.(result));
|
||||
|
||||
manager.on("save", (save) => onsave?.(save));
|
||||
manager.on('save', (save) => onsave?.(save));
|
||||
|
||||
$effect(() => {
|
||||
if (graph) {
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
import { appSettings } from "$lib/settings/app-settings.svelte";
|
||||
import { Color, LinearSRGBColorSpace } from "three";
|
||||
import { appSettings } from '$lib/settings/app-settings.svelte';
|
||||
import { Color, LinearSRGBColorSpace } from 'three';
|
||||
|
||||
const variables = [
|
||||
"layer-0",
|
||||
"layer-1",
|
||||
"layer-2",
|
||||
"layer-3",
|
||||
"outline",
|
||||
"active",
|
||||
"selected",
|
||||
"edge",
|
||||
'layer-0',
|
||||
'layer-1',
|
||||
'layer-2',
|
||||
'layer-3',
|
||||
'outline',
|
||||
'active',
|
||||
'selected',
|
||||
'edge'
|
||||
] as const;
|
||||
|
||||
function getColor(variable: (typeof variables)[number]) {
|
||||
const style = getComputedStyle(document.body.parentElement!);
|
||||
let color = style.getPropertyValue(`--${variable}`);
|
||||
const color = style.getPropertyValue(`--${variable}`);
|
||||
return new Color().setStyle(color, LinearSRGBColorSpace);
|
||||
}
|
||||
|
||||
export const colors = Object.fromEntries(
|
||||
variables.map((v) => [v, getColor(v)]),
|
||||
variables.map((v) => [v, getColor(v)])
|
||||
) as Record<(typeof variables)[number], Color>;
|
||||
|
||||
$effect.root(() => {
|
||||
$effect(() => {
|
||||
if (!appSettings.value.theme || !("getComputedStyle" in globalThis)) return;
|
||||
if (!appSettings.value.theme || !('getComputedStyle' in globalThis)) return;
|
||||
const style = getComputedStyle(document.body.parentElement!);
|
||||
for (const v of variables) {
|
||||
const hex = style.getPropertyValue(`--${v}`);
|
||||
|
||||
@@ -6,7 +6,7 @@ export class FileDropEventManager {
|
||||
constructor(
|
||||
private graph: GraphManager,
|
||||
private state: GraphState
|
||||
) { }
|
||||
) {}
|
||||
|
||||
handleFileDrop(event: DragEvent) {
|
||||
event.preventDefault();
|
||||
@@ -17,19 +17,21 @@ export class FileDropEventManager {
|
||||
let my = event.clientY - this.state.rect.y;
|
||||
|
||||
if (nodeId) {
|
||||
let nodeOffsetX = event.dataTransfer.getData('data/node-offset-x');
|
||||
let nodeOffsetY = event.dataTransfer.getData('data/node-offset-y');
|
||||
const nodeOffsetX = event.dataTransfer.getData('data/node-offset-x');
|
||||
const nodeOffsetY = event.dataTransfer.getData('data/node-offset-y');
|
||||
if (nodeOffsetX && nodeOffsetY) {
|
||||
mx += parseInt(nodeOffsetX);
|
||||
my += parseInt(nodeOffsetY);
|
||||
}
|
||||
|
||||
let props = {};
|
||||
let rawNodeProps = event.dataTransfer.getData('data/node-props');
|
||||
const rawNodeProps = event.dataTransfer.getData('data/node-props');
|
||||
if (rawNodeProps) {
|
||||
try {
|
||||
props = JSON.parse(rawNodeProps);
|
||||
} catch (e) { }
|
||||
} catch (e) {
|
||||
console.error('Failed to parse node dropped', e);
|
||||
}
|
||||
}
|
||||
|
||||
const pos = this.state.projectScreenToWorld(mx, my);
|
||||
@@ -48,7 +50,7 @@ export class FileDropEventManager {
|
||||
reader.onload = async (e) => {
|
||||
const buffer = e.target?.result;
|
||||
if (buffer?.constructor === ArrayBuffer) {
|
||||
const nodeType = await this.graph.registry.register(buffer);
|
||||
const nodeType = await this.graph.registry.register(nodeId, buffer);
|
||||
|
||||
this.graph.createNode({
|
||||
type: nodeType.id,
|
||||
|
||||
@@ -7,7 +7,7 @@ export class EdgeInteractionManager {
|
||||
constructor(
|
||||
private graph: GraphManager,
|
||||
private state: GraphState
|
||||
) { }
|
||||
) {}
|
||||
|
||||
private MIN_DISTANCE = 3;
|
||||
|
||||
@@ -85,7 +85,14 @@ export class EdgeInteractionManager {
|
||||
const pointAy = edge.points[i].z + edge.y1;
|
||||
const pointBx = edge.points[i + DENSITY].x + edge.x1;
|
||||
const pointBy = edge.points[i + DENSITY].z + edge.y1;
|
||||
const distance = distanceFromPointToSegment(pointAx, pointAy, pointBx, pointBy, mouseX, mouseY);
|
||||
const distance = distanceFromPointToSegment(
|
||||
pointAx,
|
||||
pointAy,
|
||||
pointBx,
|
||||
pointBy,
|
||||
mouseX,
|
||||
mouseY
|
||||
);
|
||||
if (distance < this.MIN_DISTANCE) {
|
||||
if (distance < hoveredEdgeDistance) {
|
||||
hoveredEdgeDistance = distance;
|
||||
|
||||
@@ -177,8 +177,8 @@ export class MouseEventManager {
|
||||
}
|
||||
}
|
||||
|
||||
let mx = event.clientX - this.state.rect.x;
|
||||
let my = event.clientY - this.state.rect.y;
|
||||
const mx = event.clientX - this.state.rect.x;
|
||||
const my = event.clientY - this.state.rect.y;
|
||||
|
||||
this.state.mouseDown = [mx, my];
|
||||
this.state.cameraDown[0] = this.state.cameraPosition[0];
|
||||
@@ -242,8 +242,8 @@ export class MouseEventManager {
|
||||
}
|
||||
|
||||
handleWindowMouseMove(event: MouseEvent) {
|
||||
let mx = event.clientX - this.state.rect.x;
|
||||
let my = event.clientY - this.state.rect.y;
|
||||
const mx = event.clientX - this.state.rect.x;
|
||||
const my = event.clientY - this.state.rect.y;
|
||||
|
||||
this.state.mousePosition = this.state.projectScreenToWorld(mx, my);
|
||||
this.state.hoveredNodeId = this.state.getNodeIdFromEvent(event);
|
||||
@@ -352,9 +352,9 @@ export class MouseEventManager {
|
||||
|
||||
// here we are handling panning of camera
|
||||
this.state.isPanning = true;
|
||||
let newX = this.state.cameraDown[0]
|
||||
const newX = this.state.cameraDown[0]
|
||||
- (mx - this.state.mouseDown[0]) / this.state.cameraPosition[2];
|
||||
let newY = this.state.cameraDown[1]
|
||||
const newY = this.state.cameraDown[1]
|
||||
- (my - this.state.mouseDown[1]) / this.state.cameraPosition[2];
|
||||
|
||||
this.state.cameraPosition[0] = newX;
|
||||
@@ -392,6 +392,7 @@ export class MouseEventManager {
|
||||
/ zoomRatio;
|
||||
this.state.cameraPosition[1] = this.state.mousePosition[1]
|
||||
- (this.state.mousePosition[1] - this.state.cameraPosition[1])
|
||||
/ zoomRatio, this.state.cameraPosition[2] = newZoom;
|
||||
/ zoomRatio;
|
||||
this.state.cameraPosition[2] = newZoom;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user