castle-web-cli 0.4.114 → 0.4.116

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { renderSpriteFrame } from '../engine/pxart';
+import { onArtLoaded, renderArtFrame } from '../engine/art';
 import { screenToCard } from '../engine/scene';
 import { countBlueprintInstances, listBlueprints } from '../engine/blueprint';
 import { ConfirmDialog, ContextMenu, cx, Icon, styles } from '../engine/ui';
@@ -222,11 +222,15 @@ export function BlueprintThumbnail({ blueprint, sprites, preview = false }) {
   const canvasRef = useRef(null);
   const spritePath = blueprint.components?.Sprite?.file;
   const sprite = spritePath ? sprites?.[spritePath] : null;
+  // Thumbnails draw on change, not on a frame loop, so an image that finishes
+  // decoding after this rendered has to say so or the slot stays blank.
+  const [loadTick, setLoadTick] = useState(0);
+  useEffect(() => onArtLoaded(() => setLoadTick((tick) => tick + 1)), []);
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas || !sprite) return;
-    renderSpriteFrame(sprite, 0, canvas);
-  }, [sprite]);
+    renderArtFrame(sprite, 0, canvas);
+  }, [sprite, loadTick]);
   if (!sprite) {
     return (
       <span className={styles.bpSlotFallback}>

package/kits/physics-2d/editors/ImageViewer.jsx

@@ -0,0 +1,206 @@
+// Read-only image viewer. Opened for the image extensions the deck declares as
+// kit-edited (castle.json `fileTypes`), so an uploaded .png/.jpg/.svg opens as a
+// picture instead of a wall of binary in the code editor.
+//
+// It VIEWS: fit / zoom / pan, at 1:1 when you want to count pixels. Nothing here
+// writes -- editing an image is the pixel editor's job (.pxart), and a photo the
+// user uploaded is not something this kit knows how to modify.
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { EditorBody, IconButton, styles as uiStyles } from '../engine/ui';
+import { useTwoFingerZoomPan } from '../engine/gestureZoomPan';
+import { basename } from '../engine/files';
+import { useMediaUrl } from './mediaFile';
+import styles from './mediaViewer.module.css';
+
+const MIN_SCALE = 0.05;
+const MAX_SCALE = 64;
+// Past this the image is being inspected, not previewed: drop smoothing so
+// pixels read as pixels.
+const PIXELATE_ABOVE = 2.5;
+const WHEEL_ZOOM_PER_PX = 0.0016;
+
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+
+// Zoom `view` by `factor` about a point in STAGE coordinates measured from the
+// stage centre (the transform's origin), holding whatever is under that point
+// still. `x`/`y` are the image centre's offset from the stage centre.
+function zoomAbout(view, factor, px, py) {
+  const scale = clamp(view.scale * factor, MIN_SCALE, MAX_SCALE);
+  const k = scale / view.scale;
+  return { scale, x: px - (px - view.x) * k, y: py - (py - view.y) * k };
+}
+
+// Scale that fits the whole image in the stage, with a little breathing room.
+// Small images are scaled UP to fill: at 16x16 a "true size" preview is a speck.
+function fitScale(stage, natural) {
+  if (!stage.width || !stage.height || !natural.width || !natural.height) return 1;
+  const margin = 24;
+  const sx = (stage.width - margin) / natural.width;
+  const sy = (stage.height - margin) / natural.height;
+  return clamp(Math.min(sx, sy), MIN_SCALE, MAX_SCALE);
+}
+
+// The pan/zoom state for the stage, plus the input handlers that drive it:
+// wheel to zoom about the cursor, drag to pan, two-finger pinch/pan on touch.
+// Refits whenever the stage resizes or a different image loads, until the user
+// takes over (`touched`) -- then their framing is theirs to keep.
+function useImageView(stageRef, natural) {
+  const [view, setView] = useState({ scale: 1, x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+  const touched = useRef(false);
+  const stageSize = useRef({ width: 0, height: 0 });
+
+  const fit = useCallback(() => {
+    touched.current = false;
+    setView({ scale: fitScale(stageSize.current, natural), x: 0, y: 0 });
+  }, [natural]);
+
+  useLayoutEffect(() => {
+    const stage = stageRef.current;
+    if (!stage || typeof ResizeObserver === 'undefined') return undefined;
+    const measure = () => {
+      stageSize.current = { width: stage.clientWidth, height: stage.clientHeight };
+      if (!touched.current) fit();
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(stage);
+    return () => observer.disconnect();
+  }, [stageRef, fit]);
+
+  // Zoom about a client-space point (cursor, pinch centroid).
+  const zoomAt = useCallback((factor, clientX, clientY) => {
+    const rect = stageRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    touched.current = true;
+    const px = clientX - rect.left - rect.width / 2;
+    const py = clientY - rect.top - rect.height / 2;
+    setView((current) => zoomAbout(current, factor, px, py));
+  }, [stageRef]);
+
+  // Zoom about the stage centre, for the toolbar buttons.
+  const zoomBy = useCallback((factor) => {
+    touched.current = true;
+    setView((current) => zoomAbout(current, factor, 0, 0));
+  }, []);
+
+  const setScale = useCallback((scale) => {
+    touched.current = true;
+    setView((current) => zoomAbout(current, scale / current.scale, 0, 0));
+  }, []);
+
+  const panBy = useCallback((dx, dy) => {
+    touched.current = true;
+    setView((current) => ({ ...current, x: current.x + dx, y: current.y + dy }));
+  }, []);
+
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return undefined;
+    const onWheel = (event) => {
+      event.preventDefault();
+      zoomAt(Math.exp(-event.deltaY * WHEEL_ZOOM_PER_PX), event.clientX, event.clientY);
+    };
+    stage.addEventListener('wheel', onWheel, { passive: false });
+    return () => stage.removeEventListener('wheel', onWheel);
+  }, [stageRef, zoomAt]);
+
+  // Mouse/pen drag to pan. Touch drags belong to the pinch gesture below, which
+  // stops their propagation before they reach this.
+  const onPointerDown = (event) => {
+    if (event.pointerType === 'touch' || event.button !== 0) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+  };
+  const onPointerMove = (event) => {
+    if (!dragging) return;
+    panBy(event.movementX, event.movementY);
+  };
+  const endDrag = () => setDragging(false);
+
+  useTwoFingerZoomPan({
+    targetRef: stageRef,
+    onGestureStart: endDrag,
+    onGestureMove: ({ factor, cx, cy, dx, dy }) => {
+      zoomAt(factor, cx, cy);
+      panBy(dx, dy);
+    },
+  });
+
+  return {
+    view,
+    dragging,
+    fit,
+    zoomBy,
+    setScale,
+    stageProps: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+      onDoubleClick: fit,
+    },
+  };
+}
+
+export function ImageViewer({ path }) {
+  const url = useMediaUrl(path);
+  const stageRef = useRef(null);
+  const [natural, setNatural] = useState({ width: 0, height: 0 });
+  const [status, setStatus] = useState('loading');
+  const { view, dragging, fit, zoomBy, setScale, stageProps } = useImageView(stageRef, natural);
+
+  // A new URL (different file, or the same one re-uploaded) starts over.
+  useEffect(() => setStatus('loading'), [url]);
+
+  const onLoad = (event) => {
+    const image = event.currentTarget;
+    // SVGs without intrinsic dimensions report 0; fall back so fit has numbers.
+    setNatural({ width: image.naturalWidth || 300, height: image.naturalHeight || 300 });
+    setStatus('ready');
+  };
+
+  const percent = Math.round(view.scale * 100);
+  return (
+    <EditorBody>
+      <div className={styles.viewer}>
+        <div className={styles.toolbar}>
+          <IconButton icon="zoom-out" label="Zoom out" onClick={() => zoomBy(1 / 1.4)} />
+          <IconButton icon="zoom-in" label="Zoom in" onClick={() => zoomBy(1.4)} />
+          <IconButton icon="fit" label="Fit to panel" onClick={fit} />
+          <button type="button" className={uiStyles.button} onClick={() => setScale(1)}>
+            1:1
+          </button>
+          <span className={styles.readout}>
+            {status === 'ready' ? `${natural.width}×${natural.height} · ${percent}%` : ''}
+          </span>
+        </div>
+        <div
+          ref={stageRef}
+          className={`${styles.stage}${dragging ? ` ${styles.dragging}` : ''}`}
+          {...stageProps}>
+          <img
+            src={url}
+            alt={basename(path)}
+            className={`${styles.image}${view.scale >= PIXELATE_ABOVE ? ` ${styles.pixelated}` : ''}`}
+            style={{
+              width: natural.width || undefined,
+              height: natural.height || undefined,
+              transform: `translate(-50%, -50%) translate(${view.x}px, ${view.y}px) scale(${view.scale})`,
+              visibility: status === 'ready' ? 'visible' : 'hidden',
+            }}
+            onLoad={onLoad}
+            onError={() => setStatus('error')}
+          />
+          {status === 'error' ? (
+            <div className={`${styles.message} ${styles.messageError}`}>
+              Could not load {basename(path)}.
+            </div>
+          ) : null}
+          {status === 'loading' ? <div className={styles.message}>Loading…</div> : null}
+        </div>
+      </div>
+    </EditorBody>
+  );
+}

package/kits/physics-2d/editors/MediaPlayer.jsx

@@ -0,0 +1,57 @@
+// Read-only audio / video player. Opened for the sound and video extensions the
+// deck declares as kit-edited (castle.json `fileTypes`), so an uploaded .mp3 or
+// .mp4 can be played in place instead of being a file you can only guess at from
+// its name.
+//
+// The transport is the BROWSER'S: `<audio controls>` / `<video controls>`. Play,
+// pause, scrub, volume, fullscreen, and picture-in-picture all come with it,
+// they match what the platform's users already know, and they stay accessible
+// and touch-sized without us reimplementing any of it. This file is the frame
+// around that element, not a player.
+//
+// Nothing here writes: trimming or converting a media file is not something this
+// kit does, and a viewer that can't damage the file needs no save state.
+
+import { useEffect, useState } from 'react';
+import { EditorBody } from '../engine/ui';
+import { basename } from '../engine/files';
+import { useMediaUrl } from './mediaFile';
+import styles from './mediaViewer.module.css';
+
+export function MediaPlayer({ path, kind }) {
+  const url = useMediaUrl(path);
+  const [failed, setFailed] = useState(false);
+  // A new file (or a re-upload of this one) starts over.
+  useEffect(() => setFailed(false), [url]);
+
+  const isVideo = kind === 'video';
+  const Media = isVideo ? 'video' : 'audio';
+  return (
+    <EditorBody>
+      <div className={styles.viewer}>
+        <div className={styles.mediaStage}>
+          <div className={isVideo ? styles.videoPanel : styles.audioPanel}>
+            <div className={styles.fileName}>{basename(path)}</div>
+            <Media
+              key={url}
+              className={isVideo ? styles.video : styles.audio}
+              src={url}
+              controls
+              // Metadata only: opening a file shouldn't pull the whole thing
+              // down until someone presses play. Video shows its first frame as
+              // the poster so the panel isn't a black box.
+              preload={isVideo ? 'auto' : 'metadata'}
+              playsInline
+              onError={() => setFailed(true)}
+            />
+            {failed ? (
+              <div className={styles.inlineError}>
+                Could not play {basename(path)} — this browser may not support its format.
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </EditorBody>
+  );
+}