diff --git a/frontend/src/components/Editor.svelte b/frontend/src/components/Editor.svelte index 7564b932..7719d568 100644 --- a/frontend/src/components/Editor.svelte +++ b/frontend/src/components/Editor.svelte @@ -16,7 +16,6 @@ import { createFullscreenState } from "@graphite/state-providers/fullscreen"; import { createNodeGraphState } from "@graphite/state-providers/node-graph"; import { createPortfolioState } from "@graphite/state-providers/portfolio"; - import { createWorkspaceState } from "@graphite/state-providers/workspace"; import MainWindow from "@graphite/components/window/MainWindow.svelte"; @@ -37,8 +36,6 @@ setContext("nodeGraph", nodeGraph); let portfolio = createPortfolioState(editor); setContext("portfolio", portfolio); - let workspace = createWorkspaceState(editor); - setContext("workspace", workspace); // Initialize managers, which are isolated systems that subscribe to backend messages to link them to browser API functionality (like JS events, IndexedDB, etc.) createClipboardManager(editor); diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte index 0b347b86..a40ece08 100644 --- a/frontend/src/components/panels/Document.svelte +++ b/frontend/src/components/panels/Document.svelte @@ -35,7 +35,7 @@ let rulerHorizontal: CanvasRuler | undefined; let rulerVertical: CanvasRuler | undefined; - let canvasContainer: HTMLDivElement | undefined; + let viewport: HTMLDivElement | undefined; const editor = getContext("editor"); const document = getContext("document"); @@ -126,7 +126,7 @@ function canvasPointerDown(e: PointerEvent) { const onEditbox = e.target instanceof HTMLDivElement && e.target.contentEditable; - if (!onEditbox) canvasContainer?.setPointerCapture(e.pointerId); + if (!onEditbox) viewport?.setPointerCapture(e.pointerId); } // Update rendered SVGs @@ -136,7 +136,7 @@ await tick(); - const placeholders = window.document.querySelectorAll("[data-canvas] [data-canvas-placeholder]"); + const placeholders = window.document.querySelectorAll("[data-viewport] [data-canvas-placeholder]"); // Replace the placeholders with the actual canvas elements placeholders.forEach((placeholder) => { const canvasName = placeholder.getAttribute("data-canvas-placeholder"); @@ -317,11 +317,11 @@ // Resize elements to render the new viewport size export function viewportResize() { - if (!canvasContainer) return; + if (!viewport) return; // Resize the canvas - canvasSvgWidth = Math.ceil(parseFloat(getComputedStyle(canvasContainer).width)); - canvasSvgHeight = Math.ceil(parseFloat(getComputedStyle(canvasContainer).height)); + canvasSvgWidth = Math.ceil(parseFloat(getComputedStyle(viewport).width)); + canvasSvgHeight = Math.ceil(parseFloat(getComputedStyle(viewport).height)); // Resize the rulers rulerHorizontal?.resize(); @@ -440,38 +440,34 @@ {#if !graphViewOverlayOpen} - - {:else} {/if} - + {#if !graphViewOverlayOpen} {/if} - - - + - - + + - - + + - + {#if cursorEyedropper} {/if} -
canvasPointerDown(e)} on:dragover={(e) => e.preventDefault()} on:drop={(e) => pasteFile(e)} bind:this={canvasContainer} data-canvas> +
canvasPointerDown(e)} on:dragover={(e) => e.preventDefault()} on:drop={(e) => pasteFile(e)} bind:this={viewport} data-viewport> {@html artboardSvg} @@ -503,11 +499,11 @@ {/if}
-
+
- + - +
@@ -707,6 +709,8 @@ style:--offset-left={(node.position?.x || 0) + (selected.includes(node.id) ? draggingNodes?.roundX || 0 : 0)} style:--offset-top={(node.position?.y || 0) + (selected.includes(node.id) ? draggingNodes?.roundY || 0 : 0)} style:--clip-path-id={`url(#${clipPathId})`} + style:--data-color={`var(--color-data-${node.primaryOutput?.dataType || "general"})`} + style:--data-color-dim={`var(--color-data-${node.primaryOutput?.dataType || "general"}-dim)`} data-node={node.id} > @@ -901,11 +905,12 @@ left: calc(var(--offset-left) * 24px); top: calc(var(--offset-top) * 24px); // TODO: Reenable the `transition` property below after dealing with all edge cases where the wires need to be updated until the transition is complete - // transition: top 0.1s cubic-bezier(0, 0, 0.2, 1), left 0.1s cubic-bezier(0, 0, 0.2, 1); // Update `DRAG_SMOOTHING_TIME` in the JS above - // TODO: Find a solution for this having no effect in Firefox due to a browser bug caused when the two ancestor - // elements, `.graph` and `.panel`, have the simultaneous pairing of `overflow: hidden` and `border-radius`. + // transition: top 0.1s cubic-bezier(0, 0, 0.2, 1), left 0.1s cubic-bezier(0, 0, 0.2, 1); // Update `DRAG_SMOOTHING_TIME` in the JS above. + // TODO: Reenable the `backdrop-filter` property once a solution can be found for the black whole-page flickering problems it causes in Chrome. + // TODO: Additionally, find a solution for this having no effect in Firefox due to a browser bug caused when the two + // ancestor elements, `.graph` and `.panel`, each have the simultaneous pairing of `overflow: hidden` and `border-radius`. // See: https://stackoverflow.com/questions/75137879/bug-with-backdrop-filter-in-firefox - backdrop-filter: blur(4px); + // backdrop-filter: blur(4px); background: rgba(0, 0, 0, 0.33); &::after { @@ -939,7 +944,7 @@ } &.previewed::after { - border: 1px dashed var(--color-data-vector); + border: 1px dashed var(--data-color); } .ports { @@ -1016,7 +1021,7 @@ .thumbnail { background: var(--color-2-mildblack); - border: 1px solid var(--color-data-vector-dim); + border: 1px solid var(--data-color-dim); border-radius: 2px; position: relative; box-sizing: border-box; @@ -1081,7 +1086,7 @@ top: calc((var(--offset-top) + 0.5) * 24px); &::after { - border: 1px solid var(--color-data-vector-dim); + border: 1px solid var(--data-color-dim); border-radius: 2px; } diff --git a/frontend/src/components/window/workspace/Workspace.svelte b/frontend/src/components/window/workspace/Workspace.svelte index 1decdaa8..52ccb1f6 100644 --- a/frontend/src/components/window/workspace/Workspace.svelte +++ b/frontend/src/components/window/workspace/Workspace.svelte @@ -5,7 +5,6 @@ import Panel from "@graphite/components/window/workspace/Panel.svelte"; import { getContext } from "svelte"; import type { Editor } from "@graphite/wasm-communication/editor"; - import type { WorkspaceState } from "@graphite/state-providers/workspace"; import type { PortfolioState } from "@graphite/state-providers/portfolio"; import type { DialogState } from "@graphite/state-providers/dialog"; import type { FrontendDocumentDetails } from "@graphite/wasm-communication/messages"; @@ -35,7 +34,6 @@ }); const editor = getContext("editor"); - const workspace = getContext("workspace"); const portfolio = getContext("portfolio"); const dialog = getContext("dialog"); diff --git a/frontend/src/io-managers/input.ts b/frontend/src/io-managers/input.ts index 6c776993..c205655a 100644 --- a/frontend/src/io-managers/input.ts +++ b/frontend/src/io-managers/input.ts @@ -136,8 +136,8 @@ export function createInputManager(editor: Editor, dialog: DialogState, document if (!viewportPointerInteractionOngoing && inFloatingMenu) return; const { target } = e; - const newInCanvas = (target instanceof Element && target.closest("[data-canvas]")) instanceof Element && !targetIsTextField(window.document.activeElement || undefined); - if (newInCanvas && !canvasFocused) { + const newInCanvasArea = (target instanceof Element && target.closest("[data-viewport], [data-graph]")) instanceof Element && !targetIsTextField(window.document.activeElement || undefined); + if (newInCanvasArea && !canvasFocused) { canvasFocused = true; app?.focus(); } @@ -148,7 +148,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, document function onPointerDown(e: PointerEvent): void { const { target } = e; - const isTargetingCanvas = target instanceof Element && target.closest("[data-canvas]"); + const isTargetingCanvas = target instanceof Element && target.closest("[data-viewport]"); const inDialog = target instanceof Element && target.closest("[data-dialog-modal] [data-floating-menu-content]"); const inTextInput = target === textToolInteractiveInputElement; @@ -194,7 +194,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, document function onWheelScroll(e: WheelEvent): void { const { target } = e; - const isTargetingCanvas = target instanceof Element && target.closest("[data-canvas]"); + const isTargetingCanvas = target instanceof Element && target.closest("[data-viewport]"); // Redirect vertical scroll wheel movement into a horizontal scroll on a horizontally scrollable element // There seems to be no possible way to properly employ the browser's smooth scrolling interpolation @@ -226,7 +226,7 @@ export function createInputManager(editor: Editor, dialog: DialogState, document // Window events function onWindowResize(container: HTMLElement): void { - const viewports = Array.from(container.querySelectorAll("[data-canvas]")); + const viewports = Array.from(container.querySelectorAll("[data-viewport]")); const boundsOfViewports = viewports.map((canvas) => { const bounds = canvas.getBoundingClientRect(); return [bounds.left, bounds.top, bounds.right, bounds.bottom]; diff --git a/frontend/src/state-providers/workspace.ts b/frontend/src/state-providers/workspace.ts deleted file mode 100644 index 56efe599..00000000 --- a/frontend/src/state-providers/workspace.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* eslint-disable max-classes-per-file */ - -import {writable} from "svelte/store"; - -import { type Editor } from "@graphite/wasm-communication/editor"; - -// eslint-disable-next-line @typescript-eslint/explicit-function-return-type -export function createWorkspaceState(editor: Editor) { - const { subscribe, update } = writable({}); - - // Set up message subscriptions on creation - - - return { - subscribe, - }; -} -export type WorkspaceState = ReturnType;