@realnation/builder-shared-sdk 2.4.1 → 2.4.2

package/dist/souvenir/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/souvenir/render.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAKH,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EAEpB,MAAM,YAAY,CAAC;AA6CpB;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,GAAG,OAAO,CAI7E;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAO5F;AA6ND,gFAAgF;AAChF,wBAAsB,iBAAiB,CACrC,GAAG,EAAE,MAAM,EACX,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GACrC,OAAO,CAAC,iBAAiB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAoBhE;AAED,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,EAAE,CAOtD;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAYnE;AAED,iFAAiF;AACjF,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,GAAG,MAAM,CAMpF;AAED;;;;;;GAMG;AACH,wBAAsB,cAAc,CAClC,IAAI,EAAE,YAAY,EAClB,MAAM,GAAE,cAAmB,EAC3B,OAAO,GAAE,eAAoB,GAC5B,OAAO,CAAC,iBAAiB,CAAC,CAsE5B"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/souvenir/render.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAKH,OAAO,EAIL,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EAEpB,MAAM,YAAY,CAAC;AA6CpB;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,GAAG,OAAO,CAI7E;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAO5F;AAyPD,gFAAgF;AAChF,wBAAsB,iBAAiB,CACrC,GAAG,EAAE,MAAM,EACX,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GACrC,OAAO,CAAC,iBAAiB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAoBhE;AAED,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,EAAE,CAStD;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAYnE;AAED,iFAAiF;AACjF,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,GAAG,MAAM,CAMpF;AAED;;;;;;GAMG;AACH,wBAAsB,cAAc,CAClC,IAAI,EAAE,YAAY,EAClB,MAAM,GAAE,cAAmB,EAC3B,OAAO,GAAE,eAAoB,GAC5B,OAAO,CAAC,iBAAiB,CAAC,CAsE5B"}

package/dist/souvenir/render.js

@@ -12,7 +12,7 @@
 import { computeImageFitDrawRect, hashSignature, normalizeImageFit } from './imageFit.js';
 import { parseSouvenirOutputId } from './outputId.js';
 import { layoutLines, wrapText } from './text.js';
-import { isSouvenirSizeAllowed, SouvenirError, SOUVENIR_ELEMENT_TYPES, } from './types.js';
+import { isSouvenirInteractive, isSouvenirSizeAllowed, SouvenirError, SOUVENIR_ELEMENT_TYPES, } from './types.js';
 const DEFAULT_LINE_HEIGHT = 1.2;
 const TRANSPARENT = 'TRANSPARENT';
 const num = (value, fallback = 0) => {
@@ -144,39 +144,55 @@ function fontOf(property, fontSize) {
     const quoted = /[",]/.test(family) || !/\s/.test(family) ? family : `"${family}"`;
     return `${style}${weight}${fontSize}px ${quoted}`;
 }
-function drawText(ctx, property, geo, content) {
+/**
+ * Lays the text out inside the box already in element space. `padX` is the side
+ * padding the runner leaves on shape text.
+ */
+function drawTextInBox(c, property, radius, width, height, content, padX = 0) {
     const fontSize = num(property['font-size'], 14);
     if (fontSize <= 0 || !content)
         return;
     const lineHeight = num(property['line-height'], DEFAULT_LINE_HEIGHT) || DEFAULT_LINE_HEIGHT;
     const align = (property['alignment'] || 'center');
     const vAlign = (property['v-alignment'] || 'middle');
+    const boxWidth = Math.max(0, width - padX * 2);
+    if (boxWidth <= 0)
+        return;
+    c.save();
+    roundedRectPath(c, 0, 0, width, height, radius);
+    c.clip();
+    c.font = fontOf(property, fontSize);
+    c.textBaseline = 'alphabetic';
+    c.textAlign = 'left';
+    c.fillStyle = colorOf(property['color']) || '#000000';
+    const measure = (text) => c.measureText(text).width;
+    const lines = wrapText(content, boxWidth, measure);
+    const placed = layoutLines(lines, { x: padX, y: 0, width: boxWidth, height }, fontSize, lineHeight, align, vAlign, measure);
+    const formatting = Array.isArray(property['formatting']) ? property['formatting'] : [];
+    const underline = formatting.includes('Underline');
+    const strike = formatting.includes('Strikethrough');
+    for (const line of placed) {
+        if (!line.text)
+            continue;
+        c.fillText(line.text, line.x, line.y);
+        if (underline)
+            c.fillRect(line.x, line.y + fontSize * 0.12, line.width, Math.max(1, fontSize / 16));
+        if (strike)
+            c.fillRect(line.x, line.y - fontSize * 0.28, line.width, Math.max(1, fontSize / 16));
+    }
+    c.restore();
+}
+function drawText(ctx, property, geo, content) {
+    if (!content)
+        return;
     inElementSpace(ctx, geo, (c, width, height) => {
         fillBackground(c, property, width, height, geo.radius, false);
-        roundedRectPath(c, 0, 0, width, height, geo.radius);
-        c.clip();
-        c.font = fontOf(property, fontSize);
-        c.textBaseline = 'alphabetic';
-        c.textAlign = 'left';
-        c.fillStyle = colorOf(property['color']) || '#000000';
-        const measure = (text) => c.measureText(text).width;
-        const lines = wrapText(content, width, measure);
-        const placed = layoutLines(lines, { x: 0, y: 0, width, height }, fontSize, lineHeight, align, vAlign, measure);
-        const formatting = Array.isArray(property['formatting']) ? property['formatting'] : [];
-        const underline = formatting.includes('Underline');
-        const strike = formatting.includes('Strikethrough');
-        for (const line of placed) {
-            if (!line.text)
-                continue;
-            c.fillText(line.text, line.x, line.y);
-            if (underline)
-                c.fillRect(line.x, line.y + fontSize * 0.12, line.width, Math.max(1, fontSize / 16));
-            if (strike)
-                c.fillRect(line.x, line.y - fontSize * 0.28, line.width, Math.max(1, fontSize / 16));
-        }
+        drawTextInBox(c, property, geo.radius, width, height, content);
     });
     inElementSpace(ctx, geo, (c, width, height) => strokeBorder(c, property, width, height, geo.radius, false));
 }
+/** The runner pads shape text by 4px on each side; match it so the wrap is the same. */
+const SHAPE_TEXT_PADDING = 4;
 function drawImage(ctx, property, geo, image) {
     inElementSpace(ctx, geo, (c, width, height) => {
         fillBackground(c, property, width, height, geo.radius, false);
@@ -233,6 +249,11 @@ function drawShape(ctx, type, property, geo) {
         // Rectangles and ellipses take their outline from the border settings, like
         // on a live page; a new shape stores a 1px grey border with style None.
         strokeBorder(c, property, width, height, geo.radius, ellipse);
+        // Text typed into a shape (a Button preset is a shape with text) is part of
+        // the picture, the same as it is on a live page.
+        const content = typeof property['content'] === 'string' ? property['content'] : '';
+        if (content)
+            drawTextInBox(c, property, geo.radius, width, height, content, SHAPE_TEXT_PADDING);
     });
 }
 /** Loads one image with EXIF orientation applied, or throws a SouvenirError. */
@@ -265,6 +286,8 @@ export function drawOrder(page) {
     return Object.keys(page.elements ?? {})
         .filter((eid) => SOUVENIR_ELEMENT_TYPES.includes(page.elements[eid]?.type))
         .filter((eid) => !isHidden(page.properties?.[eid] ?? {}))
+        // Controls stay on screen over the picture, so they are not in it
+        .filter((eid) => !isSouvenirInteractive(page.elements[eid]?.type, page.properties?.[eid] ?? {}))
         .map((eid, index) => ({ eid, index, z: num((page.properties?.[eid] ?? {})['zIndex']) }))
         .sort((a, b) => (a.z === b.z ? a.index - b.index : a.z - b.z))
         .map((entry) => entry.eid);

package/dist/souvenir/types.d.ts

@@ -14,6 +14,19 @@
 /** Element types the composer draws. Anything else on the page is skipped. */
 export declare const SOUVENIR_ELEMENT_TYPES: readonly ["bg", "image", "image-frame", "text", "shape-rect", "shape-ellipse", "shape-line"];
 export type SouvenirElementType = (typeof SOUVENIR_ELEMENT_TYPES)[number];
+/**
+ * Element types that do something when the participant taps them, or that count
+ * down. On a page the module composes and displays itself, the runner keeps
+ * these on screen over the picture, so the composer must leave them out or the
+ * same thing would appear twice (`qik-sense-runner/src/services/pageRender.ts`
+ * keeps the same list).
+ */
+export declare const SOUVENIR_INTERACTIVE_TYPES: readonly ["timeout", "button", "qr", "link"];
+/**
+ * True when this element is a control rather than part of the picture: an
+ * interactive type, or any element the operator gave a target to.
+ */
+export declare function isSouvenirInteractive(type: string | undefined | null, property?: SouvenirProperty): boolean;
 /** Anything the Builder stores for one element. Values arrive untyped from the API. */
 export type SouvenirProperty = Record<string, unknown>;
 /** One element as the Builder's `detail.elements` records it. */

package/dist/souvenir/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/souvenir/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,8EAA8E;AAC9E,eAAO,MAAM,sBAAsB,8FAQzB,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1E,uFAAuF;AACvF,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEvD,iEAAiE;AACjE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,MAAM,WAAW,YAAY;IAC3B,mFAAmF;IACnF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAC1C,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;CAC9C;AAED;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAEvE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;AAErD,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,wGAAwG;IACxG,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,iBAAiB,CAAC;IAC1B,oFAAoF;IACpF,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;CACzC;AAED,0EAA0E;AAC1E,qBAAa,aAAc,SAAQ,KAAK;aAEpB,IAAI,EAChB,QAAQ,GACR,UAAU,GACV,WAAW,GACX,oBAAoB,GACpB,cAAc,GACd,eAAe;gBANH,IAAI,EAChB,QAAQ,GACR,UAAU,GACV,WAAW,GACX,oBAAoB,GACpB,cAAc,GACd,eAAe,EACnB,OAAO,EAAE,MAAM;CAKlB;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,iBAAiB,WAAa,CAAC;AAE5C,oFAAoF;AACpF,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,CAK5E;AAED,4DAA4D;AAC5D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,EAAE,CAW5E"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/souvenir/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,8EAA8E;AAC9E,eAAO,MAAM,sBAAsB,8FAQzB,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1E;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B,8CAA+C,CAAC;AAKvF;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,QAAQ,GAAE,gBAAqB,GAAG,OAAO,CAG/G;AAED,uFAAuF;AACvF,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEvD,iEAAiE;AACjE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,MAAM,WAAW,YAAY;IAC3B,mFAAmF;IACnF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IAC1C,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;CAC9C;AAED;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAEvE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;AAErD,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,wGAAwG;IACxG,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,iBAAiB,CAAC;IAC1B,oFAAoF;IACpF,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;CACzC;AAED,0EAA0E;AAC1E,qBAAa,aAAc,SAAQ,KAAK;aAEpB,IAAI,EAChB,QAAQ,GACR,UAAU,GACV,WAAW,GACX,oBAAoB,GACpB,cAAc,GACd,eAAe;gBANH,IAAI,EAChB,QAAQ,GACR,UAAU,GACV,WAAW,GACX,oBAAoB,GACpB,cAAc,GACd,eAAe,EACnB,OAAO,EAAE,MAAM;CAKlB;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,iBAAiB,WAAa,CAAC;AAE5C,oFAAoF;AACpF,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,CAK5E;AAED,4DAA4D;AAC5D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,EAAE,CAW5E"}

package/dist/souvenir/types.js

@@ -21,6 +21,25 @@ export const SOUVENIR_ELEMENT_TYPES = [
     'shape-ellipse',
     'shape-line',
 ];
+/**
+ * Element types that do something when the participant taps them, or that count
+ * down. On a page the module composes and displays itself, the runner keeps
+ * these on screen over the picture, so the composer must leave them out or the
+ * same thing would appear twice (`qik-sense-runner/src/services/pageRender.ts`
+ * keeps the same list).
+ */
+export const SOUVENIR_INTERACTIVE_TYPES = ['timeout', 'button', 'qr', 'link'];
+/** Property keys that turn any element into something tappable. */
+const INTERACTIVE_PROPERTIES = ['connection-key', 'url', 'key-code'];
+/**
+ * True when this element is a control rather than part of the picture: an
+ * interactive type, or any element the operator gave a target to.
+ */
+export function isSouvenirInteractive(type, property = {}) {
+    if (SOUVENIR_INTERACTIVE_TYPES.includes(String(type ?? '')))
+        return true;
+    return INTERACTIVE_PROPERTIES.some((key) => String(property?.[key] ?? '').trim() !== '');
+}
 /** Thrown for every refusal the caller is expected to handle and show. */
 export class SouvenirError extends Error {
     code;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realnation/builder-shared-sdk",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "type": "module",
   "private": false,
   "exports": {