editor hooks provided to client handlers, and created init draft of g…

…rids

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

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<any>(
   () => import('react-cytoscapejs').then((m) => m.default),
@@ -165,6 +166,7 @@ export default function CytoGraph({
           elements={reactElements}
           spaceId={spaceId}
         />}
+        {false && !!cy && <CytoGrid/>}
         {children}
       </CytoDropZone>
     </div>

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 = (<>
+    <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', maxWidth: '100%', maxHeight: '100%', opacity: 0.5, pointerEvents: 'none' }}>
+    <ReactResizeDetector handleWidth handleHeight onResize={(w, h) => setSize({ width: w, height: h })} />
+      <GridLayout
+        width={size.width}
+        height={size.height}
+        className="layout"
+        layout={layout}
+        cols={12}
+        rowHeight={30}
+        verticalCompact={false}
+        isResizable
+        onLayoutChange={setLayout}
+      >
+        <Box 
+          bg={'bgColor'}
+          color={'text'}
+          borderColor={'borderColor'}
+          borderWidth='thin' borderRadius='lg'
+          p={1} key="a" sx={{ pointerEvents: 'all' }}
+        >a</Box>
+        <Box 
+          bg={'bgColor'}
+          color={'text'}
+          borderColor={'borderColor'}
+          borderWidth='thin' borderRadius='lg'
+          p={1} key="b" sx={{ pointerEvents: 'all' }}
+        >b</Box>
+        <Box 
+          bg={'bgColor'}
+          color={'text'}
+          borderColor={'borderColor'}
+          borderWidth='thin' borderRadius='lg'
+          p={1} key="c" sx={{ pointerEvents: 'all' }}
+        >c</Box>
+      </GridLayout>
+    </div>
+  </>);
+
+  return returning;
+}

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 <div>
         <CatchErrors errorRenderer={(error, reset) => {
           return <div>{String(error)}</div>;
@@ -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,
             />
           </Flex>
           {!handleClient?.to_id && <Alert status='error'><AlertIcon />Compatible HandleClient not found.</Alert>}
-          {!!handleClient?.to_id && [<ClientHandler key={`${id}${handleClient?.to_id}`} handlerId={handleClient?.to_id} linkId={id} ml={ml} onClose={onCloseCard}/>]}
+          {!!handleClient?.to_id && [<ClientHandler key={`${linkId}${handleClient?.to_id}`} handlerId={handleClient?.to_id} linkId={linkId} ml={ml} onClose={onCloseCard} setLinkId={setLinkId} setHandlerId={setHandlerId}/>]}
         </CatchErrors>
       </div>;
     };

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",