@velumo/renderer-dom 0.1.0-beta.0

package/dist/background-renderer.d.ts

@@ -0,0 +1,16 @@
+import type { Background } from "@velumo/core";
+export interface BackgroundRendererElement {
+    setAttribute(name: string, value: string): void;
+    appendChild(child: BackgroundRendererElement): void;
+    readonly style?: {
+        setProperty(name: string, value: string): void;
+    };
+    textContent: string;
+    parentNode?: unknown;
+}
+export interface BackgroundRendererFactories {
+    createElement(tagName: string): BackgroundRendererElement;
+    setStyleProperty(element: BackgroundRendererElement, property: string, value: string): void;
+}
+export declare function renderBackground(background: Background, factories: BackgroundRendererFactories): BackgroundRendererElement;
+//# sourceMappingURL=background-renderer.d.ts.map

package/dist/background-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-renderer.d.ts","sourceRoot":"","sources":["../src/background-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAiC,MAAM,cAAc,CAAC;AAE9E,MAAM,WAAW,yBAAyB;IACxC,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAChD,WAAW,CAAC,KAAK,EAAE,yBAAyB,GAAG,IAAI,CAAC;IACpD,QAAQ,CAAC,KAAK,CAAC,EAAE;QAAE,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IACpE,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,2BAA2B;IAC1C,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,yBAAyB,CAAC;IAC1D,gBAAgB,CACd,OAAO,EAAE,yBAAyB,EAClC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,GACZ,IAAI,CAAC;CACT;AAqBD,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,2BAA2B,GACrC,yBAAyB,CAmC3B"}

package/dist/background-renderer.js

@@ -0,0 +1,41 @@
+function stopsToCss(stops) {
+    return stops
+        .map((stop) => stop.at === undefined ? stop.color : `${stop.color} ${stop.at}%`)
+        .join(", ");
+}
+function layerToGradientCss(layer) {
+    const stops = stopsToCss(layer.stops);
+    if (layer.type === "linear") {
+        return `linear-gradient(${layer.angle ?? 180}deg, ${stops})`;
+    }
+    const shape = layer.shape ?? "circle";
+    const x = layer.position?.x ?? 50;
+    const y = layer.position?.y ?? 50;
+    return `radial-gradient(${shape} at ${x}% ${y}%, ${stops})`;
+}
+export function renderBackground(background, factories) {
+    const container = factories.createElement("div");
+    container.setAttribute("data-velumo-background", "");
+    factories.setStyleProperty(container, "position", "absolute");
+    factories.setStyleProperty(container, "inset", "0");
+    factories.setStyleProperty(container, "z-index", "-1");
+    if (background.color !== undefined) {
+        factories.setStyleProperty(container, "background-color", background.color);
+    }
+    for (const layer of background.layers ?? []) {
+        const layerElement = factories.createElement("div");
+        layerElement.setAttribute("data-velumo-background-layer", "");
+        factories.setStyleProperty(layerElement, "position", "absolute");
+        factories.setStyleProperty(layerElement, "inset", "0");
+        factories.setStyleProperty(layerElement, "background", layerToGradientCss(layer));
+        if (layer.opacity !== undefined) {
+            factories.setStyleProperty(layerElement, "opacity", String(layer.opacity));
+        }
+        if (layer.blend !== undefined && layer.blend !== "normal") {
+            factories.setStyleProperty(layerElement, "mix-blend-mode", layer.blend);
+        }
+        container.appendChild(layerElement);
+    }
+    return container;
+}
+//# sourceMappingURL=background-renderer.js.map

package/dist/background-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-renderer.js","sourceRoot":"","sources":["../src/background-renderer.ts"],"names":[],"mappings":"AAmBA,SAAS,UAAU,CAAC,KAA8B;IAChD,OAAO,KAAK;SACT,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACZ,IAAI,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,GAAG,CACjE;SACA,IAAI,CAAC,IAAI,CAAC,CAAC;AAChB,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAsB;IAChD,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACtC,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,mBAAmB,KAAK,CAAC,KAAK,IAAI,GAAG,QAAQ,KAAK,GAAG,CAAC;IAC/D,CAAC;IACD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,QAAQ,CAAC;IACtC,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC;IAClC,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC;IAClC,OAAO,mBAAmB,KAAK,OAAO,CAAC,KAAK,CAAC,MAAM,KAAK,GAAG,CAAC;AAC9D,CAAC;AAED,MAAM,UAAU,gBAAgB,CAC9B,UAAsB,EACtB,SAAsC;IAEtC,MAAM,SAAS,GAAG,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjD,SAAS,CAAC,YAAY,CAAC,wBAAwB,EAAE,EAAE,CAAC,CAAC;IACrD,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;IAC9D,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC;IACpD,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IAEvD,IAAI,UAAU,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;QACnC,SAAS,CAAC,gBAAgB,CAAC,SAAS,EAAE,kBAAkB,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC9E,CAAC;IAED,KAAK,MAAM,KAAK,IAAI,UAAU,CAAC,MAAM,IAAI,EAAE,EAAE,CAAC;QAC5C,MAAM,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACpD,YAAY,CAAC,YAAY,CAAC,8BAA8B,EAAE,EAAE,CAAC,CAAC;QAC9D,SAAS,CAAC,gBAAgB,CAAC,YAAY,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;QACjE,SAAS,CAAC,gBAAgB,CAAC,YAAY,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC;QACvD,SAAS,CAAC,gBAAgB,CACxB,YAAY,EACZ,YAAY,EACZ,kBAAkB,CAAC,KAAK,CAAC,CAC1B,CAAC;QACF,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAChC,SAAS,CAAC,gBAAgB,CACxB,YAAY,EACZ,SAAS,EACT,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CACtB,CAAC;QACJ,CAAC;QACD,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC1D,SAAS,CAAC,gBAAgB,CAAC,YAAY,EAAE,gBAAgB,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QAC1E,CAAC;QACD,SAAS,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IACtC,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/dist/camera-adapter.d.ts

@@ -0,0 +1,16 @@
+import type { ResolvedView } from "@velumo/runtime";
+export interface DomCameraRoot {
+    style: {
+        transform: string;
+    };
+}
+/**
+ * Apply a percent-world camera view to the world layer.
+ *
+ * The world layer fills the viewport (width/height 100%) with
+ * `transform-origin: 0 0`, and its content is positioned in 0-100 percent.
+ * To center world point (x, y) at `zoom`, translate by (50 - zoom*x)% /
+ * (50 - zoom*y)% (percent of the layer's own box = the viewport) then scale.
+ */
+export declare function applyCameraToDomRoot(root: DomCameraRoot, view: ResolvedView): void;
+//# sourceMappingURL=camera-adapter.d.ts.map

package/dist/camera-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"camera-adapter.d.ts","sourceRoot":"","sources":["../src/camera-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,aAAa,EACnB,IAAI,EAAE,YAAY,GACjB,IAAI,CAGN"}

package/dist/camera-adapter.js

@@ -0,0 +1,13 @@
+/**
+ * Apply a percent-world camera view to the world layer.
+ *
+ * The world layer fills the viewport (width/height 100%) with
+ * `transform-origin: 0 0`, and its content is positioned in 0-100 percent.
+ * To center world point (x, y) at `zoom`, translate by (50 - zoom*x)% /
+ * (50 - zoom*y)% (percent of the layer's own box = the viewport) then scale.
+ */
+export function applyCameraToDomRoot(root, view) {
+    const { x, y, zoom } = view;
+    root.style.transform = `translate(${50 - zoom * x}%, ${50 - zoom * y}%) scale(${zoom})`;
+}
+//# sourceMappingURL=camera-adapter.js.map

package/dist/camera-adapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"camera-adapter.js","sourceRoot":"","sources":["../src/camera-adapter.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,MAAM,UAAU,oBAAoB,CAClC,IAAmB,EACnB,IAAkB;IAElB,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,aAAa,EAAE,GAAG,IAAI,GAAG,CAAC,MAAM,EAAE,GAAG,IAAI,GAAG,CAAC,YAAY,IAAI,GAAG,CAAC;AAC1F,CAAC"}

package/dist/default-theme.d.ts

@@ -0,0 +1,5 @@
+import type { Theme } from "@velumo/core";
+export declare const defaultThemeId = "velumo-default";
+export declare const defaultTheme: Theme;
+export declare const defaultThemeCss: string;
+//# sourceMappingURL=default-theme.d.ts.map

package/dist/default-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-theme.d.ts","sourceRoot":"","sources":["../src/default-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAE1C,eAAO,MAAM,cAAc,mBAAmB,CAAC;AAE/C,eAAO,MAAM,YAAY,EAAE,KA4E1B,CAAC;AAEF,eAAO,MAAM,eAAe,QAmfpB,CAAC"}