From 9f90ec9f0dbf89d2a39557d4c052ce5981ceed07 Mon Sep 17 00:00:00 2001 From: Konstantin Dyachenko Date: Fri, 20 Oct 2023 13:41:40 +0000 Subject: [PATCH] editor side-bar is reverted --- imports/client-handler.tsx | 2 +- imports/cyto/editor.tsx | 266 ++------------------------------- imports/cyto/elements.tsx | 6 +- imports/cyto/graph.tsx | 7 +- imports/cyto/hooks.tsx | 62 -------- imports/editor/editor-tabs.tsx | 24 +-- 6 files changed, 27 insertions(+), 340 deletions(-) diff --git a/imports/client-handler.tsx b/imports/client-handler.tsx index ffc2ed69..f046c49d 100644 --- a/imports/client-handler.tsx +++ b/imports/client-handler.tsx @@ -3,7 +3,7 @@ import * as icons from '@chakra-ui/icons'; import dynamic from 'next/dynamic'; import { DeepClient, useDeep, useDeepSubscription } from "@deep-foundation/deeplinks/imports/client"; import { evalClientHandler as deepclientEvalClientHandler } from '@deep-foundation/deeplinks/imports/client-handler'; -import { useMinilinksFilter, useMinilinksSubscription } from "@deep-foundation/deeplinks/imports/minilinks"; +import { useMinilinksFilter } from "@deep-foundation/deeplinks/imports/minilinks"; import axios from 'axios'; import * as axiosHooks from 'axios-hooks'; import * as classnames from 'classnames'; diff --git a/imports/cyto/editor.tsx b/imports/cyto/editor.tsx index f931226a..03da31f4 100644 --- a/imports/cyto/editor.tsx +++ b/imports/cyto/editor.tsx @@ -1,36 +1,11 @@ -import { - Box, Button, IconButton, Modal, ModalContent, ModalOverlay, useColorMode, - Editable, - EditableInput, - EditableTextarea, - EditablePreview, - Popover, - PopoverTrigger, - PopoverContent, - PopoverHeader, - PopoverBody, - PopoverFooter, - PopoverArrow, - PopoverCloseButton, - PopoverAnchor, - Menu, - MenuButton, - MenuList, - MenuItem, - MenuItemOption, - MenuGroup, - MenuOptionGroup, - MenuDivider, - Divider, - Portal, -} from '@chakra-ui/react'; +import { Box, IconButton, Modal, ModalContent, ModalOverlay, useColorMode } from '@chakra-ui/react'; import { useDeep, useDeepSubscription } from '@deep-foundation/deeplinks/imports/client'; -import { Link, useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks'; +import { useMinilinksFilter } from '@deep-foundation/deeplinks/imports/minilinks'; import { useLocalStore } from '@deep-foundation/store/local'; import { useDebounceCallback } from '@react-hook/debounce'; import json5 from 'json5'; import dynamic from 'next/dynamic'; -import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { VscClearAll } from 'react-icons/vsc'; import { ClientHandler, ClientHandlerRenderer, evalClientHandler } from '../client-handler'; import { EditorComponentView } from '../editor/editor-component-view'; @@ -42,10 +17,7 @@ import { CloseButton, EditorTabs } from '../editor/editor-tabs'; import { EditorTextArea } from '../editor/editor-textarea'; import { CatchErrors } from '../react-errors'; import { CytoEditorHandlers } from './handlers'; -import { FinderPopover, useCytoEditor } from './hooks'; -import { useSpaceId } from '../hooks'; -import { AddIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, CloseIcon, SmallAddIcon, SmallCloseIcon } from '@chakra-ui/icons'; -import EmojiPicker from 'emoji-picker-react'; +import { useCytoEditor } from './hooks'; const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.default), { ssr: false }); @@ -133,212 +105,6 @@ export function useFindClientHandlerByCode({ return hid; } -export function List({ link }) { - const deep = useDeep(); - const { - data: contained - } = deep.useDeepSubscription({ in: { type_id: deep.idLocal('@deep-foundation/core', 'Contain'), from_id: link.id } }); - return <> - { - {contained.map(c => )} - } - ; -} - -export const Item = React.memo(function Item({ - link, - openable = false, - deletable = false, - children = null, - portalRef, - closeTab, - activeTab, - addTab, - isActive = false, -}: { - link: Link; - openable?: boolean; - deletable?: boolean; - children?: any; - portalRef?: any; - closeTab?: (id: number) => void; - activeTab?: (id: number) => void; - addTab?: (tab: any) => void; - isActive?: boolean; -}) { - const [opened, setOpened] = useState(false); - const [spaceId] = useSpaceId(); - const deep = useDeep(); - const [currentSymbolLink] = deep.useMinilinksSubscription({ type_id: deep.idLocal('@deep-foundation/core', 'Symbol'), to_id: link.id }); - const [typeSymbolLink] = deep.useMinilinksSubscription({ type_id: deep.idLocal('@deep-foundation/core', 'Symbol'), to_id: link.type_id }); - const currentSymbol = currentSymbolLink?.value?.value; - const typeSymbol = typeSymbolLink?.value?.value; - return <> - - {opened && } - ; -}); - -export function CytoEditorNav({ - portalRef -}: { - portalRef?: any; -}) { - const deep = useDeep(); - const [spaceId] = useSpaceId(); - const links = deep.useMinilinksSubscription({ in: { type_id: deep.idLocal('@deep-foundation/core', 'Contain'), from_id: spaceId } }); - const { - tab, - tabs, - setTab, - activeTab, - tabId, - setTabs, - addTab, - closeTab, - } = useEditorTabs(); - - return <> -
- {!!deep.minilinks.byId[spaceId] && - { - await deep.insert({ - type_id: deep.idLocal('@deep-foundation/core', 'Contain'), - string: { data: { value: '' } }, - from_id: spaceId, - to: { data: { type_id: link.id } }, - }); - }} - > - } - /> - - } - - {links.map(l => )} -
- ; -} - export function CytoEditor() { const [cytoEditor, setCytoEditor] = useCytoEditor(); const onClose = useCallback(() => { @@ -355,7 +121,6 @@ export function CytoEditor() { tabId, setTabs, } = useEditorTabs(); - const portalRef = useRef(); const [currentLinkId, setCurrentLinkId] = useState(tab?.id || 0); const { data: [currentLink = deep?.minilinks?.byId[tab?.id]] = [] } = useDeepSubscription({ @@ -417,6 +182,11 @@ export function CytoEditor() { refEditor?.current?.editor?.focus(); }, []); + useEffect(() => { + import('@monaco-editor/react').then(m => { }); + }, []); + + const languages = refEditor.current?.monaco.languages.getLanguages(); const validationTS = refEditor.current?.monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({ noSemanticValidation: true, @@ -425,30 +195,18 @@ export function CytoEditor() { const { colorMode } = useColorMode(); - useEffect(() => { - console.log('AAA MOUNT'); - return () => console.log('AAA UNMOUNT'); - }, []); - useEffect(() => { - console.log('AAA UPDATED'); - }); - return <> - -
+ {[ - , setEditorMounted(true)} /> - {/*
*/} ({ ...tab, + title: `${tab.id} ${deep.minilinks.byId[tab.id]?.inByType?.[deep.idLocal('@deep-foundation/core', 'Contain')]?.[0]?.value?.value || ''}`.trim(), active: tabId === tab.id, }))} setTabs={(tabs) => setTabs(tabs)} diff --git a/imports/cyto/elements.tsx b/imports/cyto/elements.tsx index d01344b0..1fc77b39 100644 --- a/imports/cyto/elements.tsx +++ b/imports/cyto/elements.tsx @@ -210,9 +210,9 @@ export function useCytoElements(ml, _links, cy, spaceId, cyh) { if (link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Contain')]?.[0]?.value?.value) { _type = `type:${link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Contain')]?.[0]?.value?.value}`; } - // if (link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Symbol')]?.[0]?.value?.value) { - _symbol = link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Symbol')]?.[0]?.value?.value || _symbol; - // } + if (link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Symbol')]?.[0]?.value?.value) { + _symbol = link?.type?.inByType?.[deep.idLocal('@deep-foundation/core', 'Symbol')]?.[0]?.value?.value; + } if (!!cy && (!cyh.drawedCytoHandlers.current[link.id] || !cytoHandlers)) { if (((isFocusSpace && showFocus) || !isFocusSpace) && ((isOpenedSpace && showOpened) || !isOpenedSpace)) { if (link.from_id) { diff --git a/imports/cyto/graph.tsx b/imports/cyto/graph.tsx index 39b23662..0d2c33bf 100644 --- a/imports/cyto/graph.tsx +++ b/imports/cyto/graph.tsx @@ -30,7 +30,7 @@ import { CytoReactLayout } from './react'; import { useCytoStylesheets } from './stylesheets'; import { CytoGraphProps } from './types'; -import { useCyInitializer, useCytoEditor } from './hooks'; +import { useCyInitializer } from './hooks'; import { CytoHandlers, useCytoHandlers, useCytoHandlersApply } from '../cyto-handler'; const CytoscapeComponent = dynamic( @@ -129,7 +129,6 @@ export default function CytoGraph({ const { layout, setLayout } = useLayout(); const [ layoutAnimation ] = useLayoutAnimation(); - const [cytoEditor, setCytoEditor] = useCytoEditor(); const returning = (<> @@ -139,7 +138,7 @@ export default function CytoGraph({ cy={cy} gqlPath={gqlPath} gqlSsl={gqlSsl}> - { { if (!cy) onLoaded(_cy); }} @@ -150,7 +149,7 @@ export default function CytoGraph({ pan={cytoViewportRef?.current?.value?.pan} zoom={cytoViewportRef?.current?.value?.zoom} style={ { width: '100%', height: '100vh' } } - />} + /> {!!cy && ; - onSubmit: (link) => void; - onChange?: (link) => void; - children?: any; - PopoverProps?: any; - ClientHandlerProps?: any; - query?: any; - search?: string; - }) { - const deep = useDeep(); - const [selectedLink, setSelectedLink] = useState>(); - const { onOpen, onClose, isOpen } = useDisclosure(); - console.log('FinderPopover') - return - - {children} - - - { - onChange && onChange(l); - setSelectedLink(l); - }} - {...(ClientHandlerProps)} - /> - - } - onClick={async () => { - if (selectedLink) { - onClose && onClose(); - onSubmit && onSubmit(selectedLink); - } - }} - /> - - - ; -}, () => true); - export function CytoReactLinksCardInsertNode({ insertingLink, setInsertingLink, ml, ehRef, returningRef, insertLinkRef, @@ -476,7 +415,6 @@ export function useLinkInserting(elements = [], reactElements = [], focus, cyRef cyRef.current.on('ehcomplete', ehcomplete); cyRef.current.on('tap', tap); return () => { - if (!cyRef.current) return; cyRef.current.removeListener('ehstop', ehstop); cyRef.current.removeListener('ehcomplete', ehcomplete); cyRef.current.removeListener('tap', tap); diff --git a/imports/editor/editor-tabs.tsx b/imports/editor/editor-tabs.tsx index 7e18af06..f58d5c6d 100644 --- a/imports/editor/editor-tabs.tsx +++ b/imports/editor/editor-tabs.tsx @@ -4,7 +4,6 @@ import React, { useState } from 'react'; import { isAndroid, isIOS } from 'react-device-detect'; import { VscChromeClose } from 'react-icons/vsc'; import { useChackraColor } from '../get-color'; -import { useDeep } from '@deep-foundation/deeplinks/imports/client'; interface ITab { id: number; @@ -90,6 +89,7 @@ export const EditorTab = React.memo(({ }:ITabProps) => { const { id, + title, saved = false, loading = false, active = false, @@ -97,15 +97,6 @@ export const EditorTab = React.memo(({ const gray900 = useChackraColor('gray.900'); const white = useChackraColor('white'); const { colorMode } = useColorMode(); - const deep = useDeep(); - - const [currentSymbolLink] = deep.useMinilinksSubscription({ type_id: deep.idLocal('@deep-foundation/core', 'Symbol'), to_id: id || 0 }); - const currentSymbol = currentSymbolLink?.value?.value; - const [typeSymbolLink] = deep.useMinilinksSubscription({ type_id: deep.idLocal('@deep-foundation/core', 'Symbol'), to_id: deep.minilinks.byId[id]?.type_id || 0 }); - const [containLink] = deep.useMinilinksSubscription({ type_id: deep.idLocal('@deep-foundation/core', 'Contain'), to_id: id }); - const typeSymbol = typeSymbolLink?.value?.value; - const symbol = currentSymbol || typeSymbol || ''; - const title = containLink?.value?.value || id; return ((({ // }} > - {symbol ? `${symbol} ` : ''}{title} + {title} {isIOS || isAndroid ? - {tabs.map(t => - - )} - - ) + {tabs.map(t => + + )} + + + ) }) \ No newline at end of file