Added simple viewer

apps/web/src/components/appContent.tsx

@@ -8,6 +8,7 @@ import { ColorsPanel } from "./panels/colorsPanel";
 import { LayersPanel } from "./panels/layersPanel";
 import { HistoryPanel } from "./panels/historyPanel";
 import { MetadataPanel } from "./panels/metadataPanel";
+import { CanvasViewport } from "./canvasViewport";
 
 const LeftContent = () => {
   return (
@@ -23,10 +24,6 @@ const LeftContent = () => {
   );
 };
 
-const MiddleContent = () => {
-  return <div className="p-2">Canvas</div>;
-};
-
 const RightContent = () => {
   return (
     <ResizablePanelGroup direction="vertical">
@@ -53,7 +50,7 @@ export const AppContent = () => {
       </ResizablePanel>
       <ResizableHandle />
       <ResizablePanel>
-        <MiddleContent />
+        <CanvasViewport />
       </ResizablePanel>
       <ResizableHandle />
       <ResizablePanel defaultSize={20}>

apps/web/src/components/canvasHost.tsx

@@ -0,0 +1,3 @@
+export const CanvasHost = () => {
+  return <div className="bg-white" style={{ width: 800, height: 600 }}></div>;
+};

apps/web/src/components/canvasViewport.tsx

@@ -0,0 +1,51 @@
+import { Viewport, ViewportManipulator } from "@/utils/manipulation";
+import { useEffect, useRef } from "react";
+import { CanvasHost } from "./canvasHost";
+
+const applyTransform = (viewport: Viewport, element: HTMLElement) => {
+  element.style.transform = `
+    translate(${viewport.position.x}px, ${viewport.position.y}px) 
+    scale(${viewport.zoom})
+  `;
+};
+
+export const CanvasViewport = () => {
+  const hostElement = useRef<HTMLDivElement>(null);
+  const viewportElement = useRef<HTMLDivElement>(null);
+  const viewport = useRef<Viewport>({
+    position: { x: 50, y: 50 },
+    zoom: 0.5,
+  });
+
+  useEffect(() => {
+    if (!hostElement.current || !viewportElement.current) return;
+    const manipulator = new ViewportManipulator(
+      hostElement.current,
+      () => viewport.current,
+      (newViewport) => {
+        viewport.current = newViewport;
+        applyTransform(viewport.current, viewportElement.current!);
+      }
+    );
+    applyTransform(viewport.current, viewportElement.current!);
+    return () => manipulator.dispose();
+  }, []);
+
+  return (
+    <div className="relative size-full">
+      <div
+        ref={hostElement}
+        className="absolute size-full overflow-hidden border "
+      >
+        <div
+          ref={viewportElement}
+          className="pointer-events-none origin-top-left"
+        >
+          <CanvasHost />
+        </div>
+      </div>
+      <div className="absolute p-small">Shift+LMB to move</div>
+    </div>
+  );
+};
+

apps/web/src/styles.css

@@ -72,11 +72,11 @@
   }
   body {
     @apply bg-background text-foreground;
-    @apply w-full h-full;
+    @apply size-full;
   }
   html,
   #root {
-    @apply w-full h-full;
+    @apply size-full;
   }
 }
 

apps/web/src/utils/common.ts

@@ -0,0 +1,4 @@
+export type Position = {
+  x: number;
+  y: number;
+};

apps/web/src/utils/manipulation/index.ts

@@ -0,0 +1,4 @@
+/* Based on https://github.com/mateuszmigas/composite-viewer-2d */
+export * from "./viewport";
+export * from "./viewportManipulator";
+

apps/web/src/utils/manipulation/throttleHtmlManipulator.ts

@@ -0,0 +1,47 @@
+export type EventType = keyof HTMLElementEventMap;
+export type EventHandler<T extends Event> = (event: T) => void;
+
+export class ThrottleHtmlManipulator {
+  animationFrameHandle = 0;
+  eventListeners = new Map<string, EventHandler<Event>>();
+  events = new Map<string, Event>();
+
+  constructor(protected readonly element: HTMLElement) {
+    this.requestProcessEvents();
+  }
+
+  dispose() {
+    this.eventListeners.forEach((_, key) =>
+      this.element.removeEventListener(key, this.onEventTriggered)
+    );
+
+    cancelAnimationFrame(this.animationFrameHandle);
+  }
+
+  protected registerEvent<T extends Event>(
+    type: EventType,
+    handler: EventHandler<T>
+  ) {
+    this.element.addEventListener(type, this.onEventTriggered);
+    this.eventListeners.set(type, handler as EventHandler<Event>);
+  }
+
+  private onEventTriggered = (event: Event) => {
+    this.events.set(event.type, event);
+  };
+
+  private processEventsLoop = () => {
+    this.events.forEach((value, key) => {
+      const handler = this.eventListeners.get(key);
+      handler?.(value);
+    });
+    this.events.clear();
+
+    this.requestProcessEvents();
+  };
+
+  private requestProcessEvents() {
+    this.animationFrameHandle = requestAnimationFrame(this.processEventsLoop);
+  }
+}
+

apps/web/src/utils/manipulation/viewport.ts

@@ -0,0 +1,18 @@
+import { Position } from "../common";
+
+export type Viewport = {
+  position: Position;
+  zoom: number;
+};
+
+export const zoomAtPosition = (
+  currentViewport: Viewport,
+  zoom: number,
+  position: Position
+): Viewport => ({
+  position: {
+    x: position.x - (position.x - currentViewport.position.x) * zoom,
+    y: position.y - (position.y - currentViewport.position.y) * zoom,
+  },
+  zoom: currentViewport.zoom * zoom,
+});

apps/web/src/utils/manipulation/viewportManipulator.ts

@@ -0,0 +1,96 @@
+import { Position } from "../common";
+import { ThrottleHtmlManipulator } from "./throttleHtmlManipulator";
+import { Viewport, zoomAtPosition } from "./viewport";
+
+type ViewportAction =
+  | {
+      type: "translate";
+      offsetX: number;
+      offsetY: number;
+    }
+  | { type: "zoomInAtPosition"; position: Position }
+  | { type: "zoomOutAtPosition"; position: Position };
+
+const reducer = (viewport: Viewport, action: ViewportAction): Viewport => {
+  switch (action.type) {
+    case "translate": {
+      return {
+        ...viewport,
+        position: {
+          x: viewport.position.x + action.offsetX,
+          y: viewport.position.y + action.offsetY,
+        },
+      };
+    }
+    case "zoomInAtPosition": {
+      return zoomAtPosition(viewport, 1.1, action.position);
+    }
+    case "zoomOutAtPosition": {
+      return zoomAtPosition(viewport, 0.9, action.position);
+    }
+    default:
+      return viewport;
+  }
+};
+
+export class ViewportManipulator extends ThrottleHtmlManipulator {
+  private pointerPosition = { x: 0, y: 0 };
+  private isMoving = false;
+  // private actionReducer: (actions: Action[]) => Viewport;
+
+  constructor(
+    protected element: HTMLElement,
+    protected viewport: () => Viewport,
+    private onViewportChange: (newViewport: Viewport) => void
+  ) {
+    super(element);
+
+    this.registerEvent("mousedown", this.onMouseDown);
+    this.registerEvent("mousemove", this.onMouseMove);
+    this.registerEvent("mouseup", this.onMouseUp);
+    this.registerEvent("mouseleave", this.onMouseLeave);
+    this.registerEvent("wheel", this.onWheel);
+  }
+
+  private dispatchAction = (action: ViewportAction) => {
+    const newViewport = reducer(this.viewport(), action);
+    this.onViewportChange(newViewport);
+  };
+
+  private onMouseDown = (e: MouseEvent) => {
+    if (e.button === 0 && e.shiftKey) {
+      this.pointerPosition = { x: e.offsetX, y: e.offsetY };
+      this.isMoving = true;
+    }
+  };
+
+  private onMouseMove = (e: MouseEvent) => {
+    if (this.isMoving) {
+      this.dispatchAction({
+        type: "translate",
+        offsetX: e.offsetX - this.pointerPosition.x,
+        offsetY: e.offsetY - this.pointerPosition.y,
+      });
+    }
+
+    this.pointerPosition = { x: e.offsetX, y: e.offsetY };
+  };
+
+  private onMouseUp = () => {
+    this.isMoving = false;
+  };
+
+  private onMouseLeave = () => {
+    this.isMoving = false;
+  };
+
+  private onWheel = (e: WheelEvent) => {
+    const action = e.deltaY < 0 ? "zoomInAtPosition" : "zoomOutAtPosition";
+
+    this.dispatchAction({
+      type: action,
+      position: { x: e.offsetX, y: e.offsetY },
+    });
+  };
+}
+

apps/web/src/utils/typeGuards.ts

@@ -0,0 +1,3 @@
+export const isFunction = (x: any): x is Function => {
+  return typeof x === "function";
+};