[refactor] Move default position logic (#468)

* Move default position logic --------- Co-authored-by: ahp64 <[email protected]>
onlook-dev · Oct 6, 2024 · b3ced79 · b3ced79
1 parent a1f5b06
commit b3ced79
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/app/src/lib/editor/engine/canvas/index.ts b/app/src/lib/editor/engine/canvas/index.ts
@@ -19,6 +19,19 @@ export class CanvasManager {
  constructor(private projects: ProjectsManager) {
  makeAutoObservable(this);
  this.listenToProjectChange();
+ this.panPosition = this.getDefaultPanPosition();
+ }
+
+ getDefaultPanPosition(): RectPosition {
+ if (!window) {
+ return DefaultSettings.POSITION;
+ }
+
+ const x =
+ window.innerWidth / 2 - (DefaultSettings.FRAME_DIMENSION.width * this.zoomScale) / 2;
+ const y =
+ window.innerHeight / 2 - (DefaultSettings.FRAME_DIMENSION.height * this.zoomScale) / 2;
+ return { x, y };
  }
 
  listenToProjectChange() {
@@ -77,7 +90,7 @@ export class CanvasManager {
 
  async applySettings(project: Project) {
  this.zoomScale = project.settings?.scale || DefaultSettings.SCALE;
- this.panPosition = project.settings?.position || DefaultSettings.POSITION;
+ this.panPosition = project.settings?.position || this.getDefaultPanPosition();
  this.webFrames =
  project.settings?.frames && project.settings.frames.length
  ? project.settings.frames

diff --git a/app/src/routes/editor/Canvas/index.tsx b/app/src/routes/editor/Canvas/index.tsx
@@ -19,14 +19,7 @@ const Canvas = observer(({ children }: { children: ReactNode }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [isPanning, setIsPanning] = useState(false);
  const [scale, setScale] = useState(editorEngine.canvas.scale);
-
- const x_number = window.innerWidth / 2 - (1536 * scale) / 2; // - webviewWidth;
- const y_number = window.innerHeight / 2 - (960 * scale) / 2; // - webviewHeight;
-
- const [position, setPosition] = useState<{ x: number; y: number }>({
- x: x_number,
- y: y_number,
- });
+ const [position, setPosition] = useState(editorEngine.canvas.position);
 
  useEffect(() => {
  editorEngine.canvas.scale = scale;