@weasel-js/core 1.9.3 → 1.10.0

package/dist/features/viewports/viewportLayer.js

@@ -1,58 +1,47 @@
-import { mat3 as e } from "../../renderer/math/mat3.js";
-import { drawOneLayer as t, subscribeToSources as n } from "../../core/layers/render.js";
+import { drawOneLayer as e, subscribeToSources as t } from "../../core/layers/render.js";
+import { backgroundFillCommands as n } from "../../core/layers/backgroundFill.js";
 import { normalizeView as r } from "../../core/viewport/view.js";
+import { mat3 as i } from "@weasel-js/geom";
 //#region src/features/viewports/viewportLayer.ts
-function i(i) {
-	let { id: a, label: o, source: s, view: c, bounds: l, background: u, data: d } = i, f = typeof c == "function" ? null : r(c), p = (e, t) => f ?? r(c(e, t)), m = typeof s == "function" ? s : () => s;
+function a(a) {
+	let { id: o, label: s, source: c, view: l, bounds: u, background: d, data: f } = a, p = typeof l == "function" ? null : r(l), m = (e, t) => p ?? r(l(e, t)), h = typeof c == "function" ? c : () => c;
 	return {
-		id: a,
-		label: o,
+		id: o,
+		label: s,
 		space: "screen",
-		subscribe: n(m),
+		subscribe: t(h),
 		resolvable(e, t) {
 			return {
-				id: a,
-				view: p(e, t),
-				rect: l(e, t)
+				id: o,
+				view: m(e, t),
+				rect: u(e, t)
 			};
 		},
-		draw: (n, r, i) => {
-			let a = l(r, i), o = [];
-			u && o.push({
-				kind: "path",
-				path: {
-					kind: "rect",
-					x: 0,
-					y: 0,
-					width: a.w,
-					height: a.h
-				},
-				fill: {
-					fill: "solid",
-					color: u
-				}
-			});
-			let s = {
-				width: a.w,
-				height: a.h
-			}, c = d ? d(n) : n, f = p(r, i);
-			for (let e of m()) for (let n of t(e, c, f, s)) o.push(n);
+		draw: (t, r, a) => {
+			let o = u(r, a), s = {
+				width: o.w,
+				height: o.h
+			}, c = d ? n({
+				kind: "solid",
+				color: d
+			}, s) : [], l = f ? f(t) : t, p = m(r, a);
+			for (let t of h()) for (let n of e(t, l, p, s)) c.push(n);
 			return [{
 				kind: "group",
-				transform: e.translated(e.identity(), a.x, a.y),
+				transform: i.translated(i.identity(), o.x, o.y),
 				clip: {
 					kind: "rect",
 					x: 0,
 					y: 0,
-					width: a.w,
-					height: a.h
+					width: o.w,
+					height: o.h
 				},
-				children: o
+				children: c
 			}];
 		}
 	};
 }
 //#endregion
-export { i as createViewportLayer };
+export { a as createViewportLayer };
 
 //# sourceMappingURL=viewportLayer.js.map

package/dist/features/viewports/viewportLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"viewportLayer.js","names":["createViewportLayer","sourceData","opts","fixedView","view","normalizeView","viewAt","outer","dims","sourceAt","source","subscribeToSources","bounds","b","outerView","children","background","innerDims","innerData","data","v","layer","c","drawOneLayer","mat3"],"sources":["../../../src/features/viewports/viewportLayer.ts"],"sourcesContent":["import type { DrawCommand, GroupDrawCommand } from '../../renderer';\nimport { drawOneLayer, subscribeToSources, type Dims, type RenderLayer } from 'core/layers/render';\nimport { normalizeView, type View } from 'core/viewport/view';\nimport { mat3, type GlMat3 } from '../../renderer/math/mat3';\nimport type { ResolvableView } from './viewResolver';\n\n/**\n * @experimental\n *\n * A \"viewport node\" — a screen-space rectangle on the outer canvas that\n * re-renders one or more `source` layers through an *inner* `View`, then\n * clips them to its rect.\n *\n * Use cases: picture-in-picture, minimap, scrolling container, multi-angle\n * preview. The same source layer can be rendered through multiple viewports\n * (different inner views) without duplicating data — viewports are pure\n * lenses on the source.\n *\n * **Inner view semantics.** The source layers draw as if the inner view\n * filled the screen at world-origin — each is wrapped in `viewToMat3(view)`\n * by the same `drawOneLayer` the outer canvas uses. The viewport then\n * translates the result so that the inner view's origin lands at `bounds.x,\n * bounds.y` and clips to `(bounds.w, bounds.h)`. Caller chooses\n * `innerView.{x,y,scale}` to control which slice of source-world is shown.\n *\n * **This layer paints; it does not take input.** `<CanvasView>` is built on\n * it and routes the pointer stream through the kit's gesture dispatcher —\n * declare one of those for a viewport that should be clickable. `resolvable`\n * is the seam it uses: feed it to `createViewResolver` to route input to a\n * raw viewport yourself.\n *\n * **Screen-space source layers** (e.g., debug overlays, selection chrome)\n * draw in the viewport's own CSS-pixel space: their coords are relative to\n * the rect's top-left, and they clip to it, rather than to the outer canvas.\n */\nexport interface CreateViewportLayerOpts<TData, TSource = TData> {\n  id: string;\n  label: string;\n  /** Layers re-rendered through `view`. Each receives `(data, view, dims)`\n   *  exactly as the outer Canvas would call it.\n   *\n   *  Pass a thunk for a stack that is assembled elsewhere — it is read fresh\n   *  on every `draw`, the same way a thunked `view` is. */\n  source: readonly RenderLayer<TSource>[] | (() => readonly RenderLayer<TSource>[]);\n  /**\n   * The `data` the source layers receive, derived from what the outer canvas\n   * passed down. Omit and they get the outer canvas's own.\n   *\n   * A viewport showing the same scene through a second camera wants its own\n   * per-view helpers here — selection, chrome state and gesture previews that\n   * belong to *this* view rather than the one hosting it.\n   */\n  data?: (outer: TData) => TSource;\n  /**\n   * The inner view. Pass a thunk for a camera that moves — it is read fresh\n   * on every `draw` and `resolvable`, so the two cannot\n   * disagree about where the viewport is looking mid-gesture.\n   *\n   * The thunk receives the outer view and dims, so a derived camera\n   * (parallax, node-anchored scroll) is a function of the one hosting it.\n   */\n  view: View | ((outer: View, dims: Dims) => View);\n  /** Where on the outer canvas this viewport is painted, in screen-space\n   *  CSS pixels. Recomputed every frame so the rect can track an outer\n   *  pose, follow a corner, etc. */\n  bounds: (outer: View, dims: Dims) => { x: number; y: number; w: number; h: number };\n  /** Optional opaque background painted before the source layers. Useful\n   *  to keep the underlying outer canvas from showing through when the\n   *  inner view leaves part of the viewport empty. */\n  background?: string;\n}\n\n/**\n * @experimental\n *\n * A {@link RenderLayer} that can also describe itself as a routing target.\n * Returned by {@link createViewportLayer}.\n */\nexport interface ViewportLayer<TData> extends RenderLayer<TData> {\n  /**\n   * This viewport as a routing candidate for {@link createViewResolver} —\n   * its inner view and the rect it paints into for the given outer frame.\n   *\n   * Pass the `outer` view and `dims` the frame was drawn with: `bounds` is a\n   * pure function of those, so this reproduces the exact rect that was\n   * painted rather than a remembered one.\n   */\n  resolvable(outer: View, dims: Dims): ResolvableView;\n}\n\n/** Build a layer that renders other layers through a second view, inside a\n *  sub-region of the canvas — a minimap, an inset, a magnifier. */\nexport function createViewportLayer<TData, TSource = TData>(\n  opts: CreateViewportLayerOpts<TData, TSource>,\n): ViewportLayer<TData> {\n  const { id, label, source, view, bounds, background, data: sourceData } = opts;\n  const fixedView = typeof view === 'function' ? null : normalizeView(view);\n  const viewAt = (outer: View, dims: Dims): View =>\n    fixedView ?? normalizeView((view as (outer: View, dims: Dims) => View)(outer, dims));\n  const sourceAt = typeof source === 'function' ? source : () => source;\n  return {\n    id,\n    label,\n    space: 'screen',\n    subscribe: subscribeToSources(sourceAt),\n    resolvable(outer, dims) {\n      return { id, view: viewAt(outer, dims), rect: bounds(outer, dims) };\n    },\n    draw: (data, outerView, dims): DrawCommand[] => {\n      const b = bounds(outerView, dims);\n      // Inner content drawn through `view`, then translated so the inner\n      // view's screen origin lines up with the viewport top-left.\n      const children: DrawCommand[] = [];\n      if (background) {\n        children.push({\n          kind: 'path',\n          path: { kind: 'rect', x: 0, y: 0, width: b.w, height: b.h },\n          fill: { fill: 'solid', color: background },\n        });\n      }\n      const innerDims = { width: b.w, height: b.h };\n      // The cast holds up because `TSource` defaults to `TData`: without a\n      // thunk the two are the same type by construction.\n      const innerData = sourceData ? sourceData(data) : (data as unknown as TSource);\n      const v = viewAt(outerView, dims);\n      for (const layer of sourceAt()) {\n        for (const c of drawOneLayer(layer, innerData, v, innerDims)) children.push(c);\n      }\n      const transform: GlMat3 = mat3.translated(mat3.identity(), b.x, b.y);\n      const group: GroupDrawCommand = {\n        kind: 'group',\n        transform,\n        clip: { kind: 'rect', x: 0, y: 0, width: b.w, height: b.h },\n        children,\n      };\n      return [group];\n    },\n  };\n}\n"],"mappings":";;;;AA4FA,SAAgBA,EACd,GACsB;CACtB,IAAM,EAAE,OAAI,UAAO,WAAQ,SAAM,WAAQ,eAAY,MAAMC,MAAeC,GACpEC,IAAY,OAAOC,KAAS,aAAa,OAAOC,EAAcD,CAAI,GAClEE,KAAU,GAAa,MAC3BH,KAAaE,EAAeD,EAA2CG,GAAOC,CAAI,CAAC,GAC/EC,IAAW,OAAOC,KAAW,aAAaA,UAAeA;CAC/D,OAAO;EACL;EACA;EACA,OAAO;EACP,WAAWC,EAAmBF,CAAQ;EACtC,WAAW,GAAO,GAAM;GACtB,OAAO;IAAE;IAAI,MAAMH,EAAOC,GAAOC,CAAI;IAAG,MAAMI,EAAOL,GAAOC,CAAI;GAAE;EACpE;EACA,OAAO,GAAM,GAAW,MAAwB;GAC9C,IAAMK,IAAID,EAAOE,GAAWN,CAAI,GAG1BO,IAA0B,CAAC;GACjC,AAAIC,KACFD,EAAS,KAAK;IACZ,MAAM;IACN,MAAM;KAAE,MAAM;KAAQ,GAAG;KAAG,GAAG;KAAG,OAAOF,EAAE;KAAG,QAAQA,EAAE;IAAE;IAC1D,MAAM;KAAE,MAAM;KAAS,OAAOG;IAAW;GAC3C,CAAC;GAEH,IAAMC,IAAY;IAAE,OAAOJ,EAAE;IAAG,QAAQA,EAAE;GAAE,GAGtCK,IAAYjB,IAAaA,EAAWkB,CAAI,IAAKA,GAC7CC,IAAId,EAAOQ,GAAWN,CAAI;GAChC,KAAK,IAAMa,KAASZ,EAAS,GAC3B,KAAK,IAAMa,KAAKC,EAAaF,GAAOH,GAAWE,GAAGH,CAAS,GAAG,EAAS,KAAKK,CAAC;GAS/E,OAAO,CAAC;IALN,MAAM;IACN,WAHwBE,EAAK,WAAWA,EAAK,SAAS,GAAGX,EAAE,GAAGA,EAAE,CAGhE;IACA,MAAM;KAAE,MAAM;KAAQ,GAAG;KAAG,GAAG;KAAG,OAAOA,EAAE;KAAG,QAAQA,EAAE;IAAE;IAC1D;GAEM,CAAK;EACf;CACF;AACF"}
+{"version":3,"file":"viewportLayer.js","names":["createViewportLayer","sourceData","opts","fixedView","view","normalizeView","viewAt","outer","dims","sourceAt","source","subscribeToSources","bounds","b","outerView","innerDims","children","background","backgroundFillCommands","innerData","data","v","layer","c","drawOneLayer","mat3"],"sources":["../../../src/features/viewports/viewportLayer.ts"],"sourcesContent":["import type { DrawCommand, GroupDrawCommand } from '@weasel-js/renderer';\nimport { drawOneLayer, subscribeToSources, type Dims, type RenderLayer } from 'core/layers/render';\nimport { backgroundFillCommands } from 'core/layers/backgroundFill';\nimport { normalizeView, type View } from 'core/viewport/view';\nimport { mat3, type GlMat3 } from '@weasel-js/geom';\nimport type { ResolvableView } from './viewResolver';\n\n/**\n * @experimental\n *\n * A \"viewport node\" — a screen-space rectangle on the outer canvas that\n * re-renders one or more `source` layers through an *inner* `View`, then\n * clips them to its rect. The same source layer can be rendered through\n * multiple viewports without duplicating data.\n *\n * **Inner view semantics.** The source layers draw as if the inner view\n * filled the screen at world-origin. The viewport then translates the result\n * so that the inner view's origin lands at `bounds.x, bounds.y` and clips to\n * `(bounds.w, bounds.h)`.\n *\n * **This layer paints; it does not take input.** `<CanvasView>` is built on\n * it and routes the pointer stream through the kit's gesture dispatcher —\n * declare one of those for a viewport that should be clickable. `resolvable`\n * is the seam it uses: feed it to `createViewResolver` to route input to a\n * raw viewport yourself.\n *\n * **Screen-space source layers** (e.g., debug overlays, selection chrome)\n * draw in the viewport's own CSS-pixel space: their coords are relative to\n * the rect's top-left, and they clip to it, rather than to the outer canvas.\n */\nexport interface CreateViewportLayerOpts<TData, TSource = TData> {\n  id: string;\n  label: string;\n  /** Layers re-rendered through `view`. Each receives `(data, view, dims)`\n   *  exactly as the outer Canvas would call it.\n   *\n   *  Pass a thunk for a stack that is assembled elsewhere — it is read fresh\n   *  on every `draw`, the same way a thunked `view` is. */\n  source: readonly RenderLayer<TSource>[] | (() => readonly RenderLayer<TSource>[]);\n  /**\n   * The `data` the source layers receive, derived from what the outer canvas\n   * passed down. Omit and they get the outer canvas's own. A viewport showing\n   * the same scene through a second camera wants its own per-view helpers\n   * here — selection, chrome state and gesture previews.\n   */\n  data?: (outer: TData) => TSource;\n  /**\n   * The inner view. Pass a thunk for a camera that moves — it is read fresh\n   * on every `draw` and `resolvable`, so the two cannot\n   * disagree about where the viewport is looking mid-gesture.\n   *\n   * The thunk receives the outer view and dims, so a derived camera\n   * (parallax, node-anchored scroll) is a function of the one hosting it.\n   */\n  view: View | ((outer: View, dims: Dims) => View);\n  /** Where on the outer canvas this viewport is painted, in screen-space\n   *  CSS pixels. Recomputed every frame. */\n  bounds: (outer: View, dims: Dims) => { x: number; y: number; w: number; h: number };\n  /** Optional opaque background painted before the source layers. */\n  background?: string;\n}\n\n/**\n * @experimental\n *\n * A {@link RenderLayer} that can also describe itself as a routing target.\n * Returned by {@link createViewportLayer}.\n */\nexport interface ViewportLayer<TData> extends RenderLayer<TData> {\n  /**\n   * This viewport as a routing candidate for {@link createViewResolver} —\n   * its inner view and the rect it paints into for the given outer frame.\n   *\n   * Pass the `outer` view and `dims` the frame was drawn with: `bounds` is a\n   * pure function of those, so this reproduces the exact rect that was\n   * painted rather than a remembered one.\n   */\n  resolvable(outer: View, dims: Dims): ResolvableView;\n}\n\n/** Build a layer that renders other layers through a second view, inside a\n *  sub-region of the canvas — a minimap, an inset, a magnifier. */\nexport function createViewportLayer<TData, TSource = TData>(\n  opts: CreateViewportLayerOpts<TData, TSource>,\n): ViewportLayer<TData> {\n  const { id, label, source, view, bounds, background, data: sourceData } = opts;\n  const fixedView = typeof view === 'function' ? null : normalizeView(view);\n  const viewAt = (outer: View, dims: Dims): View =>\n    fixedView ?? normalizeView((view as (outer: View, dims: Dims) => View)(outer, dims));\n  const sourceAt = typeof source === 'function' ? source : () => source;\n  return {\n    id,\n    label,\n    space: 'screen',\n    subscribe: subscribeToSources(sourceAt),\n    resolvable(outer, dims) {\n      return { id, view: viewAt(outer, dims), rect: bounds(outer, dims) };\n    },\n    draw: (data, outerView, dims): DrawCommand[] => {\n      const b = bounds(outerView, dims);\n      // Inner content drawn through `view`, then translated so the inner\n      // view's screen origin lines up with the viewport top-left.\n      const innerDims = { width: b.w, height: b.h };\n      const children: DrawCommand[] = background\n        ? backgroundFillCommands({ kind: 'solid', color: background }, innerDims)\n        : [];\n      // The cast holds up because `TSource` defaults to `TData`: without a\n      // thunk the two are the same type by construction.\n      const innerData = sourceData ? sourceData(data) : (data as unknown as TSource);\n      const v = viewAt(outerView, dims);\n      for (const layer of sourceAt()) {\n        for (const c of drawOneLayer(layer, innerData, v, innerDims)) children.push(c);\n      }\n      const transform: GlMat3 = mat3.translated(mat3.identity(), b.x, b.y);\n      const group: GroupDrawCommand = {\n        kind: 'group',\n        transform,\n        clip: { kind: 'rect', x: 0, y: 0, width: b.w, height: b.h },\n        children,\n      };\n      return [group];\n    },\n  };\n}\n"],"mappings":";;;;;AAkFA,SAAgBA,EACd,GACsB;CACtB,IAAM,EAAE,OAAI,UAAO,WAAQ,SAAM,WAAQ,eAAY,MAAMC,MAAeC,GACpEC,IAAY,OAAOC,KAAS,aAAa,OAAOC,EAAcD,CAAI,GAClEE,KAAU,GAAa,MAC3BH,KAAaE,EAAeD,EAA2CG,GAAOC,CAAI,CAAC,GAC/EC,IAAW,OAAOC,KAAW,aAAaA,UAAeA;CAC/D,OAAO;EACL;EACA;EACA,OAAO;EACP,WAAWC,EAAmBF,CAAQ;EACtC,WAAW,GAAO,GAAM;GACtB,OAAO;IAAE;IAAI,MAAMH,EAAOC,GAAOC,CAAI;IAAG,MAAMI,EAAOL,GAAOC,CAAI;GAAE;EACpE;EACA,OAAO,GAAM,GAAW,MAAwB;GAC9C,IAAMK,IAAID,EAAOE,GAAWN,CAAI,GAG1BO,IAAY;IAAE,OAAOF,EAAE;IAAG,QAAQA,EAAE;GAAE,GACtCG,IAA0BC,IAC5BC,EAAuB;IAAE,MAAM;IAAS,OAAOD;GAAW,GAAGF,CAAS,IACtE,CAAC,GAGCI,IAAYlB,IAAaA,EAAWmB,CAAI,IAAKA,GAC7CC,IAAIf,EAAOQ,GAAWN,CAAI;GAChC,KAAK,IAAMc,KAASb,EAAS,GAC3B,KAAK,IAAMc,KAAKC,EAAaF,GAAOH,GAAWE,GAAGN,CAAS,GAAG,EAAS,KAAKQ,CAAC;GAS/E,OAAO,CAAC;IALN,MAAM;IACN,WAHwBE,EAAK,WAAWA,EAAK,SAAS,GAAGZ,EAAE,GAAGA,EAAE,CAGhE;IACA,MAAM;KAAE,MAAM;KAAQ,GAAG;KAAG,GAAG;KAAG,OAAOA,EAAE;KAAG,QAAQA,EAAE;IAAE;IAC1D;GAEM,CAAK;EACf;CACF;AACF"}