@plotwork.official/viewer 0.1.1 → 0.1.3

package/README.md

@@ -1,7 +1,28 @@
+<p align="center">
+  <a href="https://plotwork.dev">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://plotwork.dev/brand/logo/plotwork-lockup-on-dark.svg">
+      <img alt="Plotwork" src="https://plotwork.dev/brand/logo/plotwork-lockup-on-light.svg" width="240">
+    </picture>
+  </a>
+</p>
+
 # @plotwork.official/viewer
 
+<p>
+  <a href="https://www.npmjs.com/package/@plotwork.official/viewer"><img alt="npm" src="https://img.shields.io/npm/v/%40plotwork.official%2Fviewer?logo=npm&color=0f766e"></a>
+  <img alt="Provenance" src="https://img.shields.io/badge/provenance-signed-0f766e?logo=sigstore&logoColor=white">
+  <img alt="Runtime dependencies" src="https://img.shields.io/badge/runtime%20dependencies-0-0f766e?logo=dependabot&logoColor=white">
+  <img alt="TypeScript" src="https://img.shields.io/badge/types-included-3178c6?logo=typescript&logoColor=white">
+  <a href="https://github.com/plotwork-official/plotwork-sdk/blob/main/LICENSE"><img alt="MIT licence" src="https://img.shields.io/badge/licence-MIT-52514e"></a>
+</p>
+
 Embed interactive Plotwork diagrams in any page: pan and zoom, trace a box's lines, drill from an overview box into its part, light and dark, and live updates when a new version is published. A web component, `<plotwork-diagram>`, and a React component, `<PlotworkDiagram>`.
 
+<p align="center">
+  <img alt="The viewer added to an app: npm install, a PlotworkDiagram in App.tsx, then the real component tracing a box, sending a drill event, and showing a new version live" src="https://assets.plotwork.dev/media/films/sdk/readme-light.webp" width="760">
+</p>
+
 ## TL;DR
 
 | Question | Answer |
@@ -76,7 +97,7 @@ It renders as the bare element on a server and comes alive in the browser.
 | `svg` | Set the picture's text directly. |
 | `labels` | Words in your language, over the English defaults. |
 | `plotwork-load` | `{ fingerprint, hasSource }` |
-| `plotwork-change` | `{ fingerprint, previous }`: a live picture changed. |
+| `plotwork-change` | `{ fingerprint, previous }`: a new version is shown, from a live check or from `svg` set again (a hot reload). |
 | `plotwork-error` | `{ reason }`: `address`, `missing`, `not-a-picture`, `network`, `fingerprint`, or `empty`. |
 | `plotwork-drill` | `{ id, part, name }`: a box that opens a part was pressed. You decide what opens. |
 | `plotwork-trace` | `{ id }`: the traced box, or `null`. |
@@ -96,6 +117,6 @@ Set custom properties on the element: `--plotwork-height`, `--plotwork-paper`, `
 
 | Page | Why |
 |---|---|
-| [Picture contract](../../spec/picture.md) | What the viewer reads from a picture |
-| [Core](./src/core/README.md) | The parts that need no element |
-| [Element](./src/element/README.md) | How `<plotwork-diagram>` is built |
+| [Picture contract](https://github.com/plotwork-official/plotwork-sdk/blob/main/spec/picture.md) | What the viewer reads from a picture |
+| [Core](https://github.com/plotwork-official/plotwork-sdk/blob/main/packages/viewer/src/core/README.md) | The parts that need no element |
+| [Element](https://github.com/plotwork-official/plotwork-sdk/blob/main/packages/viewer/src/element/README.md) | How `<plotwork-diagram>` is built |

package/dist/element/events.d.ts

@@ -9,7 +9,7 @@ export interface LoadDetail {
     /** True when the picture carries its source, which `source()` returns. */
     hasSource: boolean;
 }
-/** A live picture changed on the server, and the new version is shown. */
+/** A new version of the picture is shown: a live picture changed on the server, or `svg` was set while a picture was shown. */
 export interface ChangeDetail {
     fingerprint: string;
     previous: string;

package/dist/element/gestures.js

@@ -18,7 +18,12 @@ export function attachGestures(canvas, control) {
     const onDown = (event) => {
         if (event.button !== 0)
             return;
-        canvas.setPointerCapture?.(event.pointerId);
+        try {
+            canvas.setPointerCapture?.(event.pointerId);
+        }
+        catch {
+            // The pointer is already gone (lifted, or not a real pointer): a drag without capture still works inside the canvas.
+        }
         const point = local(event);
         pointers.set(event.pointerId, point);
         const both = pair();

package/dist/element/plotwork-diagram.js

@@ -106,7 +106,7 @@ export function createPlotworkDiagramClass() {
         set svg(value) {
             this.#svg = typeof value === 'string' && value !== '' ? value : null;
             if (this.isConnected)
-                void this.#refresh();
+                void this.#refresh(false, this.#svg !== null);
         }
         get labels() {
             return this.#ownLabels;
@@ -149,7 +149,11 @@ export function createPlotworkDiagramClass() {
             await this.#refresh(true);
         }
         /* Loading. */
-        async #refresh(revalidate = false) {
+        /**
+         * Loads the picture again. `update` says the new text is a new version of the picture shown (a revalidation, or `svg` set while
+         * a picture is shown, as a bundler's hot reload does): it keeps the view and sends `plotwork-change` instead of `plotwork-load`.
+         */
+        async #refresh(revalidate = false, update = revalidate) {
             this.#loading?.abort();
             const loading = new AbortController();
             this.#loading = loading;
@@ -159,7 +163,7 @@ export function createPlotworkDiagramClass() {
                     return;
                 if (text === null)
                     return this.#fail('empty');
-                await this.#show(text, revalidate && this.#fingerprint !== null);
+                await this.#show(text, update && this.#fingerprint !== null);
             }
             catch (error) {
                 if (!loading.signal.aborted)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plotwork.official/viewer",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Embed interactive Plotwork diagrams in any page: a <plotwork-diagram> web component and a React component, with no runtime dependencies.",
   "license": "MIT",
   "type": "module",