@morphika/webframe 0.1.0

package/components/builder/SectionV2Canvas.tsx

@@ -0,0 +1,297 @@
+"use client";
+
+import { useState, useRef, useEffect, useMemo } from "react";
+import { useBuilderStore } from "../../lib/builder/store";
+import { findGaps } from "../../lib/builder/cascade";
+import type { PageSectionV2, SectionColumn } from "../../lib/sanity/types";
+import { getEffectiveColumnsV2, getSectionV2SettingValue } from "./settings-panel/responsive-helpers";
+import SectionV2Column from "./SectionV2Column";
+import SortableBlock from "./SortableBlock";
+import { useColumnDragContext } from "./ColumnDragContext";
+import { useColumnResize } from "./hooks/useColumnResize";
+import { InsertionLines } from "./InsertionLines";
+
+// ============================================
+// SectionV2Canvas — Renders a V2 section in the builder
+//
+// Phase 3: Refined resize with debounced store updates,
+// real-time cascade preview, snapping guide, column drag,
+// and insertion lines between adjacent columns.
+// ============================================
+
+interface SectionV2CanvasProps {
+  section: PageSectionV2;
+  onAddBlockTarget: (sectionKey: string, colKey: string, insertIndex?: number) => void;
+  /** When true, the grid stretches to fill its parent height (used inside parallax slides) */
+  fillHeight?: boolean;
+}
+
+export default function SectionV2Canvas({
+  section,
+  onAddBlockTarget,
+  fillHeight,
+}: SectionV2CanvasProps) {
+  const previewMode = useBuilderStore((s) => s.previewMode);
+  const canvasZoom = useBuilderStore((s) => s.canvasZoom);
+  const activeViewport = useBuilderStore((s) => s.activeViewport);
+  const selectedColumnKey = useBuilderStore((s) => s.selectedColumnKey);
+  const selectedBlockKey = useBuilderStore((s) => s.selectedBlockKey);
+  const addColumnV2 = useBuilderStore((s) => s.addColumnV2);
+  const deleteColumnV2 = useBuilderStore((s) => s.deleteColumnV2);
+  const resizeColumnV2 = useBuilderStore((s) => s.resizeColumnV2);
+  const resizeColumnV2Left = useBuilderStore((s) => s.resizeColumnV2Left);
+  const updateSectionV2Responsive = useBuilderStore((s) => s.updateSectionV2Responsive);
+  const selectColumnV2 = useBuilderStore((s) => s.selectColumnV2);
+  const selectBlock = useBuilderStore((s) => s.selectBlock);
+  const deleteBlock = useBuilderStore((s) => s.deleteBlock);
+  const duplicateBlock = useBuilderStore((s) => s.duplicateBlock);
+
+  const isResponsive = activeViewport !== "desktop";
+  const gridColumns = section.settings.grid_columns || 12;
+  const colGap = getSectionV2SettingValue(section, activeViewport, "col_gap", 20);
+  const rowGap = getSectionV2SettingValue(section, activeViewport, "row_gap", 20);
+
+  const [isSectionHovered, setIsSectionHovered] = useState(false);
+  const gridContainerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  // Custom column drag context (replaces dnd-kit useDndContext for column drag)
+  const {
+    isDragging: isColDragActive,
+    draggedColumnKey: draggingColumnKey,
+    draggedSectionKey: draggingSectionKey,
+    dropTarget,
+    insertBetween,
+    startDrag,
+  } = useColumnDragContext();
+
+  // Only show insertion lines if the drag originates from THIS section
+  const showInsertionLines = isColDragActive && draggingSectionKey === section._key;
+
+  // When drag ends (isColDragActive becomes false), reset hover state so it
+  // doesn't stay stuck true if the pointer ended outside the grid.
+  const prevDragActiveRef = useRef(false);
+  useEffect(() => {
+    if (prevDragActiveRef.current && !isColDragActive) {
+      setIsSectionHovered(false);
+    }
+    prevDragActiveRef.current = isColDragActive;
+  }, [isColDragActive]);
+
+  // Responsive-aware effective column positions
+  const effectiveCols = useMemo(
+    () => getEffectiveColumnsV2(section, activeViewport),
+    [section, activeViewport]
+  );
+
+  // --- Resize logic (extracted to hook) ---
+  const { resizePreview, snappingInfo, handleResizeRight, handleResizeLeft } = useColumnResize({
+    section,
+    gridColumns,
+    colGap,
+    canvasZoom,
+    effectiveCols,
+    isResponsive,
+    activeViewport,
+    resizeColumnV2,
+    resizeColumnV2Left,
+    updateSectionV2Responsive,
+  });
+
+  // Measure container width for pixel position calculation.
+  // Uses ResizeObserver so it updates when the grid resizes (zoom change, window resize)
+  // and is also immediately available when a drag starts (no stale 0 value).
+  useEffect(() => {
+    const el = gridContainerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+    ro.observe(el);
+    // Set initial value immediately
+    setContainerWidth(el.getBoundingClientRect().width);
+    return () => ro.disconnect();
+  }, []);
+
+  // Use preview columns during resize, otherwise responsive-aware effective columns
+  const displayCols = useMemo(() => {
+    if (resizePreview) return resizePreview;
+    return effectiveCols;
+  }, [resizePreview, effectiveCols]);
+
+  // Compute gaps from display columns
+  const gaps = useMemo(() => findGaps(displayCols, gridColumns), [displayCols, gridColumns]);
+
+  // ---- Grid container ----
+  return (
+    <div
+      ref={gridContainerRef}
+      data-v2-grid-container
+      data-v2-section-key={section._key}
+      style={{
+        display: "grid",
+        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+        ...(fillHeight ? { gridTemplateRows: "1fr" } : {}),
+        columnGap: `${colGap}px`,
+        rowGap: `${rowGap}px`,
+        position: "relative",
+        ...(fillHeight ? { flex: 1, minHeight: 0 } : {}),
+      }}
+      onMouseEnter={() => setIsSectionHovered(true)}
+      onMouseLeave={() => {
+        // Don't clear hover during column drag — the DragOverlay steals the pointer
+        // but we still want gaps and column outlines visible as drop targets.
+        if (!isColDragActive) setIsSectionHovered(false);
+      }}
+    >
+      {/* Snapping guide overlay — shows a pulsing line when resize would cause overflow */}
+      {snappingInfo?.willOverflow && (
+        <div
+          className="pointer-events-none absolute left-0 right-0 z-[10]"
+          style={{
+            bottom: 0,
+            height: 2,
+            background: "linear-gradient(90deg, transparent, #ff6b35, #ff6b35, transparent)",
+            animation: "pulse 1s ease-in-out infinite",
+            opacity: 0.8,
+          }}
+        />
+      )}
+
+      {/* Columns — use displayCols for positions but real data for blocks */}
+      {section.columns.map((col) => {
+        const displayCol = displayCols.find((dc) => dc._key === col._key);
+        const effectiveGridColumn = displayCol?.grid_column ?? col.grid_column;
+        const effectiveGridRow = displayCol?.grid_row ?? col.grid_row;
+        const effectiveSpan = displayCol?.span ?? col.span;
+
+        const virtualCol: SectionColumn = {
+          ...col,
+          grid_column: effectiveGridColumn,
+          grid_row: effectiveGridRow,
+          span: effectiveSpan,
+        };
+
+        return (
+          <SectionV2Column
+            key={col._key}
+            column={virtualCol}
+            sectionKey={section._key}
+            section={section}
+            isSelected={selectedColumnKey === col._key}
+            isSectionHovered={isSectionHovered}
+            isResizing={resizePreview !== null}
+            snappingInfo={
+              snappingInfo?.columnKey === col._key
+                ? snappingInfo
+                : snappingInfo?.compressedNeighborKey === col._key
+                ? snappingInfo
+                : null
+            }
+            insertNudge={
+              insertBetween?.leftKey === col._key
+                ? "left"
+                : insertBetween?.rightKey === col._key
+                ? "right"
+                : null
+            }
+            isSwapTarget={
+              dropTarget?.type === "swap" &&
+              dropTarget.columnKey === col._key &&
+              dropTarget.sectionKey === section._key
+            }
+            isDraggedColumn={
+              draggingColumnKey === col._key &&
+              draggingSectionKey === section._key
+            }
+            onStartDrag={(e: React.MouseEvent) =>
+              startDrag(e, section._key, col._key)
+            }
+            containerWidth={containerWidth}
+            onSelect={() => selectColumnV2(section._key, col._key)}
+            onDelete={() => deleteColumnV2(section._key, col._key)}
+            onAddBlock={(insertIndex) =>
+              onAddBlockTarget(section._key, col._key, insertIndex)
+            }
+            onResizeRight={handleResizeRight}
+            onResizeLeft={handleResizeLeft}
+          >
+            {(col.blocks || []).map((block, blockIdx) => (
+              <SortableBlock
+                key={block._key}
+                block={block}
+                rowKey={section._key}
+                colKey={col._key}
+                blockIndex={blockIdx}
+                totalBlocks={col.blocks?.length || 0}
+                isSelected={selectedBlockKey === block._key}
+                onSelect={() => selectBlock(block._key)}
+                onDelete={() => deleteBlock(block._key)}
+                onContextMenu={() => {}}
+                onDuplicate={() => duplicateBlock(block._key)}
+              />
+            ))}
+          </SectionV2Column>
+        );
+      })}
+
+      {/* Gap buttons: "+ Add Column" — also act as hit-test targets for custom column drag */}
+      {!previewMode &&
+        gaps.map((gap) => {
+          const isGapTarget =
+            dropTarget?.type === "gap" &&
+            dropTarget.sectionKey === section._key &&
+            dropTarget.gapRow === gap.grid_row &&
+            dropTarget.gapCol === gap.grid_column;
+          const showAsDropTarget = showInsertionLines;
+
+          return (
+            <div
+              key={`gap-${gap.grid_row}-${gap.grid_column}`}
+              data-col-v2-gap=""
+              data-section-key={section._key}
+              data-gap-row={gap.grid_row}
+              data-gap-col={gap.grid_column}
+              data-gap-span={gap.span}
+              onClick={(e) => {
+                e.stopPropagation();
+                addColumnV2(section._key, gap.grid_row, gap.grid_column, gap.span);
+              }}
+              style={{
+                gridColumn: `${gap.grid_column} / span ${gap.span}`,
+                gridRow: gap.grid_row,
+                minHeight: 70,
+              }}
+              className={`rounded-lg border-2 border-dashed text-xs font-medium transition-all flex items-center justify-center cursor-pointer ${
+                isGapTarget
+                  ? "border-green-500 text-green-500 bg-green-500/10 opacity-100"
+                  : showAsDropTarget
+                  ? "border-green-500/40 text-green-500/60 bg-green-500/5 opacity-100"
+                  : isSectionHovered
+                  ? "border-[#076bff]/25 text-[#076bff]/50 hover:text-[#076bff] hover:border-[#076bff]/60 hover:bg-[#076bff]/5 opacity-100"
+                  : "border-transparent text-transparent opacity-0 pointer-events-none"
+              }`}
+            >
+              {isGapTarget ? "Drop Here" : showAsDropTarget ? "Drop Here" : "+ Add Column"}
+            </div>
+          );
+        })}
+
+      {/* Insertion lines between adjacent columns — only during custom column drag */}
+      {showInsertionLines && (
+        <InsertionLines
+          displayCols={displayCols}
+          draggingColumnKey={draggingColumnKey}
+          containerWidth={containerWidth}
+          gridColumns={gridColumns}
+          colGap={colGap}
+          sectionKey={section._key}
+          dropTarget={dropTarget}
+        />
+      )}
+    </div>
+  );
+}
+