@kupcad/ui 0.0.0-stage → 0.1.1

package/src/viewer/wheel.js

@@ -0,0 +1,55 @@
+// What a turn of the wheel (or two fingers on a trackpad) does, by the key held, as Orca Slicer
+// has it. Alone it zooms, and so does a pinch, which a browser sends as the wheel with Ctrl.
+// With Shift it pans, as Shift with two fingers does in Orca on a Mac. With Option (Alt) it
+// moves the section, as in Orca. With Cmd it turns the view: Orca has nothing for it there. With
+// the middle button held it does nothing, as in Orca: that button is the wheel, which turns a
+// little as it is pressed. Plain math over the event's numbers: the viewer does what it says.
+
+import { ZOOM_STEP } from './camera.js';
+
+/** A line of scrolling, in CSS pixels, for a browser that counts in lines. */
+const LINE_PX = 16;
+/**
+ * How much a pixel of scrolling zooms, as the log of the factor: three.js's OrbitControls',
+ * which zoomed with the wheel before.
+ */
+const SCROLL_ZOOM_RATE = -Math.log(0.95) / 100;
+/** A pinch comes in small steps: each pixel of it zooms ten times as much, as in OrbitControls. */
+const PINCH_ZOOM_RATE = SCROLL_ZOOM_RATE * 10;
+/** The most one turn zooms by, as the log of the factor: a key's step. */
+const MOST_ZOOM = Math.log(ZOOM_STEP);
+/** The middle button, in a mouse event's `buttons`. */
+const MIDDLE_BUTTON = 4;
+
+/**
+ * What a turn of the wheel does: zooms in by `factor` (out, below 1); pans or turns the view by
+ * `x` and `y` CSS pixels, as far as a page's content would scroll; or moves the section by `y`
+ * pixels, down as it grows.
+ * @typedef {{ kind: 'zoom', factor: number }
+ *   | { kind: 'pan' | 'orbit', x: number, y: number }
+ *   | { kind: 'section', y: number }} WheelGesture
+ */
+
+/**
+ * What `event` does, or nothing (null).
+ * @param {Pick<WheelEvent, 'deltaX' | 'deltaY' | 'deltaMode' | 'buttons' | 'shiftKey' | 'metaKey' | 'altKey' | 'ctrlKey'>} event
+ * @param {number} pagePx how far a page of scrolling is, in CSS pixels: the canvas's height
+ * @returns {WheelGesture | null}
+ */
+export function wheelGesture(event, pagePx) {
+  if (event.buttons & MIDDLE_BUTTON) return null;
+  const unit =
+    event.deltaMode === WheelEvent.DOM_DELTA_LINE
+      ? LINE_PX
+      : event.deltaMode === WheelEvent.DOM_DELTA_PAGE
+        ? pagePx
+        : 1;
+  const x = event.deltaX * unit;
+  const y = event.deltaY * unit;
+  if (event.shiftKey) return x || y ? { kind: 'pan', x, y } : null;
+  if (event.metaKey) return x || y ? { kind: 'orbit', x, y } : null;
+  if (event.altKey) return y ? { kind: 'section', y } : null;
+  if (!y) return null;
+  const rate = event.ctrlKey ? PINCH_ZOOM_RATE : SCROLL_ZOOM_RATE;
+  return { kind: 'zoom', factor: Math.exp(Math.min(MOST_ZOOM, Math.max(-MOST_ZOOM, -y * rate))) };
+}

package/src/viewport-socket.js

@@ -0,0 +1,64 @@
+// The language server's viewport socket, as the page reads it: each binary message a preview
+// frame (@kupcad/protocol's readFrame). A socket that closes (the server restarted, or wasn't
+// up yet) is opened again, a little later each time.
+
+import { errorText, readFrame } from '@kupcad/protocol';
+
+/** @import { Preview } from '@kupcad/protocol/types' */
+
+/** The first wait before opening a closed socket again, and the longest, in milliseconds. */
+export const RETRY_MS = { first: 250, most: 5000 };
+
+/**
+ * @typedef {object} ViewportEvents
+ * @property {(preview: Preview) => void} frame a frame arrived
+ * @property {() => void} open the socket opened: the host asks the server for a frame
+ * @property {(open: boolean) => void} state it opened or closed
+ * @property {(message: string) => void} problem a frame this page can't read
+ */
+
+/**
+ * Connects to the socket at `url`, until the returned function is called.
+ * @param {string} url
+ * @param {ViewportEvents} on
+ * @param {{ WebSocket?: typeof WebSocket, setTimeout?: typeof setTimeout }} [platform]
+ * @returns {() => void} closes it for good
+ */
+export function connectViewport(url, on, platform = {}) {
+  const Socket = platform.WebSocket ?? globalThis.WebSocket;
+  const later = platform.setTimeout ?? globalThis.setTimeout;
+  let wait = RETRY_MS.first;
+  let closed = false;
+  /** @type {WebSocket | null} */
+  let socket = null;
+
+  const open = () => {
+    if (closed) return;
+    socket = new Socket(url);
+    socket.binaryType = 'arraybuffer';
+    socket.addEventListener('open', () => {
+      wait = RETRY_MS.first;
+      on.state(true);
+      on.open();
+    });
+    socket.addEventListener('message', ({ data }) => {
+      if (!(data instanceof ArrayBuffer)) return;
+      try {
+        on.frame(readFrame(data));
+      } catch (error) {
+        on.problem(errorText(error));
+      }
+    });
+    socket.addEventListener('close', () => {
+      on.state(false);
+      if (closed) return;
+      later(open, wait);
+      wait = Math.min(wait * 2, RETRY_MS.most);
+    });
+  };
+  open();
+  return () => {
+    closed = true;
+    socket?.close();
+  };
+}

package/src/vscode.css

@@ -0,0 +1,49 @@
+/*
+  The --kc-* tokens as VS Code's theme sets its own, for the extension's webview: the panels and
+  the viewer follow the editor's theme, not KupCAD's brand, which would fight the editor around
+  them. The defaults underneath give what VS Code has no token for (the radius, the gap). The
+  accent is a button's colours, a pair VS Code keeps legible; orange as text becomes a link's
+  colour, a focus ring VS Code's own.
+*/
+@import './tokens.css';
+
+:root {
+  --kc-font: var(--vscode-font-family);
+  --kc-font-size: var(--vscode-font-size);
+  --kc-bg: var(--vscode-sideBar-background, var(--vscode-editor-background));
+  --kc-fg: var(--vscode-foreground);
+  --kc-muted: var(--vscode-descriptionForeground);
+  --kc-border: var(--vscode-panel-border, var(--vscode-widget-border));
+  --kc-control-border: var(
+    --vscode-input-border,
+    var(--vscode-checkbox-border, var(--vscode-widget-border))
+  );
+  --kc-input-bg: var(--vscode-input-background);
+  --kc-hover: var(--vscode-list-hoverBackground);
+  --kc-accent: var(--vscode-button-background);
+  --kc-accent-fg: var(--vscode-button-foreground);
+  --kc-accent-hover: var(--vscode-button-hoverBackground, var(--vscode-button-background));
+  --kc-accent-text: var(--vscode-textLink-foreground);
+  --kc-accent-subtle: var(--vscode-list-inactiveSelectionBackground);
+  --kc-focus: var(--vscode-focusBorder);
+  --kc-track: var(--vscode-scrollbarSlider-background, var(--vscode-panel-border));
+  --kc-error: var(--vscode-errorForeground);
+  --kc-warning: var(--vscode-editorWarning-foreground);
+  --kc-section-bg: var(
+    --vscode-sideBarSectionHeader-background,
+    var(--vscode-editorWidget-background)
+  );
+  --kc-section-fg: var(--vscode-sideBarSectionHeader-foreground, var(--vscode-foreground));
+
+  --kc-viewer-background: var(--vscode-editor-background);
+  --kc-viewer-grid: var(--vscode-editorIndentGuide-background1, var(--vscode-panel-border));
+  --kc-viewer-plate: var(--vscode-editorWidget-background);
+  --kc-viewer-edges: var(--vscode-editorLineNumber-foreground);
+  /* Lines on the background (a wireframe, a drawing): the text's colour, which every theme sets apart from it */
+  --kc-viewer-wire: var(--vscode-editor-foreground);
+  --kc-viewer-selection: var(--vscode-focusBorder);
+  --kc-viewer-cap: var(--vscode-editorError-foreground);
+  --kc-viewer-ghost: var(--vscode-editorInfo-foreground);
+  /* A colour of its own, as no other token's: a chart's, which every theme sets */
+  --kc-viewer-highlight: var(--vscode-charts-purple);
+}