Skip to content

Commit

Permalink
action component, import pages, pagesize,property dependency check, m…
Browse files Browse the repository at this point in the history 
…enu bar reorg
  • Loading branch information
@dmelancon
dmelancon committed Jan 26, 2025
1 parent b471166 commit 5c4109a
Show file tree
Hide file tree
Showing 50 changed files with 2,111 additions and 493 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@
},
"dependencies": {
"@hello-pangea/dnd": "16.6.0",
"@radix-ui/react-accordion": "1.2.2",
"@radix-ui/react-alert-dialog": "1.1.1",
"@radix-ui/react-checkbox": "1.1.1",
"@radix-ui/react-dialog": "1.1.1",
"@radix-ui/react-dropdown-menu": "2.1.1",
"@radix-ui/react-label": "2.1.0",
"@radix-ui/react-menubar": "1.1.4",
"@radix-ui/react-popover": "1.1.1",
"@radix-ui/react-progress": "1.1.0",
"@radix-ui/react-scroll-area": "1.1.0",
Expand Down
1 change: 1 addition & 0 deletions public/copy.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"boolean": "Boolean",
"number": "Number",
"trigger": "Trigger",
"action": "Play Action",
"image": "Image",
"video": "Video",
"title": "Title",
Expand Down
226 changes: 107 additions & 119 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ import {
ResizablePanel,
ResizablePanelGroup,
} from '@/components/ui/resizable';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip';
// import {
// Tooltip,
// TooltipContent,
// TooltipTrigger,
// } from '@/components/ui/tooltip';

import { Separator } from '@/components/ui/separator';
import { ScrollArea } from '@/components/ui/scroll-area';
Expand All @@ -37,7 +37,12 @@ import {
BookOpenCheck,
} from 'lucide-react';

import { ComponentType, useSettingsStore } from './store';
import {
ComponentType,
ConnectionState,
useOpenSpaceApiStore,
useSettingsStore,
} from './store';
import { loadStore, saveStore } from './utils/saveProject';
import { v4 as uuidv4 } from 'uuid';
import { ConnectionStatus } from './components/ConnectionSettings';
Expand All @@ -56,9 +61,13 @@ import { Position } from './store/positionSlice';
import { LayoutContainer } from './components/layouts/LayoutContainer';
import NewProjectModal from './components/NewProjectModal';
import { Label } from './components/ui/label';
import ImportShowModal from './components/ImportShowModal'; // Import the new modal
import LayoutEditModal from './components/layouts/LayoutEditModal';
import { useBoundStore } from './store/boundStore';
import Undo from './components/Undo';
import ToggleButton from './components/ToggleButton';
import GlobalMenuBar from './components/GlobalMenuBar';
// import TooltipHolder from './components/common/TooltipHolder';

type ComponentTypeData = {
type: ComponentType;
Expand All @@ -69,6 +78,7 @@ type ComponentTypeData = {
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const [showEditModal, setShowEditModal] = useState(false);

const [_isDeleteAllModalOpen, setIsDeleteAllModalOpen] = useState(false);
const [currentComponentId, setCurrentComponentId] = useState<string | null>(
null,
Expand Down Expand Up @@ -112,13 +122,16 @@ const App = () => {
const isPresentMode = useSettingsStore((state) => state.presentMode);
const addPage = useBoundStore((state) => state.addPage);
const layouts = useBoundStore((state) => state.layouts);

const currentPage = useBoundStore((state) => state.currentPage);
const currentPageIndex = useBoundStore((state) => state.currentPageIndex);
const pagesLength = useBoundStore((state) => state.pages?.length); // Get the global state
const goToPage = useBoundStore((state) => state.goToPage); // Get the global state

const projectName = useSettingsStore((state) => state.projectName);

const connectionState = useOpenSpaceApiStore(
(state) => state.connectionState,
);

useEffect(() => {
if (pagesLength == 0 && currentPage == '') {
addPage();
Expand Down Expand Up @@ -148,6 +161,11 @@ const App = () => {
name: getCopy('Main', 'playback'),
icon: <Video />,
},
{
type: 'action',
name: getCopy('Main', 'action'),
icon: <CirclePlay className="h-5 w-5" />,
},
{ type: 'page', name: getCopy('Main', 'page'), icon: <BookOpenCheck /> },
];

Expand Down Expand Up @@ -240,11 +258,6 @@ const App = () => {
removeComponent(id);
};

const handleDeleteAllConfirm = () => {
removeAllComponents();
setIsDeleteAllModalOpen(false);
};

const handleModalClose = () => {
setIsModalOpen(false);
setCurrentComponentId(null);
Expand Down Expand Up @@ -301,44 +314,78 @@ const App = () => {
>
<div className="h-full w-full p-4 pr-2 ">
<div className="flex h-full flex-col overflow-hidden rounded-lg border dark:border-slate-800">
<div className=" flex-0 p-4">
<h2 className="scroll-m-20 text-xl tracking-tight">
<div className=" flex-0 felx flex flex-row items-center gap-2 p-2 px-3">
<img
src="/src/assets/images/favicon.png"
width={20}
className="p-0"
/>
<h2 className=" scroll-m-20 text-xs font-bold tracking-tight">
{getCopy('Main', 'interface_name')}
</h2>
</div>
{/* <Separator /> */}
{/* <div className="p-2">
<Toolbar
onSave={saveStore}
onLoad={handleLoadStore}
onDeleteAllConfirm={handleDeleteAllConfirm}
/>
</div> */}
{/* <Separator /> */}

{/* <div className="flex items-center"> */}

{/* </div> */}

<Separator />
{/* <div className=" p-2">
<Undo />
</div> */}

<GlobalMenuBar />
<Separator />
<Undo />

{/* <div className="p-2">
<ConnectionStatus />
</div> */}
{/* </div> */}
<div className="flex flex-col gap-2 px-4 py-1">
{/* <div className="flex flex-col gap-2 px-4 py-1">
<div className="flex flex-row items-center gap-3">
<Label>{getCopy('Main', 'current_show')}:</Label>
<div className="text-sm">{projectName}</div>
</div>
<div className="py-2">
<NewProjectModal />
</div>
</div> */}
{/* <Separator /> */}

<div className="flex flex-col gap-4 px-4 py-4 @container">
{/* <div className="flex flex-wrap items-center gap-2">
<div className="py-2"> */}
<ConnectionStatus />

{/* </div>
</div> */}
<Separator />
<Undo />
<Separator />
{/* <div className="flex flex-row items-center gap-2"> */}

{/* </div> */}
{/* <Separator /> */}
</div>
<Separator />
<div className="flex flex-col gap-4 px-4 py-1 @container">
{/* <div className="flex flex-wrap items-center gap-2"> */}
<Toolbar
onSave={saveStore}
onLoad={loadStore}
onDeleteAllConfirm={handleDeleteAllConfirm}
/>
<div className="py-2">
<ConnectionStatus />
</div>
</div>
<Separator />

<div className="grid gap-2 p-2 @[167px]:gap-4">
<h2 className="ml-2 text-xs font-bold ">
{getCopy('Main', 'layout')}
</h2>
<LayoutToolbar />
<Separator />
</div>
<Separator />
<ScrollArea className="flex-0 @container">
{/* <Separator /> */}
<ScrollArea className="flex-0 @container" type="always">
<div className="grid gap-2 p-4 @[167px]:gap-4">
<h2 className="text-xs font-bold ">
{getCopy('Main', 'static_components')}
Expand Down Expand Up @@ -421,11 +468,6 @@ const App = () => {
{TimePanel && <DraggablePanel component={TimePanel} />}
{StatusPanel && <DraggablePanel component={StatusPanel} />}
{RecordPanel && <DraggablePanel component={RecordPanel} />}
{/* <ErrorBoundary fallback={<div>Error rendering layouts</div>}> */}
{/* Layouts */}
{/* <div className="top-0 z-[9999] w-[400px] bg-black pl-[200px] text-white">
{JSON.stringify(layouts, null, 2)}
</div> */}
{Object.keys(layouts).map((layoutId) => {
const layout = layouts[layoutId];
if (
Expand All @@ -441,16 +483,8 @@ const App = () => {
handleOpenEditModal={() => handleEditLayout(layoutId)}
>
{layout.children.map((childId) => {
// console.log(
// 'childId in layout render loop ',
// childId,
// );
if (!childId) return null;
const component = components[childId];
// console.log(
// 'component in layout render loop ',
// components,
// );
if (!component) return null;
return (
<DraggableComponent
Expand Down Expand Up @@ -499,80 +533,34 @@ const App = () => {
</DroppableWorkspace>
</div>
<div className="absolute bottom-7 left-6 flex flex-row gap-2">
<Tooltip>
<TooltipContent>
Toggle {getCopy('Main', 'navpanel')}
</TooltipContent>
<TooltipTrigger asChild>
<Button
size="icon"
variant={'outline'}
onClick={() => minimize(NavPosition)}
className={`z-40 ${
!NavPosition?.minimized ? 'opacity-60' : 'opacity-100'
}`}
>
{navType.icon}
</Button>
</TooltipTrigger>
</Tooltip>
<Tooltip>
<TooltipContent>
Toggle {getCopy('Main', 'timepanel')}
</TooltipContent>
<TooltipTrigger asChild>
<Button
size="icon"
variant={'outline'}
className={`z-40 ${
!TimePosition?.minimized ? 'opacity-60' : 'opacity-100'
}`}
// pressed={!TimePanel?.minimized || false}
onClick={() => minimize(TimePosition)}
>
{timeType.icon}
</Button>
</TooltipTrigger>
</Tooltip>
<Tooltip>
<TooltipContent>
{' '}
Toggle {getCopy('Main', 'statuspanel')}
</TooltipContent>
<TooltipTrigger asChild>
<Button
size="icon"
variant={'outline'}
onClick={() => minimize(StatusPosition)}
className={`z-40 ${
!StatusPosition?.minimized
? 'opacity-60'
: 'opacity-100'
}`}
>
{statusType.icon}
</Button>
</TooltipTrigger>
</Tooltip>
<Tooltip>
<TooltipContent>
Toggle {getCopy('Main', 'recordpanel')}
</TooltipContent>
<TooltipTrigger asChild>
<Button
size="icon"
variant={'outline'}
onClick={() => minimize(RecordPosition)}
className={`z-40 ${
!RecordPosition?.minimized
? 'opacity-60'
: 'opacity-100'
}`}
>
{recordType.icon}
</Button>
</TooltipTrigger>
</Tooltip>
<ToggleButton
tooltipText={getCopy('Main', 'navpanel')}
icon={navType.icon}
selected={NavPosition?.minimized}
onClick={() => minimize(NavPosition)}
disabled={connectionState != ConnectionState.CONNECTED}
/>
<ToggleButton
tooltipText={getCopy('Main', 'timepanel')}
icon={timeType.icon}
selected={TimePosition?.minimized}
onClick={() => minimize(TimePosition)}
disabled={connectionState != ConnectionState.CONNECTED}
/>
<ToggleButton
tooltipText={getCopy('Main', 'statuspanel')}
icon={statusType.icon}
selected={StatusPosition?.minimized}
onClick={() => minimize(StatusPosition)}
disabled={connectionState != ConnectionState.CONNECTED}
/>
<ToggleButton
tooltipText={getCopy('Main', 'recordpanel')}
icon={recordType.icon}
selected={RecordPosition?.minimized}
onClick={() => minimize(RecordPosition)}
disabled={connectionState != ConnectionState.CONNECTED}
/>
</div>

<Pagination
Expand Down
9 changes: 8 additions & 1 deletion src/components/ComponentContent/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,15 @@ import { SessionPlaybackGUIComponent } from '../types/preset/SessionPlayback';
import { SetNavGUIComponent } from '../types/preset/SetNavigation';
import { PageGUIComponent } from '../types/preset/Page';
import { getCopy } from '@/utils/copyHelpers';
import { ActionTriggerGUIComponent } from '../types/preset/ActionTrigger';
import { ActionTriggerComponent } from '@/store/ComponentTypes';
interface ComponentContentProps {
component: Component;
}

export const ComponentContent: React.FC<ComponentContentProps> = ({
component,
}) => {
// Handle other component types
switch (component?.type) {
case 'title':
return <TitleGUIComponent component={component as TitleComponent} />;
Expand Down Expand Up @@ -85,6 +86,12 @@ export const ComponentContent: React.FC<ComponentContentProps> = ({
return <MultiGUIComponent component={component as MultiComponent} />;
case 'page':
return <PageGUIComponent component={component as PageComponent} />;
case 'action':
return (
<ActionTriggerGUIComponent
component={component as ActionTriggerComponent}
/>
);
default:
return (
<div>{getCopy('DraggableComponent', 'unknown_component_type')}</div>
Expand Down
Loading

0 comments on commit 5c4109a

Please sign in to comment.