@joewinke/jatui 0.1.31 → 0.2.0

package/dist/components/graph/GraphCanvas.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import '@xyflow/svelte/dist/style.css'
+
+	import { SvelteFlow, Background, Controls, MiniMap, type Node, type Edge } from '@xyflow/svelte'
+	import JatuiNode from './JatuiNode.svelte'
+	import { watchAndApplyTheme } from './theme.js'
+
+	import type { NodeEventWithPointer } from '@xyflow/svelte'
+
+	interface Props {
+		/** Flow nodes — bindable for interactive graphs. */
+		nodes: Node[]
+		/** Flow edges — bindable for interactive graphs. */
+		edges: Edge[]
+		/** When true, disables pan/zoom/selection interactions. */
+		readonly?: boolean
+		/** Fit the graph to the viewport on first render. */
+		fitView?: boolean
+		/** Show the minimap panel. */
+		minimap?: boolean
+		/** Fired when the user clicks a node. */
+		onNodeClick?: NodeEventWithPointer<MouseEvent | TouchEvent>
+		/** Height of the canvas container (CSS value). Defaults to 100%. */
+		height?: string
+	}
+
+	let {
+		nodes = $bindable([]),
+		edges = $bindable([]),
+		readonly = false,
+		fitView = true,
+		minimap = false,
+		onNodeClick,
+		height = '100%',
+	}: Props = $props()
+
+	const nodeTypes = { jatuiNode: JatuiNode }
+
+	let flowEl: HTMLDivElement | null = $state(null)
+	let stopWatch: (() => void) | null = null
+
+	$effect(() => {
+		if (!flowEl) return
+		stopWatch?.()
+		stopWatch = watchAndApplyTheme(flowEl)
+		return () => {
+			stopWatch?.()
+			stopWatch = null
+		}
+	})
+</script>
+
+<div class="graph-canvas" style:height bind:this={flowEl}>
+	<SvelteFlow
+		{nodes}
+		{edges}
+		{nodeTypes}
+		{fitView}
+		nodesDraggable={!readonly}
+		nodesConnectable={!readonly}
+		elementsSelectable={!readonly}
+		panOnDrag={!readonly}
+		zoomOnScroll={!readonly}
+		onnodeclick={onNodeClick as NodeEventWithPointer<MouseEvent | TouchEvent> | undefined}
+		fitViewOptions={{ padding: 0.2 }}
+		attributionPosition="bottom-right"
+	>
+		<Background gap={16} size={1} />
+		<Controls showLock={false} />
+		{#if minimap}
+			<MiniMap />
+		{/if}
+	</SvelteFlow>
+</div>
+
+<style>
+	.graph-canvas {
+		width: 100%;
+		position: relative;
+		/* Contain the xyflow absolute-positioned layers */
+		overflow: hidden;
+		border-radius: var(--jatui-radius-box);
+		border: var(--jatui-border-w) solid var(--color-base-300, oklch(0.9 0 0));
+		background: var(--color-base-100, oklch(0.98 0 0));
+	}
+
+	/* Strip xyflow's built-in node box-shadow (house rule: no at-rest shadows) */
+	:global(.svelte-flow .svelte-flow__node) {
+		box-shadow: none !important;
+		filter: none !important;
+	}
+
+	/* Edge animation uses opacity+stroke transitions, not layout — allowed */
+	:global(.svelte-flow .svelte-flow__edge path) {
+		transition: stroke var(--motion-fast) var(--motion-glide);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global(.svelte-flow .svelte-flow__edge path) {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/graph/GraphCanvas.svelte.d.ts

@@ -0,0 +1,22 @@
+import '@xyflow/svelte/dist/style.css';
+import { type Node, type Edge } from '@xyflow/svelte';
+import type { NodeEventWithPointer } from '@xyflow/svelte';
+interface Props {
+    /** Flow nodes — bindable for interactive graphs. */
+    nodes: Node[];
+    /** Flow edges — bindable for interactive graphs. */
+    edges: Edge[];
+    /** When true, disables pan/zoom/selection interactions. */
+    readonly?: boolean;
+    /** Fit the graph to the viewport on first render. */
+    fitView?: boolean;
+    /** Show the minimap panel. */
+    minimap?: boolean;
+    /** Fired when the user clicks a node. */
+    onNodeClick?: NodeEventWithPointer<MouseEvent | TouchEvent>;
+    /** Height of the canvas container (CSS value). Defaults to 100%. */
+    height?: string;
+}
+declare const GraphCanvas: import("svelte").Component<Props, {}, "nodes" | "edges">;
+type GraphCanvas = ReturnType<typeof GraphCanvas>;
+export default GraphCanvas;

package/dist/components/graph/JatuiNode.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { Handle, Position } from '@xyflow/svelte'
+	import type { NodeProps } from '@xyflow/svelte'
+	import type { NodeStatus } from './theme.js'
+
+	interface JatuiNodeData {
+		label?: string
+		status?: NodeStatus
+		/** Extra text below the label — e.g. type or description */
+		sublabel?: string
+	}
+
+	type Props = NodeProps & { data: JatuiNodeData }
+
+	let { data, selected = false, sourcePosition = Position.Bottom, targetPosition = Position.Top }: Props = $props()
+
+	const STATUS_TINT: Record<NodeStatus, string> = {
+		default: '',
+		primary: 'bg-primary/10 border-primary text-primary',
+		secondary: 'bg-secondary/10 border-secondary text-secondary',
+		info: 'bg-info/10 border-info text-info',
+		success: 'bg-success/10 border-success text-success',
+		warning: 'bg-warning/10 border-warning text-warning',
+		error: 'bg-error/10 border-error text-error',
+	}
+
+	const STATUS_DOT: Record<NodeStatus, string> = {
+		default: '',
+		primary: 'bg-primary',
+		secondary: 'bg-secondary',
+		info: 'bg-info',
+		success: 'bg-success',
+		warning: 'bg-warning',
+		error: 'bg-error',
+	}
+
+	const status = $derived(data?.status ?? 'default')
+	const tintClass = $derived(STATUS_TINT[status])
+	const dotClass = $derived(STATUS_DOT[status])
+</script>
+
+<Handle type="target" position={targetPosition} />
+
+<div
+	class="jatui-node"
+	class:jatui-node--selected={selected}
+	class:jatui-node--tinted={status !== 'default'}
+>
+	<div class="jatui-node__inner {tintClass}">
+		{#if status !== 'default'}
+			<span class="jatui-node__dot {dotClass}" aria-hidden="true"></span>
+		{/if}
+		<span class="jatui-node__label">{data?.label ?? ''}</span>
+		{#if data?.sublabel}
+			<span class="jatui-node__sublabel">{data.sublabel}</span>
+		{/if}
+	</div>
+</div>
+
+<Handle type="source" position={sourcePosition} />
+
+<style>
+	.jatui-node {
+		min-width: 120px;
+		max-width: 240px;
+	}
+
+	.jatui-node__inner {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-sm);
+		padding: var(--jatui-space-base) var(--jatui-space-lg);
+		background: var(--color-base-200, oklch(0.96 0 0));
+		border: var(--jatui-border-w) solid var(--color-base-300, oklch(0.9 0 0));
+		border-radius: var(--jatui-radius-box);
+		transition:
+			border-color var(--motion-fast) var(--motion-glide),
+			background var(--motion-fast) var(--motion-glide);
+		cursor: default;
+		user-select: none;
+	}
+
+	/* Tinted nodes: bg-X/10 and border-X classes applied via class binding */
+	.jatui-node--tinted .jatui-node__inner {
+		/* colors come from DaisyUI utility classes in the markup */
+	}
+
+	/* Selected ring — uses primary without shadows (house rule) */
+	.jatui-node--selected .jatui-node__inner {
+		border-color: var(--color-primary, oklch(0.6 0.2 264));
+	}
+
+	.jatui-node__dot {
+		flex-shrink: 0;
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+	}
+
+	.jatui-node__label {
+		font-size: 0.8125rem; /* 13px */
+		font-weight: 500;
+		color: var(--color-base-content, currentColor);
+		line-height: 1.3;
+		word-break: break-word;
+	}
+
+	/* Tinted label inherits color from the tint utility class text-* */
+	.jatui-node--tinted .jatui-node__inner .jatui-node__label {
+		color: inherit;
+	}
+
+	.jatui-node__sublabel {
+		display: block;
+		font-size: 0.6875rem; /* 11px */
+		color: var(--color-base-content, currentColor);
+		opacity: 0.55;
+		line-height: 1.3;
+		margin-top: 2px;
+	}
+
+	/* Reduced motion: strip transitions */
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-node__inner {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/graph/JatuiNode.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { NodeProps } from '@xyflow/svelte';
+import type { NodeStatus } from './theme.js';
+interface JatuiNodeData {
+    label?: string;
+    status?: NodeStatus;
+    /** Extra text below the label — e.g. type or description */
+    sublabel?: string;
+}
+type Props = NodeProps & {
+    data: JatuiNodeData;
+};
+declare const JatuiNode: import("svelte").Component<Props, {}, "">;
+type JatuiNode = ReturnType<typeof JatuiNode>;
+export default JatuiNode;

package/dist/components/graph/theme.d.ts

@@ -0,0 +1,27 @@
+/**
+ * GraphCanvas theme bridge — maps DaisyUI --color-* custom properties onto
+ * xyflow CSS vars so the graph follows the active DaisyUI theme at runtime.
+ *
+ * Call applyXyflowTheme(el) after mount and whenever the theme changes.
+ * el should be the .svelte-flow wrapper element.
+ */
+/**
+ * Status colors available for JatuiNode status-tinting.
+ * Returns a map of status → resolved CSS color string.
+ */
+export type NodeStatus = 'default' | 'info' | 'success' | 'warning' | 'error' | 'primary' | 'secondary';
+export declare function getStatusColor(status: NodeStatus): {
+    bg: string;
+    border: string;
+    text: string;
+};
+/**
+ * Apply DaisyUI-derived xyflow CSS vars to the flow container element.
+ * Safe to call multiple times — just re-sets the vars.
+ */
+export declare function applyXyflowTheme(el: HTMLElement): void;
+/**
+ * Setup watcher: re-applies theme whenever DaisyUI theme changes.
+ * Returns cleanup fn.
+ */
+export declare function watchAndApplyTheme(el: HTMLElement): () => void;

package/dist/components/graph/theme.js

@@ -0,0 +1,136 @@
+/**
+ * GraphCanvas theme bridge — maps DaisyUI --color-* custom properties onto
+ * xyflow CSS vars so the graph follows the active DaisyUI theme at runtime.
+ *
+ * Call applyXyflowTheme(el) after mount and whenever the theme changes.
+ * el should be the .svelte-flow wrapper element.
+ */
+import { getDaisyUIColor, watchThemeChanges } from '../../utils/daisyuiColors.js';
+/** All xyflow CSS vars we override, plus the fallback xyflow var they replace. */
+var THEME_MAP = [
+    // Edges
+    ['--xy-edge-stroke', 'var(--color-base-content, #b1b1b7)'],
+    ['--xy-edge-stroke-selected', 'var(--color-primary, #555)'],
+    ['--xy-connectionline-stroke', 'var(--color-base-content, #b1b1b7)'],
+    // Background canvas
+    ['--xy-background-color', 'var(--color-base-100, transparent)'],
+    ['--xy-background-pattern-dots-color', 'var(--color-base-300, #91919a)'],
+    ['--xy-background-pattern-lines-color', 'var(--color-base-200, #eee)'],
+    ['--xy-background-pattern-cross-color', 'var(--color-base-300, #e2e2e2)'],
+    // Node defaults
+    ['--xy-node-color', 'var(--color-base-content, #333)'],
+    ['--xy-node-border', '1px solid var(--color-base-300, #bbb)'],
+    ['--xy-node-border-selected', '1px solid var(--color-primary, #555)'],
+    ['--xy-node-background-color', 'var(--color-base-200, #fff)'],
+    // Handle
+    ['--xy-handle-background-color', 'var(--color-base-content, #333)'],
+    ['--xy-handle-border-color', 'var(--color-base-100, #fff)'],
+    // Minimap
+    ['--xy-minimap-background-color', 'var(--color-base-100, #fff)'],
+    ['--xy-minimap-mask-background-color', 'color-mix(in oklch, var(--color-base-200, #f0f0f0) 60%, transparent)'],
+    ['--xy-minimap-node-background-color', 'var(--color-base-200, #e2e2e2)'],
+    // Selection box
+    ['--xy-selection-background-color', 'color-mix(in oklch, var(--color-primary, #6366f1) 10%, transparent)'],
+    ['--xy-selection-border', '1px dotted color-mix(in oklch, var(--color-primary, #6366f1) 50%, transparent)'],
+    // Attribution
+    ['--xy-attribution-background-color', 'color-mix(in oklch, var(--color-base-100, #fff) 80%, transparent)'],
+];
+export function getStatusColor(status) {
+    switch (status) {
+        case 'primary':
+            return {
+                bg: getDaisyUIColor('primary'),
+                border: getDaisyUIColor('primary'),
+                text: getDaisyUIColor('primary-content'),
+            };
+        case 'secondary':
+            return {
+                bg: getDaisyUIColor('secondary'),
+                border: getDaisyUIColor('secondary'),
+                text: getDaisyUIColor('secondary-content'),
+            };
+        case 'info':
+            return {
+                bg: getDaisyUIColor('info'),
+                border: getDaisyUIColor('info'),
+                text: getDaisyUIColor('info-content'),
+            };
+        case 'success':
+            return {
+                bg: getDaisyUIColor('success'),
+                border: getDaisyUIColor('success'),
+                text: getDaisyUIColor('success-content'),
+            };
+        case 'warning':
+            return {
+                bg: getDaisyUIColor('warning'),
+                border: getDaisyUIColor('warning'),
+                text: getDaisyUIColor('warning-content'),
+            };
+        case 'error':
+            return {
+                bg: getDaisyUIColor('error'),
+                border: getDaisyUIColor('error'),
+                text: getDaisyUIColor('error-content'),
+            };
+        default:
+            return { bg: '', border: '', text: '' };
+    }
+}
+/**
+ * Apply DaisyUI-derived xyflow CSS vars to the flow container element.
+ * Safe to call multiple times — just re-sets the vars.
+ */
+export function applyXyflowTheme(el) {
+    for (var _i = 0, THEME_MAP_1 = THEME_MAP; _i < THEME_MAP_1.length; _i++) {
+        var prop = THEME_MAP_1[_i][0];
+        // We set the vars as CSS custom properties on the element itself.
+        // xyflow reads them from .svelte-flow context, so setting on the wrapper is correct.
+        var cssVarName = prop.replace('--xy-', '--xy-'); // identity — keep readable
+        // Read the DaisyUI value dynamically then set
+        var mappedValue = resolveThemeValue(prop);
+        el.style.setProperty(cssVarName, mappedValue);
+    }
+}
+function resolveThemeValue(prop) {
+    var _a, _b;
+    // Map the xyflow prop name to the DaisyUI color resolution
+    var propToColor = {
+        '--xy-edge-stroke': function () { return getDaisyUIColor('base-content'); },
+        '--xy-edge-stroke-selected': function () { return getDaisyUIColor('primary'); },
+        '--xy-connectionline-stroke': function () { return getDaisyUIColor('base-content'); },
+        '--xy-background-color': function () { return getDaisyUIColor('base-100'); },
+        '--xy-background-pattern-dots-color': function () { return getDaisyUIColor('base-300'); },
+        '--xy-background-pattern-lines-color': function () { return getDaisyUIColor('base-200'); },
+        '--xy-background-pattern-cross-color': function () { return getDaisyUIColor('base-300'); },
+        '--xy-node-color': function () { return getDaisyUIColor('base-content'); },
+        '--xy-node-border': function () { return "1px solid ".concat(getDaisyUIColor('base-300')); },
+        '--xy-node-border-selected': function () { return "1px solid ".concat(getDaisyUIColor('primary')); },
+        '--xy-node-background-color': function () { return getDaisyUIColor('base-200'); },
+        '--xy-handle-background-color': function () { return getDaisyUIColor('base-content'); },
+        '--xy-handle-border-color': function () { return getDaisyUIColor('base-100'); },
+        '--xy-minimap-background-color': function () { return getDaisyUIColor('base-100'); },
+        '--xy-minimap-mask-background-color': function () {
+            return "color-mix(in oklch, ".concat(getDaisyUIColor('base-200'), " 60%, transparent)");
+        },
+        '--xy-minimap-node-background-color': function () { return getDaisyUIColor('base-200'); },
+        '--xy-selection-background-color': function () {
+            return "color-mix(in oklch, ".concat(getDaisyUIColor('primary'), " 10%, transparent)");
+        },
+        '--xy-selection-border': function () {
+            return "1px dotted color-mix(in oklch, ".concat(getDaisyUIColor('primary'), " 50%, transparent)");
+        },
+        '--xy-attribution-background-color': function () {
+            return "color-mix(in oklch, ".concat(getDaisyUIColor('base-100'), " 80%, transparent)");
+        },
+    };
+    return (_b = (_a = propToColor[prop]) === null || _a === void 0 ? void 0 : _a.call(propToColor)) !== null && _b !== void 0 ? _b : '';
+}
+/**
+ * Setup watcher: re-applies theme whenever DaisyUI theme changes.
+ * Returns cleanup fn.
+ */
+export function watchAndApplyTheme(el) {
+    applyXyflowTheme(el);
+    return watchThemeChanges(function () { return applyXyflowTheme(el); });
+}

package/dist/components/markup.js

@@ -1,6 +1,6 @@
 // Markup drawing primitives for construction drawing redlining
 // Adapted from JAT feedback annotation engine with cloud bubble tool added
-export const MARKUP_COLORS = [
+export var MARKUP_COLORS = [
     "#ef4444",
     "#eab308",
     "#22c55e",
@@ -8,13 +8,13 @@ export const MARKUP_COLORS = [
     "#ffffff",
     "#111827",
 ];
-export const DEFAULT_STROKE_WIDTH = 3;
-let _nextId = 1;
+export var DEFAULT_STROKE_WIDTH = 3;
+var _nextId = 1;
 export function nextShapeId() {
     return _nextId++;
 }
 function drawArrow(ctx, shape) {
-    const { start, end, color, strokeWidth } = shape;
+    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
     ctx.strokeStyle = color;
     ctx.lineWidth = strokeWidth;
     ctx.lineCap = "round";
@@ -24,9 +24,9 @@ function drawArrow(ctx, shape) {
     ctx.lineTo(end.x, end.y);
     ctx.stroke();
     // Arrowhead
-    const angle = Math.atan2(end.y - start.y, end.x - start.x);
-    const headLen = 14;
-    const headAngle = Math.PI / 7;
+    var angle = Math.atan2(end.y - start.y, end.x - start.x);
+    var headLen = 14;
+    var headAngle = Math.PI / 7;
     ctx.beginPath();
     ctx.moveTo(end.x, end.y);
     ctx.lineTo(end.x - headLen * Math.cos(angle - headAngle), end.y - headLen * Math.sin(angle - headAngle));
@@ -35,24 +35,24 @@ function drawArrow(ctx, shape) {
     ctx.stroke();
 }
 function drawRectangle(ctx, shape) {
-    const { start, end, color, strokeWidth } = shape;
+    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
     ctx.strokeStyle = color;
     ctx.lineWidth = strokeWidth;
     ctx.lineJoin = "round";
-    const x = Math.min(start.x, end.x);
-    const y = Math.min(start.y, end.y);
-    const w = Math.abs(end.x - start.x);
-    const h = Math.abs(end.y - start.y);
+    var x = Math.min(start.x, end.x);
+    var y = Math.min(start.y, end.y);
+    var w = Math.abs(end.x - start.x);
+    var h = Math.abs(end.y - start.y);
     ctx.strokeRect(x, y, w, h);
 }
 function drawEllipse(ctx, shape) {
-    const { start, end, color, strokeWidth } = shape;
+    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
     ctx.strokeStyle = color;
     ctx.lineWidth = strokeWidth;
-    const cx = (start.x + end.x) / 2;
-    const cy = (start.y + end.y) / 2;
-    const rx = Math.abs(end.x - start.x) / 2;
-    const ry = Math.abs(end.y - start.y) / 2;
+    var cx = (start.x + end.x) / 2;
+    var cy = (start.y + end.y) / 2;
+    var rx = Math.abs(end.x - start.x) / 2;
+    var ry = Math.abs(end.y - start.y) / 2;
     if (rx < 1 || ry < 1)
         return;
     ctx.beginPath();
@@ -64,51 +64,53 @@ function drawEllipse(ctx, shape) {
  * Standard construction markup tool for highlighting areas of change.
  */
 function drawCloud(ctx, shape) {
-    const { start, end, color, strokeWidth } = shape;
+    var start = shape.start, end = shape.end, color = shape.color, strokeWidth = shape.strokeWidth;
     ctx.strokeStyle = color;
     ctx.lineWidth = strokeWidth;
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
-    const x = Math.min(start.x, end.x);
-    const y = Math.min(start.y, end.y);
-    const w = Math.abs(end.x - start.x);
-    const h = Math.abs(end.y - start.y);
+    var x = Math.min(start.x, end.x);
+    var y = Math.min(start.y, end.y);
+    var w = Math.abs(end.x - start.x);
+    var h = Math.abs(end.y - start.y);
     if (w < 4 || h < 4)
         return;
     // Generate perimeter points, then draw arcs between them
-    const arcSize = Math.min(w, h, 30); // arc diameter adapts to shape size
-    const perimeter = 2 * (w + h);
-    const numArcs = Math.max(8, Math.round(perimeter / arcSize));
+    var arcSize = Math.min(w, h, 30); // arc diameter adapts to shape size
+    var perimeter = 2 * (w + h);
+    var numArcs = Math.max(8, Math.round(perimeter / arcSize));
     // Collect points along the rectangle perimeter
-    const points = [];
-    const segLengths = [w, h, w, h];
-    const segDirs = [
+    var points = [];
+    var segLengths = [w, h, w, h];
+    var segDirs = [
         { dx: 1, dy: 0 },
         { dx: 0, dy: 1 },
         { dx: -1, dy: 0 },
         { dx: 0, dy: -1 },
     ];
-    const segStarts = [
-        { x, y },
-        { x: x + w, y },
+    var segStarts = [
+        { x: x, y: y },
+        { x: x + w, y: y },
         { x: x + w, y: y + h },
-        { x, y: y + h },
+        { x: x, y: y + h },
     ];
-    let totalLen = 0;
-    for (const l of segLengths)
+    var totalLen = 0;
+    for (var _i = 0, segLengths_1 = segLengths; _i < segLengths_1.length; _i++) {
+        var l = segLengths_1[_i];
         totalLen += l;
-    const step = totalLen / numArcs;
-    let dist = 0;
-    let segIdx = 0;
-    let segDist = 0;
-    for (let i = 0; i < numArcs; i++) {
-        const target = i * step;
+    }
+    var step = totalLen / numArcs;
+    var dist = 0;
+    var segIdx = 0;
+    var segDist = 0;
+    for (var i = 0; i < numArcs; i++) {
+        var target = i * step;
         while (dist + segLengths[segIdx] - segDist < target && segIdx < 3) {
             dist += segLengths[segIdx] - segDist;
             segIdx++;
             segDist = 0;
         }
-        const remaining = target - dist;
+        var remaining = target - dist;
         points.push({
             x: segStarts[segIdx].x + segDirs[segIdx].dx * (segDist + remaining),
             y: segStarts[segIdx].y + segDirs[segIdx].dy * (segDist + remaining),
@@ -116,20 +118,20 @@ function drawCloud(ctx, shape) {
     }
     // Draw arcs between consecutive points
     ctx.beginPath();
-    for (let i = 0; i < points.length; i++) {
-        const p1 = points[i];
-        const p2 = points[(i + 1) % points.length];
-        const mx = (p1.x + p2.x) / 2;
-        const my = (p1.y + p2.y) / 2;
+    for (var i = 0; i < points.length; i++) {
+        var p1 = points[i];
+        var p2 = points[(i + 1) % points.length];
+        var mx = (p1.x + p2.x) / 2;
+        var my = (p1.y + p2.y) / 2;
         // Bulge outward from center of rectangle
-        const cx = x + w / 2;
-        const cy = y + h / 2;
-        const dx = mx - cx;
-        const dy = my - cy;
-        const len = Math.sqrt(dx * dx + dy * dy) || 1;
-        const bulge = arcSize * 0.35;
-        const ctrlX = mx + (dx / len) * bulge;
-        const ctrlY = my + (dy / len) * bulge;
+        var cx = x + w / 2;
+        var cy = y + h / 2;
+        var dx = mx - cx;
+        var dy = my - cy;
+        var len = Math.sqrt(dx * dx + dy * dy) || 1;
+        var bulge = arcSize * 0.35;
+        var ctrlX = mx + (dx / len) * bulge;
+        var ctrlY = my + (dy / len) * bulge;
         if (i === 0) {
             ctx.moveTo(p1.x, p1.y);
         }
@@ -139,7 +141,7 @@ function drawCloud(ctx, shape) {
     ctx.stroke();
 }
 function drawFreehand(ctx, shape) {
-    const { points, color, strokeWidth } = shape;
+    var points = shape.points, color = shape.color, strokeWidth = shape.strokeWidth;
     if (points.length < 2)
         return;
     ctx.strokeStyle = color;
@@ -148,16 +150,16 @@ function drawFreehand(ctx, shape) {
     ctx.lineJoin = "round";
     ctx.beginPath();
     ctx.moveTo(points[0].x, points[0].y);
-    for (let i = 1; i < points.length; i++) {
+    for (var i = 1; i < points.length; i++) {
         ctx.lineTo(points[i].x, points[i].y);
     }
     ctx.stroke();
 }
 function drawText(ctx, shape) {
-    const { position, content, color, fontSize } = shape;
+    var position = shape.position, content = shape.content, color = shape.color, fontSize = shape.fontSize;
     if (!content)
         return;
-    ctx.font = `bold ${fontSize}px sans-serif`;
+    ctx.font = "bold ".concat(fontSize, "px sans-serif");
     ctx.textBaseline = "top";
     // Black outline for contrast on construction drawings
     ctx.strokeStyle = "#000000";
@@ -192,7 +194,8 @@ export function renderShape(ctx, shape) {
     ctx.restore();
 }
 export function renderAllShapes(ctx, shapes) {
-    for (const shape of shapes) {
+    for (var _i = 0, shapes_1 = shapes; _i < shapes_1.length; _i++) {
+        var shape = shapes_1[_i];
         renderShape(ctx, shape);
     }
 }