Merge branch 'main' of https://github.com/deep-foundation/deepcase

imports/client-handler.tsx

@@ -56,6 +56,8 @@ import * as i18n from "i18next";
 import * as LanguageDetector from 'i18next-browser-languagedetector';
 import * as reacti18next from "react-i18next";
 import { packageLog } from '../package-log';
+import CytoGraph from '@deep-foundation/deepcase/imports/cyto/graph';
+
 const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.default), { ssr: false });
 
 export const ClientHandler = React.memo(function ClientHandler(_props: ClientHandlerProps) {
@@ -244,6 +246,7 @@ r.list = {
     useRefAutofill,
     useChackraColor,
     useChackraGlobal,
+    CytoGraph,
   },
   '@deep-foundation/deeplinks': {
     useMinilinksFilter

imports/cyto/drop-zone.tsx

@@ -21,7 +21,7 @@ export const CytoDropZone = React.memo(function CytoDropZone({
     children,
   }) => (
     <Box>
-      <Box {...getRootProps({})} onClick={() => {}} position="fixed" left={0} top={0} w={'100%'} h={'100%'} bg={
+      <Box {...getRootProps({})} onClick={() => {}} position="absolute" left={0} top={0} w={'100%'} h={'100%'} bg={
         isDragActive ? 'blue' : isDragAccept ? 'green' : isDragReject ? 'red' : 'transparent'
       }>
         {input}

imports/cyto/editor-preview.tsx

@@ -113,8 +113,10 @@ export function CytoEditorPreview({
 
   const [switcher, setSwitch] = useState(true);
   const switchProps = switcher ? { left: 0 } : { right: 0 };
+  const portalRef = useRef();
 
   return <>
+    <div ref={portalRef}/>
     <EditorGrid
       heightEditorGrid='100%'
       columns={switcher ? '15% 85%' : '85% 15%'}
@@ -202,6 +204,7 @@ export function CytoEditorPreview({
         </Box>
       }
       editorRightSwitch={<EditorSwitcher
+        portalRef={portalRef}
         fillSize={fillSize}
         setFillSize={(newFillSize) => {
           setFillSize(newFillSize);

imports/cyto/editor.tsx

@@ -634,6 +634,7 @@ export const CytoEditor = React.memo(function CytoEditor() {
             rightArea === 'results' && <EditorResults id={tab.id} />
           }
           editorRightSwitch={<EditorSwitcher
+            portalRef={portalRef}
             fillSize={fillSize}
             setFillSize={(newFillSize) => {
               setFillSize(newFillSize);

imports/cyto/graph.tsx

@@ -20,9 +20,8 @@ import edgehandles from 'cytoscape-edgehandles';
 // import cytoscapeLasso from 'cytoscape-lasso';
 import { Text, useToast } from '@chakra-ui/react';
 import dynamic from 'next/dynamic';
-import pckg from '../../package.json';
 import { useContainer, useCytoViewport, useFocusMethods, useInsertingCytoStore, useLayout, useRefAutofill, useShowExtra, useShowTypes, useSpaceId, useLayoutAnimation } from '../hooks';
-import { Refstater } from '../refstater';
+import { Refstater, useRefstarter } from '../refstater';
 import { CytoDropZone } from './drop-zone';
 import { CytoEditor } from './editor';
 import { useCytoElements } from './elements';
@@ -91,16 +90,22 @@ export function useCytoFocusMethods(cy) {
 
 export default function CytoGraph({
   links = [],
-  cytoViewportRef,
+  cytoViewportRef: _cytoViewportRef,
   cyRef,
-  gqlPath,
-  gqlSsl,
-  appVersion = '',
+  gqlPath: _gqlPath,
+  gqlSsl: _gqlSsl,
+  children = null,
+  useCytoViewport: _useCytoViewport = useState,
 }: CytoGraphProps){
   console.log('https://github.com/deep-foundation/deepcase-app/issues/236', 'CytoGraph', 'links', links);
+  const deep = useDeep();
+  const __cytoViewportRef = useRefstarter<{ pan: { x: number; y: number; }; zoom: number }>();
+  const cytoViewportRef = _cytoViewportRef || __cytoViewportRef;
+
+  const gqlPath = _gqlPath || deep?.client?.path;
+  const gqlSsl = _gqlSsl || deep?.client?.ssl;
 
   // console.time('CytoGraph');
-  const deep = useDeep();
   const [spaceId, setSpaceId] = useSpaceId();
   const [container, setContainer] = useContainer();
   const [extra, setExtra] = useShowExtra();
@@ -112,6 +117,7 @@ export default function CytoGraph({
   const [cy, setCy] = useState<any>();
   cyRef.current = cy;
   const ehRef = useRef<any>();
+  const rootRef = useRef();
 
   const cyh = useCytoHandlers();
   const { cytoHandlersRef, iterator, onChange } = cyh;
@@ -126,17 +132,17 @@ export default function CytoGraph({
   const resultStylesheets = [ ...stylesheets, ...newStylesheets ];
 
   const { onLoaded } = useCyInitializer({
-    elementsRef, elements, reactElements, cyRef, setCy, ehRef, cytoViewportRef
+    elementsRef, elements, reactElements, cyRef, setCy, ehRef, cytoViewportRef,
+    rootRef,
   });
 
   const { layout, setLayout } = useLayout();
   const [ layoutAnimation ] = useLayoutAnimation();
-  const [cytoEditor, setCytoEditor] = useCytoEditor();
 
   const returning = (<>
     <CytoHandlers handled={cytoHandled} elementsById={elementsById} onChange={onChange}/>
-    <Refstater useHook={useCytoViewport as any} stateRef={cytoViewportRef}/>
-    <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
+    <Refstater useHook={_useCytoViewport as any} stateRef={cytoViewportRef}/>
+    <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }} ref={rootRef}>
       <CytoDropZone
         cy={cy}
         gqlPath={gqlPath}
@@ -151,17 +157,14 @@ export default function CytoGraph({
           panningEnabled={true}
           pan={cytoViewportRef?.current?.value?.pan}
           zoom={cytoViewportRef?.current?.value?.zoom}
-          style={ { width: '100%', height: '100vh' } }
+          style={ { width: '100%', height: '100%' } }
         />}
         {!!cy && <CytoReactLayout
           cy={cy}
           elements={reactElements}
         />}
-        <CytoEditor/>
+        {children}
       </CytoDropZone>
-      <Text position="fixed" left={0} bottom={0} p={4}>
-        {appVersion} ({pckg.version})
-      </Text>
     </div>
   </>);
 

imports/cyto/hooks.tsx

@@ -714,6 +714,7 @@ export function useCyInitializer({
   setCy,
   ehRef,
   cytoViewportRef,
+  rootRef,
 }: {
   elementsRef: any;
   elements: any;
@@ -722,6 +723,7 @@ export function useCyInitializer({
   setCy: any;
   ehRef: any;
   cytoViewportRef: any;
+  rootRef?: any;
 }) {
   const deep = useDeep();
   const { layout, setLayout } = useLayout();
@@ -1037,7 +1039,7 @@ export function useCyInitializer({
         {
           content: 'center',
           select: function(el, ev){
-            ncy.pan({ x: window.innerWidth / 2, y: window.innerHeight / 2 });
+            ncy.pan({ x: rootRef?.current.clientWidth / 2, y: rootRef?.current.clientHeight / 2 });
             ncy.zoom(1);
           }
         },

imports/cyto/menu.tsx

@@ -14,7 +14,7 @@ import { TbArrowRotaryFirstRight } from "react-icons/tb";
 import { ClientHandler } from "../client-handler";
 
 const ListLayout = React.memo<any>(({ 
-  currentLayout = 'cola',
+  currentLayout = 'deep-d3-force',
   setCurrentLayout,
 }:{
   currentLayout?: string;

imports/cyto/types.tsx

@@ -6,5 +6,6 @@ export interface CytoGraphProps {
   cyRef?: any;
   gqlPath: string;
   gqlSsl: boolean;
-  appVersion: string;
+  children?: any;
+  useCytoViewport?: any;
 };

imports/deep-wysiwyg.tsx

@@ -77,7 +77,7 @@ interface IEditor {
   borderRadiusEditor?: number;
   borderWidthEditor?: string;
   paddingEditor?: number;
-  handleKeyPress?: () => any;
+  handleKeyPress?: (event: any) => any;
   onChange?: (result: { value: string; slateValue: any; }) => any;
   value?: string;
   initialValue: any;
@@ -88,6 +88,7 @@ interface IEditor {
   backgroundColorEditor?: any;
   EditableProps?: any;
   SlateProps?: any;
+  [key: string]: any;
 };
 
 type BulletedListElement = {
@@ -422,6 +423,7 @@ export const DeepWysiwyg = React.memo<any>(function DeepWysiwyg({
   backgroundColorEditor,
   EditableProps = {},
   SlateProps = {},
+  ...props
 }:IEditor) {
   const _value = useMemo(() => {
     if (typeof(value) === 'string' && !!value) {
@@ -505,6 +507,7 @@ export const DeepWysiwyg = React.memo<any>(function DeepWysiwyg({
         '& > * > *:nth-of-type(2)': {
         }
       }}
+      {...props}
     >
       <Slate 
         editor={editor} 
@@ -589,7 +592,7 @@ export const DeepWysiwyg = React.memo<any>(function DeepWysiwyg({
                   toggleMark(editor, mark)
                 }
               }
-              handleKeyPress
+              handleKeyPress && handleKeyPress(event);
             }}
             {...EditableProps}
           />

imports/editor/editor-switcher.tsx

@@ -1,5 +1,8 @@
-import React from 'react';
-import { Input, HStack, Button, useColorMode, ButtonGroup, FormControl, FormLabel, Switch } from '@chakra-ui/react';
+import React, { useMemo } from 'react';
+import { Input, HStack, Button, useColorMode, ButtonGroup, FormControl, FormLabel, Switch, InputGroup, InputRightElement, IconButton } from '@chakra-ui/react';
+import { FinderPopover } from '../cyto/hooks';
+import { useSpaceId } from '../hooks';
+import { useDeep } from '@deep-foundation/deeplinks/imports/client';
 
 
 export const EditorSwitcher = React.memo<any>(({
@@ -10,6 +13,7 @@ export const EditorSwitcher = React.memo<any>(({
   setFillSize,
   currentLinkId,
   setCurrentLinkId,
+  portalRef,
 }:{
   area?: string;
   setArea?: (e: any) => any; 
@@ -18,8 +22,15 @@ export const EditorSwitcher = React.memo<any>(({
   currentLinkId: number;
   setFillSize?: (fillSize: boolean) => any;
   fillSize: boolean;
+  portalRef?: any;
 }) => {
+  const deep = useDeep();
   const { colorMode } = useColorMode();
+  const PortalProps = useMemo(() => ({
+    containerRef: portalRef,
+  }), []);
+  const [space] = useSpaceId();
+  const [spaceL] = deep.useMinilinksSubscription({ id: space });
 
   return(
     <HStack 
@@ -36,7 +47,34 @@ export const EditorSwitcher = React.memo<any>(({
           <FormLabel htmlFor='input-id' mb='0'>
             id
           </FormLabel>
-          <Input id="input-id" value={currentLinkId} size='sm' onChange={(e) => setCurrentLinkId(parseInt(e.target.value) || 0)} mr='1rem' />
+          <InputGroup
+            // position='absolute' w='100%' 
+            // size='md' h='100%' left={0} top={0} borderWidth='1px' borderRadius='lg' bgColor='handlersInput'
+            mr='1rem' 
+          >
+            <Input id="input-id" value={currentLinkId} size='sm' onChange={(e) => setCurrentLinkId(parseInt(e.target.value) || 0)}/>
+            <InputRightElement>
+              <FinderPopover
+                PortalProps={PortalProps}
+                link={spaceL}
+                onSubmit={async (link) => {
+                  setCurrentLinkId(link?.id);
+                }}
+              >
+                <IconButton
+                  isRound
+                  aria-label='finder'
+                  size='sm'
+                  variant='ghost'
+                  icon={<>🪬</>}
+                  style={{
+                    position: 'relative',
+                    top: -4,
+                  }}
+                />
+              </FinderPopover>
+            </InputRightElement>
+          </InputGroup>
           <FormLabel htmlFor='show-extra-switch' mb='0'>
             fillSize
           </FormLabel>

imports/hooks.tsx

@@ -87,7 +87,9 @@ export function useShowExtra() {
   return useQueryStore<any>('show-extra', false);
 };
 export function useCytoViewport<S extends { pan: { x: number; y: number; }; zoom: number }>() {
-  return useLocalStore<S>('cyto-viewport', { pan: { x: 0, y: 0 }, zoom: 1 } as S);
+  const x = typeof(window) === 'object' ? window.innerWidth / 2 : 0;
+  const y = typeof(window) === 'object' ? window.innerWidth / 2 : 0;
+  return useLocalStore<S>('cyto-viewport', { pan: { x, y }, zoom: 1 } as S);
 };
 export function useShowFocus() {
   return useQueryStore<any>('show-focus', false);
@@ -206,7 +208,7 @@ export function useActiveMethods() {
 };
 
 export function useLayout() {
-  const [layoutName, setLayoutName] = useLocalStore('layout', 'cola');
+  const [layoutName, setLayoutName] = useLocalStore('layout', 'deep-d3-force');
   return {
     setLayout(name: 'cola' | 'deep-d3-force') {
       setLayoutName(name);