@kupcad/playground 0.1.6 → 0.1.8

package/README.md

@@ -55,8 +55,8 @@ browser IDE embed; it keeps nothing of the page's.
   resize them (`@kupcad/ui`'s `Splitter`), and the toolbar's Parameters button hides the
   parameters for the model's width; the sizes, and what is hidden or folded, are kept in
   `settings`, by default the page's localStorage (`localSettings`, the `playground.*` keys), and
-  how the view looks too (the pane's `view.*` keys), all followed as they are set. A page 800px
-  wide or less stacks the panes, each at a height of its own (the script a few lines, the model
+  how the view looks too (the pane's `view.*` keys), all followed as they are set. Given 800px
+  or less (a phone, or a column of a page: it goes by its own width) it stacks the panes, each at a height of its own (the script a few lines, the model
   4:3 of its width, at most 32em, the console and the parameters as tall as their lines), and
   the playground scrolls; on a phone the view's panel is under the model (`ViewerPane`'s).
 * **The console** (`@kupcad/ui`'s `ConsolePanel`, under the model): each run, what it printed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupcad/playground",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "KupCAD in the browser: a script's editor, its model and its parameters, running on the core compiled to WebAssembly in a worker. One Svelte component a page embeds.",
   "license": "AGPL-3.0-only",
   "repository": {
@@ -24,10 +24,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@kupcad/editor": "0.1.6",
-    "@kupcad/protocol": "0.1.6",
-    "@kupcad/ui": "0.1.6",
-    "@kupcad/wasm": "0.1.6"
+    "@kupcad/editor": "0.1.8",
+    "@kupcad/protocol": "0.1.8",
+    "@kupcad/ui": "0.1.8",
+    "@kupcad/wasm": "0.1.8"
   },
   "devDependencies": {
     "@codemirror/language": "^6.13.1",

package/src/Playground.svelte

@@ -27,6 +27,7 @@
     linesOfLog,
     linesOfRun,
     localSettings,
+    paneKeys,
     ParamsPanel,
     plainValues,
     problemsOf,
@@ -38,7 +39,7 @@
   import { createKupcadWorker } from '@kupcad/wasm';
   import { download } from './download.js';
   import { marksOf } from './marks.js';
-  import { Runner } from './runner.js';
+  import { DELAY_MS, Runner } from './runner.js';
 
   /** @import { Editor as EditorClass, EditorLanguage } from '@kupcad/editor' */
   /** @import { ExportFormat, Finding, ParamValues, Preview } from '@kupcad/protocol/types' */
@@ -67,6 +68,8 @@
    *   (`.kc-control` gives them its look)
    * @property {readonly ShortcutGroup[]} [shortcuts] the host's own, listed before the viewer's
    * @property {boolean} [shortcutsOpen] whether the shortcuts' dialog shows; bindable
+   * @property {number} [runDelayMs] how long the script stays as it is after an edit before it
+   *   runs (runner.js's DELAY_MS); a test gives 0, so a run that would come comes at once
    */
 
   /** @type {Props} */
@@ -82,20 +85,14 @@
     actions: hostActions,
     shortcuts = [],
     shortcutsOpen = $bindable(false),
+    runDelayMs = DELAY_MS,
   } = $props();
 
   /**
    * The settings' keys: the editor's and the parameters' widths, whether the parameters and the
    * view's panel show, the console's height and state.
    */
-  const KEYS = {
-    editor: 'playground.editor',
-    params: 'playground.params',
-    paramsOpen: 'playground.paramsOpen',
-    panelOpen: 'playground.panelOpen',
-    console: 'playground.console',
-    open: 'playground.consoleOpen',
-  };
+  const KEYS = { editor: 'playground.editor', ...paneKeys('playground') };
   /** The least the model is given, however wide the editor is made. */
   const MIN_VIEW = 320;
   const id = $props.id();
@@ -151,18 +148,22 @@
   onMount(() => {
     const made = kupcad ? null : createKupcadWorker(wasm ? { wasm, log } : { log });
     core = kupcad ?? made;
-    runner = new Runner(/** @type {KupcadApi} */ (core), {
-      onfindings: (next, of) => {
-        if (runs && of === value) findings = next;
+    runner = new Runner(
+      /** @type {KupcadApi} */ (core),
+      {
+        onfindings: (next, of) => {
+          if (runs && of === value) findings = next;
+        },
+        onpreview: (preview, of) => {
+          if (!runs) return;
+          ran = { preview, source: of };
+          notice = '';
+          consoleLines = appendLines(consoleLines, linesOfRun(preview.header, name));
+        },
+        onerror: (error) => (notice = errorText(error)),
       },
-      onpreview: (preview, of) => {
-        if (!runs) return;
-        ran = { preview, source: of };
-        notice = '';
-        consoleLines = appendLines(consoleLines, linesOfRun(preview.header, name));
-      },
-      onerror: (error) => (notice = errorText(error)),
-    });
+      { delayMs: runDelayMs },
+    );
     if (value !== '') runner.run(value, {}, { now: true, files });
     return () => {
       runner?.stop();
@@ -251,9 +252,13 @@
     runner?.run(value, values, { now: true, files });
   }
 
-  /** @param {Problem | ConsoleLine} place a problem or a console line with a line, clicked */
+  /**
+   * Shows the script where a problem or a console line is, clicked; one in a library (`file`),
+   * another file than the editor's, isn't shown.
+   * @param {{ line: number | null, column: number | null, file?: string | null }} place
+   */
   function reveal(place) {
-    if (place.line !== null) editor?.reveal(place.line, place.column ?? 1);
+    if (place.line !== null && !place.file) editor?.reveal(place.line, place.column ?? 1);
   }
 
   /** @param {ExportFormat} format */
@@ -274,113 +279,122 @@
   }
 </script>
 
-<div
-  class="kc-playground"
-  bind:clientWidth={width}
-  style:--editor-width="{editorWidth}px"
-  style:--params-width="{paramsWidth}px"
->
-  <section class="code" aria-label="Script">
-    {#key documents}
-      <Editor
-        bind:value
-        bind:editor
-        findings={marks}
-        label={name}
-        restore={restored}
-        {language}
-        onchange={edited}
-      />
-    {/key}
-    {#if notice}<p class="notice" role="alert">{notice}</p>{/if}
-  </section>
-  <Splitter
-    bind:size={editorWidth}
-    min={240}
-    max={width > 0 ? width - (paramsShown ? paramsWidth : 0) - MIN_VIEW : undefined}
-    label="Resize the script"
-    onchange={(size) => settings.set(KEYS.editor, size)}
-  />
-  <section class="view" aria-label="Model">
-    <div class="model">
-      <ViewerPane
-        model={ran?.preview.model ?? null}
-        subject="script {loads}"
-        options={viewerOptions}
-        bind:panel={() => panelOpen, (open) => settings.set(KEYS.panelOpen, open)}
-        {status}
-        {problems}
-        onproblem={reveal}
-        onscreenshot={screenshot}
-        {settings}
-        {shortcuts}
-        bind:shortcutsOpen
-      >
-        {#snippet actions()}
-          <ExportMenu kind={ran?.preview.model.kind ?? 'none'} onexport={exportChosen} />
-          {@render hostActions?.()}
-        {/snippet}
-        {#snippet toggles()}
-          {#if header && parameters.length > 0}
-            <button
-              type="button"
-              class="kc-control"
-              aria-controls="{id}-params"
-              aria-expanded={paramsOpen}
-              onclick={() => settings.set(KEYS.paramsOpen, !paramsOpen)}
-            >
-              Parameters
-            </button>
-          {/if}
-        {/snippet}
-      </ViewerPane>
-    </div>
-    {#if consoleOpen}
-      <Splitter
-        between="rows"
-        pane="after"
-        bind:size={consoleHeight}
-        min={48}
-        label="Resize the console"
-        onchange={(size) => settings.set(KEYS.console, size)}
-      />
-    {/if}
-    <ConsolePanel
-      lines={consoleLines}
-      height={consoleHeight}
-      bind:open={() => consoleOpen, (open) => settings.set(KEYS.open, open)}
-      onreveal={reveal}
-      onclear={() => (consoleLines = [])}
+<!-- The box the playground is laid out by: its own width, wide or a column of a page -->
+<div class="kc-playground-box">
+  <div
+    class="kc-playground"
+    bind:clientWidth={width}
+    style:--editor-width="{editorWidth}px"
+    style:--params-width="{paramsWidth}px"
+  >
+    <section class="code" aria-label="Script">
+      {#key documents}
+        <Editor
+          bind:value
+          bind:editor
+          findings={marks}
+          label={name}
+          restore={restored}
+          {language}
+          onchange={edited}
+        />
+      {/key}
+      {#if notice}<p class="notice" role="alert">{notice}</p>{/if}
+    </section>
+    <Splitter
+      bind:size={editorWidth}
+      min={240}
+      max={width > 0 ? width - (paramsShown ? paramsWidth : 0) - MIN_VIEW : undefined}
+      label="Resize the script"
+      onchange={(size) => settings.set(KEYS.editor, size)}
     />
-  </section>
-  {#if header && parameters.length > 0}
-    {#if paramsOpen}
-      <Splitter
-        pane="after"
-        bind:size={paramsWidth}
-        min={200}
-        max={640}
-        label="Resize the parameters"
-        onchange={(size) => settings.set(KEYS.params, size)}
+    <section class="view" aria-label="Model">
+      <div class="model">
+        <ViewerPane
+          model={ran?.preview.model ?? null}
+          subject="script {loads}"
+          options={viewerOptions}
+          bind:panel={() => panelOpen, (open) => settings.set(KEYS.panelOpen, open)}
+          {status}
+          {problems}
+          onproblem={reveal}
+          onsource={(part) => part.source && reveal({ file: null, ...part.source })}
+          onscreenshot={screenshot}
+          {settings}
+          {shortcuts}
+          bind:shortcutsOpen
+        >
+          {#snippet actions()}
+            <ExportMenu kind={ran?.preview.model.kind ?? 'none'} onexport={exportChosen} />
+            {@render hostActions?.()}
+          {/snippet}
+          {#snippet toggles()}
+            {#if header && parameters.length > 0}
+              <button
+                type="button"
+                class="kc-control"
+                aria-controls="{id}-params"
+                aria-expanded={paramsOpen}
+                onclick={() => settings.set(KEYS.paramsOpen, !paramsOpen)}
+              >
+                Parameters
+              </button>
+            {/if}
+          {/snippet}
+        </ViewerPane>
+      </div>
+      {#if consoleOpen}
+        <Splitter
+          between="rows"
+          pane="after"
+          bind:size={consoleHeight}
+          min={48}
+          label="Resize the console"
+          onchange={(size) => settings.set(KEYS.console, size)}
+        />
+      {/if}
+      <ConsolePanel
+        lines={consoleLines}
+        height={consoleHeight}
+        bind:open={() => consoleOpen, (open) => settings.set(KEYS.open, open)}
+        onreveal={reveal}
+        onclear={() => (consoleLines = [])}
       />
-    {/if}
-    <!-- Hidden, not gone: what its fields hold stays, and the toggle has it to control -->
-    <aside class="params" id="{id}-params" aria-label="Parameters" hidden={!paramsOpen}>
-      <!-- Made again for each script loaded: no field keeps what was typed in the last's -->
-      {#key loads}
-        <ParamsPanel
-          schema={header.params.schema}
-          values={header.params.values}
-          error={header.error}
-          bind:overrides
-          onchange={valuesChanged}
+    </section>
+    {#if header && parameters.length > 0}
+      {#if paramsOpen}
+        <Splitter
+          pane="after"
+          bind:size={paramsWidth}
+          min={200}
+          max={640}
+          label="Resize the parameters"
+          onchange={(size) => settings.set(KEYS.params, size)}
         />
-      {/key}
-    </aside>
-  {/if}
+      {/if}
+      <!-- Hidden, not gone: what its fields hold stays, and the toggle has it to control -->
+      <aside class="params" id="{id}-params" aria-label="Parameters" hidden={!paramsOpen}>
+        <!-- Made again for each script loaded: no field keeps what was typed in the last's -->
+        {#key loads}
+          <ParamsPanel
+            schema={header.params.schema}
+            values={header.params.values}
+            error={header.error}
+            bind:overrides
+            onchange={valuesChanged}
+          />
+        {/key}
+      </aside>
+    {/if}
+  </div>
 </div>
 
 <style>
+  .kc-playground-box {
+    height: 100%;
+    min-height: 0;
+    container-type: inline-size;
+  }
   .kc-playground {
     display: flex;
     height: 100%;
@@ -428,10 +442,10 @@
     border-radius: var(--kc-radius);
     background: var(--kc-bg);
   }
-  /* Narrow, the panes stacked, each at a height of its own, and the playground scrolled: the
-     script a few lines, the model 4:3 of its width (at most 32em), the console and the
-     parameters as tall as their lines */
-  @media (max-width: 800px) {
+  /* Narrow (a phone, a column of a page), the panes stacked, each at a height of its own, and
+     the playground scrolled: the script a few lines, the model 4:3 of its width (at most 32em),
+     the console and the parameters as tall as their lines */
+  @container (max-width: 800px) {
     .kc-playground {
       flex-direction: column;
       overflow-y: auto;

package/src/marks.js

@@ -8,7 +8,8 @@
 
 /**
  * @param {readonly Finding[]} findings `check`'s
- * @param {readonly Problem[]} problems the run's (`problemsOf(header)`): those with a line
+ * @param {readonly Problem[]} problems the run's (`problemsOf(header)`): those with a line in
+ *   the script (not in a library, `file`)
  * @returns {Mark[]}
  */
 export function marksOf(findings, problems) {
@@ -16,7 +17,8 @@ export function marksOf(findings, problems) {
   /** @type {Mark[]} */
   const placed = [];
   for (const problem of problems) {
-    if (problem.line === null || (checked && problem.severity === 'error')) continue;
+    if (problem.line === null || problem.file || (checked && problem.severity === 'error'))
+      continue;
     const { severity, message, line } = problem;
     placed.push({ severity, message, line, column: problem.column ?? 1 });
   }