perf(canvas): coalesce renderer redraws

view/canvas/renderFrame.ts

@@ -0,0 +1,87 @@
+import type { Rect, Vec2D } from "@core/geometry";
+import type { RenderFrame } from "@renderer/index";
+import type { AppState, BrushPreviewState, BrushStrokePreviewState, EditorState, MaskEditState, SelectionState, ViewportState } from "@editor/state";
+import type { BrushSettings, InteractionMode } from "@editor/tools";
+import type { TransformSession, TransformTarget } from "@editor/transform";
+
+export function selectCanvasRenderFrame(state: AppState): RenderFrame {
+  return {
+    document: state.document,
+    editor: state.editor,
+  };
+}
+
+export function canvasRenderFramesEqual(a: RenderFrame, b: RenderFrame): boolean {
+  return a.document === b.document && visualEditorStatesEqual(a.editor, b.editor);
+}
+
+function visualEditorStatesEqual(a: EditorState, b: EditorState): boolean {
+  return (
+    viewportStatesEqual(a.viewport, b.viewport) &&
+    selectionStatesEqual(a.selection, b.selection) &&
+    transformSessionsEqual(a.transformSession, b.transformSession) &&
+    maskEditStatesEqual(a.maskEdit, b.maskEdit) &&
+    brushPreviewStatesEqual(a.brushPreview, b.brushPreview) &&
+    brushStrokePreviewStatesEqual(a.brushStrokePreview, b.brushStrokePreview) &&
+    visualToolStatesEqual(a.tools, b.tools)
+  );
+}
+
+function viewportStatesEqual(a: ViewportState, b: ViewportState): boolean {
+  return a.zoom === b.zoom && a.rotation === b.rotation && vec2Equal(a.center, b.center) && a.size.w === b.size.w && a.size.h === b.size.h;
+}
+
+function selectionStatesEqual(a: SelectionState, b: SelectionState): boolean {
+  if (a.artboardId !== b.artboardId || a.layerIds.length !== b.layerIds.length) return false;
+  return a.layerIds.every((layerId, index) => layerId === b.layerIds[index]);
+}
+
+function transformSessionsEqual(a: TransformSession | undefined, b: TransformSession | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return transformTargetsEqual(a.target, b.target) && a.handle === b.handle && vec2Equal(a.startPoint, b.startPoint) && rectsEqual(a.initialBounds, b.initialBounds);
+}
+
+function transformTargetsEqual(a: TransformTarget, b: TransformTarget): boolean {
+  return a.type === b.type && a.id === b.id;
+}
+
+function maskEditStatesEqual(a: MaskEditState | undefined, b: MaskEditState | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.targetLayerId === b.targetLayerId && a.maskLayerId === b.maskLayerId && a.viewMode === b.viewMode;
+}
+
+function brushPreviewStatesEqual(a: BrushPreviewState | undefined, b: BrushPreviewState | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return vec2Equal(a.position, b.position);
+}
+
+function brushStrokePreviewStatesEqual(a: BrushStrokePreviewState | undefined, b: BrushStrokePreviewState | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.layerId === b.layerId && a.assetId === b.assetId && a.source === b.source;
+}
+
+function visualToolStatesEqual(a: EditorState["tools"], b: EditorState["tools"]): boolean {
+  return a.activeTool === b.activeTool && interactionModesEqual(a.interactionMode, b.interactionMode) && brushSettingsEqual(a.brush, b.brush);
+}
+
+function interactionModesEqual(a: InteractionMode, b: InteractionMode): boolean {
+  if (a.type !== b.type) return false;
+  if (a.type === "temporary-pan") return b.type === "temporary-pan" && a.previousTool === b.previousTool;
+  return b.type === "tool" && a.tool === b.tool;
+}
+
+function brushSettingsEqual(a: BrushSettings, b: BrushSettings): boolean {
+  return a.color === b.color && a.size === b.size && a.hardness === b.hardness;
+}
+
+function vec2Equal(a: Vec2D, b: Vec2D): boolean {
+  return a.x === b.x && a.y === b.y;
+}
+
+function rectsEqual(a: Rect, b: Rect): boolean {
+  return a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+}