Commit d2c9d6ee authored by Grant's avatar Grant
Browse files

custom zoom pan pinch implementation

parent 2e469e39

package-lock.json

+9 −1
Original line number Diff line number Diff line
@@ -15018,7 +15018,15 @@ 
    },

    "packages/lib": {

      "name": "@sc07-canvas/lib",

      "version": "1.0.0"

      "version": "1.0.0",

      "dependencies": {

        "eventemitter3": "^5.0.1"

      }

    },

    "packages/lib/node_modules/eventemitter3": {

      "version": "5.0.1",

      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",

      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="

    },

    "packages/server": {

      "name": "@sc07-canvas/server",

packages/client-next/gulpfile.js

+9 −1
Original line number Diff line number Diff line
@@ -20,7 +20,15 @@ gulp.task("js", function () { 
gulp.task(

  "watch",

  gulp.series("js", "css", function () {

    gulp.watch(["src/**/*.ts", "src/**/*.tsx"], gulp.series("js"));

    gulp.watch(

      [

        "src/**/*.ts",

        "src/**/*.tsx",

        "../lib/src/**/*.ts",

        "../lib/src/**/*.tsx",

      ],

      gulp.series("js")

    );

    gulp.watch("src/**/*.scss", gulp.series("css"));

  })

);

packages/client-next/src/board.scss

0 → 100644
+25 −0
Original line number Diff line number Diff line 
.board-wrapper {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  width: 100vw;

  height: 100vh;



  display: flex;

  justify-content: center;

  align-items: center;

}



.debug-point {

  position: fixed;

  z-index: 9999;

  width: 10px;

  height: 10px;

  border-radius: 5px;

  background-color: #ff0000;

  opacity: 0.5;

  pointer-events: none;

  touch-action: none;

}

packages/client-next/src/components/CanvasWrapper.tsx

+16 −34
Original line number Diff line number Diff line
@@ -8,33 +8,15 @@ import { 
import { Canvas } from "../lib/canvas";

import { useAppContext } from "../contexts/AppContext";

import throttle from "lodash.throttle";

import { PanZoomWrapper } from "@sc07-canvas/lib/src/renderer";



export const CanvasWrapper = () => {

  // to prevent safari from blurring things, use the zoom css property

  return (

    <main>

      <TransformWrapper

        centerOnInit

        limitToBounds={false}

        centerZoomedOut={false}

        minScale={0.5}

        maxScale={50}

        wheel={{

          step: 0.05,

          smoothStep: 0.05,

        }}

        initialScale={5}

        panning={{

          velocityDisabled: true,

        }}

        doubleClick={{

          disabled: true,

        }}

      >

        <TransformComponent wrapperStyle={{ width: "100%", height: "100%" }}>

      <PanZoomWrapper>

        <CanvasInner />

        </TransformComponent>

      </TransformWrapper>

      </PanZoomWrapper>

    </main>

  );

};
@@ -42,28 +24,28 @@ export const CanvasWrapper = () => { 
const CanvasInner = () => {

  const canvasRef = createRef<HTMLCanvasElement>();

  const { config } = useAppContext();

  const { centerView } = useControls();

  // const { centerView } = useControls();



  useTransformEffect(

    throttle(({ state, instance }) => {

      const params = new URLSearchParams();

      params.set("x", state.positionX + "");

      params.set("y", state.positionY + "");

      params.set("zoom", state.scale + "");

      window.location.hash = params.toString();

    }, 1000)

  );

  // useTransformEffect(

  //   throttle(({ state, instance }) => {

  //     const params = new URLSearchParams();

  //     params.set("x", state.positionX + "");

  //     params.set("y", state.positionY + "");

  //     params.set("zoom", state.scale + "");

  //     window.location.hash = params.toString();

  //   }, 1000)

  // );



  useEffect(() => {

    if (!config.canvas || !canvasRef.current) return;

    const canvas = canvasRef.current!;

    const canvasInstance = new Canvas(config, canvas);

    centerView();

    // centerView();



    return () => {

      canvasInstance.destroy();

    };

  }, [canvasRef, centerView, config]);

  }, [canvasRef, config]);



  return (

    <canvas

packages/client-next/src/components/renderer/PanZoomWrapper.tsx

deleted100644 → 0
+0 −5
Original line number Diff line number Diff line 
import React from "react";



export const PanZoomWrapper = ({ children }: { children: React.ReactNode }) => {

  return <div className="test-wrapper">{children}</div>;

};