-
{{ zoom.toFixed(1) }}x
-
{{ (rotate * (180 / Math.PI)).toFixed(0) }}°
+
+
{{ viewStore.zoom.toFixed(1) }}×
+
+ {{ (viewStore.rotate * (180 / Math.PI)).toFixed(0) }}°
+
diff --git a/apps/scishop/src/components/Toolbar.vue b/apps/scishop/src/components/Toolbar.vue
index 754d8fb..916cec1 100644
--- a/apps/scishop/src/components/Toolbar.vue
+++ b/apps/scishop/src/components/Toolbar.vue
@@ -1,5 +1,5 @@
diff --git a/apps/scishop/src/composables/useCanvasRenderer.ts b/apps/scishop/src/composables/useCanvasRenderer.ts
index 01999c3..097580f 100644
--- a/apps/scishop/src/composables/useCanvasRenderer.ts
+++ b/apps/scishop/src/composables/useCanvasRenderer.ts
@@ -1,4 +1,4 @@
-import { Ref, watch, unref, shallowRef, triggerRef, computed } from 'vue';
+import { Ref, watch, ref, unref, shallowRef, triggerRef, computed } from 'vue';
import { DrawCommand, renderPic } from '@4bitlabs/sci0';
import { createDitherFilter, renderPixelData } from '@4bitlabs/image';
@@ -9,7 +9,9 @@ import {
Palettes,
} from '@4bitlabs/color';
import { nearestNeighbor } from '@4bitlabs/resize-filters';
-import { get2dContext } from '../helpers/getContext.ts';
+import { get2dContext } from '../helpers/getContext';
+
+const oversampleRef = ref<[number, number]>([5, 5]);
export function useCanvasRenderer(
picDataRef: Ref,
@@ -24,11 +26,11 @@ export function useCanvasRenderer(
});
watch(
- [renderedRef, resRef],
- ([pic, [width, height]]) => {
+ [renderedRef, resRef, oversampleRef],
+ ([pic, [width, height], oversample]) => {
const canvas = unref(canvasRef);
- canvas.width = width * 5;
- canvas.height = height * 6;
+ canvas.width = width * oversample[0];
+ canvas.height = height * oversample[1];
const imgData = renderPixelData(pic.visible, {
dither: createDitherFilter(
@@ -38,8 +40,7 @@ export function useCanvasRenderer(
),
[1, 1],
),
- post: [nearestNeighbor([5, 6])],
- // post: [nearestNeighbor([5, 6])],
+ post: [nearestNeighbor(oversample)],
}) as ImageData;
const ctx = get2dContext(canvas);
diff --git a/apps/scishop/src/composables/useInputMachine.ts b/apps/scishop/src/composables/useInputMachine.ts
index 0b6b954..771cf7b 100644
--- a/apps/scishop/src/composables/useInputMachine.ts
+++ b/apps/scishop/src/composables/useInputMachine.ts
@@ -9,7 +9,14 @@ import {
translate,
} from 'transformation-matrix';
-import store from '../data/store.ts';
+import toolbarStore from '../data/toolbarStore';
+import viewStore from '../data/viewStore';
+
+const clampZoom = (current: number, next: number, min: number, max: number) => {
+ if (current * next < min) return min / current;
+ if (current * next > max) return max / current;
+ return next;
+};
export function useInputMachine(
matrixRef: Ref,
@@ -22,7 +29,7 @@ export function useInputMachine(
if (!el) return;
el.addEventListener('click', (e) => {
- if (store.selectedTool === 'line') {
+ if (toolbarStore.selectedTool === 'line') {
const iMatrix = unref(iMatrixRef);
const screenPos: [number, number] = [e.offsetX, e.offsetY];
const [x, y] = applyToPoint(iMatrix, screenPos);
@@ -45,13 +52,18 @@ export function useInputMachine(
if (!stage) return;
const { width: sWidth, height: sHeight } = stage;
const [dx, dy] = [e.offsetX - sWidth / 2, e.offsetY - sHeight / 2];
-
- store.viewMatrix.value = compose(
+ const scaleFactor = clampZoom(
+ viewStore.zoom,
+ e.deltaY / 1000 + 1,
+ 0.5,
+ 100,
+ );
+ viewStore.viewMatrix = compose(
translate(dx, dy),
- scale(Math.max(0, e.deltaY / 1000 + 1)),
+ scale(scaleFactor),
rotateDEG(-e.deltaX / 40),
translate(-dx, -dy),
- store.viewMatrix.value,
+ viewStore.viewMatrix,
);
});
@@ -59,7 +71,7 @@ export function useInputMachine(
el.addEventListener('pointerdown', (e) => {
if (e.button === 1) {
el.style.cursor = 'grabbing';
- dragState = [store.viewMatrix.value, e.offsetX, e.offsetY];
+ dragState = [viewStore.viewMatrix, e.offsetX, e.offsetY];
}
});
@@ -68,7 +80,7 @@ export function useInputMachine(
const [matrix, ix, iy] = dragState;
const dx = ix - e.offsetX;
const dy = iy - e.offsetY;
- store.viewMatrix.value = compose(translate(-dx, -dy), matrix);
+ viewStore.viewMatrix = compose(translate(-dx, -dy), matrix);
});
el.addEventListener('pointerup', () => {
diff --git a/apps/scishop/src/composables/useResizeWatcher.ts b/apps/scishop/src/composables/useResizeWatcher.ts
index a74f49a..85b3862 100644
--- a/apps/scishop/src/composables/useResizeWatcher.ts
+++ b/apps/scishop/src/composables/useResizeWatcher.ts
@@ -1,6 +1,6 @@
import { watch, onUnmounted, triggerRef, ShallowRef } from 'vue';
-import { useDebouncedRef } from './useDebouncedRef.ts';
+import { useDebouncedRef } from './useDebouncedRef';
export function useResizeWatcher(
refEl: ShallowRef,
diff --git a/apps/scishop/src/data/picStore.ts b/apps/scishop/src/data/picStore.ts
new file mode 100644
index 0000000..01bf5a8
--- /dev/null
+++ b/apps/scishop/src/data/picStore.ts
@@ -0,0 +1,24 @@
+import { ref, shallowRef, unref } from 'vue';
+
+import { DrawCommand } from '@4bitlabs/sci0';
+
+const data: DrawCommand[] = [];
+
+const layersRef = shallowRef(data);
+const selectedCommandIdx = ref(null);
+const topIdxRef = ref(data.length - 1);
+
+export default {
+ get layers() {
+ return unref(layersRef);
+ },
+ get cmdIdx() {
+ return unref(selectedCommandIdx);
+ },
+ get topIdx() {
+ return unref(topIdxRef);
+ },
+ set topIdx(n: number) {
+ topIdxRef.value = n;
+ },
+};
diff --git a/apps/scishop/src/data/stageStore.ts b/apps/scishop/src/data/stageStore.ts
new file mode 100644
index 0000000..ea7a5c2
--- /dev/null
+++ b/apps/scishop/src/data/stageStore.ts
@@ -0,0 +1,16 @@
+import { ref, unref } from 'vue';
+
+const canvasSizeRef = ref<[number, number]>([320, 190]);
+const aspectRatioRef = ref(6 / 5);
+
+export default {
+ get canvasRes() {
+ return canvasSizeRef;
+ },
+ get aspectRatio() {
+ return unref(aspectRatioRef);
+ },
+ set aspectRatio(value: number) {
+ aspectRatioRef.value = value;
+ },
+};
diff --git a/apps/scishop/src/data/store.ts b/apps/scishop/src/data/store.ts
deleted file mode 100644
index ca963ba..0000000
--- a/apps/scishop/src/data/store.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { ref, shallowRef, unref } from 'vue';
-import { identity, Matrix } from 'transformation-matrix';
-
-import { DrawCommand } from '@4bitlabs/sci0';
-
-export type Tool =
- | 'select'
- | 'pan'
- | 'line'
- | 'bezier'
- | 'rect'
- | 'oval'
- | 'brush'
- | 'fill';
-
-const selectedToolRef = ref('pan');
-const selectedCommandIdx = ref(null);
-const cmdsRef = shallowRef([]);
-const topIdxRef = ref(data.length - 1);
-const canvasSizeRef = ref<[number, number]>([320, 190]);
-const aspectRatioRef = ref(6 / 5);
-
-const viewMatrixRef = shallowRef(identity());
-
-export default {
- get selectedTool() {
- return unref(selectedToolRef);
- },
- set selectedTool(next: Tool) {
- selectedToolRef.value = next;
- },
- get canvasRes() {
- return canvasSizeRef;
- },
- get viewMatrix() {
- return viewMatrixRef;
- },
- get cmds() {
- return cmdsRef;
- },
- get cmdIdx() {
- return unref(selectedCommandIdx);
- },
- get topIdx() {
- return unref(topIdxRef);
- },
- set topIdx(n: number) {
- topIdxRef.value = n;
- },
- get aspectRatio() {
- return unref(aspectRatioRef);
- },
- set aspectRatio(value: number) {
- aspectRatioRef.value = value;
- },
-};
diff --git a/apps/scishop/src/data/toolbarStore.ts b/apps/scishop/src/data/toolbarStore.ts
new file mode 100644
index 0000000..963b801
--- /dev/null
+++ b/apps/scishop/src/data/toolbarStore.ts
@@ -0,0 +1,22 @@
+import { ref, unref } from 'vue';
+
+export type Tool =
+ | 'select'
+ | 'pan'
+ | 'line'
+ | 'bezier'
+ | 'rect'
+ | 'oval'
+ | 'brush'
+ | 'fill';
+
+const selectedToolRef = ref('pan');
+
+export default {
+ get selectedTool() {
+ return unref(selectedToolRef);
+ },
+ set selectedTool(next: Tool) {
+ selectedToolRef.value = next;
+ },
+};
diff --git a/apps/scishop/src/data/viewStore.ts b/apps/scishop/src/data/viewStore.ts
new file mode 100644
index 0000000..7f68173
--- /dev/null
+++ b/apps/scishop/src/data/viewStore.ts
@@ -0,0 +1,26 @@
+import { computed, shallowRef, unref } from 'vue';
+import { decomposeTSR, identity, Matrix } from 'transformation-matrix';
+
+const viewMatrixRef = shallowRef(identity());
+const transformRef = computed(() => decomposeTSR(unref(viewMatrixRef)));
+const zoomRef = computed(() => {
+ const { sx, sy } = unref(transformRef).scale;
+ return (sx + sy) / 2;
+});
+const rotateRef = computed(() => unref(transformRef).rotation.angle);
+
+export default {
+ get viewMatrix() {
+ return unref(viewMatrixRef);
+ },
+ set viewMatrix(value: Matrix) {
+ viewMatrixRef.value = value;
+ },
+ get zoom() {
+ return unref(zoomRef);
+ },
+
+ get rotate() {
+ return unref(rotateRef);
+ },
+};
diff --git a/apps/scishop/src/helpers/getPals.ts b/apps/scishop/src/helpers/getPals.ts
index 7666652..4fa6bdd 100644
--- a/apps/scishop/src/helpers/getPals.ts
+++ b/apps/scishop/src/helpers/getPals.ts
@@ -1,7 +1,7 @@
import { DrawCommand } from '@4bitlabs/sci0';
// prettier-ignore
-const DEFAULT_PALETTE: number[] = [
+export const DEFAULT_PALETTE: number[] = [
0x00, 0x11, 0x22, 0x33, 0x44, 0x55, 0x66, 0x77, 0x88, 0x99,
0xaa, 0xbb, 0xcc, 0xdd, 0xee, 0x88, 0x88, 0x01, 0x02, 0x03,
0x04, 0x05, 0x06, 0x88, 0x88, 0xf9, 0xfa, 0xfb, 0xfc, 0xfd,
diff --git a/apps/scishop/src/style.css b/apps/scishop/src/style.css
index d990e29..8804fd8 100644
--- a/apps/scishop/src/style.css
+++ b/apps/scishop/src/style.css
@@ -42,7 +42,7 @@
--clr-surface--default: #f5f5f5;
--clr-surface--shade: color-mix(in srgb, var(--clr-ink), var(--clr-surface--default) 85%);
- --clr-surface--dark: color-mix(in srgb, var(--clr-ink), var(--clr-surface--default) 70%);
+ --clr-surface--glass: #2f2f2f;
--radius: 0.25rlh;
--shadow: 0 0.5rlh 0.5rlh rgba(0 0 0 / 20%);
From 9090a5cb9de8bd7ca6ea674f5341b0b76085df94 Mon Sep 17 00:00:00 2001
From: J Holmes <32bitkid@gmail.com>
Date: Sat, 25 May 2024 20:36:59 -0600
Subject: [PATCH 07/28] WIP more work on line/user-input.
---
.../scishop/src/components/LayerNavigator.vue | 1 +
apps/scishop/src/components/Sidebar.vue | 7 +-
apps/scishop/src/components/Stage.vue | 65 +++--
apps/scishop/src/components/Toolbar.vue | 3 +-
.../src/composables/useCanvasRenderer.ts | 8 +-
.../src/composables/useInputMachine.ts | 231 ++++++++++++++----
apps/scishop/src/composables/useRafRef.ts | 21 ++
apps/scishop/src/data/picStore.ts | 22 ++
apps/scishop/src/helpers/array-helpers.ts | 10 +
apps/scishop/src/helpers/polygons.ts | 36 +++
apps/scishop/src/helpers/smoothstep.ts | 20 ++
apps/scishop/src/helpers/vec2-helpers.ts | 7 +
12 files changed, 365 insertions(+), 66 deletions(-)
create mode 100644 apps/scishop/src/composables/useRafRef.ts
create mode 100644 apps/scishop/src/helpers/array-helpers.ts
create mode 100644 apps/scishop/src/helpers/polygons.ts
create mode 100644 apps/scishop/src/helpers/smoothstep.ts
create mode 100644 apps/scishop/src/helpers/vec2-helpers.ts
diff --git a/apps/scishop/src/components/LayerNavigator.vue b/apps/scishop/src/components/LayerNavigator.vue
index 41f6d03..1333185 100644
--- a/apps/scishop/src/components/LayerNavigator.vue
+++ b/apps/scishop/src/components/LayerNavigator.vue
@@ -29,6 +29,7 @@ const itemType = {
-
-
+
+
@@ -20,7 +20,4 @@ import LayerNavigator from './LayerNavigator.vue';
gap: 3px;
border-left: 3px solid var(--clr-surface--default);
}
-
-.panel {
-}
diff --git a/apps/scishop/src/components/Stage.vue b/apps/scishop/src/components/Stage.vue
index 6513e54..8136385 100644
--- a/apps/scishop/src/components/Stage.vue
+++ b/apps/scishop/src/components/Stage.vue
@@ -1,35 +1,46 @@
-
+
+
diff --git a/apps/scishop/src/components/Toolbar.vue b/apps/scishop/src/components/Toolbar.vue
index 916cec1..8713a06 100644
--- a/apps/scishop/src/components/Toolbar.vue
+++ b/apps/scishop/src/components/Toolbar.vue
@@ -114,6 +114,7 @@ import store from '../data/toolbarStore';
background-clip: padding-box;
letter-spacing: -0.03ex;
transition: box-shadow 500ms;
+ z-index: 1;
&:first-child {
border-top-left-radius: var(--radius);
@@ -130,7 +131,7 @@ import store from '../data/toolbarStore';
color: var(--clr-surface--default);
font-weight: 700;
box-shadow: 0 0 4rem -0.25rem var(--clr-primary-A90);
- z-index: 1;
+ z-index: 2;
}
}
diff --git a/apps/scishop/src/composables/useCanvasRenderer.ts b/apps/scishop/src/composables/useCanvasRenderer.ts
index 097580f..baa1049 100644
--- a/apps/scishop/src/composables/useCanvasRenderer.ts
+++ b/apps/scishop/src/composables/useCanvasRenderer.ts
@@ -1,4 +1,4 @@
-import { Ref, watch, ref, unref, shallowRef, triggerRef, computed } from 'vue';
+import { Ref, watch, unref, shallowRef, triggerRef, computed } from 'vue';
import { DrawCommand, renderPic } from '@4bitlabs/sci0';
import { createDitherFilter, renderPixelData } from '@4bitlabs/image';
@@ -10,8 +10,12 @@ import {
} from '@4bitlabs/color';
import { nearestNeighbor } from '@4bitlabs/resize-filters';
import { get2dContext } from '../helpers/getContext';
+import viewStore from '../data/viewStore.ts';
-const oversampleRef = ref<[number, number]>([5, 5]);
+const oversampleRef = computed<[number, number]>(() => {
+ const samples = Math.min(Math.max(1, Math.ceil(viewStore.zoom)), 5);
+ return [samples, samples];
+});
export function useCanvasRenderer(
picDataRef: Ref
,
diff --git a/apps/scishop/src/composables/useInputMachine.ts b/apps/scishop/src/composables/useInputMachine.ts
index 771cf7b..a4bedb7 100644
--- a/apps/scishop/src/composables/useInputMachine.ts
+++ b/apps/scishop/src/composables/useInputMachine.ts
@@ -1,6 +1,16 @@
-import { computed, onMounted, unref, Ref } from 'vue';
+import {
+ Ref,
+ computed,
+ onMounted,
+ ref,
+ shallowRef,
+ unref,
+ watch,
+ watchEffect,
+} from 'vue';
import {
applyToPoint,
+ applyToPoints,
compose,
inverse,
Matrix,
@@ -11,6 +21,17 @@ import {
import toolbarStore from '../data/toolbarStore';
import viewStore from '../data/viewStore';
+import { get2dContext } from '../helpers/getContext.ts';
+import {
+ isInsideBounds,
+ pixel,
+ areaOfPolygon,
+ pathPoly,
+} from '../helpers/polygons.ts';
+import * as SmoothStep from '../helpers/smoothstep';
+import { useRafRef } from './useRafRef.ts';
+import { currentCommandStore as cmdStore } from '../data/picStore.ts';
+import { intVec2 } from '../helpers/vec2-helpers.ts';
const clampZoom = (current: number, next: number, min: number, max: number) => {
if (current * next < min) return min / current;
@@ -18,39 +39,158 @@ const clampZoom = (current: number, next: number, min: number, max: number) => {
return next;
};
+type CSSCursor = string;
+
export function useInputMachine(
matrixRef: Ref,
stageRef: Ref,
+ stageResRef: Ref<[number, number]>,
+ canvasResRef: Ref<[number, number]>,
) {
const iMatrixRef = computed(() => inverse(unref(matrixRef)));
+ const dragStateRef = shallowRef<[Matrix, number, number] | null>(null);
+ const currentCursorRef = ref('auto');
+ const cursorPositionRef = useRafRef<[number, number]>([0, 0]);
- onMounted(() => {
+ const projected = computed((prev) => {
+ const sPos = unref(cursorPositionRef);
+ const next = intVec2(applyToPoint(unref(iMatrixRef), sPos));
+ const isSame = prev && prev[0] === next[0] && prev[1] === next[1];
+ return isSame ? prev : next;
+ });
+
+ watchEffect(() => {
const el = unref(stageRef);
if (!el) return;
+ el.style.cursor = currentCursorRef.value;
+ });
+
+ watch([cursorPositionRef, dragStateRef], ([[cX, cY], dragState]) => {
+ if (!dragState) return;
+
+ const [matrix, ix, iy] = dragState;
+ const dx = ix - cX;
+ const dy = iy - cY;
+ viewStore.viewMatrix = compose(translate(-dx, -dy), matrix);
+ });
+
+ watch(
+ [stageRef, matrixRef, iMatrixRef, cursorPositionRef],
+ ([el, matrix, iMatrix, screenPoint]) => {
+ if (!el) return;
+
+ const [sWidth, sHeight] = unref(stageResRef);
+ el.width = sWidth;
+ el.height = sHeight;
+ const ctx = get2dContext(el);
+ ctx.clearRect(0, 0, sWidth, sHeight);
- el.addEventListener('click', (e) => {
if (toolbarStore.selectedTool === 'line') {
- const iMatrix = unref(iMatrixRef);
- const screenPos: [number, number] = [e.offsetX, e.offsetY];
- const [x, y] = applyToPoint(iMatrix, screenPos);
- console.log('line:', x, y);
- // const cmd = unref(store.selectedCmd);
- // if (cmd[0] === 'PLINE') {
- // store.cmds.value.splice(
- // store.cmds.value.length - store.cmdIdx - 1,
- // 1,
- // [...cmd, [Math.floor(x), Math.floor(y)]],
- // );
- // triggerRef(store.cmds);
- // console.log('appending');
- // }
+ const canvasPoint = applyToPoint(iMatrix, screenPoint);
+
+ const [cWidth, cHeight] = unref(canvasResRef);
+
+ ctx.lineWidth = 1;
+ ctx.strokeStyle = 'white';
+ const overCanvas = isInsideBounds([cWidth, cHeight], canvasPoint);
+ currentCursorRef.value = overCanvas ? 'none' : 'auto';
+ if (overCanvas) {
+ const pixelBounds = applyToPoints(matrix, pixel(canvasPoint, 0.0125));
+
+ const area = areaOfPolygon(pixelBounds);
+ const alpha = SmoothStep.s1(1, 6 * 6, area);
+ ctx.save();
+ pathPoly(ctx, pixelBounds);
+ ctx.setLineDash([1, 1]);
+ ctx.strokeStyle = `oklab(${(alpha * 100).toFixed(0)}% 0 0)`;
+ ctx.fillStyle = `oklab(${(alpha * 100 * 0.45).toFixed(0)}% 0 0)`;
+ ctx.fill();
+ ctx.stroke();
+ ctx.restore();
+
+ ctx.fillStyle = 'white';
+ ctx.beginPath();
+ ctx.arc(...screenPoint, 2, 0, Math.PI * 2);
+ ctx.fill();
+ }
}
- });
+ },
+ );
+
+ watch([projected], ([pos]) => {
+ const current = cmdStore.current;
+ if (current === null) return;
+ if (current[0] === 'PLINE') {
+ const [id, mode, code, ...coords] = current;
+ cmdStore.current = [id, mode, code, ...coords.slice(0, -1), pos];
+ }
+ });
- el.addEventListener('wheel', (e) => {
+ watchEffect(() => {
+ const el = unref(stageRef);
+ if (!el) return;
+
+ const stateState = unref(dragStateRef);
+ const { selectedTool } = toolbarStore;
+
+ if (stateState !== null) {
+ currentCursorRef.value = 'grabbing';
+ } else if (selectedTool === 'pan') {
+ currentCursorRef.value = 'grab';
+ } else if (selectedTool === 'select') {
+ currentCursorRef.value = 'crosshair';
+ } else {
+ currentCursorRef.value = 'auto';
+ }
+ });
+
+ const mouseHandlers = {
+ click: (e: MouseEvent) => {
+ console.log(e.button);
+ if (toolbarStore.selectedTool === 'line') {
+ const [x, y] = applyToPoint(unref(iMatrixRef), [e.offsetX, e.offsetY]);
+ const pos: readonly [number, number] = [Math.floor(x), Math.floor(y)];
+
+ const current = cmdStore.current;
+ if (current === null) {
+ cmdStore.current = [
+ 'PLINE',
+ 1,
+ [Math.floor(Math.random() * 40), 0, 0],
+ pos,
+ pos,
+ ];
+ } else if (current[0] === 'PLINE') {
+ const [id, mode, code, ...coords] = current;
+ cmdStore.current = [id, mode, code, ...coords.slice(0, -1), pos, pos];
+ } else {
+ throw new Error(`can't append to existing command ${current[0]}`);
+ }
+ }
+ },
+
+ contextMenu: (e: MouseEvent) => {
+ if (toolbarStore.selectedTool === 'line') {
+ e.preventDefault();
+ const current = cmdStore.current;
+ if (current === null || current[0] !== 'PLINE') return;
+
+ const [id, mode, code, ...coords] = current;
+ if (coords.length < 3) {
+ cmdStore.abort();
+ } else {
+ cmdStore.current = [id, mode, code, ...coords.slice(0, -1)];
+ cmdStore.commit();
+ }
+
+ return;
+ }
+ },
+
+ wheel: (e: WheelEvent) => {
const stage = unref(stageRef);
if (!stage) return;
- const { width: sWidth, height: sHeight } = stage;
+ const [sWidth, sHeight] = unref(stageResRef);
const [dx, dy] = [e.offsetX - sWidth / 2, e.offsetY - sHeight / 2];
const scaleFactor = clampZoom(
viewStore.zoom,
@@ -65,28 +205,37 @@ export function useInputMachine(
translate(-dx, -dy),
viewStore.viewMatrix,
);
- });
+ },
+ };
- let dragState: [Matrix, number, number] | null = null;
- el.addEventListener('pointerdown', (e) => {
- if (e.button === 1) {
- el.style.cursor = 'grabbing';
- dragState = [viewStore.viewMatrix, e.offsetX, e.offsetY];
+ const pointerHandlers = {
+ down: (e: PointerEvent) => {
+ const isPanning =
+ e.button === 1 ||
+ (toolbarStore.selectedTool === 'pan' && e.button === 0);
+
+ if (isPanning) {
+ dragStateRef.value = [viewStore.viewMatrix, e.offsetX, e.offsetY];
}
- });
-
- el.addEventListener('pointermove', (e) => {
- if (!dragState) return;
- const [matrix, ix, iy] = dragState;
- const dx = ix - e.offsetX;
- const dy = iy - e.offsetY;
- viewStore.viewMatrix = compose(translate(-dx, -dy), matrix);
- });
-
- el.addEventListener('pointerup', () => {
- if (!dragState) return;
- el.style.cursor = '';
- dragState = null;
- });
+ },
+ move: (e: PointerEvent) => {
+ cursorPositionRef.value = [e.offsetX, e.offsetY];
+ },
+ up: () => {
+ if (!dragStateRef.value) return;
+ dragStateRef.value = null;
+ },
+ };
+
+ onMounted(() => {
+ const el = unref(stageRef);
+ if (!el) return;
+
+ el.addEventListener('click', mouseHandlers.click);
+ el.addEventListener('contextmenu', mouseHandlers.contextMenu);
+ el.addEventListener('wheel', mouseHandlers.wheel);
+ el.addEventListener('pointerdown', pointerHandlers.down);
+ el.addEventListener('pointermove', pointerHandlers.move);
+ el.addEventListener('pointerup', pointerHandlers.up);
});
}
diff --git a/apps/scishop/src/composables/useRafRef.ts b/apps/scishop/src/composables/useRafRef.ts
new file mode 100644
index 0000000..ec645dd
--- /dev/null
+++ b/apps/scishop/src/composables/useRafRef.ts
@@ -0,0 +1,21 @@
+import { customRef } from 'vue';
+
+export function useRafRef(initialValue: T) {
+ let value = initialValue;
+ let rafHandle: number | null = null;
+
+ return customRef((track, trigger) => ({
+ get() {
+ track();
+ return value;
+ },
+ set(newValue) {
+ if (rafHandle) cancelAnimationFrame(rafHandle);
+ rafHandle = requestAnimationFrame(() => {
+ value = newValue;
+ trigger();
+ rafHandle = null;
+ });
+ },
+ }));
+}
diff --git a/apps/scishop/src/data/picStore.ts b/apps/scishop/src/data/picStore.ts
index 01bf5a8..0570a1b 100644
--- a/apps/scishop/src/data/picStore.ts
+++ b/apps/scishop/src/data/picStore.ts
@@ -1,6 +1,7 @@
import { ref, shallowRef, unref } from 'vue';
import { DrawCommand } from '@4bitlabs/sci0';
+import { insert } from '../helpers/array-helpers.ts';
const data: DrawCommand[] = [];
@@ -22,3 +23,24 @@ export default {
topIdxRef.value = n;
},
};
+
+const currentCommandRef = shallowRef(null);
+
+export const currentCommandStore = {
+ get current() {
+ return unref(currentCommandRef);
+ },
+ set current(cmd: DrawCommand | null) {
+ currentCommandRef.value = cmd;
+ },
+ commit() {
+ const cmd = unref(currentCommandRef);
+ if (cmd === null) return;
+ currentCommandRef.value = null;
+ layersRef.value = insert(layersRef.value, unref(topIdxRef) + 1, cmd);
+ topIdxRef.value += 1;
+ },
+ abort() {
+ currentCommandRef.value = null;
+ },
+};
diff --git a/apps/scishop/src/helpers/array-helpers.ts b/apps/scishop/src/helpers/array-helpers.ts
new file mode 100644
index 0000000..f2ee02e
--- /dev/null
+++ b/apps/scishop/src/helpers/array-helpers.ts
@@ -0,0 +1,10 @@
+export const insert = (
+ source: T[],
+ index: number,
+ item: T,
+ replaceAtIndex = false,
+): T[] => [
+ ...source.slice(0, index),
+ item,
+ ...source.slice(replaceAtIndex ? index + 1 : index),
+];
diff --git a/apps/scishop/src/helpers/polygons.ts b/apps/scishop/src/helpers/polygons.ts
new file mode 100644
index 0000000..052479f
--- /dev/null
+++ b/apps/scishop/src/helpers/polygons.ts
@@ -0,0 +1,36 @@
+export const isInsideBounds = (
+ [width, height]: [number, number],
+ [x, y]: [number, number],
+): boolean => x >= 0 && y >= 0 && x < width && y < height;
+
+export const pixel = (
+ [x, y]: [number, number],
+ offset = 0.0,
+): [number, number][] => [
+ [Math.floor(x) + offset, Math.floor(y) + offset],
+ [Math.ceil(x) - offset, Math.floor(y) + offset],
+ [Math.ceil(x) - offset, Math.ceil(y) - offset],
+ [Math.floor(x) + offset, Math.ceil(y) - offset],
+];
+
+export const areaOfPolygon = (points: [number, number][]) => {
+ const { length } = points;
+ let area = 0;
+
+ for (let i = 0; i < length; i++) {
+ const [x1, y1] = points[i];
+ const [x2, y2] = points[(i + 1) % length];
+ area += x1 * y2 - x2 * y1;
+ }
+
+ return Math.abs(area) / 2;
+};
+
+export const pathPoly = (
+ ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+ points: [number, number][],
+) => {
+ ctx.beginPath();
+ points.forEach(([x, y], i) => ctx[i === 0 ? 'moveTo' : 'lineTo'](x, y));
+ ctx.closePath();
+};
diff --git a/apps/scishop/src/helpers/smoothstep.ts b/apps/scishop/src/helpers/smoothstep.ts
new file mode 100644
index 0000000..b3c9780
--- /dev/null
+++ b/apps/scishop/src/helpers/smoothstep.ts
@@ -0,0 +1,20 @@
+const clamp = (x: number, lower: number = 0, upper: number = 1) =>
+ Math.max(Math.min(x, upper), lower);
+
+export const s0 = (left: number, right: number, val: number) =>
+ clamp((val - left) / (right - left));
+
+export const s1 = (left: number, right: number, val: number) => {
+ const x = clamp((val - left) / (right - left));
+ return x ** 2 * (-2.0 * x + 3.0);
+};
+
+export const s2 = (left: number, right: number, val: number) => {
+ const x = clamp((val - left) / (right - left));
+ return x ** 3 * (6 * x ** 2 - 15 * x + 10);
+};
+
+export const s3 = (left: number, right: number, val: number) => {
+ const x = clamp((val - left) / (right - left));
+ return -20 * x ** 7 + 70 * x ** 6 + -84 * x ** 5 + 35 * x ** 4;
+};
diff --git a/apps/scishop/src/helpers/vec2-helpers.ts b/apps/scishop/src/helpers/vec2-helpers.ts
new file mode 100644
index 0000000..cd8ac12
--- /dev/null
+++ b/apps/scishop/src/helpers/vec2-helpers.ts
@@ -0,0 +1,7 @@
+export type Vec2 = [number, number];
+export type StaticVec2 = readonly [number, number];
+
+export const intVec2 = (
+ [x, y]: StaticVec2,
+ fn: (v: number) => number = Math.floor,
+): StaticVec2 => [fn(x), fn(y)];
From a396363792881e7a96daaef29d33c40b90b44f44 Mon Sep 17 00:00:00 2001
From: J Holmes <32bitkid@gmail.com>
Date: Sun, 26 May 2024 07:51:56 -0600
Subject: [PATCH 08/28] WIP some more tweaks before a refactor into
EditorCommands
---
apps/scishop/src/components/Stage.vue | 14 +++++++++----
.../src/composables/useCanvasRenderer.ts | 20 +++++++++++++------
apps/scishop/src/data/picStore.ts | 4 ++++
apps/scishop/src/helpers/array-helpers.ts | 11 ++++++++++
4 files changed, 39 insertions(+), 10 deletions(-)
diff --git a/apps/scishop/src/components/Stage.vue b/apps/scishop/src/components/Stage.vue
index 8136385..1e0b8ec 100644
--- a/apps/scishop/src/components/Stage.vue
+++ b/apps/scishop/src/components/Stage.vue
@@ -7,7 +7,10 @@ import {
applyToPoints,
} from 'transformation-matrix';
import { useResizeWatcher } from '../composables/useResizeWatcher';
-import { useCanvasRenderer } from '../composables/useCanvasRenderer';
+import {
+ useCanvasRenderer,
+ useRenderedPixels,
+} from '../composables/useCanvasRenderer';
import store, { currentCommandStore } from '../data/picStore';
import stageStore from '../data/stageStore';
import viewStore from '../data/viewStore';
@@ -21,9 +24,11 @@ const stageRes = useResizeWatcher(stageRef, 100);
const viewStack = computed(() => [
...store.layers.slice(0, store.topIdx + 1),
- ...(currentCommandStore.current ? [currentCommandStore.current] : []),
+ ...currentCommandStore.commands,
]);
-const pixels = useCanvasRenderer(viewStack, stageStore.canvasRes);
+
+const renderResult = useRenderedPixels(viewStack, stageStore.canvasRes);
+const pixels = useCanvasRenderer(renderResult, stageStore.canvasRes);
const matrixRef = computed(() => {
const [sWidth, sHeight] = unref(stageRes);
@@ -36,7 +41,7 @@ const matrixRef = computed(() => {
);
});
-const smootherizeRef = computed(() => viewStore.zoom < 15);
+const smootherizeRef = computed(() => viewStore.zoom < 12);
watch(
[stageRef, stageRes, pixels, stageStore.canvasRes, matrixRef, smootherizeRef],
@@ -67,6 +72,7 @@ watch(
ctx.shadowColor = `rgba(0 0 0 / 25%)`;
ctx.shadowBlur = 25;
ctx.shadowOffsetY = 10;
+ ctx.shadowOffsetX = 10;
ctx.fillStyle = `black`;
ctx.fill();
ctx.restore();
diff --git a/apps/scishop/src/composables/useCanvasRenderer.ts b/apps/scishop/src/composables/useCanvasRenderer.ts
index baa1049..f0e8312 100644
--- a/apps/scishop/src/composables/useCanvasRenderer.ts
+++ b/apps/scishop/src/composables/useCanvasRenderer.ts
@@ -1,4 +1,5 @@
import { Ref, watch, unref, shallowRef, triggerRef, computed } from 'vue';
+import { RenderResult } from '@4bitlabs/sci0/dist/screen/render-result.ts';
import { DrawCommand, renderPic } from '@4bitlabs/sci0';
import { createDitherFilter, renderPixelData } from '@4bitlabs/image';
@@ -13,21 +14,28 @@ import { get2dContext } from '../helpers/getContext';
import viewStore from '../data/viewStore.ts';
const oversampleRef = computed<[number, number]>(() => {
- const samples = Math.min(Math.max(1, Math.ceil(viewStore.zoom)), 5);
+ if (viewStore.zoom > 12) return [1, 1];
+ const samples = Math.min(Math.max(1, Math.round(viewStore.zoom)), 5);
+
return [samples, samples];
});
-export function useCanvasRenderer(
+export function useRenderedPixels(
picDataRef: Ref,
resRef: Ref<[number, number]>,
-): Ref {
- const canvasRef = shallowRef(new OffscreenCanvas(1, 1));
-
- const renderedRef = computed(() => {
+) {
+ return computed(() => {
const picData = unref(picDataRef);
const [width, height] = unref(resRef);
return renderPic(picData, { width, height });
});
+}
+
+export function useCanvasRenderer(
+ renderedRef: Ref,
+ resRef: Ref<[number, number]>,
+): Ref {
+ const canvasRef = shallowRef(new OffscreenCanvas(1, 1));
watch(
[renderedRef, resRef, oversampleRef],
diff --git a/apps/scishop/src/data/picStore.ts b/apps/scishop/src/data/picStore.ts
index 0570a1b..5c12c66 100644
--- a/apps/scishop/src/data/picStore.ts
+++ b/apps/scishop/src/data/picStore.ts
@@ -33,6 +33,10 @@ export const currentCommandStore = {
set current(cmd: DrawCommand | null) {
currentCommandRef.value = cmd;
},
+ get commands() {
+ const cmd = unref(currentCommandRef);
+ return cmd ? [cmd] : [];
+ },
commit() {
const cmd = unref(currentCommandRef);
if (cmd === null) return;
diff --git a/apps/scishop/src/helpers/array-helpers.ts b/apps/scishop/src/helpers/array-helpers.ts
index f2ee02e..163ffce 100644
--- a/apps/scishop/src/helpers/array-helpers.ts
+++ b/apps/scishop/src/helpers/array-helpers.ts
@@ -8,3 +8,14 @@ export const insert = (
item,
...source.slice(replaceAtIndex ? index + 1 : index),
];
+
+export const insertN = (
+ source: T[],
+ index: number,
+ items: T[],
+ replace = 0,
+): T[] => [
+ ...source.slice(0, index),
+ ...items,
+ ...source.slice(index + Math.max(0, replace)),
+];
From a73bf268197fed635a1b6ae121312a876b1d1981 Mon Sep 17 00:00:00 2001
From: J Holmes <32bitkid@gmail.com>
Date: Sun, 26 May 2024 09:48:20 -0600
Subject: [PATCH 09/28] WIP refactored low-level DrawCommand stacks into
EditorCommand stacks
---
.../scishop/src/components/LayerNavigator.vue | 24 ++---
.../src/components/PolyLineCommandItem.vue | 97 -------------------
apps/scishop/src/components/Stage.vue | 2 +-
.../command-items/BrushCommandItem.vue | 23 +++++
.../command-items/FillCommandItem.vue | 18 ++++
.../GenericCommandItem.vue} | 0
.../command-items/PolyLineCommandItem.vue | 18 ++++
.../src/components/command-items/Swatches.vue | 95 ++++++++++++++++++
apps/scishop/src/data/picStore.ts | 21 +++-
apps/scishop/src/helpers/getPals.ts | 12 +--
apps/scishop/src/models/EditorCommand.ts | 34 +++++++
11 files changed, 225 insertions(+), 119 deletions(-)
delete mode 100644 apps/scishop/src/components/PolyLineCommandItem.vue
create mode 100644 apps/scishop/src/components/command-items/BrushCommandItem.vue
create mode 100644 apps/scishop/src/components/command-items/FillCommandItem.vue
rename apps/scishop/src/components/{DrawCommandItem.vue => command-items/GenericCommandItem.vue} (100%)
create mode 100644 apps/scishop/src/components/command-items/PolyLineCommandItem.vue
create mode 100644 apps/scishop/src/components/command-items/Swatches.vue
create mode 100644 apps/scishop/src/models/EditorCommand.ts
diff --git a/apps/scishop/src/components/LayerNavigator.vue b/apps/scishop/src/components/LayerNavigator.vue
index 1333185..f25814f 100644
--- a/apps/scishop/src/components/LayerNavigator.vue
+++ b/apps/scishop/src/components/LayerNavigator.vue
@@ -2,19 +2,21 @@
import { computed } from 'vue';
import { mapToPals } from '../helpers/getPals';
import store from '../data/picStore';
-import DrawCommandItem from './DrawCommandItem.vue';
-import PolyLineCommandItem from './PolyLineCommandItem.vue';
+import GenericCommandItem from './command-items/GenericCommandItem.vue';
+import PolyLineCommandItem from './command-items/PolyLineCommandItem.vue';
+import FillCommandItem from './command-items/FillCommandItem.vue';
+import BrushCommandItem from './command-items/BrushCommandItem.vue';
const stack = computed(() => Array.from(store.layers.entries()).reverse());
const stackPalettes = computed(() => mapToPals(store.layers));
const itemType = {
- SET_PALETTE: DrawCommandItem,
- UPDATE_PALETTE: DrawCommandItem,
- BRUSH: PolyLineCommandItem,
- FILL: PolyLineCommandItem,
+ SET_PALETTE: GenericCommandItem,
+ UPDATE_PALETTE: GenericCommandItem,
+ BRUSH: BrushCommandItem,
+ FILL: FillCommandItem,
PLINE: PolyLineCommandItem,
- CEL: DrawCommandItem,
+ CEL: GenericCommandItem,
};
@@ -28,10 +30,10 @@ const itemType = {
C
-import {
- PolylineCommand,
- isVisualMode,
- isPriorityMode,
- isControlMode,
- BrushCommand,
- FillCommand,
-} from '@4bitlabs/sci0';
-import { computed } from 'vue';
-import { Palettes } from '@4bitlabs/color';
-import { fromUint32, toHex } from '@4bitlabs/color-space/srgb';
-
-const { command, pals } = defineProps<{
- command: PolylineCommand | BrushCommand | FillCommand;
- pals: [number[], number[], number[], number[]];
-}>();
-
-const [name, drawMode, code] = command;
-
-const getVisualPair = computed(() => {
- const pal = (code[0] / 40) >>> 0;
- const idx = code[0] % 40;
- const pair = pals[pal][idx];
-
- const [aClr, bClr] = [
- Palettes.TRUE_CGA_PALETTE[pair >>> 4],
- Palettes.TRUE_CGA_PALETTE[pair & 0b1111],
- ];
-
- return {
- '--dither-left': toHex(fromUint32(aClr)),
- '--dither-right': toHex(fromUint32(bClr)),
- };
-});
-
-const getPriorityColor = computed(() => ({
- background: toHex(fromUint32(Palettes.CGA_PALETTE[code[1]])),
- color: code[1] > 8 ? '#000' : '#fff',
-}));
-
-const getControlColor = computed(() => ({
- background: toHex(fromUint32(Palettes.CGA_PALETTE[code[1]])),
- color: code[1] > 8 ? '#000' : '#fff',
-}));
-
-
-
-
- {{ name }}
-
-
- {{
- code[1].toString(16)
- }}
-
-
- {{
- code[2].toString(16)
- }}
-
-
-
-
-
diff --git a/apps/scishop/src/components/Stage.vue b/apps/scishop/src/components/Stage.vue
index 1e0b8ec..31fd3f5 100644
--- a/apps/scishop/src/components/Stage.vue
+++ b/apps/scishop/src/components/Stage.vue
@@ -23,7 +23,7 @@ const uiRef = shallowRef(null);
const stageRes = useResizeWatcher(stageRef, 100);
const viewStack = computed(() => [
- ...store.layers.slice(0, store.topIdx + 1),
+ ...store.layers.slice(0, store.topIdx + 1).flatMap((it) => it.commands),
...currentCommandStore.commands,
]);
diff --git a/apps/scishop/src/components/command-items/BrushCommandItem.vue b/apps/scishop/src/components/command-items/BrushCommandItem.vue
new file mode 100644
index 0000000..9b2e24b
--- /dev/null
+++ b/apps/scishop/src/components/command-items/BrushCommandItem.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+ {{ isSpray ? 'Spray' : 'Solid' }}
+ {{ isRect ? 'Square' : 'Circle' }}
+ Brush Size {{ size }}
+
+
+
+
diff --git a/apps/scishop/src/components/command-items/FillCommandItem.vue b/apps/scishop/src/components/command-items/FillCommandItem.vue
new file mode 100644
index 0000000..a471313
--- /dev/null
+++ b/apps/scishop/src/components/command-items/FillCommandItem.vue
@@ -0,0 +1,18 @@
+
+
+
+
+ Fill
+
+
+
diff --git a/apps/scishop/src/components/DrawCommandItem.vue b/apps/scishop/src/components/command-items/GenericCommandItem.vue
similarity index 100%
rename from apps/scishop/src/components/DrawCommandItem.vue
rename to apps/scishop/src/components/command-items/GenericCommandItem.vue
diff --git a/apps/scishop/src/components/command-items/PolyLineCommandItem.vue b/apps/scishop/src/components/command-items/PolyLineCommandItem.vue
new file mode 100644
index 0000000..b920968
--- /dev/null
+++ b/apps/scishop/src/components/command-items/PolyLineCommandItem.vue
@@ -0,0 +1,18 @@
+
+
+
+
+ Line ({{ coords.length }})
+
+
+
diff --git a/apps/scishop/src/components/command-items/Swatches.vue b/apps/scishop/src/components/command-items/Swatches.vue
new file mode 100644
index 0000000..c25e2ce
--- /dev/null
+++ b/apps/scishop/src/components/command-items/Swatches.vue
@@ -0,0 +1,95 @@
+
+
+
+
+
+ {{
+ drawCode[1].toString(16)
+ }}
+
+
+ {{
+ drawCode[2].toString(16)
+ }}
+
+
+
+
diff --git a/apps/scishop/src/data/picStore.ts b/apps/scishop/src/data/picStore.ts
index 5c12c66..4484e66 100644
--- a/apps/scishop/src/data/picStore.ts
+++ b/apps/scishop/src/data/picStore.ts
@@ -1,11 +1,17 @@
-import { ref, shallowRef, unref } from 'vue';
+import { computed, ref, shallowRef, unref } from 'vue';
import { DrawCommand } from '@4bitlabs/sci0';
import { insert } from '../helpers/array-helpers.ts';
+import { EditorCommand } from '../models/EditorCommand.ts';
-const data: DrawCommand[] = [];
+const nextId = () => Math.random().toString(36).substring(2);
-const layersRef = shallowRef(data);
+const data: EditorCommand[] = [];
+
+const layersRef = shallowRef(data);
+const commandsRef = computed(() =>
+ unref(layersRef).flatMap((it) => it.commands),
+);
const selectedCommandIdx = ref(null);
const topIdxRef = ref(data.length - 1);
@@ -13,6 +19,9 @@ export default {
get layers() {
return unref(layersRef);
},
+ get commands() {
+ return unref(commandsRef);
+ },
get cmdIdx() {
return unref(selectedCommandIdx);
},
@@ -41,7 +50,11 @@ export const currentCommandStore = {
const cmd = unref(currentCommandRef);
if (cmd === null) return;
currentCommandRef.value = null;
- layersRef.value = insert(layersRef.value, unref(topIdxRef) + 1, cmd);
+ layersRef.value = insert(layersRef.value, unref(topIdxRef) + 1, {
+ id: nextId(),
+ type: cmd[0],
+ commands: [cmd],
+ });
topIdxRef.value += 1;
},
abort() {
diff --git a/apps/scishop/src/helpers/getPals.ts b/apps/scishop/src/helpers/getPals.ts
index 4fa6bdd..cc7a7fd 100644
--- a/apps/scishop/src/helpers/getPals.ts
+++ b/apps/scishop/src/helpers/getPals.ts
@@ -1,4 +1,4 @@
-import { DrawCommand } from '@4bitlabs/sci0';
+import { EditorCommand } from '../models/EditorCommand.ts';
// prettier-ignore
export const DEFAULT_PALETTE: number[] = [
@@ -10,9 +10,9 @@ export const DEFAULT_PALETTE: number[] = [
type PaletteSet = [number[], number[], number[], number[]];
-export const mapToPals = (commands: DrawCommand[]) => {
+export const mapToPals = (commands: EditorCommand[]) => {
return commands.reduce(
- (stack: PaletteSet[], cmd: DrawCommand) => {
+ (stack: PaletteSet[], editorCmd: EditorCommand) => {
const prevSet = stack[stack.length - 1] ?? [
DEFAULT_PALETTE,
DEFAULT_PALETTE,
@@ -20,16 +20,16 @@ export const mapToPals = (commands: DrawCommand[]) => {
DEFAULT_PALETTE,
];
- const [type] = cmd;
+ const { type } = editorCmd;
switch (type) {
case 'SET_PALETTE': {
- const [, palIdx, colors] = cmd;
+ const [, palIdx, colors] = editorCmd.commands[0];
const next: PaletteSet = [...prevSet];
next[palIdx] = [...colors];
return [...stack, next];
}
case 'UPDATE_PALETTE': {
- const [, entries] = cmd;
+ const [, entries] = editorCmd.commands[0];
const next = entries.reduce((pals, [palIdx, idx, color]) => {
const nextSet: PaletteSet = [...prevSet];
const nextPal = [...nextSet[palIdx]];
diff --git a/apps/scishop/src/models/EditorCommand.ts b/apps/scishop/src/models/EditorCommand.ts
new file mode 100644
index 0000000..f057cc4
--- /dev/null
+++ b/apps/scishop/src/models/EditorCommand.ts
@@ -0,0 +1,34 @@
+import {
+ BrushCommand,
+ DrawCommand,
+ EmbeddedCelCommand,
+ FillCommand,
+ PolylineCommand,
+ SetPaletteCommand,
+ UpdatePaletteCommand,
+} from '@4bitlabs/sci0';
+
+export type BasicEditorCommand = {
+ readonly id: symbol | number | string;
+ readonly type: T[0];
+ readonly name?: string;
+ readonly commands: readonly [T];
+};
+
+export type CompositeEditorCommand = {
+ readonly id: symbol | number | string;
+ readonly type: T;
+ readonly name?: string;
+ readonly commands: readonly (PolylineCommand | FillCommand | BrushCommand)[];
+};
+
+export type GroupEditorCommand = CompositeEditorCommand<'group'>;
+
+export type EditorCommand =
+ | GroupEditorCommand
+ | BasicEditorCommand
+ | BasicEditorCommand
+ | BasicEditorCommand
+ | BasicEditorCommand
+ | BasicEditorCommand
+ | BasicEditorCommand;
From d6d3cf2e973972e1a62a4bc23b3ef1c4630b6bc9 Mon Sep 17 00:00:00 2001
From: J Holmes <32bitkid@gmail.com>
Date: Tue, 28 May 2024 07:31:45 -0600
Subject: [PATCH 10/28] WIP prototyping on scishop
---
apps/scishop/src/canvas/drawHelpers.ts | 58 ------
apps/scishop/src/components/Header.vue | 52 ++++-
.../scishop/src/components/LayerNavigator.vue | 73 ++++---
apps/scishop/src/components/PalettePicker.vue | 148 -------------
.../components/PalettePicker/ModeSelector.vue | 75 +++++++
.../PalettePicker/PalettePicker.vue | 157 ++++++++++++++
.../src/components/PalettePicker/index.ts | 2 +
apps/scishop/src/components/Sidebar.vue | 10 +-
apps/scishop/src/components/Stage.vue | 2 +-
apps/scishop/src/components/Toolbar.vue | 1 -
.../command-items/SetPaletteCommand.vue | 10 +
.../src/components/command-items/Swatches.vue | 24 +--
.../src/composables/useCanvasRenderer.ts | 22 +-
.../src/composables/useInputMachine.ts | 196 ++++++++++++------
apps/scishop/src/data/paletteStore.ts | 94 +++++++++
apps/scishop/src/data/picStore.ts | 43 ++--
.../{getPals.ts => palette-helpers.ts} | 16 +-
apps/scishop/src/helpers/vec2-helpers.ts | 5 +-
apps/scishop/src/models/EditorCommand.ts | 4 +-
apps/scishop/src/render/cursor-dot.ts | 14 ++
apps/scishop/src/render/fill-skeleton.ts | 28 +++
apps/scishop/src/render/pixel-border.ts | 21 ++
apps/scishop/src/render/pline-skeleton.ts | 32 +++
apps/scishop/src/reset.css | 4 +-
apps/scishop/src/style.css | 15 +-
apps/scishop/tsconfig.json | 4 +-
26 files changed, 734 insertions(+), 376 deletions(-)
delete mode 100644 apps/scishop/src/canvas/drawHelpers.ts
delete mode 100644 apps/scishop/src/components/PalettePicker.vue
create mode 100644 apps/scishop/src/components/PalettePicker/ModeSelector.vue
create mode 100644 apps/scishop/src/components/PalettePicker/PalettePicker.vue
create mode 100644 apps/scishop/src/components/PalettePicker/index.ts
create mode 100644 apps/scishop/src/components/command-items/SetPaletteCommand.vue
create mode 100644 apps/scishop/src/data/paletteStore.ts
rename apps/scishop/src/helpers/{getPals.ts => palette-helpers.ts} (77%)
create mode 100644 apps/scishop/src/render/cursor-dot.ts
create mode 100644 apps/scishop/src/render/fill-skeleton.ts
create mode 100644 apps/scishop/src/render/pixel-border.ts
create mode 100644 apps/scishop/src/render/pline-skeleton.ts
diff --git a/apps/scishop/src/canvas/drawHelpers.ts b/apps/scishop/src/canvas/drawHelpers.ts
deleted file mode 100644
index de0e35a..0000000
--- a/apps/scishop/src/canvas/drawHelpers.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { applyToPoints, Matrix } from 'transformation-matrix';
-
-import { FillCommand, PolylineCommand } from '@4bitlabs/sci0';
-
-export const drawFILL = (
- ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
- matrix: Matrix,
- cmd: FillCommand,
-) => {
- const [, , , ...points] = cmd;
- const all = applyToPoints(
- matrix,
- points.map(([x, y]) => [x + 0.5, y + 0.5]),
- );
-
- all.forEach(([x, y]) => {
- ctx.save();
- ctx.translate(x, y);
- ctx.beginPath();
- ctx.moveTo(3, 0);
- ctx.lineTo(0, -4);
- ctx.lineTo(-3, 0);
- ctx.lineTo(0, 4);
- ctx.lineTo(3, 0);
- ctx.stroke();
- ctx.restore();
- });
-};
-
-export const drawPLINE = (
- ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
- matrix: Matrix,
- cmd: PolylineCommand,
-) => {
- const [, , , ...points] = cmd;
- const all = applyToPoints(
- matrix,
- points.map(([x, y]) => [x + 0.5, y + 0.5]),
- );
-
- {
- ctx.beginPath();
- const [first, ...rest] = all;
- ctx.moveTo(...first);
- rest.forEach(([x, y]) => ctx.lineTo(x, y));
-
- ctx.stroke();
- }
-
- all.forEach(([x, y]) => {
- ctx.save();
- ctx.translate(x, y);
- ctx.beginPath();
- ctx.roundRect(-3, -3, 6, 6, 0.5);
- ctx.stroke();
- ctx.restore();
- });
-};
diff --git a/apps/scishop/src/components/Header.vue b/apps/scishop/src/components/Header.vue
index 72ee1a9..0e4ba84 100644
--- a/apps/scishop/src/components/Header.vue
+++ b/apps/scishop/src/components/Header.vue
@@ -1,14 +1,60 @@
-
+
+
+
+ Pal
+
+
+
+
+
+
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
-
-
-
-
-
+
+
+
+
+
+
-
{{ viewStore.zoom.toFixed(1) }}×
+
{{ zoomRef.toFixed(1) }}×
- {{ (viewStore.rotate * (180 / Math.PI)).toFixed(0) }}°
+ {{ (rotateRef * (180 / Math.PI)).toFixed(0) }}°
- -
-