Implemented the duplicate web frame feature

Author: harjot20022001

apps/web/client/src/components/store/editor/window/index.ts

@@ -1,6 +1,9 @@
 import { sendAnalytics } from '@/utils/analytics';
 import { makeAutoObservable } from 'mobx';
 import type { EditorEngine } from '../engine';
+import { nanoid } from 'nanoid/non-secure';
+import type { WebFrame } from '../../../../../../../../packages/models/src/project/frame';
+
 
 export class WindowManager {
     constructor(private editorEngine: EditorEngine) {
@@ -112,38 +115,38 @@ export class WindowManager {
     }
 
     duplicate(id?: string) {
-        // let settings: Frames | null = null;
-        // if (id) {
-        //     settings = this.canvas.getFrame(id) || null;
-        // } else if (this.webviews.selected.length === 0) {
-        //     console.error('No window selected');
-        //     return;
-        // } else {
-        //     settings = this.canvas.getFrame(this.webviews.selected[0].id) || null;
-        // }
-        // if (!settings) {
-        //     console.error('Window not found');
-        //     return;
-        // }
-        // const currentFrame = settings;
-        // const newFrame: Frames = {
-        //     id: nanoid(),
-        //     url: currentFrame.url,
-        //     dimension: {
-        //         width: currentFrame.dimension.width,
-        //         height: currentFrame.dimension.height,
-        //     },
-        //     position: {
-        //         x: currentFrame.position.x + currentFrame.dimension.width + 100,
-        //         y: currentFrame.position.y,
-        //     },
-        //     aspectRatioLocked: currentFrame.aspectRatioLocked,
-        //     orientation: currentFrame.orientation,
-        //     device: currentFrame.device,
-        //     theme: currentFrame.theme,
-        // };
+        console.log('Duplicating window', id);
+        let settings: WebFrame | null = null;
+        if (id) {
+            settings = this.editorEngine.canvas.getFrame(id) || null;
+        } else if (this.editorEngine.frames.selected.length === 0) {
+            console.error('No window selected');
+            return;
+        } else {
+            settings = this.editorEngine.canvas.getFrame(this.editorEngine.frames.selected[0].id) || null;
+        }
+        if (!settings) {
+            console.error('Window not found');
+            return;
+        }
+        const currentFrame = settings;
+        console.log('Current frame', currentFrame);
+        const newFrame: WebFrame = {
+            id: nanoid(),
+            url: currentFrame.url,
+            dimension: {
+                width: currentFrame.dimension.width,
+                height: currentFrame.dimension.height,
+            },
+            position: {
+                x: currentFrame.position.x + currentFrame.dimension.width + 100,
+                y: currentFrame.position.y,
+            },
+            type: currentFrame.type,
+            windowMetadata : currentFrame.windowMetadata,
+        };
 
-        // this.canvas.frames = [...this.canvas.frames, newFrame];
+        this.editorEngine.canvas.frames = [...this.editorEngine.canvas.frames, newFrame];
         sendAnalytics('window duplicate');
     }
 }