castle-web-cli 0.4.71 → 0.4.73

package/kits/basic-2d/behaviors/Drawing.jsx

@@ -1,142 +0,0 @@
-import React from 'react';
-import { Panel, SelectField } from '../engine/ui';
-import { AutoFields } from '../engine/autoInspector';
-
-export class Drawing {
-  static behaviorName = 'Drawing';
-
-  static defaultProps = {
-    file: 'drawings/default.drawing',
-    tint: '#ffffffff',
-  };
-
-  constructor(props) {
-    this.props = props;
-  }
-
-  draw(actor, scene, ctx) {
-    if (actor.runtime?.collected) return;
-    const layout = actor.components.Layout;
-    if (!layout) return;
-    // Fall back to default.drawing (a plain block) when the named file does not
-    // exist yet -- so a scene can reference drawings/foo.drawing before the
-    // drawing task has created it, and it shows a block until the real art lands.
-    const drawing = scene.drawings[this.props.file] ?? scene.drawings['drawings/default.drawing'];
-    if (!drawing) return;
-    drawPixelDrawing(
-      ctx,
-      drawing,
-      layout.x,
-      layout.y,
-      layout.width,
-      layout.height,
-      this.props.tint
-    );
-  }
-
-  static Inspector({ component, setComponent, files }) {
-    const drawingFiles = getDrawingFiles(files);
-    return (
-      <Panel title="Drawing">
-        <SelectField
-          label="File"
-          value={component.file}
-          onChange={(file) => setComponent({ file })}
-          options={drawingFiles}
-        />
-        <AutoFields
-          defaultProps={Drawing.defaultProps}
-          component={component}
-          setComponent={setComponent}
-          only={['tint']}
-        />
-      </Panel>
-    );
-  }
-}
-
-export function drawPixelDrawing(ctx, drawing, x, y, width, height, tint) {
-  if (drawing.width <= 0 || drawing.height <= 0) return;
-  // Blit the cached native-resolution canvas as a single image. Painting each
-  // pixel as its own `fillRect` left hairline anti-aliased seams under a
-  // rotation transform; one `drawImage` has no inter-pixel edges.
-  const canvas = getDrawingCanvas(drawing, tint);
-  const prevSmoothing = ctx.imageSmoothingEnabled;
-  ctx.imageSmoothingEnabled = false;
-  ctx.drawImage(canvas, x, y, width, height);
-  ctx.imageSmoothingEnabled = prevSmoothing;
-}
-
-// Cache of native-resolution offscreen canvases keyed by drawing data and
-// tint. A drawing edit produces a fresh `DrawingData` object (see
-// DrawingEditor's `structuredClone`), so a new object naturally misses the
-// WeakMap and rebuilds.
-const drawingCanvasCache = new WeakMap();
-
-// Render the pixel art once, unrotated, at 1px per pixel into an offscreen
-// canvas, applying the tint. Cached so the per-frame draw is a single blit.
-function getDrawingCanvas(drawing, tint) {
-  const tintKey = tint ?? '';
-  let byTint = drawingCanvasCache.get(drawing);
-  if (!byTint) {
-    byTint = new Map();
-    drawingCanvasCache.set(drawing, byTint);
-  }
-  const cached = byTint.get(tintKey);
-  if (cached) return cached;
-
-  const canvas = document.createElement('canvas');
-  canvas.width = drawing.width;
-  canvas.height = drawing.height;
-  const octx = canvas.getContext('2d');
-  if (octx) {
-    const tintRgba = parseTint(tint);
-    for (let py = 0; py < drawing.height; py++) {
-      for (let px = 0; px < drawing.width; px++) {
-        const color = drawing.pixels[py * drawing.width + px];
-        if (!color || color === 'transparent' || color.endsWith('00')) continue;
-        octx.fillStyle = tintRgba ? applyTint(color, tintRgba) : color;
-        octx.fillRect(px, py, 1, 1);
-      }
-    }
-  }
-  byTint.set(tintKey, canvas);
-  return canvas;
-}
-
-// Parse a hex color into [r, g, b, a] channels (0-255). Returns null when the
-// string is not a hex color so callers can fall back to the raw color.
-function parseHexColor(color) {
-  const hex = color.trim().replace(/^#/, '');
-  if (hex.length !== 6 && hex.length !== 8) return null;
-  if (!/^[0-9a-fA-F]+$/.test(hex)) return null;
-  const r = parseInt(hex.slice(0, 2), 16);
-  const g = parseInt(hex.slice(2, 4), 16);
-  const b = parseInt(hex.slice(4, 6), 16);
-  const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) : 255;
-  return [r, g, b, a];
-}
-
-// Returns the tint as [r, g, b, a] channels, or null when there is no tint or
-// the tint is white (#ffffffff) -- both meaning "no change".
-function parseTint(tint) {
-  if (!tint) return null;
-  const rgba = parseHexColor(tint);
-  if (!rgba) return null;
-  if (rgba[0] === 255 && rgba[1] === 255 && rgba[2] === 255 && rgba[3] === 255) {
-    return null;
-  }
-  return rgba;
-}
-
-// Multiply each channel of a pixel color by the tint color (both 0-255).
-function applyTint(color, tint) {
-  const rgba = parseHexColor(color);
-  if (!rgba) return color;
-  const out = rgba.map((channel, i) => Math.round((channel * tint[i]) / 255));
-  return '#' + out.map((channel) => channel.toString(16).padStart(2, '0')).join('');
-}
-
-function getDrawingFiles(files) {
-  return Object.keys(files).filter((path) => path.endsWith('.drawing'));
-}

package/kits/basic-2d/drawings/block.drawing

@@ -1,70 +0,0 @@
-{
-  "width": 8,
-  "height": 8,
-  "pixels": [
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff"
-  ]
-}

package/kits/basic-2d/drawings/default.drawing

@@ -1,70 +0,0 @@
-{
-  "width": 8,
-  "height": 8,
-  "pixels": [
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#d8d8d8ff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff",
-    "#ffffffff"
-  ]
-}

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

@@ -1,224 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { basename, formatJson, parseJsonFile } from '../engine/files';
-import {
-  cx,
-  EditorBody,
-  EditorHeader,
-  IconButton,
-  NumberField,
-  Panel,
-  SheetGrabHandle,
-  styles,
-  theme,
-  useMobileSheet,
-} from '../engine/ui';
-import { useEditHistory } from './editorHistory';
-const palette = [
-  '#00000000',
-  '#000000FF',
-  '#050505FF',
-  '#111111FF',
-  '#242234FF',
-  '#444444FF',
-  '#777777FF',
-  '#ffffffFF',
-  '#e3e6ffFF',
-  '#8db7ffFF',
-  '#ff5d5dFF',
-  '#ffe17aFF',
-];
-export function DrawingEditor({ path, text, onChange, onToggleFiles, filesOpen, bare = false }) {
-  const canvasRef = useRef(null);
-  const strokeRef = useRef({ active: false, recorded: false });
-  const [color, setColor] = useState('#ffffffFF');
-  const [inspectorOpen, setInspectorOpen] = useState(true);
-  const history = useEditHistory(text, onChange);
-  const inspectorSheet = useInspectorSheet(inspectorOpen);
-  const { value: drawing, error } = parseJsonFile(path, text);
-  const isWide = drawing ? drawing.width >= drawing.height : true;
-  useEffect(() => {
-    if (!drawing || !canvasRef.current) return;
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-    canvas.width = drawing.width;
-    canvas.height = drawing.height;
-    ctx.clearRect(0, 0, drawing.width, drawing.height);
-    for (let y = 0; y < drawing.height; y++) {
-      for (let x = 0; x < drawing.width; x++) {
-        const pixel = drawing.pixels[y * drawing.width + x];
-        if (!pixel || pixel.endsWith('00')) continue;
-        ctx.fillStyle = pixel;
-        ctx.fillRect(x, y, 1, 1);
-      }
-    }
-  }, [drawing, text]);
-  function commitDrawing(nextDrawing) {
-    history.commit(formatJson(nextDrawing));
-  }
-  function resizeDrawing(nextWidth, nextHeight) {
-    if (!drawing) return;
-    const width = clampInteger(nextWidth, 1, 128);
-    const height = clampInteger(nextHeight, 1, 128);
-    if (width === drawing.width && height === drawing.height) return;
-    const pixels = Array(width * height).fill('#00000000');
-    const copiedWidth = Math.min(width, drawing.width);
-    const copiedHeight = Math.min(height, drawing.height);
-    for (let y = 0; y < copiedHeight; y++) {
-      for (let x = 0; x < copiedWidth; x++) {
-        pixels[y * width + x] = drawing.pixels[y * drawing.width + x] ?? '#00000000';
-      }
-    }
-    commitDrawing({ ...drawing, width, height, pixels });
-  }
-  function paintAt(event) {
-    if (!drawing) return;
-    const rect = event.currentTarget.getBoundingClientRect();
-    const x = Math.floor(((event.clientX - rect.left) / rect.width) * drawing.width);
-    const y = Math.floor(((event.clientY - rect.top) / rect.height) * drawing.height);
-    if (x < 0 || y < 0 || x >= drawing.width || y >= drawing.height) return;
-    if (drawing.pixels[y * drawing.width + x] === color) return;
-    const next = structuredClone(drawing);
-    next.pixels[y * next.width + x] = color;
-    // Record one undo snapshot per pointer stroke (not per painted pixel).
-    if (!strokeRef.current.recorded) {
-      history.recordSnapshot();
-      strokeRef.current.recorded = true;
-    }
-    onChange(formatJson(next));
-  }
-  function startPaint(event) {
-    strokeRef.current = { active: true, recorded: false };
-    event.currentTarget.setPointerCapture(event.pointerId);
-    paintAt(event);
-  }
-  function finishPaint() {
-    strokeRef.current = { active: false, recorded: false };
-  }
-  const canvasStyle = drawing
-    ? {
-        width: isWide ? 'min(70vh, 520px)' : 'auto',
-        height: isWide ? 'auto' : 'min(70vh, 520px)',
-      }
-    : undefined;
-  const sharedActionButtons = (
-    <>
-      <IconButton icon="undo" label="Undo" onClick={history.undo} disabled={!history.canUndo} />
-      <IconButton icon="redo" label="Redo" onClick={history.redo} disabled={!history.canRedo} />
-    </>
-  );
-  return (
-    <>
-      {bare ? null : (
-        <EditorHeader
-          title={basename(path)}
-          subtitle={drawing ? `${drawing.width} x ${drawing.height} pixels` : error}
-          right={
-            <span className={styles.mobileOnly}>
-              {sharedActionButtons}
-              <IconButton
-                icon="palette"
-                label="Tools"
-                active={inspectorOpen}
-                onClick={() => setInspectorOpen((previous) => !previous)}
-              />
-            </span>
-          }
-          onToggleFiles={onToggleFiles}
-          filesOpen={filesOpen}
-        />
-      )}
-      <EditorBody>
-        <div className={styles.drawingEditor}>
-          <div className={styles.drawingTools}>{sharedActionButtons}</div>
-          <div className={styles.drawingCanvasWrap}>
-            <canvas
-              ref={canvasRef}
-              className={styles.drawingCanvas}
-              style={canvasStyle}
-              onPointerDown={startPaint}
-              onPointerMove={(event) => {
-                if (strokeRef.current.active && event.buttons === 1) paintAt(event);
-              }}
-              onPointerUp={finishPaint}
-              onPointerCancel={finishPaint}
-            />
-          </div>
-          <DrawingInspector
-            sheet={inspectorSheet}
-            drawing={drawing}
-            color={color}
-            onSelectColor={setColor}
-            onResize={resizeDrawing}
-          />
-        </div>
-      </EditorBody>
-    </>
-  );
-}
-function useInspectorSheet(inspectorOpen) {
-  const [snap, setSnap] = useState('high');
-  useEffect(() => {
-    if (inspectorOpen) setSnap('high');
-  }, [inspectorOpen]);
-  const effectiveSnap = inspectorOpen ? snap : 'hidden';
-  return useMobileSheet({
-    snap: effectiveSnap,
-    baseClassName: styles.inspector,
-    onTransition: (direction) => {
-      if (!inspectorOpen) return;
-      if (direction === 'tap') setSnap((previous) => (previous === 'high' ? 'low' : 'high'));
-      else if (direction === 'down') setSnap('low');
-      else if (direction === 'up') setSnap('high');
-    },
-  });
-}
-function DrawingInspector({ sheet, drawing, color, onSelectColor, onResize }) {
-  return (
-    <aside {...sheet.rootProps} className={cx(sheet.rootProps.className, styles.inspectorAuto)}>
-      <div {...sheet.grabProps}>
-        <SheetGrabHandle
-          label="Inspector"
-          hint={drawing ? `${drawing.width}x${drawing.height} · color` : 'drawing tools'}
-        />
-      </div>
-      <div className={cx(styles.sheetBody, styles.inspectorBody)}>
-        <Panel title="Size">
-          <NumberField
-            label="Width"
-            value={drawing?.width ?? 1}
-            min={1}
-            max={128}
-            onChange={(width) => onResize(width, drawing?.height ?? 1)}
-          />
-          <NumberField
-            label="Height"
-            value={drawing?.height ?? 1}
-            min={1}
-            max={128}
-            onChange={(height) => onResize(drawing?.width ?? 1, height)}
-          />
-        </Panel>
-        <Panel title="Palette">
-          <div className={styles.palette}>
-            {palette.map((swatch) => (
-              <button
-                key={swatch}
-                className={cx(styles.swatch, color === swatch && styles.swatchSelected)}
-                title={swatch}
-                style={{
-                  background: swatch.endsWith('00') ? theme.transparentChecker : swatch,
-                }}
-                onClick={() => onSelectColor(swatch)}
-              />
-            ))}
-          </div>
-        </Panel>
-      </div>
-    </aside>
-  );
-}
-function clampInteger(value, min, max) {
-  if (!Number.isFinite(value)) return min;
-  return Math.max(min, Math.min(max, Math.round(value)));
-}