Initial commit

src/utils/tldraw/ui-overrides/components/presentation/actionsMenu.tsx

@@ -0,0 +1,12 @@
+import {
+    DefaultActionsMenu,
+    DefaultActionsMenuContent,
+} from '@tldraw/tldraw';
+
+export const PresentationActionsMenu = () => {
+    return (
+        <DefaultActionsMenu>
+            <DefaultActionsMenuContent />
+        </DefaultActionsMenu>
+    );
+};

src/utils/tldraw/ui-overrides/components/presentation/contextMenu.tsx

@@ -0,0 +1,15 @@
+import {
+    DefaultContextMenu,
+    DefaultContextMenuContent,
+    TLUiContextMenuProps,
+} from '@tldraw/tldraw';
+
+export const PresentationContextMenu = (props: TLUiContextMenuProps) => {
+    return (
+        <div>
+            <DefaultContextMenu {...props}>
+                <DefaultContextMenuContent />
+            </DefaultContextMenu>
+        </div>
+    );
+};

src/utils/tldraw/ui-overrides/components/presentation/debugMenu.tsx

@@ -0,0 +1,15 @@
+import {
+    DefaultDebugMenu,
+    DefaultDebugMenuContent,
+    TLUiDebugMenuProps,
+} from '@tldraw/tldraw';
+
+export const PresentationDebugMenu = (props: TLUiDebugMenuProps) => {
+    return (
+        <div>
+            <DefaultDebugMenu {...props}>
+                <DefaultDebugMenuContent />
+            </DefaultDebugMenu>
+        </div>
+    );
+};

src/utils/tldraw/ui-overrides/components/presentation/helpMenu.tsx

@@ -0,0 +1,15 @@
+import {
+    DefaultHelpMenu,
+    DefaultHelpMenuContent,
+    TLUiHelpMenuProps,
+} from '@tldraw/tldraw';
+
+export const PresentationHelpMenu = (props: TLUiHelpMenuProps) => {
+    return (
+        <div>
+            <DefaultHelpMenu {...props}>
+                <DefaultHelpMenuContent />
+            </DefaultHelpMenu>
+        </div>
+    );
+};

src/utils/tldraw/ui-overrides/components/presentation/helperButton.tsx

@@ -0,0 +1,15 @@
+import {
+    DefaultHelperButtons,
+    DefaultHelperButtonsContent,
+    TLUiHelperButtonsProps,
+} from '@tldraw/tldraw';
+
+export const PresentationHelperButtons = (props: TLUiHelperButtonsProps) => {
+    return (
+        <div>
+            <DefaultHelperButtons {...props}>
+                <DefaultHelperButtonsContent />
+            </DefaultHelperButtons>
+        </div>
+    );
+};

src/utils/tldraw/ui-overrides/components/presentation/keyboardShortcutsDialog.tsx

@@ -0,0 +1,21 @@
+import {
+    DefaultKeyboardShortcutsDialog,
+    DefaultKeyboardShortcutsDialogContent,
+    TldrawUiMenuItem,
+    useTools,
+} from '@tldraw/tldraw';
+
+export const PresentationKeyboardShortcutsDialog = () => {
+    const tools = useTools();
+    
+    return (
+        <DefaultKeyboardShortcutsDialog onClose={() => {}}>
+            <div style={{ backgroundColor: 'white' }}>
+                <TldrawUiMenuItem {...tools['microphone']} />
+                <TldrawUiMenuItem {...tools['cc-slide']} />
+                <TldrawUiMenuItem {...tools['sticker']} />
+            </div>
+            <DefaultKeyboardShortcutsDialogContent />
+        </DefaultKeyboardShortcutsDialog>
+    );
+};

src/utils/tldraw/ui-overrides/components/presentation/mainMenu.tsx

@@ -0,0 +1,15 @@
+import {
+    DefaultMainMenu,
+    DefaultMainMenuContent,
+    TLUiMainMenuProps,
+} from '@tldraw/tldraw';
+
+export const PresentationMainMenu = (props: TLUiMainMenuProps) => {
+    return (
+        <div>
+            {/* <DefaultMainMenu {...props}>
+                <DefaultMainMenuContent />
+            </DefaultMainMenu> */}
+        </div>
+    );
+};

src/utils/tldraw/ui-overrides/components/presentation/navigationPanel.tsx

@@ -0,0 +1,11 @@
+import {
+    DefaultNavigationPanel,
+} from '@tldraw/tldraw';
+
+export const PresentationNavigationPanel = () => {
+    return (
+        <div>
+            {/* <DefaultNavigationPanel/> */}
+        </div>
+    )
+};

src/utils/tldraw/ui-overrides/components/presentation/pageMenu.tsx

@@ -0,0 +1,11 @@
+import {
+    DefaultPageMenu,
+} from '@tldraw/tldraw';
+
+export const PresentationPageMenu = () => {
+    return (
+        <div>
+            {/* <DefaultPageMenu/> */}
+        </div>
+    )
+};

src/utils/tldraw/ui-overrides/components/presentation/quickActions.tsx

@@ -0,0 +1,15 @@
+import {
+    DefaultQuickActions,
+    DefaultQuickActionsContent,
+    TLUiQuickActionsProps,
+} from '@tldraw/tldraw';
+
+export const PresentationQuickActions = (props: TLUiQuickActionsProps) => {
+    return (
+        <div>
+            {/* <DefaultQuickActions {...props}>
+                <DefaultQuickActionsContent />
+            </DefaultQuickActions> */}
+        </div>
+    );
+};

src/utils/tldraw/ui-overrides/components/presentation/stylePanel.tsx

@@ -0,0 +1,80 @@
+import {
+    DefaultStylePanel,
+    TLUiStylePanelProps,
+    TldrawUiButton
+} from '@tldraw/tldraw';
+
+import { SnapshotToolbar } from '../../toolbars/snapshotToolbar';
+import { UserToolbar } from '../../toolbars/userToolbar';
+import { ToolsToolbar } from '../../toolbars/toolsToolbar';
+
+export const PresentationStylePanel = (props: TLUiStylePanelProps) => {
+    const emojiButtonStyle = {
+        fontSize: '22px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '40px',
+        height: '40px',
+    };
+
+    const toolbarStyle = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+        padding: '0 8px',
+    };
+
+    return (
+        <DefaultStylePanel {...props}>
+            <div style={{ 
+                display: 'flex', 
+                flexDirection: 'column', 
+                gap: '0px', 
+                padding: '0px',
+                position: 'relative',
+                top: '0px',
+                left: '0',
+                zIndex: 1000,
+                background: 'var(--color-panel)',
+                borderRadius: 'var(--radius-2)',
+                boxShadow: 'var(--shadow-2)',
+                width: '100%',
+            }}>
+                <UserToolbar>
+                    {({ handleLogout, handleNavUserHome }) => (
+                        <div style={toolbarStyle}>
+                            <TldrawUiButton type="icon" title="Logout" onClick={handleLogout} style={emojiButtonStyle}>
+                                🚪
+                            </TldrawUiButton>
+                            <TldrawUiButton type="icon" title="Home" onClick={handleNavUserHome} style={emojiButtonStyle}>
+                                🏠
+                            </TldrawUiButton>
+                        </div>
+                    )}
+                </UserToolbar>
+                <SnapshotToolbar>
+                    {({ resetToBlankCanvas }) => (
+                        <div style={toolbarStyle}>
+                            <TldrawUiButton type="icon" title="Reset Canvas" onClick={resetToBlankCanvas} style={emojiButtonStyle}>
+                                🔄
+                            </TldrawUiButton>
+                        </div>
+                    )}
+                </SnapshotToolbar>
+                <ToolsToolbar>
+                    {({ handlePutUserNode, handleAddCalendar: toolbarHandleAddCalendar }) => (
+                        <div style={toolbarStyle}>
+                            <TldrawUiButton type="icon" title="Add User Node" onClick={handlePutUserNode} style={emojiButtonStyle}>
+                                👤
+                            </TldrawUiButton>
+                            <TldrawUiButton type="icon" title="Add Calendar" onClick={toolbarHandleAddCalendar} style={emojiButtonStyle}>
+                                📅
+                            </TldrawUiButton>
+                        </div>
+                    )}
+                </ToolsToolbar>
+            </div>
+        </DefaultStylePanel>
+    )
+};

src/utils/tldraw/ui-overrides/components/presentation/toolbar.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import {
+    DefaultToolbar,
+    TldrawUiMenuItem,
+} from '@tldraw/tldraw';
+import { StickerDropdown } from '../../StickerDropdown';
+
+export const PresentationToolbar = () => {
+    const [isStickerSelected, setIsStickerSelected] = useState(false);
+    
+    const handleStickerSelect = () => {
+        setIsStickerSelected(!isStickerSelected);
+    };
+
+    return (
+        <div>
+            <DefaultToolbar>
+                <div style={{ position: 'relative' }}>
+                    <TldrawUiMenuItem
+                        id="sticker"
+                        label="Sticker"
+                        icon="sticker-icon"
+                        onSelect={handleStickerSelect}
+                        isSelected={isStickerSelected}
+                    />
+                    {isStickerSelected && <StickerDropdown />}
+                </div>
+            </DefaultToolbar>
+        </div>
+    );
+};

src/utils/tldraw/ui-overrides/components/presentation/zoomMenu.tsx

@@ -0,0 +1,15 @@
+import {
+    DefaultZoomMenu,
+    DefaultZoomMenuContent,
+    TLUiZoomMenuProps,
+} from '@tldraw/tldraw';
+
+export const PresentationZoomMenu = (props: TLUiZoomMenuProps) => {
+    return (
+        <div>
+            {/* <DefaultZoomMenu {...props}>
+                <DefaultZoomMenuContent />
+            </DefaultZoomMenu> */}
+        </div>
+    );
+};