@twinfinity/printing 6.0.1-ci.28952-beta → 6.0.2-beta

package/src/layout/viewportRender.ts

@@ -1,442 +1,442 @@
-import { escapeAttr, getPathValue, resolvePath } from './renderUtils';
-import { rotateBounds, pickScale } from './viewportUtils';
-import { ViewportRenderInfo } from './labelsRender';
-import { matchesV2Filter } from './filters';
-import { ComputedViewportScale, SvgModelView, ViewportElement, AssetSpec } from './types';
-import { isRecord, getProp } from './typeGuards';
-
-type PolyPoint = { x: number; y: number };
-// Debug overlay for clip polygons. Keep false for normal builds.
-const DEBUG_CLIP_OVERLAY = false;
-
-type Mat = [number, number, number, number, number, number]; // a b c d e f
-
-const matTranslate = (tx: number, ty: number): Mat => [1, 0, 0, 1, tx, ty];
-const matScale = (sx: number, sy: number): Mat => [sx, 0, 0, sy, 0, 0];
-const matRotateDeg = (deg: number): Mat => {
-    const rad = (deg * Math.PI) / 180;
-    const c = Math.cos(rad);
-    const s = Math.sin(rad);
-    return [c, s, -s, c, 0, 0];
-};
-const matMultiply = (m1: Mat, m2: Mat): Mat => {
-    const [a1, b1, c1, d1, e1, f1] = m1;
-    const [a2, b2, c2, d2, e2, f2] = m2;
-    return [
-        a1 * a2 + c1 * b2,
-        b1 * a2 + d1 * b2,
-        a1 * c2 + c1 * d2,
-        b1 * c2 + d1 * d2,
-        a1 * e2 + c1 * f2 + e1,
-        b1 * e2 + d1 * f2 + f1
-    ];
-};
-const matApply = (m: Mat, p: PolyPoint): PolyPoint => {
-    const [a, b, c, d, e, f] = m;
-    return { x: a * p.x + c * p.y + e, y: b * p.x + d * p.y + f };
-};
-export const renderViewportElement = (
-    vp: ViewportElement,
-    baseModel: SvgModelView | null,
-    dataWithViewport: any,
-    preferredScales: number[],
-    scales: Record<string, { preferredScales?: number[] }>,
-    assetMap: Map<string, AssetSpec>,
-    viewportScales: Record<string, ComputedViewportScale>,
-    viewportClipPolygonsLocal: Record<string, Array<Array<PolyPoint>>>,
-    viewportClipBounds: Record<
-        string,
-        { minX: number; maxX: number; minY: number; maxY: number; width: number; height: number }
-    >,
-    viewportClipLabels: Record<string, boolean>,
-    viewportClipStyles: Record<
-        string,
-        { stroke?: string; strokeWidthMm?: number; strokeOpacity?: number; fill?: string; fillOpacity?: number }
-    >,
-    viewportHighlight: Record<string, { gids: Set<string> | null; styles: any }>,
-    viewportRenderInfo: Record<string, ViewportRenderInfo>,
-    warnings: string[],
-    legendColorMaps?: Map<string, Map<string, string>>,
-    precomputed?: {
-        effectiveWidthModel?: number;
-        effectiveHeightModel?: number;
-        clipPolygonsMm?: Array<Array<PolyPoint>>;
-        clipPolygonsLocal?: Array<Array<PolyPoint>>;
-        clipBounds?: { minX: number; maxX: number; minY: number; maxY: number; width: number; height: number };
-        renderCenterModelX?: number;
-        renderCenterModelY?: number;
-    }
-): string[] => {
-    const parts: string[] = [];
-    if (!baseModel) {
-        // Warning already pushed by viewportPrep; avoid duplicate.
-        return parts;
-    }
-
-    const model = baseModel;
-    let renderWidthModel = precomputed?.effectiveWidthModel ?? model.widthModel;
-    let renderHeightModel = precomputed?.effectiveHeightModel ?? model.heightModel;
-    let renderCenterModelX = precomputed?.renderCenterModelX ?? renderWidthModel * 0.5;
-    let renderCenterModelY = precomputed?.renderCenterModelY ?? renderHeightModel * 0.5;
-
-    const clipBounds = viewportClipBounds[vp.id];
-    const clipLocal = viewportClipPolygonsLocal[vp.id];
-    const hasClip = !!clipBounds && Array.isArray(clipLocal) && clipLocal.length > 0;
-    if (hasClip) {
-        renderWidthModel = clipBounds!.width;
-        renderHeightModel = clipBounds!.height;
-        renderCenterModelX = (clipBounds!.minX + clipBounds!.maxX) * 0.5;
-        renderCenterModelY = (clipBounds!.minY + clipBounds!.maxY) * 0.5;
-    }
-
-    const scaleInfo =
-        viewportScales[vp.id] ??
-        pickScale(
-            vp,
-            { ...model, widthModel: renderWidthModel, heightModel: renderHeightModel },
-            preferredScales,
-            scales
-        );
-    const rotationDeg = vp.rotationDeg ?? 0;
-    const mmPerModel = scaleInfo.mmPerModelUnit;
-    const contentWidthMm = renderWidthModel * mmPerModel;
-    const contentHeightMm = renderHeightModel * mmPerModel;
-    const rotated = rotateBounds(contentWidthMm, contentHeightMm, rotationDeg);
-
-    const centerX = vp.align === 'topLeft' ? vp.xMm + rotated.width / 2 : vp.xMm + vp.widthMm / 2;
-    const centerY = vp.align === 'topLeft' ? vp.yMm + rotated.height / 2 : vp.yMm + vp.heightMm / 2;
-
-    const contentOffsetX = vp.align === 'topLeft' ? vp.xMm : vp.xMm + Math.max(0, (vp.widthMm - rotated.width) * 0.5);
-    const contentOffsetY = vp.align === 'topLeft' ? vp.yMm : vp.yMm + Math.max(0, (vp.heightMm - rotated.height) * 0.5);
-
-    const clipPolysLocal = clipLocal;
-    let clipId: string | null = null;
-    const clipDebugPolys: string[] = [];
-    const clipStyle = viewportClipStyles[vp.id];
-    const clipStroke = clipStyle?.stroke;
-    const clipStrokeWidth = clipStyle?.strokeWidthMm;
-    const clipStrokeOpacity = clipStyle?.strokeOpacity;
-    const clipFill = clipStyle?.fill;
-    const clipFillOpacity = clipStyle?.fillOpacity;
-    const transformAttr = `translate(${centerX} ${centerY}) rotate(${rotationDeg}) scale(${mmPerModel}) translate(${-renderCenterModelX} ${-renderCenterModelY})`;
-
-    // Debug: log model bounds and path breakdown
-    // if (model.transform) {
-    //   console.log(`[DEBUG MODEL vp="${vp.id}"] Model bounds: viewMinX=${model.transform.viewMinX.toFixed(2)} viewMaxX=${model.transform.viewMaxX?.toFixed(2)} viewMinZ=${model.transform.viewMinZ.toFixed(2)} viewMaxZ=${model.transform.viewMaxZ.toFixed(2)} viewWidth=${model.transform.viewWidth.toFixed(2)} viewHeight=${model.transform.viewHeight.toFixed(2)}`);
-
-    //   if (model.rawPaths) {
-    //     const fills = model.rawPaths.filter(p => p.meta?.isFill);
-    //     const segments = model.rawPaths.filter(p => p.meta?.isSegment);
-    //     const other = model.rawPaths.filter(p => !p.meta?.isFill && !p.meta?.isSegment);
-    //     console.log(`[DEBUG MODEL vp="${vp.id}"] Path breakdown: ${model.rawPaths.length} total (${fills.length} fills, ${segments.length} segments, ${other.length} other)`);
-
-    //     // Sample a few segment paths
-    //     const sampleSegments = segments.slice(0, 3);
-    //     sampleSegments.forEach((seg, idx) => {
-    //       console.log(`[DEBUG MODEL vp="${vp.id}"] Segment ${idx}: class=${seg.meta?.class} fill=${seg.fill} stroke=${seg.stroke} strokeWidth=${seg.strokeWidth} d=${seg.d.substring(0, 50)}...`);
-    //     });
-
-    //     // Check if geometryTransform is present
-    //     if (model.geometryTransform) {
-    //       console.log(`[DEBUG MODEL vp="${vp.id}"] geometryTransform="${model.geometryTransform}"`);
-    //     } else {
-    //       console.log(`[DEBUG MODEL vp="${vp.id}"] WARNING: geometryTransform is MISSING!`);
-    //     }
-    //   }
-    // }
-
-    // Guard: detect NaN/Infinity in computed transform values
-    if (
-        !Number.isFinite(centerX) ||
-        !Number.isFinite(centerY) ||
-        !Number.isFinite(mmPerModel) ||
-        !Number.isFinite(renderCenterModelX) ||
-        !Number.isFinite(renderCenterModelY)
-    ) {
-        warnings.push(
-            `Viewport '${vp.id}' has non-finite transform values (centerX=${centerX}, centerY=${centerY}, mmPerModel=${mmPerModel}). Skipping render.`
-        );
-        return parts;
-    }
-
-    // console.log(`[DEBUG CLIP APPLY vp="${vp.id}"] clipPolysLocal exists: ${!!clipPolysLocal}, length: ${clipPolysLocal?.length ?? 0}`);
-    if (clipPolysLocal && clipPolysLocal.length) {
-        // console.log(`[DEBUG CLIP APPLY vp="${vp.id}"] *** APPLYING CLIP-PATH *** with ${clipPolysLocal.length} polygons`);
-        if (clipPolysLocal.every((poly) => !poly.length)) {
-            warnings.push(`Viewport '${vp.id}' clip has no points after prep; skipping clip.`);
-        }
-        clipId = `clip-${vp.id}-${parts.length}`;
-        const polyPartsPage: string[] = [];
-        // Clip polygon points are in model-view coordinates (not SVG-internal),
-        // so transform them with outer only (model-view → page). Do NOT apply
-        // geometryTransform — that maps SVG-internal → model-view, which is only
-        // correct for path data inside the <g transform="geometryTransform"> group.
-        const outer = matMultiply(
-            matTranslate(centerX, centerY),
-            matMultiply(
-                matRotateDeg(rotationDeg),
-                matMultiply(matScale(mmPerModel, mmPerModel), matTranslate(-renderCenterModelX, -renderCenterModelY))
-            )
-        );
-
-        // Debug: log clip polygon bounds
-        let clipMinX = Infinity,
-            clipMaxX = -Infinity,
-            clipMinY = Infinity,
-            clipMaxY = -Infinity;
-        clipPolysLocal.forEach((poly) => {
-            poly.forEach((p) => {
-                if (p.x < clipMinX) clipMinX = p.x;
-                if (p.x > clipMaxX) clipMaxX = p.x;
-                if (p.y < clipMinY) clipMinY = p.y;
-                if (p.y > clipMaxY) clipMaxY = p.y;
-            });
-        });
-        // console.log(`[DEBUG CLIP vp="${vp.id}"] Local bounds: x=${clipMinX.toFixed(2)}..${clipMaxX.toFixed(2)} y=${clipMinY.toFixed(2)}..${clipMaxY.toFixed(2)} (w=${(clipMaxX - clipMinX).toFixed(2)} h=${(clipMaxY - clipMinY).toFixed(2)})`);
-
-        clipPolysLocal.forEach((poly) => {
-            const pagePtsArr = poly.map((p) => matApply(outer, p));
-            const pagePts = pagePtsArr.map((p) => `${p.x},${p.y}`).join(' ');
-            polyPartsPage.push(`<polygon points="${pagePts}" />`);
-            if (clipStroke || clipFill) {
-                clipDebugPolys.push(
-                    `<polygon points="${pagePts}"` +
-                        (clipStroke ? ` stroke="${escapeAttr(clipStroke)}"` : '') +
-                        (clipStrokeWidth ? ` stroke-width="${clipStrokeWidth}"` : '') +
-                        (clipStrokeOpacity !== undefined ? ` stroke-opacity="${clipStrokeOpacity}"` : '') +
-                        (clipFill ? ` fill="${escapeAttr(clipFill)}"` : ' fill="none"') +
-                        (clipFillOpacity !== undefined ? ` fill-opacity="${clipFillOpacity}"` : '') +
-                        ` />`
-                );
-            }
-            if (DEBUG_CLIP_OVERLAY) {
-                clipDebugPolys.push(
-                    `<polygon points="${pagePts}" stroke="#ff00ff" stroke-width="0.4" fill="#000000" fill-opacity="0.35" />`
-                );
-            }
-        });
-        parts.push(
-            `<defs><clipPath id="${clipId}" clipPathUnits="userSpaceOnUse">${polyPartsPage.join('')}</clipPath></defs>`
-        );
-    }
-
-    parts.push(`<g${clipId ? ` clip-path="url(#${clipId})"` : ''}>`);
-    parts.push(`<g transform="${transformAttr}">`);
-
-    // Render fill polygons below structural lines
-    const allowedGids = viewportHighlight[vp.id]?.gids ?? null;
-    const fillSvg = buildFillSvg(vp, dataWithViewport, model, allowedGids, legendColorMaps);
-    if (fillSvg) parts.push(fillSvg);
-
-    // Debug: log sample path coordinates from model.groupSvg
-    if (clipId && model.rawPaths && model.rawPaths.length > 0) {
-        const asMeta = (m: unknown): { isSegment?: boolean; isFill?: boolean; class?: string } | undefined =>
-            m != null && typeof m === 'object'
-                ? (m as { isSegment?: boolean; isFill?: boolean; class?: string })
-                : undefined;
-        const samplePath = model.rawPaths.find((p) => {
-            const pm = asMeta(p.meta);
-            return pm?.isSegment || (!pm?.isFill && !pm?.class);
-        });
-        if (samplePath) {
-            const dMatch = samplePath.d.match(/M([\d.-]+)\s+([\d.-]+)/);
-            if (dMatch) {
-                // console.log(`[DEBUG PATH vp="${vp.id}"] Sample wall path starts at x=${dMatch[1]} y=${dMatch[2]} (world coords, will be transformed by geometryTransform)`);
-            }
-        }
-    }
-
-    // Compensate stroke-widths for the viewport scale transform.
-    // Paths have stroke-width in model units; the scale(mmPerModel) transform
-    // would make them thinner/thicker depending on zoom. Dividing by mmPerModel
-    // ensures strokes render at their intended mm size regardless of viewport scale.
-    const compensatedSvg = model.groupSvg.replace(
-        /stroke-width="([0-9.eE+-]+)"/g,
-        (_, w) => `stroke-width="${parseFloat(w) / mmPerModel}"`
-    );
-    parts.push(compensatedSvg);
-    parts.push('</g>');
-    parts.push('</g>');
-
-    if (clipDebugPolys.length) {
-        parts.push(`<g pointer-events="none">${clipDebugPolys.join('')}</g>`);
-    }
-
-    viewportRenderInfo[vp.id] = {
-        mmPerModel,
-        contentWidthMm: rotated.width,
-        contentHeightMm: rotated.height,
-        offsetX: contentOffsetX,
-        offsetY: contentOffsetY,
-        rotationDeg,
-        transform: model.transform!,
-        centerX,
-        centerY,
-        centerModelX: renderCenterModelX,
-        centerModelY: renderCenterModelY
-    };
-
-    if (vp.border) {
-        const borderStroke = vp.border.stroke ?? '#000';
-        const borderWidth = vp.border.strokeWidthMm ?? 0.25;
-        parts.push(
-            `<rect x="${vp.xMm}" y="${vp.yMm}" width="${vp.widthMm}" height="${vp.heightMm}" stroke="${escapeAttr(
-                borderStroke
-            )}" stroke-width="${borderWidth}" fill="none"${vp.border.dashed ? ' stroke-dasharray="4 2"' : ''} />`
-        );
-    }
-
-    if (vp.northArrow) {
-        const arrow = vp.northArrow;
-        const asset = assetMap.get(arrow.assetId);
-        const size = arrow.sizeMm ?? 12;
-        const offsetX = arrow.offsetXMm ?? 8;
-        const offsetY = arrow.offsetYMm ?? 8;
-        const arrowX = vp.xMm + vp.widthMm - offsetX - size;
-        const arrowY = vp.yMm + offsetY;
-        const arrowRotation = arrow.rotationDeg ?? 0;
-        if (!asset) {
-            warnings.push(`Missing asset '${arrow.assetId}' for north arrow on viewport '${vp.id}'.`);
-        } else if (asset.src) {
-            parts.push(
-                `<image href="${escapeAttr(asset.src)}" x="${arrowX}" y="${arrowY}" width="${size}" height="${size}" transform="rotate(${arrowRotation}, ${arrowX + size / 2}, ${
-                    arrowY + size / 2
-                })" />`
-            );
-        } else if (asset.content) {
-            parts.push(
-                `<g transform="translate(${arrowX} ${arrowY}) rotate(${arrowRotation} ${size / 2} ${size / 2})">${asset.content}</g>`
-            );
-        }
-    }
-
-    return parts;
-};
-
-// ---------------------------------------------------------------------------
-// Fill polygon rendering
-// ---------------------------------------------------------------------------
-
-/**
- * Build SVG fill polygons from viewport fill rules and item data.
- * Returns an SVG fragment in model-view coordinates (same space as model.groupSvg),
- * or null if no fills should be rendered.
- */
-function buildFillSvg(
-    vp: ViewportElement,
-    data: any,
-    model: SvgModelView,
-    allowedGids: Set<string> | null,
-    legendColorMaps?: Map<string, Map<string, string>>
-): string | null {
-    const fills = vp.fills;
-    if (!fills?.length || !model.transform) return null;
-
-    const items = getPathValue(data, `viewports.${vp.id}.items`);
-    if (!Array.isArray(items) || !items.length) return null;
-
-    const { viewMinX, viewMaxZ } = model.transform;
-    const parts: string[] = [];
-
-    for (const rule of fills) {
-        const opacity = rule.fillOpacity ?? 0.35;
-        // Find items matching this fill rule
-        let matching = items.filter((item: unknown) =>
-            isRecord(item) ? matchesV2Filter(item, rule.class, rule.where) : false
-        );
-
-        // Filter by allowed GIDs (from clip polygon center point test)
-        // Only apply if BOTH: clip filtering is active AND this fill rule opts in via matchClipFilter
-        if (allowedGids !== null && rule.matchClipFilter === true) {
-            matching = matching.filter((item: unknown) => {
-                const gid = getProp(item, 'gid') ?? getProp(item, 'id');
-                return gid !== null && gid !== undefined && allowedGids.has(String(gid));
-            });
-            // console.log(`[DEBUG FILL vp="${vp.id}"] Clip filter applied (matchClipFilter=true): ${beforeFilter} → ${matching.length} items (allowedGids.size=${allowedGids.size})`);
-        } else if (rule.matchClipFilter === true) {
-            // console.log(`[DEBUG FILL vp="${vp.id}"] Fill rule has matchClipFilter=true but no clip polygon active`);
-        }
-        // console.log(`[DEBUG FILL vp="${vp.id}"] Fill rule (class="${rule.class}", where=${JSON.stringify(rule.where)}) matched ${matching.length} items`);
-        // if (matching.length > 0) {
-        //   console.log(`[DEBUG FILL vp="${vp.id}"] First matched item:`, {
-        //     gid: getProp(matching[0], 'gid'),
-        //     name: getProp(matching[0], 'name'),
-        //     ifcClass: getProp(matching[0], 'ifcClass'),
-        //     propertySets: getProp(matching[0], 'propertySets'),
-        //     polylines: Array.isArray(getProp(matching[0], 'polylines')) ? (getProp(matching[0], 'polylines') as any[]).length : 0
-        //   });
-        // }
-        if (!matching.length) continue;
-
-        for (const item of matching) {
-            const polylines = getProp(item, 'polylines');
-            if (!Array.isArray(polylines)) continue;
-
-            // Resolve fill color for this item
-            const color = getProp(item, 'color') as [number, number, number, number] | undefined;
-            let fillColor: string;
-            if (rule.fill === 'sample') {
-                if (!color) continue; // no sampled color available
-                fillColor = `rgb(${color[0]},${color[1]},${color[2]})`;
-            } else if (rule.fill === 'legend') {
-                // Use color from legend color map
-                const legendColorMap = legendColorMaps?.get(vp.id);
-                if (!legendColorMap) {
-                    console.warn(
-                        `[FILL] fill="legend" specified but no legend color map found for viewport "${vp.id}". Available viewports:`,
-                        Array.from(legendColorMaps?.keys() ?? [])
-                    );
-                    continue;
-                }
-                // Find matching legend entry - need to determine which property to use for lookup
-                // For now, try common properties (can be made configurable later)
-                let legendKey: string | undefined;
-                const possibleKeys = ['spacename', 'BIP.spacename', 'name'];
-                for (const key of possibleKeys) {
-                    const value = resolvePath(item, key);
-                    if (value !== undefined && value !== null) {
-                        legendKey = String(value);
-                        break;
-                    }
-                }
-                if (!legendKey || !legendColorMap.has(legendKey)) {
-                    // No matching color in legend, skip this item
-                    // if (legendKey) {
-                    //   console.log(`[FILL] No color mapping for "${legendKey}" (property: ${matchedProperty}). Available keys:`, Array.from(legendColorMap.keys()));
-                    // }
-                    continue;
-                }
-                fillColor = legendColorMap.get(legendKey)!;
-                // console.log(`[FILL] ✓ Matched "${legendKey}" -> ${fillColor}`);
-            } else {
-                fillColor = rule.fill;
-            }
-
-            // console.log(`[FILL] Processing ${polylines.length} polyline(s) for item with color ${fillColor}`);
-            for (const polyline of polylines) {
-                const points = isRecord(polyline) ? getProp(polyline, 'points') : null;
-                if (!Array.isArray(points) || points.length < 3) continue;
-
-                // Build path in model-view coordinates
-                const pathParts: string[] = [];
-                for (let i = 0; i < points.length; i++) {
-                    const pt = points[i];
-                    const px = isRecord(pt) ? getProp(pt, 'x') : null;
-                    const pz = isRecord(pt) ? getProp(pt, 'z') : null;
-                    if (!Number.isFinite(px) || !Number.isFinite(pz)) continue;
-                    const mx = (px as number) - viewMinX;
-                    const my = viewMaxZ - (pz as number);
-                    pathParts.push(i === 0 ? `M ${mx} ${my}` : `L ${mx} ${my}`);
-                }
-                if (pathParts.length < 3) continue;
-                pathParts.push('Z');
-                parts.push(
-                    `<path d="${pathParts.join(' ')}" fill="${escapeAttr(fillColor)}" fill-opacity="${opacity}" stroke="none"/>`
-                );
-            }
-        }
-    }
-
-    // console.log(`[FILL] Generated ${parts.length} fill polygon(s) for viewport "${vp.id}"`);
-    return parts.length ? `<g>${parts.join('')}</g>` : null;
-}
+import { escapeAttr, getPathValue, resolvePath } from './renderUtils';
+import { rotateBounds, pickScale } from './viewportUtils';
+import { ViewportRenderInfo } from './labelsRender';
+import { matchesV2Filter } from './filters';
+import { ComputedViewportScale, SvgModelView, ViewportElement, AssetSpec } from './types';
+import { isRecord, getProp } from './typeGuards';
+
+type PolyPoint = { x: number; y: number };
+// Debug overlay for clip polygons. Keep false for normal builds.
+const DEBUG_CLIP_OVERLAY = false;
+
+type Mat = [number, number, number, number, number, number]; // a b c d e f
+
+const matTranslate = (tx: number, ty: number): Mat => [1, 0, 0, 1, tx, ty];
+const matScale = (sx: number, sy: number): Mat => [sx, 0, 0, sy, 0, 0];
+const matRotateDeg = (deg: number): Mat => {
+    const rad = (deg * Math.PI) / 180;
+    const c = Math.cos(rad);
+    const s = Math.sin(rad);
+    return [c, s, -s, c, 0, 0];
+};
+const matMultiply = (m1: Mat, m2: Mat): Mat => {
+    const [a1, b1, c1, d1, e1, f1] = m1;
+    const [a2, b2, c2, d2, e2, f2] = m2;
+    return [
+        a1 * a2 + c1 * b2,
+        b1 * a2 + d1 * b2,
+        a1 * c2 + c1 * d2,
+        b1 * c2 + d1 * d2,
+        a1 * e2 + c1 * f2 + e1,
+        b1 * e2 + d1 * f2 + f1
+    ];
+};
+const matApply = (m: Mat, p: PolyPoint): PolyPoint => {
+    const [a, b, c, d, e, f] = m;
+    return { x: a * p.x + c * p.y + e, y: b * p.x + d * p.y + f };
+};
+export const renderViewportElement = (
+    vp: ViewportElement,
+    baseModel: SvgModelView | null,
+    dataWithViewport: any,
+    preferredScales: number[],
+    scales: Record<string, { preferredScales?: number[] }>,
+    assetMap: Map<string, AssetSpec>,
+    viewportScales: Record<string, ComputedViewportScale>,
+    viewportClipPolygonsLocal: Record<string, Array<Array<PolyPoint>>>,
+    viewportClipBounds: Record<
+        string,
+        { minX: number; maxX: number; minY: number; maxY: number; width: number; height: number }
+    >,
+    viewportClipLabels: Record<string, boolean>,
+    viewportClipStyles: Record<
+        string,
+        { stroke?: string; strokeWidthMm?: number; strokeOpacity?: number; fill?: string; fillOpacity?: number }
+    >,
+    viewportHighlight: Record<string, { gids: Set<string> | null; styles: any }>,
+    viewportRenderInfo: Record<string, ViewportRenderInfo>,
+    warnings: string[],
+    legendColorMaps?: Map<string, Map<string, string>>,
+    precomputed?: {
+        effectiveWidthModel?: number;
+        effectiveHeightModel?: number;
+        clipPolygonsMm?: Array<Array<PolyPoint>>;
+        clipPolygonsLocal?: Array<Array<PolyPoint>>;
+        clipBounds?: { minX: number; maxX: number; minY: number; maxY: number; width: number; height: number };
+        renderCenterModelX?: number;
+        renderCenterModelY?: number;
+    }
+): string[] => {
+    const parts: string[] = [];
+    if (!baseModel) {
+        // Warning already pushed by viewportPrep; avoid duplicate.
+        return parts;
+    }
+
+    const model = baseModel;
+    let renderWidthModel = precomputed?.effectiveWidthModel ?? model.widthModel;
+    let renderHeightModel = precomputed?.effectiveHeightModel ?? model.heightModel;
+    let renderCenterModelX = precomputed?.renderCenterModelX ?? renderWidthModel * 0.5;
+    let renderCenterModelY = precomputed?.renderCenterModelY ?? renderHeightModel * 0.5;
+
+    const clipBounds = viewportClipBounds[vp.id];
+    const clipLocal = viewportClipPolygonsLocal[vp.id];
+    const hasClip = !!clipBounds && Array.isArray(clipLocal) && clipLocal.length > 0;
+    if (hasClip) {
+        renderWidthModel = clipBounds!.width;
+        renderHeightModel = clipBounds!.height;
+        renderCenterModelX = (clipBounds!.minX + clipBounds!.maxX) * 0.5;
+        renderCenterModelY = (clipBounds!.minY + clipBounds!.maxY) * 0.5;
+    }
+
+    const scaleInfo =
+        viewportScales[vp.id] ??
+        pickScale(
+            vp,
+            { ...model, widthModel: renderWidthModel, heightModel: renderHeightModel },
+            preferredScales,
+            scales
+        );
+    const rotationDeg = vp.rotationDeg ?? 0;
+    const mmPerModel = scaleInfo.mmPerModelUnit;
+    const contentWidthMm = renderWidthModel * mmPerModel;
+    const contentHeightMm = renderHeightModel * mmPerModel;
+    const rotated = rotateBounds(contentWidthMm, contentHeightMm, rotationDeg);
+
+    const centerX = vp.align === 'topLeft' ? vp.xMm + rotated.width / 2 : vp.xMm + vp.widthMm / 2;
+    const centerY = vp.align === 'topLeft' ? vp.yMm + rotated.height / 2 : vp.yMm + vp.heightMm / 2;
+
+    const contentOffsetX = vp.align === 'topLeft' ? vp.xMm : vp.xMm + Math.max(0, (vp.widthMm - rotated.width) * 0.5);
+    const contentOffsetY = vp.align === 'topLeft' ? vp.yMm : vp.yMm + Math.max(0, (vp.heightMm - rotated.height) * 0.5);
+
+    const clipPolysLocal = clipLocal;
+    let clipId: string | null = null;
+    const clipDebugPolys: string[] = [];
+    const clipStyle = viewportClipStyles[vp.id];
+    const clipStroke = clipStyle?.stroke;
+    const clipStrokeWidth = clipStyle?.strokeWidthMm;
+    const clipStrokeOpacity = clipStyle?.strokeOpacity;
+    const clipFill = clipStyle?.fill;
+    const clipFillOpacity = clipStyle?.fillOpacity;
+    const transformAttr = `translate(${centerX} ${centerY}) rotate(${rotationDeg}) scale(${mmPerModel}) translate(${-renderCenterModelX} ${-renderCenterModelY})`;
+
+    // Debug: log model bounds and path breakdown
+    // if (model.transform) {
+    //   console.log(`[DEBUG MODEL vp="${vp.id}"] Model bounds: viewMinX=${model.transform.viewMinX.toFixed(2)} viewMaxX=${model.transform.viewMaxX?.toFixed(2)} viewMinZ=${model.transform.viewMinZ.toFixed(2)} viewMaxZ=${model.transform.viewMaxZ.toFixed(2)} viewWidth=${model.transform.viewWidth.toFixed(2)} viewHeight=${model.transform.viewHeight.toFixed(2)}`);
+
+    //   if (model.rawPaths) {
+    //     const fills = model.rawPaths.filter(p => p.meta?.isFill);
+    //     const segments = model.rawPaths.filter(p => p.meta?.isSegment);
+    //     const other = model.rawPaths.filter(p => !p.meta?.isFill && !p.meta?.isSegment);
+    //     console.log(`[DEBUG MODEL vp="${vp.id}"] Path breakdown: ${model.rawPaths.length} total (${fills.length} fills, ${segments.length} segments, ${other.length} other)`);
+
+    //     // Sample a few segment paths
+    //     const sampleSegments = segments.slice(0, 3);
+    //     sampleSegments.forEach((seg, idx) => {
+    //       console.log(`[DEBUG MODEL vp="${vp.id}"] Segment ${idx}: class=${seg.meta?.class} fill=${seg.fill} stroke=${seg.stroke} strokeWidth=${seg.strokeWidth} d=${seg.d.substring(0, 50)}...`);
+    //     });
+
+    //     // Check if geometryTransform is present
+    //     if (model.geometryTransform) {
+    //       console.log(`[DEBUG MODEL vp="${vp.id}"] geometryTransform="${model.geometryTransform}"`);
+    //     } else {
+    //       console.log(`[DEBUG MODEL vp="${vp.id}"] WARNING: geometryTransform is MISSING!`);
+    //     }
+    //   }
+    // }
+
+    // Guard: detect NaN/Infinity in computed transform values
+    if (
+        !Number.isFinite(centerX) ||
+        !Number.isFinite(centerY) ||
+        !Number.isFinite(mmPerModel) ||
+        !Number.isFinite(renderCenterModelX) ||
+        !Number.isFinite(renderCenterModelY)
+    ) {
+        warnings.push(
+            `Viewport '${vp.id}' has non-finite transform values (centerX=${centerX}, centerY=${centerY}, mmPerModel=${mmPerModel}). Skipping render.`
+        );
+        return parts;
+    }
+
+    // console.log(`[DEBUG CLIP APPLY vp="${vp.id}"] clipPolysLocal exists: ${!!clipPolysLocal}, length: ${clipPolysLocal?.length ?? 0}`);
+    if (clipPolysLocal && clipPolysLocal.length) {
+        // console.log(`[DEBUG CLIP APPLY vp="${vp.id}"] *** APPLYING CLIP-PATH *** with ${clipPolysLocal.length} polygons`);
+        if (clipPolysLocal.every((poly) => !poly.length)) {
+            warnings.push(`Viewport '${vp.id}' clip has no points after prep; skipping clip.`);
+        }
+        clipId = `clip-${vp.id}-${parts.length}`;
+        const polyPartsPage: string[] = [];
+        // Clip polygon points are in model-view coordinates (not SVG-internal),
+        // so transform them with outer only (model-view → page). Do NOT apply
+        // geometryTransform — that maps SVG-internal → model-view, which is only
+        // correct for path data inside the <g transform="geometryTransform"> group.
+        const outer = matMultiply(
+            matTranslate(centerX, centerY),
+            matMultiply(
+                matRotateDeg(rotationDeg),
+                matMultiply(matScale(mmPerModel, mmPerModel), matTranslate(-renderCenterModelX, -renderCenterModelY))
+            )
+        );
+
+        // Debug: log clip polygon bounds
+        let clipMinX = Infinity,
+            clipMaxX = -Infinity,
+            clipMinY = Infinity,
+            clipMaxY = -Infinity;
+        clipPolysLocal.forEach((poly) => {
+            poly.forEach((p) => {
+                if (p.x < clipMinX) clipMinX = p.x;
+                if (p.x > clipMaxX) clipMaxX = p.x;
+                if (p.y < clipMinY) clipMinY = p.y;
+                if (p.y > clipMaxY) clipMaxY = p.y;
+            });
+        });
+        // console.log(`[DEBUG CLIP vp="${vp.id}"] Local bounds: x=${clipMinX.toFixed(2)}..${clipMaxX.toFixed(2)} y=${clipMinY.toFixed(2)}..${clipMaxY.toFixed(2)} (w=${(clipMaxX - clipMinX).toFixed(2)} h=${(clipMaxY - clipMinY).toFixed(2)})`);
+
+        clipPolysLocal.forEach((poly) => {
+            const pagePtsArr = poly.map((p) => matApply(outer, p));
+            const pagePts = pagePtsArr.map((p) => `${p.x},${p.y}`).join(' ');
+            polyPartsPage.push(`<polygon points="${pagePts}" />`);
+            if (clipStroke || clipFill) {
+                clipDebugPolys.push(
+                    `<polygon points="${pagePts}"` +
+                        (clipStroke ? ` stroke="${escapeAttr(clipStroke)}"` : '') +
+                        (clipStrokeWidth ? ` stroke-width="${clipStrokeWidth}"` : '') +
+                        (clipStrokeOpacity !== undefined ? ` stroke-opacity="${clipStrokeOpacity}"` : '') +
+                        (clipFill ? ` fill="${escapeAttr(clipFill)}"` : ' fill="none"') +
+                        (clipFillOpacity !== undefined ? ` fill-opacity="${clipFillOpacity}"` : '') +
+                        ` />`
+                );
+            }
+            if (DEBUG_CLIP_OVERLAY) {
+                clipDebugPolys.push(
+                    `<polygon points="${pagePts}" stroke="#ff00ff" stroke-width="0.4" fill="#000000" fill-opacity="0.35" />`
+                );
+            }
+        });
+        parts.push(
+            `<defs><clipPath id="${clipId}" clipPathUnits="userSpaceOnUse">${polyPartsPage.join('')}</clipPath></defs>`
+        );
+    }
+
+    parts.push(`<g${clipId ? ` clip-path="url(#${clipId})"` : ''}>`);
+    parts.push(`<g transform="${transformAttr}">`);
+
+    // Render fill polygons below structural lines
+    const allowedGids = viewportHighlight[vp.id]?.gids ?? null;
+    const fillSvg = buildFillSvg(vp, dataWithViewport, model, allowedGids, legendColorMaps);
+    if (fillSvg) parts.push(fillSvg);
+
+    // Debug: log sample path coordinates from model.groupSvg
+    if (clipId && model.rawPaths && model.rawPaths.length > 0) {
+        const asMeta = (m: unknown): { isSegment?: boolean; isFill?: boolean; class?: string } | undefined =>
+            m != null && typeof m === 'object'
+                ? (m as { isSegment?: boolean; isFill?: boolean; class?: string })
+                : undefined;
+        const samplePath = model.rawPaths.find((p) => {
+            const pm = asMeta(p.meta);
+            return pm?.isSegment || (!pm?.isFill && !pm?.class);
+        });
+        if (samplePath) {
+            const dMatch = samplePath.d.match(/M([\d.-]+)\s+([\d.-]+)/);
+            if (dMatch) {
+                // console.log(`[DEBUG PATH vp="${vp.id}"] Sample wall path starts at x=${dMatch[1]} y=${dMatch[2]} (world coords, will be transformed by geometryTransform)`);
+            }
+        }
+    }
+
+    // Compensate stroke-widths for the viewport scale transform.
+    // Paths have stroke-width in model units; the scale(mmPerModel) transform
+    // would make them thinner/thicker depending on zoom. Dividing by mmPerModel
+    // ensures strokes render at their intended mm size regardless of viewport scale.
+    const compensatedSvg = model.groupSvg.replace(
+        /stroke-width="([0-9.eE+-]+)"/g,
+        (_, w) => `stroke-width="${parseFloat(w) / mmPerModel}"`
+    );
+    parts.push(compensatedSvg);
+    parts.push('</g>');
+    parts.push('</g>');
+
+    if (clipDebugPolys.length) {
+        parts.push(`<g pointer-events="none">${clipDebugPolys.join('')}</g>`);
+    }
+
+    viewportRenderInfo[vp.id] = {
+        mmPerModel,
+        contentWidthMm: rotated.width,
+        contentHeightMm: rotated.height,
+        offsetX: contentOffsetX,
+        offsetY: contentOffsetY,
+        rotationDeg,
+        transform: model.transform!,
+        centerX,
+        centerY,
+        centerModelX: renderCenterModelX,
+        centerModelY: renderCenterModelY
+    };
+
+    if (vp.border) {
+        const borderStroke = vp.border.stroke ?? '#000';
+        const borderWidth = vp.border.strokeWidthMm ?? 0.25;
+        parts.push(
+            `<rect x="${vp.xMm}" y="${vp.yMm}" width="${vp.widthMm}" height="${vp.heightMm}" stroke="${escapeAttr(
+                borderStroke
+            )}" stroke-width="${borderWidth}" fill="none"${vp.border.dashed ? ' stroke-dasharray="4 2"' : ''} />`
+        );
+    }
+
+    if (vp.northArrow) {
+        const arrow = vp.northArrow;
+        const asset = assetMap.get(arrow.assetId);
+        const size = arrow.sizeMm ?? 12;
+        const offsetX = arrow.offsetXMm ?? 8;
+        const offsetY = arrow.offsetYMm ?? 8;
+        const arrowX = vp.xMm + vp.widthMm - offsetX - size;
+        const arrowY = vp.yMm + offsetY;
+        const arrowRotation = arrow.rotationDeg ?? 0;
+        if (!asset) {
+            warnings.push(`Missing asset '${arrow.assetId}' for north arrow on viewport '${vp.id}'.`);
+        } else if (asset.src) {
+            parts.push(
+                `<image href="${escapeAttr(asset.src)}" x="${arrowX}" y="${arrowY}" width="${size}" height="${size}" transform="rotate(${arrowRotation}, ${arrowX + size / 2}, ${
+                    arrowY + size / 2
+                })" />`
+            );
+        } else if (asset.content) {
+            parts.push(
+                `<g transform="translate(${arrowX} ${arrowY}) rotate(${arrowRotation} ${size / 2} ${size / 2})">${asset.content}</g>`
+            );
+        }
+    }
+
+    return parts;
+};
+
+// ---------------------------------------------------------------------------
+// Fill polygon rendering
+// ---------------------------------------------------------------------------
+
+/**
+ * Build SVG fill polygons from viewport fill rules and item data.
+ * Returns an SVG fragment in model-view coordinates (same space as model.groupSvg),
+ * or null if no fills should be rendered.
+ */
+function buildFillSvg(
+    vp: ViewportElement,
+    data: any,
+    model: SvgModelView,
+    allowedGids: Set<string> | null,
+    legendColorMaps?: Map<string, Map<string, string>>
+): string | null {
+    const fills = vp.fills;
+    if (!fills?.length || !model.transform) return null;
+
+    const items = getPathValue(data, `viewports.${vp.id}.items`);
+    if (!Array.isArray(items) || !items.length) return null;
+
+    const { viewMinX, viewMaxZ } = model.transform;
+    const parts: string[] = [];
+
+    for (const rule of fills) {
+        const opacity = rule.fillOpacity ?? 0.35;
+        // Find items matching this fill rule
+        let matching = items.filter((item: unknown) =>
+            isRecord(item) ? matchesV2Filter(item, rule.class, rule.where) : false
+        );
+
+        // Filter by allowed GIDs (from clip polygon center point test)
+        // Only apply if BOTH: clip filtering is active AND this fill rule opts in via matchClipFilter
+        if (allowedGids !== null && rule.matchClipFilter === true) {
+            matching = matching.filter((item: unknown) => {
+                const gid = getProp(item, 'gid') ?? getProp(item, 'id');
+                return gid !== null && gid !== undefined && allowedGids.has(String(gid));
+            });
+            // console.log(`[DEBUG FILL vp="${vp.id}"] Clip filter applied (matchClipFilter=true): ${beforeFilter} → ${matching.length} items (allowedGids.size=${allowedGids.size})`);
+        } else if (rule.matchClipFilter === true) {
+            // console.log(`[DEBUG FILL vp="${vp.id}"] Fill rule has matchClipFilter=true but no clip polygon active`);
+        }
+        // console.log(`[DEBUG FILL vp="${vp.id}"] Fill rule (class="${rule.class}", where=${JSON.stringify(rule.where)}) matched ${matching.length} items`);
+        // if (matching.length > 0) {
+        //   console.log(`[DEBUG FILL vp="${vp.id}"] First matched item:`, {
+        //     gid: getProp(matching[0], 'gid'),
+        //     name: getProp(matching[0], 'name'),
+        //     ifcClass: getProp(matching[0], 'ifcClass'),
+        //     propertySets: getProp(matching[0], 'propertySets'),
+        //     polylines: Array.isArray(getProp(matching[0], 'polylines')) ? (getProp(matching[0], 'polylines') as any[]).length : 0
+        //   });
+        // }
+        if (!matching.length) continue;
+
+        for (const item of matching) {
+            const polylines = getProp(item, 'polylines');
+            if (!Array.isArray(polylines)) continue;
+
+            // Resolve fill color for this item
+            const color = getProp(item, 'color') as [number, number, number, number] | undefined;
+            let fillColor: string;
+            if (rule.fill === 'sample') {
+                if (!color) continue; // no sampled color available
+                fillColor = `rgb(${color[0]},${color[1]},${color[2]})`;
+            } else if (rule.fill === 'legend') {
+                // Use color from legend color map
+                const legendColorMap = legendColorMaps?.get(vp.id);
+                if (!legendColorMap) {
+                    console.warn(
+                        `[FILL] fill="legend" specified but no legend color map found for viewport "${vp.id}". Available viewports:`,
+                        Array.from(legendColorMaps?.keys() ?? [])
+                    );
+                    continue;
+                }
+                // Find matching legend entry - need to determine which property to use for lookup
+                // For now, try common properties (can be made configurable later)
+                let legendKey: string | undefined;
+                const possibleKeys = ['spacename', 'BIP.spacename', 'name'];
+                for (const key of possibleKeys) {
+                    const value = resolvePath(item, key);
+                    if (value !== undefined && value !== null) {
+                        legendKey = String(value);
+                        break;
+                    }
+                }
+                if (!legendKey || !legendColorMap.has(legendKey)) {
+                    // No matching color in legend, skip this item
+                    // if (legendKey) {
+                    //   console.log(`[FILL] No color mapping for "${legendKey}" (property: ${matchedProperty}). Available keys:`, Array.from(legendColorMap.keys()));
+                    // }
+                    continue;
+                }
+                fillColor = legendColorMap.get(legendKey)!;
+                // console.log(`[FILL] ✓ Matched "${legendKey}" -> ${fillColor}`);
+            } else {
+                fillColor = rule.fill;
+            }
+
+            // console.log(`[FILL] Processing ${polylines.length} polyline(s) for item with color ${fillColor}`);
+            for (const polyline of polylines) {
+                const points = isRecord(polyline) ? getProp(polyline, 'points') : null;
+                if (!Array.isArray(points) || points.length < 3) continue;
+
+                // Build path in model-view coordinates
+                const pathParts: string[] = [];
+                for (let i = 0; i < points.length; i++) {
+                    const pt = points[i];
+                    const px = isRecord(pt) ? getProp(pt, 'x') : null;
+                    const pz = isRecord(pt) ? getProp(pt, 'z') : null;
+                    if (!Number.isFinite(px) || !Number.isFinite(pz)) continue;
+                    const mx = (px as number) - viewMinX;
+                    const my = viewMaxZ - (pz as number);
+                    pathParts.push(i === 0 ? `M ${mx} ${my}` : `L ${mx} ${my}`);
+                }
+                if (pathParts.length < 3) continue;
+                pathParts.push('Z');
+                parts.push(
+                    `<path d="${pathParts.join(' ')}" fill="${escapeAttr(fillColor)}" fill-opacity="${opacity}" stroke="none"/>`
+                );
+            }
+        }
+    }
+
+    // console.log(`[FILL] Generated ${parts.length} fill polygon(s) for viewport "${vp.id}"`);
+    return parts.length ? `<g>${parts.join('')}</g>` : null;
+}