@hypen-space/web 0.2.0

package/src/canvas/layout.ts

@@ -0,0 +1,401 @@
+/**
+ * Layout Engine
+ *
+ * Flexbox-like layout system for positioning virtual nodes
+ */
+
+import type { VirtualNode, Layout, BoxSpacing } from "./types.js";
+import { parseSpacing, parseSize } from "./utils.js";
+import { measureText } from "./text.js";
+
+/**
+ * Compute layout for a virtual node tree
+ */
+export function computeLayout(
+  ctx: CanvasRenderingContext2D,
+  node: VirtualNode,
+  availableWidth: number,
+  availableHeight: number,
+  x: number = 0,
+  y: number = 0
+): void {
+  // Parse props
+  const props = node.props;
+
+  // Support individual margins (marginTop, marginRight, etc.)
+  let margin = parseSpacing(props.margin || 0);
+  if (props.marginTop !== undefined) margin.top = parseFloat(props.marginTop) || 0;
+  if (props.marginRight !== undefined) margin.right = parseFloat(props.marginRight) || 0;
+  if (props.marginBottom !== undefined) margin.bottom = parseFloat(props.marginBottom) || 0;
+  if (props.marginLeft !== undefined) margin.left = parseFloat(props.marginLeft) || 0;
+
+  // Support individual padding (paddingTop, paddingRight, etc.)
+  let padding = parseSpacing(props.padding || 0);
+  if (props.paddingTop !== undefined) padding.top = parseFloat(props.paddingTop) || 0;
+  if (props.paddingRight !== undefined) padding.right = parseFloat(props.paddingRight) || 0;
+  if (props.paddingBottom !== undefined) padding.bottom = parseFloat(props.paddingBottom) || 0;
+  if (props.paddingLeft !== undefined) padding.left = parseFloat(props.paddingLeft) || 0;
+
+  const borderWidth = parseFloat(props.borderWidth) || 0;
+  const borderColor = props.borderColor || "transparent";
+  const borderRadius = parseFloat(props.borderRadius) || 0;
+
+  // Calculate available space after margin
+  const availableAfterMargin = {
+    width: availableWidth - margin.left - margin.right,
+    height: availableHeight - margin.top - margin.bottom,
+  };
+
+  // Determine size
+  let width = parseSize(props.width);
+  let height = parseSize(props.height);
+
+  // Default sizing for specific component types
+  const type = node.type.toLowerCase();
+
+  if (type === "spacer") {
+    // Spacer fills available space by default
+    if (width === null) width = availableAfterMargin.width;
+    if (height === null) height = availableAfterMargin.height;
+  } else if (type === "divider" || type === "separator") {
+    const orientation = props.orientation || "horizontal";
+    const thickness = parseFloat(props.thickness) || 1;
+
+    if (orientation === "vertical") {
+      if (width === null) width = thickness;
+      if (height === null) height = availableAfterMargin.height;
+    } else {
+      if (width === null) width = availableAfterMargin.width;
+      if (height === null) height = thickness;
+    }
+  } else if (type === "checkbox" || type === "radio") {
+    const size = parseFloat(props.size) || 20;
+    if (width === null) width = size;
+    if (height === null) height = size;
+  } else if (type === "switch" || type === "toggle") {
+    if (width === null) width = 44;
+    if (height === null) height = 24;
+  } else if (type === "slider") {
+    if (width === null) width = 200;
+    if (height === null) height = 20;
+  } else if (type === "progress" || type === "progressbar") {
+    if (width === null) width = 200;
+    if (height === null) height = 8;
+  } else if (type === "spinner" || type === "loading") {
+    const size = parseFloat(props.size) || 24;
+    if (width === null) width = size;
+    if (height === null) height = size;
+  } else if (type === "badge") {
+    if (width === null) width = 20;
+    if (height === null) height = 20;
+  } else if (type === "avatar") {
+    const size = parseFloat(props.size) || 40;
+    if (width === null) width = size;
+    if (height === null) height = size;
+  } else if (type === "icon") {
+    const size = parseFloat(props.size) || 24;
+    if (width === null) width = size;
+    if (height === null) height = size;
+  }
+
+  // Intrinsic sizing for text nodes
+  if (node.type === "text" && node.props[0]) {
+    const text = String(node.props[0] || "");
+    const fontSize = parseFloat(props.fontSize) || 16;
+    const fontWeight = props.fontWeight || "normal";
+    const fontFamily = props.fontFamily || "system-ui, sans-serif";
+    const lineHeight = parseFloat(props.lineHeight) || fontSize * 1.2;
+
+    const maxWidth = width || availableAfterMargin.width - padding.left - padding.right;
+    const metrics = measureText(ctx, text, { fontSize, fontWeight, fontFamily, lineHeight }, maxWidth);
+
+    if (!width) width = metrics.width + padding.left + padding.right;
+    if (!height) height = metrics.height + padding.top + padding.bottom;
+  }
+
+  // Default to available size if not specified
+  if (width === null) width = availableAfterMargin.width;
+  if (height === null) height = availableAfterMargin.height;
+
+  // Apply constraints
+  const minWidth = parseSize(props.minWidth);
+  const maxWidth = parseSize(props.maxWidth);
+  const minHeight = parseSize(props.minHeight);
+  const maxHeight = parseSize(props.maxHeight);
+
+  if (minWidth !== null) width = Math.max(width, minWidth);
+  if (maxWidth !== null) width = Math.min(width, maxWidth);
+  if (minHeight !== null) height = Math.max(height, minHeight);
+  if (maxHeight !== null) height = Math.min(height, maxHeight);
+
+  // Create layout object
+  const layout: Layout = {
+    x: x + margin.left,
+    y: y + margin.top,
+    width,
+    height,
+    margin,
+    padding,
+    border: {
+      width: borderWidth,
+      color: borderColor,
+      radius: borderRadius,
+    },
+    contentX: padding.left + borderWidth,
+    contentY: padding.top + borderWidth,
+    contentWidth: width - padding.left - padding.right - borderWidth * 2,
+    contentHeight: height - padding.top - padding.bottom - borderWidth * 2,
+  };
+
+  node.layout = layout;
+
+  // Layout children if container
+  if (node.children.length > 0) {
+    layoutChildren(ctx, node);
+  }
+}
+
+/**
+ * Layout children using flexbox-like rules
+ */
+function layoutChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode): void {
+  const layout = parent.layout!;
+  const props = parent.props;
+
+  // Stack components overlay children on top of each other
+  if (parent.type.toLowerCase() === "stack") {
+    layoutStackChildren(ctx, parent);
+    return;
+  }
+
+  const flexDirection = props.flexDirection || (parent.type === "column" ? "column" : "row");
+  const justifyContent = props.justifyContent || "flex-start";
+  const alignItems = props.alignItems || "flex-start";
+  const gap = parseFloat(props.gap) || 0;
+
+  const isColumn = flexDirection === "column";
+  const availableWidth = layout.contentWidth;
+  const availableHeight = layout.contentHeight;
+
+  // First pass: compute intrinsic sizes and collect flex info
+  const childInfo: Array<{
+    width: number;
+    height: number;
+    flexGrow: number;
+    flexShrink: number;
+    flexBasis: number | null;
+  }> = [];
+  let totalMainSize = 0;
+  let totalFlexGrow = 0;
+  let totalFlexShrink = 0;
+
+  for (const child of parent.children) {
+    const flexGrow = parseFloat(child.props.flexGrow) || parseFloat(child.props.flex) || 0;
+    const flexShrink = parseFloat(child.props.flexShrink) || 1;
+    const flexBasis = parseSize(child.props.flexBasis);
+
+    // Compute child layout with available space
+    computeLayout(
+      ctx,
+      child,
+      availableWidth,
+      availableHeight,
+      0,
+      0
+    );
+
+    const childLayout = child.layout!;
+    let mainSize = isColumn ? childLayout.height : childLayout.width;
+
+    // Use flexBasis if specified
+    if (flexBasis !== null) {
+      mainSize = flexBasis;
+      if (isColumn) {
+        childLayout.height = flexBasis;
+      } else {
+        childLayout.width = flexBasis;
+      }
+    }
+
+    childInfo.push({
+      width: childLayout.width,
+      height: childLayout.height,
+      flexGrow,
+      flexShrink,
+      flexBasis,
+    });
+
+    totalMainSize += mainSize;
+    totalFlexGrow += flexGrow;
+    totalFlexShrink += flexShrink;
+  }
+
+  // Add gaps
+  const totalGap = gap * (parent.children.length - 1);
+  totalMainSize += totalGap;
+
+  // Apply flex grow/shrink
+  const availableMain = isColumn ? availableHeight : availableWidth;
+  let remainingSpace = availableMain - totalMainSize;
+
+  // Distribute remaining space to flex-grow children
+  if (remainingSpace > 0 && totalFlexGrow > 0) {
+    const spacePerFlex = remainingSpace / totalFlexGrow;
+
+    for (let i = 0; i < parent.children.length; i++) {
+      const info = childInfo[i];
+      if (info.flexGrow > 0) {
+        const extraSpace = spacePerFlex * info.flexGrow;
+        if (isColumn) {
+          info.height += extraSpace;
+        } else {
+          info.width += extraSpace;
+        }
+        totalMainSize += extraSpace;
+      }
+    }
+
+    remainingSpace = 0;
+  }
+
+  // Apply flex shrink if needed (content is too large)
+  if (remainingSpace < 0 && totalFlexShrink > 0) {
+    const shrinkPerFlex = Math.abs(remainingSpace) / totalFlexShrink;
+
+    for (let i = 0; i < parent.children.length; i++) {
+      const info = childInfo[i];
+      if (info.flexShrink > 0) {
+        const shrinkSpace = Math.min(
+          shrinkPerFlex * info.flexShrink,
+          isColumn ? info.height : info.width
+        );
+
+        if (isColumn) {
+          info.height = Math.max(0, info.height - shrinkSpace);
+        } else {
+          info.width = Math.max(0, info.width - shrinkSpace);
+        }
+
+        totalMainSize -= shrinkSpace;
+      }
+    }
+
+    remainingSpace = availableMain - totalMainSize;
+  }
+
+  // Calculate starting position based on justifyContent
+  let mainStart = 0;
+  let spacing = 0;
+
+  if (justifyContent === "center") {
+    mainStart = Math.max(0, remainingSpace / 2);
+  } else if (justifyContent === "flex-end") {
+    mainStart = Math.max(0, remainingSpace);
+  } else if (justifyContent === "space-between") {
+    spacing = remainingSpace / Math.max(1, parent.children.length - 1);
+  } else if (justifyContent === "space-around") {
+    spacing = remainingSpace / parent.children.length;
+    mainStart = spacing / 2;
+  }
+
+  // Position children
+  let currentMain = mainStart;
+
+  for (let i = 0; i < parent.children.length; i++) {
+    const child = parent.children[i];
+    const childLayout = child.layout!;
+    const info = childInfo[i];
+
+    // Update child layout with flex-adjusted size
+    childLayout.width = info.width;
+    childLayout.height = info.height;
+
+    // Calculate cross position based on alignItems
+    let crossStart = 0;
+    const availableCross = isColumn ? availableWidth : availableHeight;
+    const childCross = isColumn ? info.width : info.height;
+
+    if (alignItems === "center") {
+      crossStart = (availableCross - childCross) / 2;
+    } else if (alignItems === "flex-end") {
+      crossStart = availableCross - childCross;
+    }
+
+    // Update child position relative to parent content area
+    if (isColumn) {
+      childLayout.x = layout.x + layout.contentX + crossStart;
+      childLayout.y = layout.y + layout.contentY + currentMain;
+      currentMain += info.height + gap;
+    } else {
+      childLayout.x = layout.x + layout.contentX + currentMain;
+      childLayout.y = layout.y + layout.contentY + crossStart;
+      currentMain += info.width + gap;
+    }
+
+    if (justifyContent === "space-between" || justifyContent === "space-around") {
+      currentMain += spacing;
+    }
+  }
+}
+
+/**
+ * Layout Stack children - overlays children on top of each other
+ */
+function layoutStackChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode): void {
+  const layout = parent.layout!;
+  const props = parent.props;
+
+  const alignItems = props.alignItems || "flex-start";
+  const justifyContent = props.justifyContent || "flex-start";
+
+  const availableWidth = layout.contentWidth;
+  const availableHeight = layout.contentHeight;
+
+  // Layout all children at the same position (stacked on top of each other)
+  for (const child of parent.children) {
+    // Compute child layout
+    computeLayout(
+      ctx,
+      child,
+      availableWidth,
+      availableHeight,
+      0,
+      0
+    );
+
+    const childLayout = child.layout!;
+
+    // Calculate position based on alignment
+    let x = 0;
+    let y = 0;
+
+    // Horizontal alignment
+    if (alignItems === "center") {
+      x = (availableWidth - childLayout.width) / 2;
+    } else if (alignItems === "flex-end") {
+      x = availableWidth - childLayout.width;
+    }
+
+    // Vertical alignment
+    if (justifyContent === "center") {
+      y = (availableHeight - childLayout.height) / 2;
+    } else if (justifyContent === "flex-end") {
+      y = availableHeight - childLayout.height;
+    }
+
+    // Update child position relative to parent content area
+    childLayout.x = layout.x + layout.contentX + x;
+    childLayout.y = layout.y + layout.contentY + y;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+