From 5a7d739926a1e3e17f42fa36116ba19109e77d02 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Mon, 8 Dec 2025 01:02:57 -0800 Subject: [PATCH] feat: add maximize button to all tool shapes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add useMaximize hook to all shapes using StandardizedToolWrapper: - MapShapeUtil, MultmuxShapeUtil, MarkdownShapeUtil - ObsNoteShapeUtil, ImageGenShapeUtil, VideoGenShapeUtil - HolonShapeUtil, PromptShapeUtil, EmbedShapeUtil - FathomMeetingsBrowserShapeUtil, FathomNoteShapeUtil - HolonBrowserShapeUtil, ObsidianBrowserShapeUtil - TranscriptionShapeUtil, VideoChatShapeUtil All tools now have maximize/fullscreen functionality via the standardized header bar. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- src/shapes/EmbedShapeUtil.tsx | 16 ++++++++++++++++ src/shapes/FathomMeetingsBrowserShapeUtil.tsx | 12 ++++++++++++ src/shapes/FathomNoteShapeUtil.tsx | 12 ++++++++++++ src/shapes/HolonBrowserShapeUtil.tsx | 12 ++++++++++++ src/shapes/HolonShapeUtil.tsx | 12 ++++++++++++ src/shapes/ImageGenShapeUtil.tsx | 12 ++++++++++++ src/shapes/MapShapeUtil.tsx | 16 ++++++++++++++++ src/shapes/MarkdownShapeUtil.tsx | 12 ++++++++++++ src/shapes/MultmuxShapeUtil.tsx | 14 ++++++++++++++ src/shapes/ObsNoteShapeUtil.tsx | 12 ++++++++++++ src/shapes/ObsidianBrowserShapeUtil.tsx | 14 +++++++++++++- src/shapes/PromptShapeUtil.tsx | 12 ++++++++++++ src/shapes/TranscriptionShapeUtil.tsx | 12 ++++++++++++ src/shapes/VideoChatShapeUtil.tsx | 12 ++++++++++++ src/shapes/VideoGenShapeUtil.tsx | 12 ++++++++++++ 15 files changed, 191 insertions(+), 1 deletion(-) diff --git a/src/shapes/EmbedShapeUtil.tsx b/src/shapes/EmbedShapeUtil.tsx index 3fdbd5b..f334779 100644 --- a/src/shapes/EmbedShapeUtil.tsx +++ b/src/shapes/EmbedShapeUtil.tsx @@ -2,6 +2,7 @@ import { BaseBoxShapeUtil, TLBaseShape, HTMLContainer } from "tldraw" import { useCallback, useState } from "react" import { StandardizedToolWrapper } from "../components/StandardizedToolWrapper" import { usePinnedToView } from "../hooks/usePinnedToView" +import { useMaximize } from "../hooks/useMaximize" export type IEmbedShape = TLBaseShape< "Embed", @@ -173,6 +174,15 @@ export class EmbedShape extends BaseBoxShapeUtil { // Use the pinning hook usePinnedToView(this.editor, shape.id, shape.props.pinnedToView) + // Use the maximize hook for fullscreen functionality + const { isMaximized, toggleMaximize } = useMaximize({ + editor: this.editor, + shapeId: shape.id, + currentW: shape.props.w, + currentH: shape.props.h, + shapeType: 'Embed', + }) + const handleClose = () => { this.editor.deleteShape(shape.id) } @@ -271,6 +281,8 @@ export class EmbedShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} editor={this.editor} shapeId={shape.id} isPinnedToView={shape.props.pinnedToView} @@ -361,6 +373,8 @@ export class EmbedShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} editor={this.editor} shapeId={shape.id} isPinnedToView={shape.props.pinnedToView} @@ -429,6 +443,8 @@ export class EmbedShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} editor={this.editor} shapeId={shape.id} isPinnedToView={shape.props.pinnedToView} diff --git a/src/shapes/FathomMeetingsBrowserShapeUtil.tsx b/src/shapes/FathomMeetingsBrowserShapeUtil.tsx index aedb2bd..39bde72 100644 --- a/src/shapes/FathomMeetingsBrowserShapeUtil.tsx +++ b/src/shapes/FathomMeetingsBrowserShapeUtil.tsx @@ -9,6 +9,7 @@ import React, { useState, useContext } from "react" import { FathomMeetingsPanel } from "../components/FathomMeetingsPanel" import { StandardizedToolWrapper } from "../components/StandardizedToolWrapper" import { usePinnedToView } from "../hooks/usePinnedToView" +import { useMaximize } from "../hooks/useMaximize" import { FathomNoteShape } from "./FathomNoteShapeUtil" import { WORKER_URL, LOCAL_WORKER_URL } from "../constants/workerUrl" import { getFathomApiKey } from "../lib/fathomApiKey" @@ -48,6 +49,15 @@ export class FathomMeetingsBrowserShape extends BaseBoxShapeUtil { setIsOpen(false) // Delete the browser shape immediately so it's tracked in undo/redo history @@ -518,6 +528,8 @@ export class FathomMeetingsBrowserShape extends BaseBoxShapeUtil { // Use the pinning hook usePinnedToView(this.editor, shape.id, shape.props.pinnedToView) + // Use the maximize hook for fullscreen functionality + const { isMaximized, toggleMaximize } = useMaximize({ + editor: this.editor, + shapeId: shape.id, + currentW: shape.props.w, + currentH: shape.props.h, + shapeType: 'FathomNote', + }) + const handleClose = () => { this.editor.deleteShape(shape.id) } @@ -513,6 +523,8 @@ export class FathomNoteShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} editor={this.editor} shapeId={shape.id} isPinnedToView={shape.props.pinnedToView} diff --git a/src/shapes/HolonBrowserShapeUtil.tsx b/src/shapes/HolonBrowserShapeUtil.tsx index 92d078c..94fcadd 100644 --- a/src/shapes/HolonBrowserShapeUtil.tsx +++ b/src/shapes/HolonBrowserShapeUtil.tsx @@ -8,6 +8,7 @@ import { HolonBrowser } from "../components/HolonBrowser" import { HolonData } from "../lib/HoloSphereService" import { StandardizedToolWrapper } from "../components/StandardizedToolWrapper" import { usePinnedToView } from "../hooks/usePinnedToView" +import { useMaximize } from "../hooks/useMaximize" type IHolonBrowser = TLBaseShape< "HolonBrowser", @@ -43,6 +44,15 @@ export class HolonBrowserShape extends BaseBoxShapeUtil { // Use the pinning hook to keep the shape fixed to viewport when pinned usePinnedToView(this.editor, shape.id, shape.props.pinnedToView) + // Use the maximize hook for fullscreen functionality + const { isMaximized, toggleMaximize } = useMaximize({ + editor: this.editor, + shapeId: shape.id, + currentW: w, + currentH: h, + shapeType: 'HolonBrowser', + }) + const handleSelectHolon = (holonData: HolonData) => { // Store current camera position to prevent it from changing const currentCamera = this.editor.getCamera() @@ -146,6 +156,8 @@ export class HolonBrowserShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} editor={this.editor} shapeId={shape.id} isPinnedToView={shape.props.pinnedToView} diff --git a/src/shapes/HolonShapeUtil.tsx b/src/shapes/HolonShapeUtil.tsx index f4997af..a41c9c5 100644 --- a/src/shapes/HolonShapeUtil.tsx +++ b/src/shapes/HolonShapeUtil.tsx @@ -8,6 +8,7 @@ import { holosphereService, HoloSphereService, HolonConnection } from "@/lib/Hol import * as h3 from 'h3-js' import { StandardizedToolWrapper } from "../components/StandardizedToolWrapper" import { usePinnedToView } from "../hooks/usePinnedToView" +import { useMaximize } from "../hooks/useMaximize" type IHolon = TLBaseShape< "Holon", @@ -112,6 +113,15 @@ export class HolonShape extends BaseBoxShapeUtil { // Use the pinning hook to keep the shape fixed to viewport when pinned usePinnedToView(this.editor, shape.id, shape.props.pinnedToView) + // Use the maximize hook for fullscreen functionality + const { isMaximized, toggleMaximize } = useMaximize({ + editor: this.editor, + shapeId: shape.id, + currentW: shape.props.w, + currentH: shape.props.h, + shapeType: 'Holon', + }) + // Note: Auto-initialization is disabled. Users must manually enter Holon IDs. // This prevents the shape from auto-generating IDs based on coordinates. @@ -763,6 +773,8 @@ export class HolonShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} headerContent={headerContent} editor={this.editor} shapeId={shape.id} diff --git a/src/shapes/ImageGenShapeUtil.tsx b/src/shapes/ImageGenShapeUtil.tsx index c2a27ff..a61acbf 100644 --- a/src/shapes/ImageGenShapeUtil.tsx +++ b/src/shapes/ImageGenShapeUtil.tsx @@ -10,6 +10,7 @@ import { getRunPodConfig } from "@/lib/clientConfig" import { aiOrchestrator, isAIOrchestratorAvailable } from "@/lib/aiOrchestrator" import { StandardizedToolWrapper } from "@/components/StandardizedToolWrapper" import { usePinnedToView } from "@/hooks/usePinnedToView" +import { useMaximize } from "@/hooks/useMaximize" // Feature flag: Set to false when AI Orchestrator or RunPod API is ready for production const USE_MOCK_API = false @@ -326,6 +327,15 @@ export class ImageGenShape extends BaseBoxShapeUtil { // Pin to view functionality usePinnedToView(editor, shape.id, shape.props.pinnedToView) + // Use the maximize hook for fullscreen functionality + const { isMaximized, toggleMaximize } = useMaximize({ + editor: editor, + shapeId: shape.id, + currentW: shape.props.w, + currentH: shape.props.h, + shapeType: 'ImageGen', + }) + const handlePinToggle = () => { editor.updateShape({ id: shape.id, @@ -589,6 +599,8 @@ export class ImageGenShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} editor={editor} shapeId={shape.id} tags={shape.props.tags || []} diff --git a/src/shapes/MapShapeUtil.tsx b/src/shapes/MapShapeUtil.tsx index 8b52183..ce91993 100644 --- a/src/shapes/MapShapeUtil.tsx +++ b/src/shapes/MapShapeUtil.tsx @@ -19,6 +19,8 @@ import { useRef, useEffect, useState, useCallback } from 'react'; import maplibregl from 'maplibre-gl'; import 'maplibre-gl/dist/maplibre-gl.css'; import { StandardizedToolWrapper } from '../components/StandardizedToolWrapper'; +import { usePinnedToView } from '../hooks/usePinnedToView'; +import { useMaximize } from '../hooks/useMaximize'; // ============================================================================= // Types @@ -344,6 +346,18 @@ function MapComponent({ shape, editor, isSelected }: { shape: IMapShape; editor: const styleKey = (shape.props.styleKey || 'voyager') as StyleKey; const currentStyle = MAP_STYLES[styleKey] || MAP_STYLES.voyager; + // Use the pinning hook to keep the shape fixed to viewport when pinned + usePinnedToView(editor, shape.id, shape.props.pinnedToView); + + // Use the maximize hook for fullscreen functionality + const { isMaximized, toggleMaximize } = useMaximize({ + editor: editor, + shapeId: shape.id, + currentW: shape.props.w, + currentH: shape.props.h, + shapeType: 'Map', + }); + // Track mounted state for cleanup useEffect(() => { isMountedRef.current = true; @@ -908,6 +922,8 @@ function MapComponent({ shape, editor, isSelected }: { shape: IMapShape; editor: onClose={handleClose} onMinimize={handleMinimize} isMinimized={shape.props.isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} editor={editor} shapeId={shape.id} isPinnedToView={shape.props.pinnedToView} diff --git a/src/shapes/MarkdownShapeUtil.tsx b/src/shapes/MarkdownShapeUtil.tsx index 6264ace..7e932ea 100644 --- a/src/shapes/MarkdownShapeUtil.tsx +++ b/src/shapes/MarkdownShapeUtil.tsx @@ -28,6 +28,7 @@ import '@mdxeditor/editor/style.css' import { BaseBoxShapeUtil, TLBaseShape, HTMLContainer } from '@tldraw/tldraw' import { StandardizedToolWrapper } from '../components/StandardizedToolWrapper' import { usePinnedToView } from '../hooks/usePinnedToView' +import { useMaximize } from '../hooks/useMaximize' export type IMarkdownShape = TLBaseShape< 'Markdown', @@ -89,6 +90,15 @@ export class MarkdownShape extends BaseBoxShapeUtil { // Use the pinning hook usePinnedToView(this.editor, shape.id, shape.props.pinnedToView) + // Use the maximize hook for fullscreen functionality + const { isMaximized, toggleMaximize } = useMaximize({ + editor: this.editor, + shapeId: shape.id, + currentW: shape.props.w, + currentH: shape.props.h, + shapeType: 'Markdown', + }) + const handleClose = () => { this.editor.deleteShape(shape.id) } @@ -140,6 +150,8 @@ export class MarkdownShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} editor={this.editor} shapeId={shape.id} isPinnedToView={shape.props.pinnedToView} diff --git a/src/shapes/MultmuxShapeUtil.tsx b/src/shapes/MultmuxShapeUtil.tsx index 087d7af..b89cf14 100644 --- a/src/shapes/MultmuxShapeUtil.tsx +++ b/src/shapes/MultmuxShapeUtil.tsx @@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react' import { BaseBoxShapeUtil, TLBaseShape, HTMLContainer, Geometry2d, Rectangle2d, T, createShapePropsMigrationIds, createShapePropsMigrationSequence } from 'tldraw' import { StandardizedToolWrapper } from '../components/StandardizedToolWrapper' import { usePinnedToView } from '../hooks/usePinnedToView' +import { useMaximize } from '../hooks/useMaximize' import { Terminal } from '@xterm/xterm' import { FitAddon } from '@xterm/addon-fit' import '@xterm/xterm/css/xterm.css' @@ -158,6 +159,15 @@ export class MultmuxShape extends BaseBoxShapeUtil { // Use the pinning hook usePinnedToView(this.editor, shape.id, shape.props.pinnedToView) + // Use the maximize hook for fullscreen functionality + const { isMaximized, toggleMaximize } = useMaximize({ + editor: this.editor, + shapeId: shape.id, + currentW: shape.props.w, + currentH: shape.props.h, + shapeType: 'Multmux', + }) + // Runtime fix: correct old serverUrl port (3000 -> 3002) // This handles shapes that may not have been migrated yet useEffect(() => { @@ -511,6 +521,8 @@ export class MultmuxShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} editor={this.editor} shapeId={shape.id} isPinnedToView={shape.props.pinnedToView} @@ -718,6 +730,8 @@ export class MultmuxShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} editor={this.editor} shapeId={shape.id} isPinnedToView={shape.props.pinnedToView} diff --git a/src/shapes/ObsNoteShapeUtil.tsx b/src/shapes/ObsNoteShapeUtil.tsx index 59df52d..c408262 100644 --- a/src/shapes/ObsNoteShapeUtil.tsx +++ b/src/shapes/ObsNoteShapeUtil.tsx @@ -32,6 +32,7 @@ import { logGitHubSetupStatus } from '@/lib/githubSetupValidator' import { getClientConfig } from '@/lib/clientConfig' import { StandardizedToolWrapper } from '../components/StandardizedToolWrapper' import { usePinnedToView } from '../hooks/usePinnedToView' +import { useMaximize } from '../hooks/useMaximize' // Main ObsNote component with full markdown editing const ObsNoteComponent: React.FC<{ @@ -50,6 +51,15 @@ const ObsNoteComponent: React.FC<{ // Use the pinning hook to keep the shape fixed to viewport when pinned usePinnedToView(shapeUtil.editor, shape.id, shape.props.pinnedToView) + // Use the maximize hook for fullscreen functionality + const { isMaximized, toggleMaximize } = useMaximize({ + editor: shapeUtil.editor, + shapeId: shape.id, + currentW: shape.props.w, + currentH: shape.props.h, + shapeType: 'ObsNote', + }) + // Track content changes for sync button visibility const [hasUnsavedChanges, setHasUnsavedChanges] = useState(shape.props.isModified) @@ -486,6 +496,8 @@ ${contentToSync}` onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} headerContent={headerContent} editor={shapeUtil.editor} shapeId={shape.id} diff --git a/src/shapes/ObsidianBrowserShapeUtil.tsx b/src/shapes/ObsidianBrowserShapeUtil.tsx index 39461be..470a0e4 100644 --- a/src/shapes/ObsidianBrowserShapeUtil.tsx +++ b/src/shapes/ObsidianBrowserShapeUtil.tsx @@ -12,6 +12,7 @@ import { findNonOverlappingPosition } from "@/utils/shapeCollisionUtils" import { StandardizedToolWrapper } from "../components/StandardizedToolWrapper" import { AuthContext } from "../context/AuthContext" import { usePinnedToView } from "../hooks/usePinnedToView" +import { useMaximize } from "../hooks/useMaximize" type IObsidianBrowser = TLBaseShape< "ObsidianBrowser", @@ -46,7 +47,16 @@ export class ObsidianBrowserShape extends BaseBoxShapeUtil { // Use the pinning hook to keep the shape fixed to viewport when pinned usePinnedToView(this.editor, shape.id, shape.props.pinnedToView) - + + // Use the maximize hook for fullscreen functionality + const { isMaximized, toggleMaximize } = useMaximize({ + editor: this.editor, + shapeId: shape.id, + currentW: w, + currentH: h, + shapeType: 'ObsidianBrowser', + }) + // Wrapper component to access auth context const ObsidianBrowserContent: React.FC<{ vaultName?: string }> = ({ vaultName }) => { @@ -342,6 +352,8 @@ export class ObsidianBrowserShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} editor={this.editor} shapeId={shape.id} headerContent={headerContent} diff --git a/src/shapes/PromptShapeUtil.tsx b/src/shapes/PromptShapeUtil.tsx index 6116fc4..f950b45 100644 --- a/src/shapes/PromptShapeUtil.tsx +++ b/src/shapes/PromptShapeUtil.tsx @@ -16,6 +16,7 @@ import { findNonOverlappingPosition } from "@/utils/shapeCollisionUtils" import React, { useState } from "react" import { StandardizedToolWrapper } from "../components/StandardizedToolWrapper" import { usePinnedToView } from "../hooks/usePinnedToView" +import { useMaximize } from "../hooks/useMaximize" type IPrompt = TLBaseShape< "Prompt", @@ -373,6 +374,15 @@ export class PromptShape extends BaseBoxShapeUtil { // Use the pinning hook usePinnedToView(this.editor, shape.id, shape.props.pinnedToView) + // Use the maximize hook for fullscreen functionality + const { isMaximized, toggleMaximize } = useMaximize({ + editor: this.editor, + shapeId: shape.id, + currentW: shape.props.w, + currentH: shape.props.h, + shapeType: 'Prompt', + }) + const handleClose = () => { this.editor.deleteShape(shape.id) } @@ -403,6 +413,8 @@ export class PromptShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} editor={this.editor} shapeId={shape.id} isPinnedToView={shape.props.pinnedToView} diff --git a/src/shapes/TranscriptionShapeUtil.tsx b/src/shapes/TranscriptionShapeUtil.tsx index ce5160d..10ec026 100644 --- a/src/shapes/TranscriptionShapeUtil.tsx +++ b/src/shapes/TranscriptionShapeUtil.tsx @@ -8,6 +8,7 @@ import { useWhisperTranscription } from "../hooks/useWhisperTranscriptionSimple" import { useWebSpeechTranscription } from "../hooks/useWebSpeechTranscription" import { StandardizedToolWrapper } from "../components/StandardizedToolWrapper" import { usePinnedToView } from "../hooks/usePinnedToView" +import { useMaximize } from "../hooks/useMaximize" type ITranscription = TLBaseShape< "Transcription", @@ -102,6 +103,15 @@ export class TranscriptionShape extends BaseBoxShapeUtil { // Use the pinning hook to keep the shape fixed to viewport when pinned usePinnedToView(this.editor, shape.id, shape.props.pinnedToView) + // Use the maximize hook for fullscreen functionality + const { isMaximized, toggleMaximize } = useMaximize({ + editor: this.editor, + shapeId: shape.id, + currentW: w, + currentH: h, + shapeType: 'Transcription', + }) + // Local Whisper model is always available (no API key needed) const isLocalWhisperAvailable = true @@ -682,6 +692,8 @@ export class TranscriptionShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} headerContent={headerContent} editor={this.editor} shapeId={shape.id} diff --git a/src/shapes/VideoChatShapeUtil.tsx b/src/shapes/VideoChatShapeUtil.tsx index a7345d7..d8fa8a1 100644 --- a/src/shapes/VideoChatShapeUtil.tsx +++ b/src/shapes/VideoChatShapeUtil.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from "react" import { WORKER_URL } from "../constants/workerUrl" import { StandardizedToolWrapper } from "../components/StandardizedToolWrapper" import { usePinnedToView } from "../hooks/usePinnedToView" +import { useMaximize } from "../hooks/useMaximize" interface DailyApiResponse { url: string; @@ -464,6 +465,15 @@ export class VideoChatShape extends BaseBoxShapeUtil { // Use the pinning hook to keep the shape fixed to viewport when pinned usePinnedToView(this.editor, shape.id, shape.props.pinnedToView) + // Use the maximize hook for fullscreen functionality + const { isMaximized, toggleMaximize } = useMaximize({ + editor: this.editor, + shapeId: shape.id, + currentW: shape.props.w, + currentH: shape.props.h, + shapeType: 'VideoChat', + }) + if (error) { return
Error creating room: {error.message}
} @@ -562,6 +572,8 @@ export class VideoChatShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} editor={this.editor} shapeId={shape.id} isPinnedToView={shape.props.pinnedToView} diff --git a/src/shapes/VideoGenShapeUtil.tsx b/src/shapes/VideoGenShapeUtil.tsx index b979cc2..75813f7 100644 --- a/src/shapes/VideoGenShapeUtil.tsx +++ b/src/shapes/VideoGenShapeUtil.tsx @@ -9,6 +9,7 @@ import React, { useState, useRef, useEffect } from "react" import { getRunPodVideoConfig } from "@/lib/clientConfig" import { StandardizedToolWrapper } from "@/components/StandardizedToolWrapper" import { usePinnedToView } from "@/hooks/usePinnedToView" +import { useMaximize } from "@/hooks/useMaximize" // Type for RunPod job response interface RunPodJobResponse { @@ -105,6 +106,15 @@ export class VideoGenShape extends BaseBoxShapeUtil { // Pin to view functionality usePinnedToView(editor, shape.id, shape.props.pinnedToView) + // Use the maximize hook for fullscreen functionality + const { isMaximized, toggleMaximize } = useMaximize({ + editor: editor, + shapeId: shape.id, + currentW: shape.props.w, + currentH: shape.props.h, + shapeType: 'VideoGen', + }) + const handlePinToggle = () => { editor.updateShape({ id: shape.id, @@ -387,6 +397,8 @@ export class VideoGenShape extends BaseBoxShapeUtil { onClose={handleClose} onMinimize={handleMinimize} isMinimized={isMinimized} + onMaximize={toggleMaximize} + isMaximized={isMaximized} editor={editor} shapeId={shape.id} tags={shape.props.tags}