@kupcad/playground 0.1.2 → 0.1.3

package/README.md

@@ -24,8 +24,8 @@ the PWA) embeds; it keeps nothing of the page's.
   (`.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; the core, the console and the
-  layout stay as they are.
+  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
@@ -44,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).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupcad/playground",
-  "version": "0.1.2",
+  "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.2",
-    "@kupcad/protocol": "0.1.2",
-    "@kupcad/ui": "0.1.2",
-    "@kupcad/wasm": "0.1.2"
+    "@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

@@ -104,7 +104,10 @@
 
   /** 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. */
+  /**
+   * 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. */
@@ -153,7 +156,8 @@
 
   /**
    * 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.
+   * 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) {
@@ -225,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}
@@ -348,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);
     }