ttrpg-tools/src/components/md-deck/CardLayer.tsx

import { createMemo, For, Show } from "solid-js";
import { parseMarkdown } from "../../markdown";
import { getLayerStyle } from "./hooks/dimensions";
import type { CardData, CardSide, LayerConfig } from "./types";
import { DeckStore } from "./hooks/deckStore";
import { processVariables } from "../utils/csv-loader";
import type { LayerInteractionHandlers } from "./hooks/useLayerInteraction";

export interface CardLayerProps {
  cardData: CardData;
  store: DeckStore;
  side?: CardSide;
  interaction?: LayerInteractionHandlers;
}

export function CardLayer(props: CardLayerProps) {
  const side = () => props.side || "front";
  const layers = createMemo(() =>
    side() === "front"
      ? props.store.state.frontLayerConfigs.filter((l) => l.visible)
      : props.store.state.backLayerConfigs.filter((l) => l.visible),
  );
  const dimensions = () => props.store.state.dimensions!;
  const selectedLayer = () => props.store.state.selectedLayer;
  const draggingState = () => props.store.state.draggingState;

  function renderLayerContent(content: string) {
    return parseMarkdown(
      processVariables(content, props.cardData, props.store.state.cards),
      props.store.state.cards.sourcePath,
    ) as string;
  }

  const getAlignStyle = (align?: "l" | "c" | "r") => {
    if (align === "l") return "left";
    if (align === "r") return "right";
    return "center";
  };

  const isLayerSelected = (layerIndex: number) =>
    selectedLayer() === layerIndex;

  const getFrameBounds = (layer: LayerConfig) => {
    const dims = dimensions();
    const left = (layer.x1 - 1) * dims.cellWidth;
    const top = (layer.y1 - 1) * dims.cellHeight;
    const width = (layer.x2 - layer.x1 + 1) * dims.cellWidth;
    const height = (layer.y2 - layer.y1 + 1) * dims.cellHeight;
    return { left, top, width, height };
  };

  const handleLayerClick = (layerIndex: number, e: MouseEvent) => {
    if (props.interaction) {
      props.interaction.onLayerClick(layerIndex, e);
    }
  };

  const handleFrameMouseDown = (
    action: "drag" | "resize-corner" | "resize-edge",
    anchor?: "nw" | "ne" | "sw" | "se",
    edge?: "n" | "s" | "e" | "w",
    e?: MouseEvent,
  ) => {
    if (props.interaction) {
      props.interaction.onFrameMouseDown(action, anchor, edge, e);
    }
  };

  return (
    <For each={layers()}>
      {(layer, index) => {
        const bounds = () => getFrameBounds(layer);
        const isSelected = () => isLayerSelected(index());

        return (
          <>
            <article
              class="absolute flex flex-col items-stretch justify-center prose text-black prose-sm cursor-pointer"
              classList={{
                "ring-2 ring-blue-500 ring-offset-1":
                  isSelected() && !draggingState(),
              }}
              style={{
                ...getLayerStyle(layer, dimensions()),
                "font-size": `${layer.fontSize || 3}mm`,
                "text-align": getAlignStyle(layer.align),
              }}
              innerHTML={renderLayerContent(props.cardData[layer.prop])}
              onClick={(e) => handleLayerClick(index(), e)}
            />
            <Show when={isSelected()}>
              <div
                class="absolute border-2 border-blue-500 pointer-events-none z-10"
                style={{
                  left: `${bounds().left}mm`,
                  top: `${bounds().top}mm`,
                  width: `${bounds().width}mm`,
                  height: `${bounds().height}mm`,
                }}
              />
              <div
                class="absolute pointer-events-auto z-10"
                style={{
                  left: `${bounds().left}mm`,
                  top: `${bounds().top}mm`,
                  width: `${bounds().width}mm`,
                  height: `${bounds().height}mm`,
                }}
                onMouseDown={(e) =>
                  handleFrameMouseDown("drag", undefined, undefined, e)
                }
              />
              <Show
                when={!draggingState() || draggingState()?.action !== "drag"}
              >
                <div
                  class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nwse-resize pointer-events-auto z-20"
                  style={{
                    left: `${bounds().left - 2}mm`,
                    top: `${bounds().top - 2}mm`,
                  }}
                  onMouseDown={(e) =>
                    handleFrameMouseDown("resize-corner", "nw", undefined, e)
                  }
                />
                <div
                  class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nesw-resize pointer-events-auto z-20"
                  style={{
                    left: `${bounds().left + bounds().width - 2}mm`,
                    top: `${bounds().top - 2}mm`,
                  }}
                  onMouseDown={(e) =>
                    handleFrameMouseDown("resize-corner", "ne", undefined, e)
                  }
                />
                <div
                  class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nesw-resize pointer-events-auto z-20"
                  style={{
                    left: `${bounds().left - 2}mm`,
                    top: `${bounds().top + bounds().height - 2}mm`,
                  }}
                  onMouseDown={(e) =>
                    handleFrameMouseDown("resize-corner", "sw", undefined, e)
                  }
                />
                <div
                  class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nwse-resize pointer-events-auto z-20"
                  style={{
                    left: `${bounds().left + bounds().width - 2}mm`,
                    top: `${bounds().top + bounds().height - 2}mm`,
                  }}
                  onMouseDown={(e) =>
                    handleFrameMouseDown("resize-corner", "se", undefined, e)
                  }
                />
                <div
                  class="absolute h-2 cursor-ns-resize pointer-events-auto z-10"
                  style={{
                    left: `${bounds().left}mm`,
                    top: `${bounds().top - 1}mm`,
                    width: `${bounds().width}mm`,
                  }}
                  onMouseDown={(e) =>
                    handleFrameMouseDown("resize-edge", undefined, "n", e)
                  }
                />
                <div
                  class="absolute h-2 cursor-ns-resize pointer-events-auto z-10"
                  style={{
                    left: `${bounds().left}mm`,
                    top: `${bounds().top + bounds().height - 1}mm`,
                    width: `${bounds().width}mm`,
                  }}
                  onMouseDown={(e) =>
                    handleFrameMouseDown("resize-edge", undefined, "s", e)
                  }
                />
                <div
                  class="absolute w-2 cursor-ew-resize pointer-events-auto z-10"
                  style={{
                    left: `${bounds().left - 1}mm`,
                    top: `${bounds().top}mm`,
                    height: `${bounds().height}mm`,
                  }}
                  onMouseDown={(e) =>
                    handleFrameMouseDown("resize-edge", undefined, "w", e)
                  }
                />
                <div
                  class="absolute w-2 cursor-ew-resize pointer-events-auto z-10"
                  style={{
                    left: `${bounds().left + bounds().width - 1}mm`,
                    top: `${bounds().top}mm`,
                    height: `${bounds().height}mm`,
                  }}
                  onMouseDown={(e) =>
                    handleFrameMouseDown("resize-edge", undefined, "e", e)
                  }
                />
              </Show>
            </Show>
          </>
        );
      }}
    </For>
  );
}