From d0618a183e1db3b72034d4e28902e6e9ee0ccd6d Mon Sep 17 00:00:00 2001 From: Ivan S Glazunov Date: Tue, 9 Jan 2024 21:49:38 +0000 Subject: [PATCH] editor hooks provided to client handlers, and created init draft of grids --- imports/client-handler.tsx | 4 +++ imports/cyto/graph.tsx | 2 ++ imports/cyto/grid.tsx | 56 ++++++++++++++++++++++++++++++++++++++ imports/cyto/hooks.tsx | 19 +++++++------ package.json | 1 + 5 files changed, 74 insertions(+), 8 deletions(-) create mode 100644 imports/cyto/grid.tsx diff --git a/imports/client-handler.tsx b/imports/client-handler.tsx index ac1e11d5..99ec45bf 100644 --- a/imports/client-handler.tsx +++ b/imports/client-handler.tsx @@ -60,6 +60,8 @@ import CytoGraph from './cyto/graph'; import * as reactYandexMaps from '@pbe/react-yandex-maps' import ReactCalendarTimeline from 'react-calendar-timeline' import moment from 'moment' +import { useEditorTabs } from './cyto/editor'; +import { useCytoEditor } from './cyto/hooks'; const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.default), { ssr: false }); @@ -250,6 +252,8 @@ r.list = { useChackraColor, useChackraGlobal, CytoGraph, + useEditorTabs, + useCytoEditor, }, '@deep-foundation/deeplinks': { useMinilinksFilter diff --git a/imports/cyto/graph.tsx b/imports/cyto/graph.tsx index c46582a2..9d957abc 100644 --- a/imports/cyto/graph.tsx +++ b/imports/cyto/graph.tsx @@ -31,6 +31,7 @@ import { CytoGraphProps } from './types'; import { useCyInitializer, useCytoEditor } from './hooks'; import { CytoHandlers, useCytoHandlers, useCytoHandlersApply } from '../cyto-handler'; +import CytoGrid from './grid'; const CytoscapeComponent = dynamic( () => import('react-cytoscapejs').then((m) => m.default), @@ -165,6 +166,7 @@ export default function CytoGraph({ elements={reactElements} spaceId={spaceId} />} + {false && !!cy && } {children} diff --git a/imports/cyto/grid.tsx b/imports/cyto/grid.tsx new file mode 100644 index 00000000..8f9cda3a --- /dev/null +++ b/imports/cyto/grid.tsx @@ -0,0 +1,56 @@ +import { Box } from '@chakra-ui/react'; +import React, { useState } from 'react'; +import GridLayout from "react-grid-layout"; +import ReactResizeDetector from 'react-resize-detector'; + +export default function CytoGrid({ +}: {}){ + const availableHandles = ["s", "w", "e", "n", "sw", "nw", "se", "ne"]; + + const [layout, setLayout] = useState([ + { i: "a", x: 0, y: 0, w: 1, h: 2, static: true, isResizable: true, resizeHandles: availableHandles, }, + { i: "b", x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4, isResizable: true, resizeHandles: availableHandles, }, + { i: "c", x: 4, y: 0, w: 1, h: 2, isResizable: true, resizeHandles: availableHandles, } + ]); + const [size, setSize] = useState({ width: 0, height: 0 }); + const returning = (<> +
+ setSize({ width: w, height: h })} /> + + a + b + c + +
+ ); + + return returning; +} diff --git a/imports/cyto/hooks.tsx b/imports/cyto/hooks.tsx index be7e3dfb..4463205c 100644 --- a/imports/cyto/hooks.tsx +++ b/imports/cyto/hooks.tsx @@ -571,6 +571,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml, const AnyLinkComponent = useMemo(() => { return function AnyLinkComponent({ id }: { id: number }) { + const [linkId, setLinkId] = useState(id); const deep = useDeep(); const [handlerId, setHandlerId] = useState(); const { onOpen, onClose, isOpen } = useDisclosure(); @@ -582,7 +583,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml, from: { down: { tree_id: { _eq: deep.idLocal('@deep-foundation/core', 'typesTree') }, - link_id: { _eq: id }, + link_id: { _eq: linkId }, }, } }); @@ -595,16 +596,18 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml, from: { type_id: Opened || 0, from_id: spaceId, - to_id: id, + to_id: linkId, }, }); const [openedHandler] = openedHandlers; - + useEffect(() => { + setHandlerId(undefined); + }, [linkId]); useEffect(() => { if (openedHandler?.to_id && openedHandler?.to_id !== handlerId) setHandlerId(openedHandler?.to_id); if (!handlerId) { const inheritance = []; - for (let pointer = deep.minilinks.byId[id]; !!pointer && inheritance[inheritance.length - 1] !== pointer; pointer = pointer?.type) { + for (let pointer = deep.minilinks.byId[linkId]; !!pointer && inheritance[inheritance.length - 1] !== pointer; pointer = pointer?.type) { inheritance.push(pointer); const handleClient: any = handleClients.find(h => h.from_id === pointer.id); if (handleClient) { @@ -623,7 +626,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml, containerName: deep.minilinks.byId?.[t?.to_id]?.inByType[deep.idLocal('@deep-foundation/core', 'Contain')]?.[0]?.from?.value?.value || '', })) || []; - const onCloseCard = useCallback(() => toggleLinkReactElement(id), [id]); + const onCloseCard = useCallback(() => toggleLinkReactElement(linkId), [linkId]); return
{ return
{String(error)}
; @@ -660,7 +663,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml, search={search} onSearch={e => setSearch(e.target.value)} onSubmit={async (hid) => { - open(id, hid); + open(linkId, hid); onClose(); }} fillSize @@ -676,7 +679,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml, borderColor='borderColor' borderWidth='thin' target='_blank' - href={`/client-handler?props=%7B"linkId"%3A${id}%2C"handlerId"%3A${handlerId}%7D`} + href={`/client-handler?props=%7B"linkId"%3A${linkId}%2C"handlerId"%3A${handlerId}%7D`} sx={{ _hover: { transform: 'scale(1.2)', @@ -702,7 +705,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml, /> {!handleClient?.to_id && Compatible HandleClient not found.} - {!!handleClient?.to_id && []} + {!!handleClient?.to_id && []}
; }; diff --git a/package.json b/package.json index 0f665077..5e95b540 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ "react-dom": "^18", "react-dropzone": "^14.2.3", "react-ga": "^3.3.1", + "react-grid-layout": "^1.4.4", "react-hotkeys-hook": "^4.4.0", "react-i18next": "^13.2.2", "react-icons": "^4.8.0",