@kupcad/ui 0.0.0-stage → 0.1.1

package/src/base64.js

@@ -0,0 +1,16 @@
+// Bytes as base64, which the page's messages carry a screenshot in.
+
+/** How many bytes go to String.fromCharCode at once: it takes only so many arguments. */
+const CHUNK_BYTES = 0x8000;
+
+/**
+ * @param {Uint8Array} bytes
+ * @returns {string}
+ */
+export function toBase64(bytes) {
+  let text = '';
+  for (let at = 0; at < bytes.length; at += CHUNK_BYTES) {
+    text += String.fromCharCode(...bytes.subarray(at, at + CHUNK_BYTES));
+  }
+  return btoa(text);
+}

package/src/console.js

@@ -0,0 +1,78 @@
+// The console's lines, as OpenSCAD's console keeps them: each run of the script shown (a line
+// saying it ran and how it went, then what it printed, its warnings and its error, a line of
+// the script beside each that names one) and the host's own log, in the order they came, the
+// oldest dropped past MAX_LINES.
+
+import { describeRun, runStatusOf } from './run-status.js';
+
+/** @import { FrameHeader } from '@kupcad/protocol/types' */
+
+/** The most lines kept: past them the oldest go. */
+export const MAX_LINES = 2000;
+
+/**
+ * A line of the console: of a run (`run`, what it printed, a warning, its error) or of the
+ * host's log; with the script's line and column it names (1-based, the column in UTF-8 bytes),
+ * null for none.
+ * @typedef {object} ConsoleLine
+ * @property {'run' | 'output' | 'warning' | 'error' | 'log'} kind
+ * @property {string} text
+ * @property {number | null} line
+ * @property {number | null} column
+ */
+
+/**
+ * @param {ConsoleLine['kind']} kind
+ * @param {string} text
+ * @param {number | null} [line]
+ * @param {number | null} [column]
+ * @returns {ConsoleLine}
+ */
+const lineOf = (kind, text, line = null, column = null) => ({ kind, text, line, column });
+
+/**
+ * `text`'s lines, without the end its last one has.
+ * @param {string} text
+ */
+const linesIn = (text) => text.replace(/\r?\n$/, '').split(/\r?\n/);
+
+/**
+ * The lines of the run whose frame is `header`, of the script called `name`.
+ * @param {FrameHeader} header
+ * @param {string} name
+ * @returns {ConsoleLine[]}
+ */
+export function linesOfRun(header, name) {
+  const lines = [lineOf('run', `${name}: ${describeRun(runStatusOf(header))}`)];
+  if (header.output) lines.push(...linesIn(header.output).map((text) => lineOf('output', text)));
+  if (header.outputCut) {
+    lines.push(lineOf('log', 'It printed more than a run keeps: the rest is left out.'));
+  }
+  for (const { message, line, column } of header.warnings) {
+    lines.push(lineOf('warning', `Warning: ${message}`, line, column));
+  }
+  const { error } = header;
+  if (error) lines.push(lineOf('error', `Error: ${error.message}`, error.line, error.column));
+  return lines;
+}
+
+/**
+ * The lines of the host's log in `text`.
+ * @param {string} text
+ * @returns {ConsoleLine[]}
+ */
+export const linesOfLog = (text) =>
+  linesIn(text)
+    .filter((line) => line.trim() !== '')
+    .map((line) => lineOf('log', line));
+
+/**
+ * `lines` with `added` after them, at most MAX_LINES: the oldest go.
+ * @param {readonly ConsoleLine[]} lines
+ * @param {readonly ConsoleLine[]} added
+ * @returns {ConsoleLine[]}
+ */
+export function appendLines(lines, added) {
+  const all = [...lines, ...added];
+  return all.length > MAX_LINES ? all.slice(all.length - MAX_LINES) : all;
+}

package/src/controls.css

@@ -0,0 +1,183 @@
+/*
+  A control as the panels draw theirs (a button, a select, a field), by the --kc-* tokens: what a
+  host gives its own beside them to look alike, a toolbar's actions say. A panel's own styles are
+  scoped to its markup, so a host's buttons in a panel's toolbar got none of them. A range input
+  and a checkbox are drawn here too (.kc-range, .kc-check), the same in each browser and webview:
+  left to the browser, a slider is its own blue, and `accent-color` puts a white tick on the
+  orange. Classes, not elements: a host's page keeps its own inputs as they are.
+*/
+.kc-control {
+  font: inherit;
+  color: var(--kc-fg);
+  background: var(--kc-input-bg);
+  border: 1px solid var(--kc-control-border);
+  border-radius: var(--kc-radius);
+  padding: 2px 8px;
+}
+
+button.kc-control,
+select.kc-control {
+  cursor: pointer;
+}
+
+button.kc-control:hover:not(:disabled) {
+  background: var(--kc-hover);
+}
+
+/*
+  A toggle while on, and a pane's toggle while the pane shows: tinted, its edge in the accent.
+  Several are on at once (a view's edges, axes and grid, the panes shown), and filled they made
+  a bar of solid orange; the fill is kept for what there is one of: the bar's leading action.
+*/
+.kc-control[aria-pressed='true'],
+.kc-control[aria-expanded='true'] {
+  color: var(--kc-fg);
+  background: var(--kc-accent-subtle);
+  border-color: var(--kc-accent);
+}
+
+button.kc-control[aria-pressed='true']:hover:not(:disabled),
+button.kc-control[aria-expanded='true']:hover:not(:disabled) {
+  background: var(--kc-accent-subtle);
+  box-shadow: inset 0 0 0 1px var(--kc-accent);
+}
+
+/* The one action a bar leads with (Save): the accent's fill */
+.kc-control.kc-primary {
+  font-weight: 600;
+  color: var(--kc-accent-fg);
+  background: var(--kc-accent);
+  border-color: var(--kc-accent);
+}
+
+button.kc-control.kc-primary:hover:not(:disabled) {
+  background: var(--kc-accent-hover);
+  border-color: var(--kc-accent-hover);
+}
+
+/* With nothing to do, as any control with nothing to do: faded orange read as a colour of its own */
+.kc-control.kc-primary:disabled {
+  color: var(--kc-fg);
+  background: var(--kc-input-bg);
+  border-color: var(--kc-control-border);
+}
+
+.kc-control:disabled,
+.kc-range:disabled,
+.kc-check:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.kc-control:focus-visible,
+.kc-check:focus-visible {
+  outline: 2px solid var(--kc-focus);
+  outline-offset: 1px;
+}
+
+/*
+  A range input: the track filled to the thumb in the accent. WebKit and Blink draw no fill of
+  their own, so the panel sets --kc-range-fill (how far along the thumb is, `fillOf`) as it
+  moves; Firefox draws it as the range's progress.
+*/
+.kc-range {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 18px;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+.kc-range::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 2px;
+  background: linear-gradient(
+    to right,
+    var(--kc-accent) 0 var(--kc-range-fill, 0%),
+    var(--kc-track) var(--kc-range-fill, 0%) 100%
+  );
+}
+.kc-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  margin-top: -5px;
+  border-radius: 50%;
+  background: var(--kc-accent);
+  border: 2px solid var(--kc-bg);
+  box-shadow: 0 0 0 1px var(--kc-accent);
+}
+.kc-range::-moz-range-track {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--kc-track);
+}
+.kc-range::-moz-range-progress {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--kc-accent);
+}
+.kc-range::-moz-range-thumb {
+  box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--kc-accent);
+  border: 2px solid var(--kc-bg);
+  box-shadow: 0 0 0 1px var(--kc-accent);
+}
+.kc-range:hover:not(:disabled)::-webkit-slider-thumb {
+  background: var(--kc-accent-hover);
+}
+.kc-range:hover:not(:disabled)::-moz-range-thumb {
+  background: var(--kc-accent-hover);
+}
+/* Its focus is the thumb's ring: an outline round the whole track says less of where it is */
+.kc-range:focus-visible {
+  outline: none;
+}
+.kc-range:focus-visible::-webkit-slider-thumb {
+  box-shadow:
+    0 0 0 1px var(--kc-accent),
+    0 0 0 4px var(--kc-focus);
+}
+.kc-range:focus-visible::-moz-range-thumb {
+  box-shadow:
+    0 0 0 1px var(--kc-accent),
+    0 0 0 4px var(--kc-focus);
+}
+
+/* A checkbox: the brand black tick on the accent once checked */
+.kc-check {
+  -webkit-appearance: none;
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  vertical-align: middle;
+  background: var(--kc-input-bg);
+  border: 1px solid var(--kc-control-border);
+  border-radius: var(--kc-radius);
+  cursor: pointer;
+}
+.kc-check::before {
+  content: '';
+  width: 8px;
+  height: 4px;
+  border-left: 2px solid var(--kc-accent-fg);
+  border-bottom: 2px solid var(--kc-accent-fg);
+  transform: translateY(-1px) rotate(-45deg);
+  visibility: hidden;
+}
+.kc-check:checked {
+  background: var(--kc-accent);
+  border-color: var(--kc-accent);
+}
+.kc-check:checked::before {
+  visibility: visible;
+}

package/src/index.js

@@ -0,0 +1,40 @@
+// @kupcad/ui, for Svelte: the viewer (Viewer), the panels a KupCAD host shows beside its editor,
+// and a language server's preview (PreviewPanel, over its viewport socket, connectViewport).
+// Styled by the --kc-* tokens of `@kupcad/ui/tokens.css` (or `@kupcad/ui/vscode.css` in VS
+// Code's webview), which a page loads. The viewer for any host, Svelte or not, is
+// `@kupcad/ui/viewer`.
+
+export { default as ConsolePanel } from './ConsolePanel.svelte';
+export { default as ExportMenu } from './ExportMenu.svelte';
+export { default as ParamsPanel } from './ParamsPanel.svelte';
+export { default as PreviewPanel } from './PreviewPanel.svelte';
+export { default as ShortcutsDialog } from './ShortcutsDialog.svelte';
+export { default as Splitter } from './Splitter.svelte';
+export { default as Viewer } from './Viewer.svelte';
+export { default as ViewerPane } from './ViewerPane.svelte';
+export { appendLines, linesOfLog, linesOfRun } from './console.js';
+export { fillOf } from './range.js';
+export { problemsOf, runStatusOf } from './run-status.js';
+export { localSettings, memorySettings, sizeSetting } from './settings.js';
+export { VIEWER_SHORTCUTS } from './shortcuts.js';
+export { watchTokens } from './theme.js';
+export { plainValues } from './values.svelte.js';
+export {
+  ENVIRONMENTS,
+  PROJECTIONS,
+  VIEW_DEFAULTS,
+  VIEW_KEYS,
+  viewChoice,
+  viewChoices,
+} from './view-settings.js';
+// What a settings page offers of the view: the viewer's render modes
+export { RENDER_MODES } from './viewer/index.js';
+export { connectViewport } from './viewport-socket.js';
+
+/** @typedef {import('./console.js').ConsoleLine} ConsoleLine */
+/** @typedef {import('./run-status.js').Problem} Problem */
+/** @typedef {import('./run-status.js').RunStatus} RunStatus */
+/** @typedef {import('./settings.js').Settings} Settings */
+/** @typedef {import('./shortcuts.js').ShortcutGroup} ShortcutGroup */
+/** @typedef {import('./view-settings.js').ViewChoices} ViewChoices */
+/** @typedef {import('./viewport-socket.js').ViewportEvents} ViewportEvents */

package/src/measures.js

@@ -0,0 +1,52 @@
+// What the viewer's tooltip says of what is under the pointer: a part's name, copies, volume and
+// size, a face's area and the way it faces, in the model's millimetres.
+
+/** @import { Part } from '@kupcad/protocol/types' */
+/** @import { Face } from './viewer/types.js' */
+
+/** From this many mm³ a volume is said in cm³, as a slicer says it. */
+const MM3_PER_CM3 = 1000;
+
+/**
+ * `n` with at most `digits` decimals, the trailing ones left out, thousands grouped.
+ * @param {number} n
+ * @param {number} digits
+ */
+const decimal = (n, digits) => n.toLocaleString('en', { maximumFractionDigits: digits });
+
+/** @param {number} mm */
+export const formatLength = (mm) => decimal(mm, 2);
+
+/** @param {number} mm2 */
+export const formatArea = (mm2) => `${decimal(mm2, 1)} mm²`;
+
+/** @param {number} mm3 */
+export const formatVolume = (mm3) =>
+  mm3 >= MM3_PER_CM3 ? `${decimal(mm3 / MM3_PER_CM3, 2)} cm³` : `${decimal(mm3, 1)} mm³`;
+
+/**
+ * A part as its tooltip names it: its name, and how many copies when more than one.
+ * @param {Pick<Part, 'name' | 'count'>} part
+ */
+export const partTitle = (part) => (part.count > 1 ? `${part.name} ×${part.count}` : part.name);
+
+/**
+ * A part's volume and size (width × depth × height), or null when they weren't measured.
+ * @param {Pick<Part, 'volume' | 'size'>} part
+ * @returns {string | null}
+ */
+export function partMeasures(part) {
+  if (part.volume === null || part.volume === undefined || !part.size) return null;
+  return `${formatVolume(part.volume)} · ${part.size.map(formatLength).join(' × ')} mm`;
+}
+
+/**
+ * A face as its tooltip says it: flat (with the axis it faces along, or its way) or curved, and
+ * its area.
+ * @param {Face} face
+ */
+export function faceLine(face) {
+  if (!face.flat) return `Curved face · ${formatArea(face.area)}`;
+  const way = face.facing ?? `(${(face.normal ?? []).map((v) => v.toFixed(2)).join(', ')})`;
+  return `Flat face · ${formatArea(face.area)} · facing ${way}`;
+}