castle-web-cli 0.4.78 → 0.4.79

package/kits/basic-2d/editors/BlueprintLibrary.jsx

@@ -0,0 +1,247 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { renderSpriteFrame } from '../engine/pxart';
+import { screenToCard } from '../engine/scene';
+import { countBlueprintInstances, listBlueprints } from '../engine/blueprint';
+import { ConfirmDialog, ContextMenu, cx, Icon, styles } from '../engine/ui';
+
+const DRAG_THRESHOLD = 4;
+
+// Deck-level blueprint library / hotbar: lists `blueprints/*.scene` (replacing
+// the old scene-local stamp system). Mirrors castle-client's belt: TAP a slot
+// to select the blueprint for editing in the sidebar; DRAG a slot onto the
+// canvas to place a new instance; right-click for a delete option.
+export function BlueprintLibrary({
+  files,
+  sprites,
+  canvasRef,
+  editCameraRef,
+  isPlaying,
+  selectedBlueprintPath,
+  onSelectBlueprint,
+  onAddActor,
+  dragPlace,
+  onDeleteBlueprint,
+}) {
+  const blueprints = listBlueprints(files);
+  const dragRef = useRef(null);
+  const suppressClickRef = useRef(false);
+  const [dragPreview, setDragPreview] = useState(null);
+  const [contextMenu, setContextMenu] = useState(null);
+  const [confirmDelete, setConfirmDelete] = useState(null);
+
+  const onSlotContextMenu = (event, blueprint) => {
+    if (isPlaying) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setContextMenu({ blueprint, x: event.clientX, y: event.clientY });
+  };
+
+  const onSlotPointerDown = (event, blueprint) => {
+    if (isPlaying || event.button !== 0) return;
+    event.preventDefault();
+    const drag = {
+      blueprint,
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      moved: false,
+      onStage: false,
+    };
+    dragRef.current = drag;
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+      // Window listeners still finish the drag if capture is unavailable.
+    }
+    const onMove = (moveEvent) => {
+      if (moveEvent.pointerId !== drag.pointerId) return;
+      if (!drag.moved && Math.hypot(moveEvent.clientX - drag.startX, moveEvent.clientY - drag.startY) > DRAG_THRESHOLD) {
+        drag.moved = true;
+      }
+      if (!drag.moved) return;
+      const position = eventToStagePoint(moveEvent, canvasRef, editCameraRef);
+      if (position) {
+        // Over the stage: the drag becomes a REAL placed instance immediately,
+        // so it grid-snaps and renders exactly like the actor it is. The
+        // floating thumbnail only exists off-stage.
+        if (drag.onStage) {
+          dragPlace.move(position);
+        } else {
+          drag.onStage = true;
+          setDragPreview(null);
+          dragPlace.enter(blueprint.path, position);
+        }
+      } else {
+        if (drag.onStage) {
+          drag.onStage = false;
+          dragPlace.leave();
+        }
+        setDragPreview({ blueprint, x: moveEvent.clientX, y: moveEvent.clientY, overStage: false });
+      }
+    };
+    const onUp = (upEvent) => {
+      if (upEvent.pointerId !== drag.pointerId) return;
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+      dragRef.current = null;
+      setDragPreview(null);
+      if (!drag.moved) return;
+      suppressClickRef.current = true;
+      // Cancelled drags (pointercancel) count as a release off-stage.
+      if (drag.onStage && upEvent.type !== 'pointercancel') dragPlace.drop();
+      else if (drag.onStage) dragPlace.leave();
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+  };
+
+  return (
+    <div className={styles.bpHotbar} aria-label="Blueprints">
+      <button
+        type="button"
+        className={styles.bpActionSlot}
+        aria-label="Add actor"
+        title="Add actor (creates a new blueprint)"
+        onClick={onAddActor}
+        disabled={isPlaying}>
+        <span className={styles.dashedSquareIcon} aria-hidden="true" />
+      </button>
+      {blueprints.map((blueprint) => (
+        <button
+          key={blueprint.path}
+          type="button"
+          className={cx(styles.bpSlot, selectedBlueprintPath === blueprint.path && styles.bpSlotSelected)}
+          title={`${blueprint.name} -- click to edit, drag to place`}
+          disabled={isPlaying}
+          onPointerDown={(event) => onSlotPointerDown(event, blueprint)}
+          onContextMenu={(event) => onSlotContextMenu(event, blueprint)}
+          onClick={() => {
+            if (suppressClickRef.current) {
+              suppressClickRef.current = false;
+              return;
+            }
+            onSelectBlueprint(blueprint.path);
+          }}>
+          <BlueprintThumbnail blueprint={blueprint} sprites={sprites} />
+          <InstanceCountBadge files={files} blueprintPath={blueprint.path} />
+        </button>
+      ))}
+      {dragPreview ? <BlueprintDragPreview preview={dragPreview} sprites={sprites} /> : null}
+      {contextMenu ? (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          onClose={() => setContextMenu(null)}
+          items={[
+            {
+              key: 'delete',
+              label: `Delete ${contextMenu.blueprint.name}...`,
+              onClick: () => setConfirmDelete(contextMenu.blueprint),
+            },
+          ]}
+        />
+      ) : null}
+      {confirmDelete ? (
+        <DeleteBlueprintConfirm
+          files={files}
+          blueprint={confirmDelete}
+          onCancel={() => setConfirmDelete(null)}
+          onConfirm={() => {
+            onDeleteBlueprint(confirmDelete.path);
+            setConfirmDelete(null);
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function DeleteBlueprintConfirm({ files, blueprint, onCancel, onConfirm }) {
+  const count = countBlueprintInstances(files, blueprint.path);
+  const instanceText = count === 1 ? '1 placed actor' : `${count} placed actors`;
+  return (
+    <ConfirmDialog
+      title={`Delete ${blueprint.name}?`}
+      message={
+        count > 0
+          ? `This removes ${blueprint.name} and ${instanceText} across every scene in the deck. This can't be undone.`
+          : `${blueprint.name} has no placed actors. This can't be undone.`
+      }
+      confirmLabel="Delete"
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+    />
+  );
+}
+
+function InstanceCountBadge({ files, blueprintPath }) {
+  const count = countBlueprintInstances(files, blueprintPath);
+  if (count === 0) return null;
+  return <span className={styles.bpSlotBadge}>{count > 99 ? '99+' : count}</span>;
+}
+
+function BlueprintDragPreview({ preview, sprites }) {
+  const layout = preview.blueprint.components?.Layout;
+  const width = Math.max(24, Math.min(80, layout?.width ?? 48));
+  const height = Math.max(24, Math.min(80, layout?.height ?? 48));
+  return (
+    <div
+      className={cx(styles.bpDragPreview, preview.overStage && styles.bpDragPreviewOverStage)}
+      style={{
+        left: preview.x,
+        top: preview.y,
+        width,
+        height,
+        transform: `translate(-50%, -50%) rotate(${layout?.rotation ?? 0}deg)`,
+      }}>
+      <BlueprintThumbnail blueprint={preview.blueprint} sprites={sprites} preview />
+    </div>
+  );
+}
+
+function BlueprintThumbnail({ blueprint, sprites, preview = false }) {
+  const canvasRef = useRef(null);
+  const spritePath = blueprint.components?.Sprite?.file;
+  const sprite = spritePath ? sprites?.[spritePath] : null;
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !sprite) return;
+    renderSpriteFrame(sprite, 0, canvas);
+  }, [sprite]);
+  if (!sprite) {
+    return (
+      <span className={styles.bpSlotFallback}>
+        <Icon name="clone" />
+      </span>
+    );
+  }
+  return (
+    <canvas
+      ref={canvasRef}
+      className={cx(styles.bpSlotThumb, preview && styles.bpPreviewThumb)}
+      aria-hidden="true"
+    />
+  );
+}
+
+function eventToStagePoint(event, canvasRef, editCameraRef) {
+  const canvas = canvasRef.current;
+  if (!canvas) return null;
+  const rect = canvas.getBoundingClientRect();
+  if (
+    event.clientX < rect.left ||
+    event.clientX > rect.right ||
+    event.clientY < rect.top ||
+    event.clientY > rect.bottom
+  ) {
+    return null;
+  }
+  const raw = screenToCard(canvas, event.clientX, event.clientY);
+  const camera = editCameraRef.current ?? { x: 0, y: 0 };
+  return {
+    x: raw.x + camera.x,
+    y: raw.y + camera.y,
+  };
+}

package/kits/basic-2d/editors/PlayOnly.jsx

@@ -21,6 +21,7 @@ export function PlayOnly() {
       key={dataVersion}
       sceneData={sceneData}
       sprites={sprites}
+      files={files}
       behaviorClasses={behaviorClasses}
       onFirstFrame={Lifecycle.ready}
     />