@wonderyard/tela 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,399 @@
+import { crop as e } from "./image.js";
+import { toMask as t } from "./mask.js";
+import { fill as n, stroke as r } from "./tools.js";
+import { createBrush as i } from "./brush.js";
+import { createDocument as a } from "./document.js";
+import { createHistory as o } from "./history.js";
+import { defaultKeymap as s } from "./keymap.js";
+import { createView as ee } from "./view.js";
+import { createInput as te, inputs as ne } from "./input.js";
+import { internals as c } from "./internals.js";
+import { createMoving as l } from "./moving.js";
+import { createPalette as re } from "./palette.js";
+import { invert as u, modify as d, selectAll as f, selectWithTool as p } from "./selection.js";
+import { createSprite as m } from "./sprite.js";
+import { createStore as ie } from "./store.js";
+import { createTransactions as ae } from "./transactions.js";
+// lib/index.ts
+var oe = {
+	rectangular_marquee: "Rectangular Marquee Tool",
+	lasso: "Lasso Tool",
+	magic_wand: "Magic Wand Tool"
+}, h = {
+	invert: "Invert Mask",
+	modify: "Modify Selection",
+	set: "Set Selection"
+}, g = (e, t, n, r) => {
+	if (t.length !== n * r) throw Error(`tela: ${e}'s image is ${t.length} pixels, not ${n}×${r}`);
+};
+function _(_) {
+	let { width: v, height: y } = _;
+	_.image && g("createEditor", _.image, v, y);
+	let b = o(), x = ie({
+		width: v,
+		height: y,
+		palette: _.palette,
+		selection: null,
+		movingPixels: !1,
+		tool: "pencil",
+		fgColor: 1,
+		bgColor: 0,
+		brush: {
+			type: "circle",
+			size: 1
+		},
+		toolOptions: {
+			paint_bucket: {
+				contiguous: !0,
+				pixelConnectivity: 4
+			},
+			magic_wand: {
+				contiguous: !0,
+				pixelConnectivity: 4
+			}
+		},
+		keepBrushIndices: !1,
+		selectionMode: "replace",
+		holeIndex: null,
+		transparentColor: {
+			opaque: !1,
+			autoOpaque: !0
+		},
+		undoLimit: 0,
+		view: {
+			zoom: 1,
+			scroll: {
+				x: 0,
+				y: 0
+			}
+		},
+		zoomWithScrollWheel: !1,
+		showPixelGrid: !1,
+		brushPreview: "full",
+		crosshair: !1,
+		systemCursor: !1,
+		touchGestures: !1,
+		cursorColor: null,
+		history: {
+			undoSteps: 0,
+			redoSteps: 0,
+			undoLabel: null,
+			redoLabel: null
+		},
+		running: !1,
+		ticking: !1,
+		screen: {
+			width: 0,
+			height: 0,
+			dpr: 1
+		},
+		transform: {
+			x: 0,
+			y: 0,
+			scale: 1
+		}
+	}), S = ee(x, () => $.focus()), C = a({
+		image: _.image ? _.image.slice() : new Uint8Array(v * y),
+		width: v,
+		height: y,
+		palette: _.palette
+	}, {
+		onChange: _.onChange,
+		fresh: () => A.fresh,
+		show: (e) => S.update(e)
+	}), w = {
+		change: /* @__PURE__ */ new Set(),
+		movingpixels: /* @__PURE__ */ new Set()
+	}, T = (e, n) => {
+		let [r, i] = [C.sel, n && t(n, C.width)];
+		C.select(i), j(e, C.selChange(r, C.sel));
+	}, E = (e) => {
+		x.setState({ history: b.state });
+		for (let t of w.change) t({ fromUndo: e });
+	}, D = () => x.getState().holeIndex ?? x.getState().bgColor, O = (e, t) => {
+		b.record(e, t, x.getState().undoLimit * 1024 * 1024), E(!1);
+	}, k = 0, A = ae({
+		doc: C,
+		read: () => _.read(),
+		changed: () => {
+			let e = A.running || k > 0, { ticking: t } = A, n = x.getState();
+			(n.running !== e || n.ticking !== t) && x.setState({
+				running: e,
+				ticking: t
+			});
+		},
+		add: O,
+		boundary: () => ($.end(), B()),
+		checkSize: g
+	}), { record: j, hold: M } = A, N = (e) => {
+		let t = A.blind, n = r(C, e, t);
+		return {
+			...n,
+			end: () => void (t || j("Pencil Tool", n.end()))
+		};
+	}, P = (e, t, r) => j("Paint Bucket Tool", n(C, e, t, r)), F = (e, t, n, r = x.getState().toolOptions.magic_wand) => T(oe[e], p(C, e, t, n, r)), I = ({ button: e, color: t, bgColor: n, brush: r }) => {
+		let i = x.getState();
+		return {
+			right: e === "right",
+			fg: t ?? i.fgColor,
+			bg: n ?? i.bgColor,
+			brush: r ?? i.brush
+		};
+	}, L = () => {}, R = (e) => {
+		e === "end" && L();
+		for (let t of w.movingpixels) t({ phase: e });
+	}, z = l({
+		doc: C,
+		store: x,
+		emit: R,
+		holeIndex: D
+	}), B = () => {
+		let e = z.commit();
+		return e && j(e.label, e.change), !!e;
+	}, V = async (e = !1) => z.active ? !0 : C.sel ? (R("start"), L = await A.acquire(), z.lift(e), !0) : !1, H = m({
+		doc: C,
+		holeIndex: D,
+		canResize: _.canResize
+	}), U = (e, t) => !!t && (j(e, t), !0), W = _.platform ?? (typeof navigator < "u" && /Mac|iP/.test(navigator.platform) ? "mac" : "other"), G = _.maxBrushSize ?? 64, K = (_.keymap ?? ((e) => e))(s(W)), q = i(x, G), J = re({
+		doc: C,
+		store: x,
+		held(e) {
+			z.remap(e), q.remap(e);
+		}
+	}), Y = (e) => {
+		e.tool && e.tool !== x.getState().tool && B(), e = q.patch(e), e.view && (e = {
+			...e,
+			view: S.setting(e.view)
+		}), S.update(e);
+	}, X = null, Z = () => {
+		let e = X;
+		return X = null, e?.end(), e?.done ?? Promise.resolve();
+	}, Q, $ = te({
+		get editor() {
+			return Q;
+		},
+		store: {
+			getState: x.getState,
+			subscribe: x.subscribe,
+			setState: S.update
+		},
+		set: Y,
+		zoomTo: (e, t) => S.zoomTo(e, t),
+		pinch: S.pinch,
+		stroke: N,
+		fill: (e, t) => P(e, t, x.getState().toolOptions.paint_bucket),
+		selectWith: (e, t, n) => F(e, t, n),
+		deselect: () => T("Deselect Mask", null),
+		hold: M,
+		ready: A.ready,
+		moving: {
+			get: z.shown,
+			lift: V,
+			drag: z.drag,
+			drop: z.drop,
+			commit: () => void B()
+		},
+		pixel: (e, t) => e >= 0 && t >= 0 && e < C.width && t < C.height ? C.image[t * C.width + e] : null,
+		keymap: K,
+		platform: W,
+		maxBrushSize: G
+	});
+	return Q = {
+		get state() {
+			return x.getState();
+		},
+		subscribe: x.subscribe,
+		on(e, t) {
+			return w[e].add(t), () => w[e].delete(t);
+		},
+		set: Y,
+		command: {
+			async ChangeBrush({ change: e }) {
+				return q.change(e);
+			},
+			async NewBrush() {
+				B();
+				let n = C.bits && t(C.bits, C.width);
+				if (!n) return !1;
+				let r = await M(() => e(H.picture(), n, 0).data);
+				return Y({ brush: q.fromSelection(n, r) }), T("Deselect Mask", null), !0;
+			},
+			async SwitchColors() {
+				B();
+				let { fgColor: e, bgColor: t } = x.getState();
+				return Y({
+					fgColor: t,
+					bgColor: e
+				}), !0;
+			},
+			async Undo() {
+				let e = $.cancel();
+				return z.cancel() || e ? !0 : X && !await Z().then(() => !0, () => !1) ? !1 : A.idle(() => b.undo() && (E(!0), !0));
+			},
+			async Redo() {
+				return A.idle(() => b.redo() && (E(!0), !0));
+			},
+			async MaskAll() {
+				return B(), T("Mask All", f(C)), !0;
+			},
+			async DeselectMask() {
+				return B(), C.bits ? (T("Deselect Mask", null), !0) : !1;
+			},
+			async InvertMask() {
+				return B(), T(h.invert, u(C)), !0;
+			},
+			async ModifySelection({ modifier: e, quantity: t, brush: n = "circle" }) {
+				if (!(t >= 1)) throw Error("tela: ModifySelection's quantity is at least 1");
+				return B(), C.bits ? (T(h.modify, d(C, e, t, n)), !0) : !1;
+			},
+			async Zoom(e) {
+				return S.zoom(e);
+			},
+			async FitScreen() {
+				return S.fit(), !0;
+			},
+			async ScrollCenter() {
+				return S.centre(), !0;
+			},
+			async ShowPixelGrid() {
+				return Y({ showPixelGrid: !x.getState().showPixelGrid }), !0;
+			},
+			async Copy() {
+				return M(() => z.copy());
+			},
+			async Cut() {
+				return M(() => z.copy() ? (j("Cut", z.active ? z.discard() : z.clear()), !0) : !1);
+			},
+			async Paste(e) {
+				return z.clipboard.get() ? (B(), L = await A.acquire(), z.paste(e)) : !1;
+			},
+			async Clear() {
+				return M(() => (j("Clear", z.active ? z.discard() : z.clear()), !0));
+			},
+			async Flip({ target: e = "mask", orientation: t }) {
+				let n = t === "horizontal" ? "flip-x" : "flip-y";
+				return z.active || e === "mask" && C.sel ? (await V(), z.reshape([n], !1), !0) : M(() => U("Flip Canvas", H.turn([n])));
+			},
+			async Rotate({ target: e = "mask", angle: t }) {
+				let n = "rotate-90cw", r = t === 180 ? ["flip-x", "flip-y"] : t === 90 ? [n] : [
+					n,
+					n,
+					n
+				];
+				return e === "mask" && (z.active || C.sel) ? (await V(), z.reshape(r, t !== 180), !0) : (B(), M(() => U("Rotate Canvas", H.turn(r))));
+			},
+			async MoveMask({ wrap: e, direction: t, quantity: n = 1 }) {
+				let [r, i] = {
+					left: [-1, 0],
+					right: [1, 0],
+					up: [0, -1],
+					down: [0, 1]
+				}[t];
+				if (e) {
+					if (z.active) z.wrap(r * n, i * n);
+					else if (C.sel) await M(() => j("Shift", H.shift(r * n, i * n)));
+					else return !1;
+					return !0;
+				}
+				return await V() ? (z.nudge(r * n, i * n), !0) : !1;
+			},
+			async CanvasSize(e) {
+				if (B(), "ui" in e) return _.openDialog?.("CanvasSize"), !0;
+				let { left: t = 0, top: n = 0, right: r = 0, bottom: i = 0 } = "bounds" in e ? {} : e, a = "bounds" in e ? e.bounds : {
+					x: -t,
+					y: -n,
+					width: C.width + t + r,
+					height: C.height + n + i
+				};
+				return M(() => U("Canvas Size", H.cropTo(a.x, a.y, a.width, a.height)));
+			},
+			async CropSprite(e) {
+				B();
+				let t = e?.bounds ?? C.sel;
+				return t ? M(() => U("Sprite Crop", H.cropTo(t.x, t.y, t.width, t.height))) : !1;
+			},
+			async AutocropSprite() {
+				return B(), M(() => U("Trim Sprite", H.trim()));
+			},
+			async AddColor({ source: e = "color", color: t = "#00000000" }) {
+				let n = J.addColor(e, t);
+				return n ? (B(), n.change.redo(), j(n.label, n.change), !0) : !1;
+			},
+			async Apply() {
+				return B();
+			},
+			async Cancel() {
+				return !B() && !C.sel ? !1 : (T("Deselect Mask", null), !0);
+			}
+		},
+		async useTool(e) {
+			if (B(), !e.points.length) return;
+			let t = x.getState();
+			if (e.tool === "pencil") {
+				await A.ready();
+				let t = N(I(e));
+				return e.points.forEach((n, r) => t.to(e.points[r - 1] ?? null, n)), t.end();
+			}
+			if (e.tool === "paint_bucket") return M(() => P(e.points[0], I(e), {
+				contiguous: e.contiguous ?? !0,
+				pixelConnectivity: e.pixelConnectivity ?? t.toolOptions.paint_bucket.pixelConnectivity
+			}));
+			F(e.tool, e.points, e.selection ?? t.selectionMode, {
+				contiguous: e.contiguous ?? !0,
+				pixelConnectivity: e.pixelConnectivity ?? t.toolOptions.magic_wand.pixelConnectivity
+			});
+		},
+		async setSelection(e, t = h.set) {
+			B();
+			let n = C.sel;
+			C.select(e), j(t, C.selChange(n, C.sel));
+		},
+		async setColor(e, t, n = "Set Color") {
+			if (!(e >= 0 && e < C.palette.length)) throw Error(`tela: no palette index ${e}`);
+			B(), j(n, J.setColor(e, t));
+		},
+		async setPalette(e, { remap: t, label: n = "Set Palette" } = {}) {
+			B(), t || e.length < C.palette.length ? await M(() => j(n, J.setPalette(e, t))) : j(n, J.setPalette(e, t));
+		},
+		transaction: (e, t) => A.run(e, t),
+		play(e = "Run", t) {
+			if (!t && X) return X.done;
+			let n, r = new Promise((e) => n = e);
+			k++;
+			let i = A.run(e, () => (k--, t ? t() : r), !0);
+			return A.changed(), t || (X = {
+				end: n,
+				done: i
+			}), i;
+		},
+		pause: Z,
+		async replaceImage(e, t, n) {
+			A.requireOpen("replaceImage"), g("replaceImage", e, t, n);
+			let r = e.slice(), i = z.commit();
+			i && O(i.label, [i.change]);
+			let a = t === C.width && n === C.height ? C.sel : null;
+			A.push(C.imageChange(r, t, n, a)), C.replace(r.slice(), t, n), C.select(a);
+		},
+		async addHostChange(e) {
+			A.requireOpen("addHostChange"), A.push({
+				size: 0,
+				...e
+			});
+		},
+		async open(e) {
+			if (!await A.idle(() => !0)) throw Error("tela: open inside a transaction");
+			g("open", e.image, e.width, e.height), C.replace(e.image.slice(), e.width, e.height, !1), b = o(), z.reset(), C.setPalette(e.palette, !1), C.select(null), S.centre(1), E(!1);
+		},
+		async image() {
+			return M(() => C.image);
+		},
+		keymap: K,
+		attach: $.attach,
+		toPixel: (e, t) => $.toPixel(e, t)
+	}, ne.set(Q, $), c.set(Q, {
+		clipboard: z.clipboard,
+		setScreen: (e) => S.update({ screen: e }),
+		moving: z.shown
+	}), Q;
+}
+export { _ as createEditor };

package/dist/input.d.ts

@@ -0,0 +1,67 @@
+import { Editor, Point } from './types/index';
+import { InputHost, PointerInput, WheelInput } from './types/input';
+/** Each editor's input seam, for tela's tests. */
+export declare const inputs: WeakMap<Editor, {
+    down: (e: PointerInput) => Promise<void>;
+    move: (e: PointerInput) => Promise<void>;
+    up: (_e?: PointerInput) => Promise<void>;
+    /**
+     * ⌘Z mid-drag: a stroke ends and records (a known issue); any other drag is cancelled, recording nothing. True when a drag was cancelled.
+     */
+    cancel(): boolean;
+    /** Play and Pause: an open stroke ends and records; the rest of the drag paints nothing. */
+    end(): void;
+    /** The last key's command, settled: for tests. */
+    idle: () => Promise<unknown>;
+    /** A key from the keymap: true when it ran an entry. */
+    key(e: KeyboardEvent): boolean;
+    /**
+     * The wheel, one rule for mouse and trackpad: Ctrl+wheel without Control held is a pinch.
+     * Zooming moves one step per event whose dx + dy reaches 1.5 CSS px, "scroll up" zooming in;
+     * scrolling pans 1:1, or a tenth of the view per line or page event.
+     */
+    wheel(w: WheelInput, focus: Point): boolean;
+    /** The zoom keys' focus: the last pointer position, or the view's centre before any. */
+    focus(): Point;
+    attach: (element: HTMLElement, overlay: HTMLCanvasElement) => () => void;
+    toPixel: (_x: number, _y: number) => Point | null;
+}>;
+/**
+ * The Rectangular Marquee's rect from the press to `end`, both included: squared to the shorter
+ * side, and centred on the press.
+ */
+export declare function marqueeRect(start: Point, end: Point, square: boolean, centre: boolean): {
+    x: number;
+    y: number;
+}[];
+/**
+ * "Angle Snap from Last Point": 0°, 26.6°, 45°, 63.4° or 90°. The longer axis keeps its length; at
+ * 26.6° and 63.4° the other is half of it, truncated; at 45° both take the shorter one. From the
+ * Line tool's gesture specs.
+ */
+export declare function snap(from: Point, to: Point): Point;
+export declare function createInput(host: InputHost): {
+    down: (e: PointerInput) => Promise<void>;
+    move: (e: PointerInput) => Promise<void>;
+    up: (_e?: PointerInput) => Promise<void>;
+    /**
+     * ⌘Z mid-drag: a stroke ends and records (a known issue); any other drag is cancelled, recording nothing. True when a drag was cancelled.
+     */
+    cancel(): boolean;
+    /** Play and Pause: an open stroke ends and records; the rest of the drag paints nothing. */
+    end(): void;
+    /** The last key's command, settled: for tests. */
+    idle: () => Promise<unknown>;
+    /** A key from the keymap: true when it ran an entry. */
+    key(e: KeyboardEvent): boolean;
+    /**
+     * The wheel, one rule for mouse and trackpad: Ctrl+wheel without Control held is a pinch.
+     * Zooming moves one step per event whose dx + dy reaches 1.5 CSS px, "scroll up" zooming in;
+     * scrolling pans 1:1, or a tenth of the view per line or page event.
+     */
+    wheel(w: WheelInput, focus: Point): boolean;
+    /** The zoom keys' focus: the last pointer position, or the view's centre before any. */
+    focus(): Point;
+    attach: (element: HTMLElement, overlay: HTMLCanvasElement) => () => void;
+    toPixel: (_x: number, _y: number) => Point | null;
+};