@kupcad/playground 0.1.1 → 0.1.3

package/README.md

@@ -22,6 +22,10 @@ the PWA) embeds; it keeps nothing of the page's.
   is called with the script at each of the person's edits (not with the `source` it was given),
   and an `actions` snippet puts the host's own buttons in the model's toolbar, after Export
   (`.kc-control` gives them its look). It keeps no draft: a page loaded again shows `source`.
+* **For a host that gives it other scripts** (examples to choose from): `load(script)` (the
+  component's, by `bind:this`) puts one in the editor in place of the person's, which the
+  editor's undo takes back, and runs it at once on its own values, its model framed whole (an
+  edit's keeps the camera); the core, the console and the layout stay as they are.
 * **When it runs** (`runner.js`, `Runner`): once the script stays as it is for a moment after an
   edit (`DELAY_MS`, 300), at once when a parameter's value changes or it starts. A run under
   way when the next starts is stopped (the worker drops or ends its call), so what is shown is
@@ -40,8 +44,10 @@ the PWA) embeds; 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 narrow page
-  stacks the panes.
+  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
+  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
   (`puts`, `print`, `inspect`), its warnings and its error, a line naming a place taking the
   editor there, and the core's log (the worker module's stdout and stderr).
@@ -74,8 +80,8 @@ pnpm test:browser   # the smoke test: the page built, in headless Chromium
 
 The runner's timing against a stand-in for the core, the marks, the downloads, and the component
 on the real core (`@kupcad/wasm`'s `testCore`) under jsdom: the model shown, the findings and the
-run's error marked, a problem clicked revealing its line, an edit and a value running again, an
-export downloaded and one refused. In a browser, with the real worker, the smoke test
+run's error marked, a problem clicked revealing its line, an edit and a value running again, a
+script loaded in place of the one shown, an export downloaded and one refused. In a browser, with the real worker, the smoke test
 (`smoke/playground.spec.js`): the page built (`vite build`, the worker an ES module as a site's
 build makes it) and served, the example run to Ready, its parts and parameters shown, `param`
 highlighted as a function, and a script that raises saying so.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupcad/playground",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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.1",
-    "@kupcad/protocol": "0.1.1",
-    "@kupcad/ui": "0.1.1",
-    "@kupcad/wasm": "0.1.1"
+    "@kupcad/editor": "0.1.3",
+    "@kupcad/protocol": "0.1.3",
+    "@kupcad/ui": "0.1.3",
+    "@kupcad/wasm": "0.1.3"
   },
   "devDependencies": {
     "@codemirror/lint": "^6.9.7",

package/src/Playground.svelte

@@ -9,9 +9,9 @@
   bars between the panes resize them, and the toolbar's Parameters button hides theirs (for the
   model's width); the sizes, what is hidden or folded, and how the view looks are kept in
   `settings` (the page's localStorage by default), and follow them as they are set. It keeps
-  nothing else of the page's: the page gives the script it starts with (`source`), and is told
-  of each edit of it (`onsource`), for its own buttons in the toolbar (`actions`) to share or
-  save it.
+  nothing else of the page's: the page gives the script it starts with (`source`) and another
+  in its place (`load`), and is told of each edit of it (`onsource`), for its own buttons in the
+  toolbar (`actions`) to share or save it.
 -->
 <script>
   import { onMount, untrack } from 'svelte';
@@ -102,8 +102,13 @@
   /** The playground's width, once laid out. */
   let width = $state(0);
 
-  /** The script as the editor has it: the user's, from the one the page gave at first. */
+  /** The script as the editor has it: the user's, from the one the page gave last. */
   let value = $state(untrack(() => source));
+  /**
+   * How many scripts the page loaded: the parameters' fields are made again for each, and the
+   * view frames each one's model whole (another subject), where an edit's keeps the camera.
+   */
+  let loads = $state(0);
   let editor = $state(/** @type {EditorClass | null} */ (null));
   /** `check`'s findings of the script as it is, none while it changed since. */
   let findings = $state(/** @type {Finding[]} */ ([]));
@@ -149,6 +154,20 @@
     };
   });
 
+  /**
+   * Puts `script` in the editor in place of the one there (the editor's undo takes that back),
+   * and runs it at once on its own values (none the panel set for the last), its model framed
+   * whole.
+   * @param {string} script another the page gives: an example, a script it opened
+   */
+  export function load(script) {
+    value = script;
+    findings = [];
+    overrides = {};
+    loads += 1;
+    runner?.run(script, {}, { now: true });
+  }
+
   /** @param {string} line of the core's log, which goes to the console */
   function log(line) {
     consoleLines = appendLines(consoleLines, linesOfLog(line));
@@ -210,6 +229,7 @@
     <div class="model">
       <ViewerPane
         model={ran?.preview.model ?? null}
+        subject="script {loads}"
         options={viewerOptions}
         bind:panel={() => panelOpen, (open) => settings.set(KEYS.panelOpen, open)}
         {status}
@@ -270,13 +290,16 @@
     {/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}>
-      <ParamsPanel
-        schema={header.params.schema}
-        values={header.params.values}
-        error={header.error}
-        bind:overrides
-        onchange={valuesChanged}
-      />
+      <!-- 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>
@@ -330,26 +353,35 @@
     background: var(--kc-bg);
   }
   /* A narrow page: the script over the model, the parameters under it */
+  /* 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) {
     .kc-playground {
       flex-direction: column;
+      overflow-y: auto;
     }
     /* Stacked, each the page's width: the columns' bars have nothing to resize */
     .kc-playground > :global(.kc-splitter.columns) {
       display: none;
     }
     .code {
-      flex-basis: 40%;
+      flex: none;
       width: auto;
+      height: 20em;
       border-right: none;
       border-bottom: 1px solid var(--kc-border);
     }
-    .view {
-      flex-basis: 60%;
-      min-height: 20em;
+    .view,
+    .model {
+      flex: none;
+    }
+    .model {
+      --kc-model-min-height: min(75cqw, 32em);
     }
     .params {
       width: auto;
+      overflow: visible;
       border-left: none;
       border-top: 1px solid var(--kc-border);
     }