Skip to content

Commit 0751df4

Browse files
KiteniteKitenite
committed
update types
1 parent 6e072e5 commit 0751df4

File tree

40 files changed

+753
-753
lines changed

40 files changed

+753
-753
lines changed

‎apps/web/client/src/app/project/[id]/_components/canvas/frame/gesture.tsx

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEditorEngine } from '@/components/store/editor';
22
import type { FrameData } from '@/components/store/editor/frames';
33
import { getRelativeMousePositionToFrameView } from '@/components/store/editor/overlay/utils';
4-
import type { DomElement, ElementPosition, WebFrame } from '@onlook/models';
4+
import type { DomElement, ElementPosition, Frame } from '@onlook/models';
55
import { EditorMode, MouseAction } from '@onlook/models';
66
import { toast } from '@onlook/ui/sonner';
77
import { cn } from '@onlook/ui/utils';
@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite';
1010
import { useCallback, useEffect, useMemo } from 'react';
1111
import { RightClickMenu } from './right-click';
1212

13-
export const GestureScreen = observer(({ frame, isResizing }: { frame: WebFrame, isResizing: boolean }) => {
13+
export const GestureScreen = observer(({ frame, isResizing }: { frame: Frame, isResizing: boolean }) => {
1414
const editorEngine = useEditorEngine();
1515

1616
const getFrameData: () => FrameData | undefined = useCallback(() => {
@@ -94,19 +94,19 @@ export const GestureScreen = observer(({ frame, isResizing }: { frame: WebFrame,
9494
() =>
9595
throttle(async (e: React.MouseEvent<HTMLDivElement>) => {
9696

97-
if (editorEngine.move.shouldDrag) {
98-
await editorEngine.move.drag(e, getRelativeMousePosition);
99-
} else if (
100-
editorEngine.state.editorMode === EditorMode.DESIGN ||
101-
((editorEngine.state.editorMode === EditorMode.INSERT_DIV ||
102-
editorEngine.state.editorMode === EditorMode.INSERT_TEXT ||
103-
editorEngine.state.editorMode === EditorMode.INSERT_IMAGE) &&
104-
!editorEngine.insert.isDrawing)
105-
) {
106-
await handleMouseEvent(e, MouseAction.MOVE);
107-
} else if (editorEngine.insert.isDrawing) {
108-
editorEngine.insert.draw(e);
109-
}
97+
if (editorEngine.move.shouldDrag) {
98+
await editorEngine.move.drag(e, getRelativeMousePosition);
99+
} else if (
100+
editorEngine.state.editorMode === EditorMode.DESIGN ||
101+
((editorEngine.state.editorMode === EditorMode.INSERT_DIV ||
102+
editorEngine.state.editorMode === EditorMode.INSERT_TEXT ||
103+
editorEngine.state.editorMode === EditorMode.INSERT_IMAGE) &&
104+
!editorEngine.insert.isDrawing)
105+
) {
106+
await handleMouseEvent(e, MouseAction.MOVE);
107+
} else if (editorEngine.insert.isDrawing) {
108+
editorEngine.insert.draw(e);
109+
}
110110
}, 16),
111111
[editorEngine, getRelativeMousePosition, handleMouseEvent],
112112
);
@@ -148,9 +148,9 @@ export const GestureScreen = observer(({ frame, isResizing }: { frame: WebFrame,
148148
if (!frameData) {
149149
return;
150150
}
151-
151+
152152
editorEngine.move.cancelDragPreparation();
153-
153+
154154
await editorEngine.move.end(e);
155155
await editorEngine.insert.end(e, frameData.view);
156156
}

‎apps/web/client/src/app/project/[id]/_components/canvas/frame/index.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import { FrameType, type Frame, type WebFrame } from '@onlook/models';
1+
import { type Frame } from '@onlook/models';
22
import { observer } from 'mobx-react-lite';
3-
import { useRef, useState } from 'react';
3+
import { useState } from 'react';
44
import { GestureScreen } from './gesture';
55
import { ResizeHandles } from './resize-handles';
66
import { RightClickMenu } from './right-click';
77
import { TopBar } from './top-bar';
8-
import { WebFrameComponent, type WebFrameView } from './web-frame';
8+
import { FrameComponent } from './web-frame';
99

1010
export const FrameView = observer(({ frame }: { frame: Frame }) => {
11-
const webFrameRef = useRef<WebFrameView>(null);
1211
const [isResizing, setIsResizing] = useState(false);
1312

1413
return (
@@ -17,14 +16,12 @@ export const FrameView = observer(({ frame }: { frame: Frame }) => {
1716
style={{ transform: `translate(${frame.position.x}px, ${frame.position.y}px)` }}
1817
>
1918
<RightClickMenu>
20-
<TopBar frame={frame as WebFrame} />
19+
<TopBar frame={frame} />
2120
</RightClickMenu>
2221
<div className="relative">
2322
<ResizeHandles frame={frame} setIsResizing={setIsResizing} />
24-
{frame.type === FrameType.WEB && (
25-
<WebFrameComponent frame={frame as WebFrame} ref={webFrameRef} />
26-
)}
27-
<GestureScreen frame={frame as WebFrame} isResizing={isResizing} />
23+
<FrameComponent frame={frame} />
24+
<GestureScreen frame={frame} isResizing={isResizing} />
2825
</div>
2926
</div>
3027
);

‎apps/web/client/src/app/project/[id]/_components/canvas/frame/page-selector.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEditorEngine } from '@/components/store/editor';
2-
import { LeftPanelTabValue, type PageNode, type WebFrame } from '@onlook/models';
2+
import { LeftPanelTabValue, type Frame, type PageNode } from '@onlook/models';
33
import { Button } from '@onlook/ui/button';
44
import {
55
DropdownMenu,
@@ -16,7 +16,7 @@ import React, { useEffect, useMemo, useState } from 'react';
1616
import { PageModal } from '../../left-panel/page-tab/page-modal';
1717

1818
interface PageSelectorProps {
19-
frame: WebFrame;
19+
frame: Frame;
2020
className?: string;
2121
}
2222

‎apps/web/client/src/app/project/[id]/_components/canvas/frame/top-bar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEditorEngine } from '@/components/store/editor';
2-
import type { WebFrame } from '@onlook/models';
2+
import type { Frame } from '@onlook/models';
33
import { Button } from '@onlook/ui/button';
44
import { Icons } from '@onlook/ui/icons';
55
import { cn } from '@onlook/ui/utils';
@@ -10,7 +10,7 @@ import { HoverOnlyTooltip } from '../../editor-bar/hover-tooltip';
1010
import { PageSelector } from './page-selector';
1111

1212
export const TopBar = observer(
13-
({ frame }: { frame: WebFrame }) => {
13+
({ frame }: { frame: Frame }) => {
1414
const editorEngine = useEditorEngine();
1515
const isSelected = editorEngine.frames.isSelected(frame.id);
1616
const topBarRef = useRef<HTMLDivElement>(null);

‎apps/web/client/src/app/project/[id]/_components/canvas/frame/web-frame.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import { useEditorEngine } from '@/components/store/editor';
4-
import type { WebFrame } from '@onlook/models';
4+
import type { Frame } from '@onlook/models';
55
import {
66
PENPAL_PARENT_CHANNEL,
77
type PenpalChildMethods,
@@ -22,19 +22,19 @@ import {
2222
type IframeHTMLAttributes,
2323
} from 'react';
2424

25-
export type WebFrameView = HTMLIFrameElement & {
25+
export type FrameView = HTMLIFrameElement & {
2626
setZoomLevel: (level: number) => void;
2727
supportsOpenDevTools: () => boolean;
2828
reload: () => void;
2929
isLoading: () => boolean;
3030
} & PromisifiedPendpalChildMethods;
3131

32-
interface WebFrameViewProps extends IframeHTMLAttributes<HTMLIFrameElement> {
33-
frame: WebFrame;
32+
interface FrameViewProps extends IframeHTMLAttributes<HTMLIFrameElement> {
33+
frame: Frame;
3434
}
3535

36-
export const WebFrameComponent = observer(
37-
forwardRef<WebFrameView, WebFrameViewProps>(({ frame, ...props }, ref) => {
36+
export const FrameComponent = observer(
37+
forwardRef<FrameView, FrameViewProps>(({ frame, ...props }, ref) => {
3838
const editorEngine = useEditorEngine();
3939
const iframeRef = useRef<HTMLIFrameElement>(null);
4040
const zoomLevel = useRef(1);
@@ -229,11 +229,11 @@ export const WebFrameComponent = observer(
229229
};
230230
}, [penpalChild]);
231231

232-
useImperativeHandle(ref, (): WebFrameView => {
232+
useImperativeHandle(ref, (): FrameView => {
233233
const iframe = iframeRef.current;
234234
if (!iframe) {
235235
console.error(`${PENPAL_PARENT_CHANNEL} (${frame.id}) - Iframe - Not found`);
236-
return {} as WebFrameView;
236+
return {} as FrameView;
237237
}
238238

239239
const syncMethods = {
@@ -252,11 +252,11 @@ export const WebFrameComponent = observer(
252252
console.warn(
253253
`${PENPAL_PARENT_CHANNEL} (${frame.id}) - Failed to setup penpal connection: iframeRemote is null`,
254254
);
255-
return Object.assign(iframe, syncMethods, remoteMethods) as WebFrameView;
255+
return Object.assign(iframe, syncMethods, remoteMethods) as FrameView;
256256
}
257257

258258
// Register the iframe with the editor engine
259-
editorEngine.frames.registerView(frame, iframe as WebFrameView);
259+
editorEngine.frames.registerView(frame, iframe as FrameView);
260260

261261
return Object.assign(iframe, {
262262
...syncMethods,

‎apps/web/client/src/app/project/[id]/_hooks/use-start-project.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const useStartProject = () => {
4040
useEffect(() => {
4141
if (project) {
4242
startSandbox(project);
43-
editorEngine.screenshot.lastScreenshotAt = project.metadata.updatedPreviewImgAt;
43+
editorEngine.screenshot.lastScreenshotAt = project.metadata.previewImg?.updatedAt ?? null;
4444
}
4545
}, [project]);
4646

‎apps/web/client/src/app/projects/_components/select/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@ export const SelectProject = ({ externalSearchQuery }: { externalSearchQuery?: s
4242
const [spacing] = useState<number>(24);
4343

4444
// Templates
45-
const projects = fetchedProjects?.filter(project => !project.tags?.includes(Tags.TEMPLATE)) ?? [];
46-
const templateProjects = fetchedProjects?.filter(project => project.tags?.includes(Tags.TEMPLATE)) ?? [];
45+
const projects = fetchedProjects?.filter(project => !project.metadata.tags.includes(Tags.TEMPLATE)) ?? [];
46+
const templateProjects = fetchedProjects?.filter(project => project.metadata.tags.includes(Tags.TEMPLATE)) ?? [];
4747
const shouldShowTemplate = templateProjects.length > 0;
4848
const [selectedTemplate, setSelectedTemplate] = useState<Project | null>(null);
4949
const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false);

‎apps/web/client/src/app/projects/_components/settings.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function Settings({ project, refetch }: { project: Project; refetch: () =
3737
const [showRenameDialog, setShowRenameDialog] = useState(false);
3838
const [projectName, setProjectName] = useState(project.name);
3939
const isProjectNameEmpty = useMemo(() => projectName.length === 0, [projectName]);
40-
const isTemplate = project.tags?.includes(Tags.TEMPLATE) || false;
40+
const isTemplate = project.metadata.tags.includes(Tags.TEMPLATE) || false;
4141

4242
useEffect(() => {
4343
setProjectName(project.name);

‎apps/web/client/src/components/store/editor/frames/manager.ts

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import type { WebFrameView } from '@/app/project/[id]/_components/canvas/frame/web-frame.tsx';
1+
import type { FrameView } from '@/app/project/[id]/_components/canvas/frame/web-frame.tsx';
22
import { api } from '@/trpc/client';
33
import { fromFrame, fromPartialFrame } from '@onlook/db';
4-
import { FrameType, type Frame, type WebFrame } from '@onlook/models';
4+
import { type Frame } from '@onlook/models';
55
import { debounce } from 'lodash';
66
import { makeAutoObservable } from 'mobx';
77
import { v4 as uuid } from 'uuid';
@@ -10,11 +10,11 @@ import { FrameNavigationManager } from './navigation';
1010

1111
export interface FrameData {
1212
frame: Frame;
13-
view: WebFrameView | null;
13+
view: FrameView | null;
1414
selected: boolean;
1515
}
1616

17-
function roundDimensions(frame: WebFrame): WebFrame {
17+
function roundDimensions(frame: Frame): Frame {
1818
return {
1919
...frame,
2020
position: {
@@ -67,7 +67,7 @@ export class FramesManager {
6767
return this._frameIdToData.get(id);
6868
}
6969

70-
registerView(frame: Frame, view: WebFrameView) {
70+
registerView(frame: Frame, view: FrameView) {
7171
const isSelected = this.isSelected(frame.id);
7272
this._frameIdToData.set(frame.id, { frame, view, selected: isSelected });
7373
const framePathname = new URL(view.src).pathname;
@@ -211,7 +211,7 @@ export class FramesManager {
211211
}
212212
}
213213

214-
async create(frame: WebFrame) {
214+
async create(frame: Frame) {
215215
const success = await api.frame.create.mutate(fromFrame(roundDimensions(frame)));
216216

217217
if (success) {
@@ -228,14 +228,8 @@ export class FramesManager {
228228
return;
229229
}
230230

231-
// Force to webframe for now, later we can support other frame types
232-
if (frameData.frame.type !== FrameType.WEB) {
233-
console.error('No handler for this frame type', frameData.frame.type);
234-
return;
235-
}
236-
237-
const frame = frameData.frame as WebFrame;
238-
const newFrame: WebFrame = {
231+
const frame = frameData.frame
232+
const newFrame: Frame = {
239233
...frame,
240234
id: uuid(),
241235
position: {
@@ -247,7 +241,7 @@ export class FramesManager {
247241
await this.create(newFrame);
248242
}
249243

250-
async updateAndSaveToStorage(frameId: string, frame: Partial<WebFrame>) {
244+
async updateAndSaveToStorage(frameId: string, frame: Partial<Frame>) {
251245
const existingFrame = this.get(frameId);
252246
if (existingFrame) {
253247
const newFrame = { ...existingFrame.frame, ...frame };
@@ -262,7 +256,7 @@ export class FramesManager {
262256

263257
saveToStorage = debounce(this.undebouncedSaveToStorage.bind(this), 1000);
264258

265-
async undebouncedSaveToStorage(frameId: string, frame: Partial<WebFrame>) {
259+
async undebouncedSaveToStorage(frameId: string, frame: Partial<Frame>) {
266260
try {
267261
const frameToUpdate = fromPartialFrame(frame);
268262
const success = await api.frame.update.mutate({

‎apps/web/client/src/components/store/editor/insert/index.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { WebFrameView } from '@/app/project/[id]/_components/canvas/frame/web-frame';
1+
import type { FrameView } from '@/app/project/[id]/_components/canvas/frame/web-frame';
22
import { DefaultSettings, EditorAttributes } from '@onlook/constants';
33
import type {
44
DomElement,
@@ -77,7 +77,7 @@ export class InsertManager {
7777
this.updateInsertRect(currentPos);
7878
}
7979

80-
async end(e: React.MouseEvent<HTMLDivElement>, frameView: WebFrameView | null) {
80+
async end(e: React.MouseEvent<HTMLDivElement>, frameView: FrameView | null) {
8181
if (!this.isDrawing || !this.drawOrigin) {
8282
return null;
8383
}
@@ -145,7 +145,7 @@ export class InsertManager {
145145
};
146146
}
147147

148-
async insertElement(frameView: WebFrameView, newRect: RectDimensions, origin: ElementPosition) {
148+
async insertElement(frameView: FrameView, newRect: RectDimensions, origin: ElementPosition) {
149149
const insertAction = await this.createInsertAction(frameView, newRect, origin);
150150
if (!insertAction) {
151151
console.error('Failed to create insert action');
@@ -155,7 +155,7 @@ export class InsertManager {
155155
}
156156

157157
async createInsertAction(
158-
frameView: WebFrameView,
158+
frameView: FrameView,
159159
newRect: RectDimensions,
160160
origin: ElementPosition,
161161
): Promise<InsertElementAction | undefined> {

0 commit comments

Comments
 (0)