diff --git a/.npmignore b/.npmignore index 61a51246..97ada497 100644 --- a/.npmignore +++ b/.npmignore @@ -124,4 +124,6 @@ projects/app/electron/app /out /electron/build /electron/Deep.Case* -/electron/node_modules \ No newline at end of file +/electron/node_modules + +docs/ \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index e8daaedb..00000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "workbench.colorCustomizations": { - "activityBar.background": "#541A0D", - "titleBar.activeBackground": "#752512", - "titleBar.activeForeground": "#FEF8F7" - } -} \ No newline at end of file diff --git a/deep.json b/deep.json index 8072b30c..78400c10 100644 --- a/deep.json +++ b/deep.json @@ -1,315 +1,256 @@ { "package": { "name": "@deep-foundation/deepcase", - "version": "0.0.98" + "version": "0.0.109" }, "data": [ { "package": { "dependencyId": 0, - "containValue": "HandleClient" + "containValue": "TSX" }, "id": 1 }, { "package": { - "dependencyId": 0, - "containValue": "Join" + "dependencyId": 1, + "containValue": "Handler" }, "id": 2 }, { "package": { - "dependencyId": 0, - "containValue": "Handler" + "dependencyId": 1, + "containValue": "clientSupportsJs" }, "id": 3 }, { "package": { - "dependencyId": 0, - "containValue": "clientSupportsJs" + "dependencyId": 1, + "containValue": "HandleClient" }, "id": 4 }, { "package": { - "dependencyId": 0, - "containValue": "PackageQuery" + "dependencyId": 1, + "containValue": "AsyncFile" }, "id": 5 }, { "package": { - "dependencyId": 0, - "containValue": "Contain" + "dependencyId": 1, + "containValue": "Type" }, "id": 6 }, { "package": { - "dependencyId": 0, - "containValue": "SyncTextFile" + "dependencyId": 1, + "containValue": "Any" }, "id": 7 }, { "package": { - "dependencyId": 0, + "dependencyId": 1, "containValue": "Query" }, "id": 8 }, { "package": { - "dependencyId": 0, - "containValue": "Type" + "dependencyId": 1, + "containValue": "Symbol" }, "id": 9 }, { "package": { - "dependencyId": 0, - "containValue": "Any" + "dependencyId": 1, + "containValue": "Join" }, "id": 10 }, { "package": { - "dependencyId": 0, - "containValue": "Symbol" + "dependencyId": 1, + "containValue": "PackageQuery" }, "id": 11 }, { "package": { "dependencyId": 1, - "containValue": "TSX" + "containValue": "Contain" }, "id": 12 }, { "package": { - "dependencyId": 0, - "containValue": "GeneratedFrom" + "dependencyId": 1, + "containValue": "SyncTextFile" }, "id": 13 }, { - "package": { - "dependencyId": 0, - "containValue": "AsyncFile" - }, - "id": 14 - }, - { - "id": "stringJoinHandleClient", + "id": "asyncFileClientHandler", "type": 1, - "from": 2, - "to": "stringHandler", "value": { - "value": "" + "value": "({ deep, require }) => {\n const React = require('react');\n const { useState } = require('react');\n const axiosHooks = require(\"axios-hooks\");\n const axios = require(\"axios\");\n const useAxios = axiosHooks.makeUseAxios({ axios: axios.create() });\n\n return ({ fillSize, style, link }) => {\n\n const ssl = deep.apolloClient.ssl;\n const path = deep.apolloClient.path.slice(0, -4);\n const url = `${ssl ? \"https://\" : \"http://\"}${path}/file?linkId=${link.id}`;\n\n const [{ data, loading, error }, refetch] = useAxios({ \n method: 'get',\n url,\n headers: {\n 'Authorization': `Bearer ${deep.token}`\n },\n \n responseType: \"blob\",\n });\n\n const [src, setSrc] = useState(\"test\");\n if (!loading && data) {\n const reader = new window.FileReader();\n reader.onload = () => {\n setSrc(reader.result);\n }\n reader.readAsDataURL(data);\n }\n\n const renderMedia = () => {\n if (src.startsWith('data:image')) {\n return \"An;\n } else if (src.startsWith('data:audio')) {\n return ;\n } else {\n return
Unsupported file type.
;\n }\n } \n\n return renderMedia();\n }\n}\n" } }, { - "id": "stringHandler", - "type": 3, - "from": 4, - "to": "stringClientHandlerGenerated", - "value": { - "value": "" - } + "id": "asyncFileHandler", + "type": 2, + "from": 3, + "to": "asyncFileClientHandler" }, { - "id": "stringPackageQueryHandleClient", - "type": 1, + "id": "asyncFileHandleClient", + "type": 4, "from": 5, - "to": "stringHandler", - "value": { - "value": "" - } + "to": "asyncFileHandler" }, { - "id": "stringContainHandleClient", - "type": 1, - "from": 6, - "to": "stringHandler", - "value": { - "value": "" - } + "id": "Traveler", + "type": 6, + "from": 7, + "to": 8 }, { - "id": "stringClientHandlerGenerated", - "type": 7, + "id": "travelerSymbol", + "type": 9, + "from": "Traveler", + "to": "Traveler", "value": { - "value": "var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\n({ deep, require }) => {\n const React = require('react');\n const { useState, useEffect } = React;\n const json5 = require('json5');\n const { Input, useColorModeValue } = require('@chakra-ui/react');\n const { useHotkeys } = require('react-hotkeys-hook');\n const { useDebounceCallback } = require('@react-hook/debounce');\n const { useContainer } = require('@deep-foundation/deepcase');\n return ({ fillSize, style, link, onClose }) => {\n var _a;\n const currentValue = deep.stringify((_a = link === null || link === void 0 ? void 0 : link.value) === null || _a === void 0 ? void 0 : _a.value) || '';\n const [value, setValue] = useState(currentValue);\n const save = (value) => __awaiter(void 0, void 0, void 0, function* () {\n if (!link.value)\n yield deep.insert({\n link_id: link.id, value: value,\n }, { table: 'strings' });\n deep.update({ link_id: link.id }, { value: value }, { table: 'strings' });\n });\n const ref = useHotkeys('enter', () => __awaiter(void 0, void 0, void 0, function* () {\n yield save(value);\n onClose && onClose();\n }), { enableOnTags: [\"INPUT\"] });\n const setValuesDebounced = useDebounceCallback((value) => __awaiter(void 0, void 0, void 0, function* () { yield save(value); }), 500);\n useEffect(() => {\n setValuesDebounced(value);\n }, [value]);\n const bg = useColorModeValue('#eeeeee', '#434343');\n const hover = useColorModeValue('white', '#1e1e1e');\n const borderColor = useColorModeValue('#434343', '#eeeeee');\n const color = useColorModeValue('#1e1e1e', 'white');\n return React.createElement(\"div\", { style: Object.assign(Object.assign({ width: 300 }, style), { position: 'relative' }) },\n React.createElement(Input, { ref: ref, autoFocus: true, type: \"text\", variant: 'filled', variant: 'filled', bg: bg, color: color, borderWidth: 'thin', borderColor: borderColor, _hover: { bg: hover }, _focus: { bg: bg }, sx: {\n width: '100%',\n }, onChange: (e) => setValue(e.target.value), value: value }));\n };\n};\n//# sourceMappingURL=module.js.map" + "value": "🧳" } }, { - "id": "editorClientHandlerGenerated", - "type": 7, - "value": { - "value": "({ deep, require }) => {\n const React = require('react');\n const { useState } = React;\n const json5 = require('json5');\n const { useContainer, CytoEditorPreview } = require('@deep-foundation/deepcase');\n const { Box, SimpleGrid } = require('@chakra-ui/react');\n return ({ fillSize, style, link }) => {\n var _a;\n const currentValue = deep.stringify((_a = link === null || link === void 0 ? void 0 : link.value) === null || _a === void 0 ? void 0 : _a.value) || '';\n const [value, setValue] = useState(currentValue);\n const isSaved = value == currentValue;\n const [container] = useContainer();\n const { data } = deep.useDeepSubscription({\n type_id: { _in: [\n deep.idLocal('@deep-foundation/core', 'Active'),\n deep.idLocal('@deep-foundation/core', 'Contain'),\n ] },\n to_id: { _eq: link.id },\n });\n const contain = data === null || data === void 0 ? void 0 : data.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Contain'));\n const active = data === null || data === void 0 ? void 0 : data.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Active'));\n return React.createElement(\"div\", { style: Object.assign(Object.assign({ width: 600, height: 600 }, style), { position: 'relative' }) },\n React.createElement(CytoEditorPreview, { link: link, compact: true }));\n };\n};\n//# sourceMappingURL=module.js.map" - } + "id": "ContextToken", + "type": 6 }, { - "id": "editorHandler", - "type": 3, - "from": 4, - "to": "editorClientHandlerGenerated", - "value": { - "value": "" - } + "id": "Context", + "type": 6, + "from": "ContextToken", + "to": 2 }, { - "id": "editorHandleClientTSX", + "id": "stringClientHandler", "type": 1, - "from": 7, - "to": "editorHandler", "value": { - "value": "" + "value": "({ deep, require }) => {\n const React = require('react');\n const { useState, useEffect } = React;\n const json5 = require('json5');\n const { Input, useColorModeValue } = require('@chakra-ui/react');\n const { useHotkeys } = require('react-hotkeys-hook');\n const { useDebounceCallback } = require('@react-hook/debounce');\n const { useContainer } = require('@deep-foundation/deepcase');\n // Only string editor.\n return ({ fillSize, style, link, onClose }) => {\n \n \n const currentValue = deep.stringify(link?.value?.value) || '';\n const [value, setValue] = useState(currentValue);\n const save = async (value) => {\n if (!link.value) await deep.insert({\n link_id: link.id, value: value,\n }, { table: 'strings' });\n deep.update({ link_id: link.id }, { value: value }, { table: 'strings' });\n \n };\n const ref = useHotkeys('enter', async () => {\n await save(value);\n onClose && onClose();\n }, { enableOnTags: [\"INPUT\"] });\n \n const setValuesDebounced = useDebounceCallback(async(value) => {await save(value)}, 500);\n\n useEffect(() => {\n setValuesDebounced(value);\n }, [value])\n\n const bg = useColorModeValue('#eeeeee', '#434343');\n const hover = useColorModeValue('white', '#1e1e1e');\n const borderColor = useColorModeValue('#434343', '#eeeeee');\n const color = useColorModeValue('#1e1e1e', 'white');\n\n return \n setValue(e.target.value)}\n value={value}\n />\n ;\n }\n }" } }, { - "id": "queryClientHandlerGenerated", - "type": 7, + "id": "stringHandler", + "type": 2, + "from": 3, + "to": "stringClientHandler", "value": { - "value": "var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\n({ deep, require }) => {\n const React = require('react');\n const { useState, useEffect } = React;\n const json5 = require('json5');\n const { useContainer, Resize, CustomizableIcon } = require('@deep-foundation/deepcase');\n const MonacoEditor = require('@monaco-editor/react');\n const { Box, IconButton, useColorModeValue, useColorMode } = require('@chakra-ui/react');\n const { BsCheck2, BsLightbulbFill, BsLightbulbOff } = require('react-icons/bs');\n const { motion, useAnimation } = require('framer-motion');\n const variants = {\n view: {\n opacity: 1,\n scale: 1,\n transition: {\n duration: 1,\n delay: 0.3,\n scale: { delay: 0.5, }\n }\n },\n hide: {\n opacity: 0,\n scale: 0,\n transition: {\n type: 'spring'\n }\n },\n initial: {\n originX: 1,\n opacity: 1,\n scale: 1,\n }\n };\n const stackVariants = {\n outside: {\n x: '0%',\n opacity: 1,\n scale: 1,\n originX: 0,\n transition: {\n type: 'spring',\n duration: 0.5,\n delay: 0.2,\n scale: { delay: 0.3, }\n }\n },\n nested: {\n x: '-100%',\n opacity: 1,\n scale: 1,\n originX: 1,\n transition: {\n type: 'spring',\n duration: 0.5,\n delay: 0.2,\n scale: { delay: 0.3, }\n }\n },\n initial: {\n x: '0%',\n opacity: 0,\n scale: 0,\n }\n };\n return ({ fillSize, style, link }) => {\n var _a;\n const currentValue = deep.stringify((_a = link === null || link === void 0 ? void 0 : link.value) === null || _a === void 0 ? void 0 : _a.value) || '';\n const [value, setValue] = useState(currentValue);\n const isSaved = value == currentValue;\n const [container] = useContainer();\n const { data } = deep.useDeepSubscription({\n type_id: { _in: [\n deep.idLocal('@deep-foundation/core', 'Active'),\n deep.idLocal('@deep-foundation/core', 'Contain'),\n ] },\n to_id: { _eq: link.id },\n });\n const contain = data === null || data === void 0 ? void 0 : data.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Contain'));\n const active = data === null || data === void 0 ? void 0 : data.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Active'));\n const [viewSize, setViewSize] = useState({ width: 300, height: 300 });\n const terminalBorderWidth = viewSize.width - 1;\n const terminalBorderHeight = viewSize.height - 1;\n const control = useAnimation();\n const controlStack = useAnimation();\n useEffect(() => {\n if (value) {\n control.start('view');\n }\n else {\n control.start('hide');\n }\n ;\n if (fillSize === true) {\n controlStack.start('nested');\n }\n else {\n controlStack.start('outside');\n }\n ;\n }, [control, controlStack, value, fillSize]);\n const { colorMode } = useColorMode();\n const body = React.createElement(\"div\", { style: Object.assign(Object.assign({ width: viewSize.width, height: viewSize.height }, style), { position: 'relative' }) },\n React.createElement(Box, { position: 'relative', display: 'grid', gridTemplateColumns: '1fr max-content', height: 'inherit' },\n React.createElement(Box, { position: 'relative', overflow: 'hidden', sx: { borderRadius: 5 }, border: '1px dashed #605c60' },\n React.createElement(MonacoEditor, { options: {\n minimap: {\n enabled: false\n },\n lineNumbers: 'off',\n wordWrap: true,\n }, height: \"100%\", width: \"100%\", theme: colorMode === 'light' ? 'light' : \"vs-dark\", defaultLanguage: \"json\", defaultValue: value || '', onChange: (value) => setValue(value) })),\n React.createElement(Box, { as: motion.div, animate: controlStack, variants: stackVariants, initial: 'initial', height: fillSize ? '100%' : viewSize.height, display: 'flex', justifyContent: 'space-between', flexDirection: 'column', ml: fillSize ? 0 : '0.2rem' },\n React.createElement(IconButton, { as: motion.div, variants: variants, initial: 'initial', animate: 'view', \"aria-label\": 'activate/inactivate button', bg: active && colorMode === 'dark' ? 'gray.700' : 'blue.50', _hover: {\n bg: 'blue.100'\n }, isRound: true, variant: 'outline', sx: { borderColor: active ? '#111' : 'rgb(0, 128, 255)' }, mr: fillSize ? '0.2rem' : 0, mt: fillSize ? '0.2rem' : 0, size: 'xs', onClick: () => __awaiter(void 0, void 0, void 0, function* () {\n if (active) {\n yield deep.delete({\n _or: [{\n id: { _eq: active === null || active === void 0 ? void 0 : active.id },\n }, {\n type_id: deep.idLocal('@deep-foundation/core', 'Contain'),\n from_id: link.id,\n to_id: active.id,\n }],\n });\n }\n else {\n yield deep.insert({\n type_id: deep.idLocal('@deep-foundation/core', 'Active'),\n from_id: contain.from_id,\n to_id: contain.to_id,\n in: { data: {\n type_id: deep.idLocal('@deep-foundation/core', 'Contain'),\n from_id: link.id,\n } },\n });\n }\n }), icon: active ? React.createElement(BsLightbulbOff, null) : React.createElement(CustomizableIcon, { Component: BsLightbulbFill, value: { color: 'rgb(0, 128, 255)' } }) }),\n React.createElement(IconButton, { as: motion.div, variants: variants, initial: 'initial', animate: control, whileInView: 'view', \"aria-label\": 'save button', isRound: true, bg: 'blue.50', _hover: {\n bg: 'blue.100'\n }, variant: 'outline', sx: { borderColor: 'rgb(0, 128, 255)' }, mr: fillSize ? '0.2rem' : 0, mb: fillSize ? '0.2rem' : 0, size: 'xs', icon: React.createElement(CustomizableIcon, { Component: BsCheck2, value: { color: 'rgb(0, 128, 255)' } }), onClick: () => {\n try {\n const _value = json5.parse(value);\n if (!link.value)\n deep.insert({\n link_id: link.id, value: _value,\n }, { table: 'objects' });\n deep.update({ link_id: link.id }, { value: _value }, { table: 'objects' });\n }\n catch (error) { }\n } }))));\n return React.createElement(React.Fragment, null, fillSize\n ? body\n : React.createElement(Resize, { onChangeSize: (viewSize) => setViewSize(viewSize), style: {\n borderRadius: 5,\n border: 'none',\n } }, body));\n };\n};\n//# sourceMappingURL=module.js.map" + "value": "" } }, { - "id": "queryHandler", - "type": 3, - "from": 4, - "to": "queryClientHandlerGenerated", + "id": "stringJoinHandleClient", + "type": 4, + "from": 10, + "to": "stringHandler", "value": { "value": "" } }, { - "id": "queryHandleClient", - "type": 1, - "from": 8, - "to": "queryHandler", + "id": "stringPackageQueryHandleClient", + "type": 4, + "from": 11, + "to": "stringHandler", "value": { "value": "" } }, { - "id": "Traveler", - "type": 9, - "from": 10, - "to": 8 - }, - { - "id": "travelerSymbol", - "type": 11, - "from": "Traveler", - "to": "Traveler", + "id": "stringContainHandleClient", + "type": 4, + "from": 12, + "to": "stringHandler", "value": { - "value": "🧳" + "value": "" } }, { - "id": "stringClientHandler", - "type": 12, + "id": "queryClientHandler", + "type": 1, "value": { - "value": "({ deep, require }) => {\n const React = require('react');\n const { useState, useEffect } = React;\n const json5 = require('json5');\n const { Input, useColorModeValue } = require('@chakra-ui/react');\n const { useHotkeys } = require('react-hotkeys-hook');\n const { useDebounceCallback } = require('@react-hook/debounce');\n const { useContainer } = require('@deep-foundation/deepcase');\n // Only string editor.\n return ({ fillSize, style, link, onClose }) => {\n \n \n const currentValue = deep.stringify(link?.value?.value) || '';\n const [value, setValue] = useState(currentValue);\n const save = async (value) => {\n if (!link.value) await deep.insert({\n link_id: link.id, value: value,\n }, { table: 'strings' });\n deep.update({ link_id: link.id }, { value: value }, { table: 'strings' });\n \n };\n const ref = useHotkeys('enter', async () => {\n await save(value);\n onClose && onClose();\n }, { enableOnTags: [\"INPUT\"] });\n \n const setValuesDebounced = useDebounceCallback(async(value) => {await save(value)}, 500);\n\n useEffect(() => {\n setValuesDebounced(value);\n }, [value])\n\n const bg = useColorModeValue('#eeeeee', '#434343');\n const hover = useColorModeValue('white', '#1e1e1e');\n const borderColor = useColorModeValue('#434343', '#eeeeee');\n const color = useColorModeValue('#1e1e1e', 'white');\n\n return \n setValue(e.target.value)}\n value={value}\n />\n ;\n }\n }" + "value": "({ deep, require }) => {\n const React = require('react');\n const { useState, useEffect } = React;\n const json5 = require('json5');\n const { useContainer, Resize, CustomizableIcon } = require('@deep-foundation/deepcase');\n const MonacoEditor = require('@monaco-editor/react');\n const { Box, IconButton, useColorModeValue, useColorMode } = require('@chakra-ui/react');\n const { BsCheck2, BsLightbulbFill, BsLightbulbOff } = require('react-icons/bs');\n const { motion, useAnimation } = require('framer-motion');\n\n const variants = {\n view: {\n opacity: 1,\n scale: 1,\n transition: {\n duration: 1,\n delay: 0.3,\n scale: { delay: 0.5, } \n }\n },\n hide: {\n opacity: 0, \n scale: 0,\n transition: {\n type: 'spring'\n }\n },\n initial: {\n originX: 1,\n opacity: 1,\n scale: 1,\n }\n };\n \n const stackVariants = {\n outside: {\n x: '0%',\n opacity: 1,\n scale: 1,\n originX: 0,\n transition: {\n type: 'spring',\n\n duration: 0.5,\n delay: 0.2,\n scale: { delay: 0.3, }\n }\n },\n nested: {\n x: '-100%',\n opacity: 1,\n scale: 1,\n originX: 1,\n transition: {\n type: 'spring',\n duration: 0.5,\n delay: 0.2,\n scale: { delay: 0.3, }\n }\n },\n initial: {\n x: '0%',\n opacity: 0,\n scale: 0,\n }\n };\n \n // Only objects editor.\n return ({ fillSize, style, link }) => {\n const currentValue = deep.stringify(link?.value?.value) || '';\n const [value, setValue] = useState(currentValue);\n const isSaved = value == currentValue;\n const [container] = useContainer();\n const { data } = deep.useDeepSubscription({\n type_id: { _in: [\n deep.idLocal('@deep-foundation/core', 'Active'),\n deep.idLocal('@deep-foundation/core', 'Contain'),\n ] },\n to_id: { _eq: link.id },\n });\n const contain = data?.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Contain'))\n const active = data?.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Active'))\n\n const [viewSize, setViewSize] = useState({width: 300, height: 300});\n const terminalBorderWidth = viewSize.width - 1;\n const terminalBorderHeight = viewSize.height - 1;\n\n const control = useAnimation();\n const controlStack = useAnimation();\n\n useEffect(() => {\n if (value) {\n control.start('view')\n } else {\n control.start('hide')\n };\n if (fillSize === true) {\n controlStack.start('nested')\n } else {\n // controlStack.start('initial')\n controlStack.start('outside')\n };\n\n }, [control, controlStack, value, fillSize])\n\n const { colorMode } = useColorMode();\n\n const body = \n \n \n setValue(value)}\n // onMount={handleEditorDidMount}\n />\n \n \n {\n if (active) {\n await deep.delete({\n _or: [{\n id: { _eq: active?.id },\n }, {\n type_id: deep.idLocal('@deep-foundation/core', 'Contain'),\n from_id: link.id,\n to_id: active.id,\n }],\n });\n } else {\n await deep.insert({\n type_id: deep.idLocal('@deep-foundation/core', 'Active'),\n from_id: contain.from_id,\n to_id: contain.to_id,\n in: { data: {\n type_id: deep.idLocal('@deep-foundation/core', 'Contain'),\n from_id: link.id,\n } },\n });\n }\n }}\n icon={active ? : }\n />\n }\n onClick={() => {\n try {\n const _value = json5.parse(value);\n if (!link.value) deep.insert({\n link_id: link.id, value: _value,\n }, { table: 'objects' });\n deep.update({ link_id: link.id }, { value: _value }, { table: 'objects' });\n } catch(error) {}\n }}\n />\n \n \n ;\n\n return <>\n {fillSize \n ? body \n : setViewSize(viewSize)} \n style={{\n // position: 'relative',\n // overflow: nested ? 'hidden' : 'inherit',\n borderRadius: 5,\n border: 'none',\n }}\n >{body}}\n ;\n }\n }\n" } }, { - "id": "stringClientHandlerGeneratedFrom", - "type": 13, - "from": "stringClientHandlerGenerated", - "to": "stringClientHandler" - }, - { - "id": "editorHandleClientSyncTextFile", - "type": 1, - "from": 12, - "to": "editorHandler", + "id": "queryHandler", + "type": 2, + "from": 3, + "to": "queryClientHandler", "value": { "value": "" } }, { - "id": "queryClientHandler", - "type": 12, + "id": "queryHandleClient", + "type": 4, + "from": 8, + "to": "queryHandler", "value": { - "value": "({ deep, require }) => {\n const React = require('react');\n const { useState, useEffect } = React;\n const json5 = require('json5');\n const { useContainer, Resize, CustomizableIcon } = require('@deep-foundation/deepcase');\n const MonacoEditor = require('@monaco-editor/react');\n const { Box, IconButton, useColorModeValue, useColorMode } = require('@chakra-ui/react');\n const { BsCheck2, BsLightbulbFill, BsLightbulbOff } = require('react-icons/bs');\n const { motion, useAnimation } = require('framer-motion');\n\n const variants = {\n view: {\n opacity: 1,\n scale: 1,\n transition: {\n duration: 1,\n delay: 0.3,\n scale: { delay: 0.5, } \n }\n },\n hide: {\n opacity: 0, \n scale: 0,\n transition: {\n type: 'spring'\n }\n },\n initial: {\n originX: 1,\n opacity: 1,\n scale: 1,\n }\n };\n \n const stackVariants = {\n outside: {\n x: '0%',\n opacity: 1,\n scale: 1,\n originX: 0,\n transition: {\n type: 'spring',\n\n duration: 0.5,\n delay: 0.2,\n scale: { delay: 0.3, }\n }\n },\n nested: {\n x: '-100%',\n opacity: 1,\n scale: 1,\n originX: 1,\n transition: {\n type: 'spring',\n duration: 0.5,\n delay: 0.2,\n scale: { delay: 0.3, }\n }\n },\n initial: {\n x: '0%',\n opacity: 0,\n scale: 0,\n }\n };\n \n // Only objects editor.\n return ({ fillSize, style, link }) => {\n const currentValue = deep.stringify(link?.value?.value) || '';\n const [value, setValue] = useState(currentValue);\n const isSaved = value == currentValue;\n const [container] = useContainer();\n const { data } = deep.useDeepSubscription({\n type_id: { _in: [\n deep.idLocal('@deep-foundation/core', 'Active'),\n deep.idLocal('@deep-foundation/core', 'Contain'),\n ] },\n to_id: { _eq: link.id },\n });\n const contain = data?.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Contain'))\n const active = data?.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Active'))\n\n const [viewSize, setViewSize] = useState({width: 300, height: 300});\n const terminalBorderWidth = viewSize.width - 1;\n const terminalBorderHeight = viewSize.height - 1;\n\n const control = useAnimation();\n const controlStack = useAnimation();\n\n useEffect(() => {\n if (value) {\n control.start('view')\n } else {\n control.start('hide')\n };\n if (fillSize === true) {\n controlStack.start('nested')\n } else {\n // controlStack.start('initial')\n controlStack.start('outside')\n };\n\n }, [control, controlStack, value, fillSize])\n\n const { colorMode } = useColorMode();\n\n const body = \n \n \n setValue(value)}\n // onMount={handleEditorDidMount}\n />\n \n \n {\n if (active) {\n await deep.delete({\n _or: [{\n id: { _eq: active?.id },\n }, {\n type_id: deep.idLocal('@deep-foundation/core', 'Contain'),\n from_id: link.id,\n to_id: active.id,\n }],\n });\n } else {\n await deep.insert({\n type_id: deep.idLocal('@deep-foundation/core', 'Active'),\n from_id: contain.from_id,\n to_id: contain.to_id,\n in: { data: {\n type_id: deep.idLocal('@deep-foundation/core', 'Contain'),\n from_id: link.id,\n } },\n });\n }\n }}\n icon={active ? : }\n />\n }\n onClick={() => {\n try {\n const _value = json5.parse(value);\n if (!link.value) deep.insert({\n link_id: link.id, value: _value,\n }, { table: 'objects' });\n deep.update({ link_id: link.id }, { value: _value }, { table: 'objects' });\n } catch(error) {}\n }}\n />\n \n \n ;\n\n return <>\n {fillSize \n ? body \n : setViewSize(viewSize)} \n style={{\n // position: 'relative',\n // overflow: nested ? 'hidden' : 'inherit',\n borderRadius: 5,\n border: 'none',\n }}\n >{body}}\n ;\n }\n }\n" + "value": "" } }, - { - "id": "queryClientHandlerGeneratedFrom", - "type": 13, - "from": "queryClientHandlerGenerated", - "to": "queryClientHandler" - }, { "id": "editorClientHandler", - "type": 12, + "type": 1, "value": { "value": "({ deep, require }) => {\n const React = require('react');\n const { useState } = React;\n const json5 = require('json5');\n const { useContainer, CytoEditorPreview } = require('@deep-foundation/deepcase');\n const { Box, SimpleGrid } = require('@chakra-ui/react');\n // Only objects editor.\n return ({ fillSize, style, link }) => {\n const currentValue = deep.stringify(link?.value?.value) || '';\n const [value, setValue] = useState(currentValue);\n const isSaved = value == currentValue;\n const [container] = useContainer();\n const { data } = deep.useDeepSubscription({\n type_id: { _in: [\n deep.idLocal('@deep-foundation/core', 'Active'),\n deep.idLocal('@deep-foundation/core', 'Contain'),\n ] },\n to_id: { _eq: link.id },\n });\n const contain = data?.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Contain'))\n const active = data?.find(l => l.type_id === deep.idLocal('@deep-foundation/core', 'Active'))\n return \n \n ;\n }\n}" } }, { - "id": "editorClientHandlerGeneratedFrom", - "type": 13, - "from": "editorClientHandlerGenerated", - "to": "editorClientHandler" - }, - { - "id": "asyncFileClientHandler", - "type": 12, + "id": "editorHandler", + "type": 2, + "from": 3, + "to": "editorClientHandler", "value": { - "value": "({ deep, require }) => {\n const React = require('react');\n const { useState } = require('react');\n const axiosHooks = require(\"axios-hooks\");\n const axios = require(\"axios\");\n const useAxios = axiosHooks.makeUseAxios({ axios: axios.create() });\n\n return ({ fillSize, style, link }) => {\n\n const ssl = deep.apolloClient.ssl;\n const path = deep.apolloClient.path.slice(0, -4);\n const url = `${ssl ? \"https://\" : \"http://\"}${path}/file?linkId=${link.id}`;\n\n const [{ data, loading, error }, refetch] = useAxios({ \n method: 'get',\n url,\n headers: {\n 'Authorization': `Bearer ${deep.token}`\n },\n \n responseType: \"blob\",\n });\n\n const [src, setSrc] = useState(\"test\");\n if (!loading && data) {\n const reader = new window.FileReader();\n reader.onload = () => {\n setSrc(reader.result);\n }\n reader.readAsDataURL(data);\n }\n\n const renderMedia = () => {\n if (src.startsWith('data:image')) {\n return \"An;\n } else if (src.startsWith('data:audio')) {\n return ;\n } else {\n return
Unsupported file type.
;\n }\n } \n\n return renderMedia();\n }\n}\n" + "value": "" } }, { - "id": "ContextToken", - "type": 9 - }, - { - "id": "Context", - "type": 9, - "from": "ContextToken", - "to": 3 - }, - { - "id": "asyncFileHandleClient", - "type": 1, - "from": 14, - "to": "asyncFileHandler" - }, - { - "id": "asyncFileClientHandlerGenerated", - "type": 7, + "id": "editorHandleClientTSX", + "type": 4, + "from": 13, + "to": "editorHandler", "value": { - "value": "({ deep, require }) => {\n const React = require('react');\n const { useState } = require('react');\n const axiosHooks = require(\"axios-hooks\");\n const axios = require(\"axios\");\n const useAxios = axiosHooks.makeUseAxios({ axios: axios.create() });\n return ({ fillSize, style, link }) => {\n const ssl = deep.apolloClient.ssl;\n const path = deep.apolloClient.path.slice(0, -4);\n const url = `${ssl ? \"https://\" : \"http://\"}${path}/file?linkId=${link.id}`;\n const [{ data, loading, error }, refetch] = useAxios({\n method: 'get',\n url,\n headers: {\n 'Authorization': `Bearer ${deep.token}`\n },\n responseType: \"blob\",\n });\n const [src, setSrc] = useState(\"test\");\n if (!loading && data) {\n const reader = new window.FileReader();\n reader.onload = () => {\n setSrc(reader.result);\n };\n reader.readAsDataURL(data);\n }\n const renderMedia = () => {\n if (src.startsWith('data:image')) {\n return React.createElement(\"img\", { src: src, alt: \"An image from Deep file storage.\", style: style });\n }\n else if (src.startsWith('data:audio')) {\n return React.createElement(\"audio\", { src: src, controls: true, style: style }, \"Your browser does not support the audio element.\");\n }\n else {\n return React.createElement(\"div\", null, \"Unsupported file type.\");\n }\n };\n return renderMedia();\n };\n};\n//# sourceMappingURL=module.js.map" + "value": "" } }, { - "id": "asyncFileClientHandlerGeneratedFrom", - "type": 13, - "from": "asyncFileClientHandlerGenerated", - "to": "asyncFileClientHandler" - }, - { - "id": "asyncFileHandler", - "type": 3, - "from": 4, - "to": "asyncFileClientHandlerGenerated" + "id": "editorHandleClientSyncTextFile", + "type": 4, + "from": 1, + "to": "editorHandler", + "value": { + "value": "" + } } ], "errors": [], "dependencies": [ { - "name": "@deep-foundation/core", - "version": "0.0.2" + "name": "@deep-foundation/tsx", + "version": "0.0.5" }, { - "name": "@deep-foundation/tsx", - "version": "0.0.3" + "name": "@deep-foundation/core", + "version": "0.0.2" } ] } \ No newline at end of file diff --git a/imports/aframe/aframe-graph.tsx b/imports/aframe/aframe-graph.tsx index 6c1ed000..a55353e3 100644 --- a/imports/aframe/aframe-graph.tsx +++ b/imports/aframe/aframe-graph.tsx @@ -1,257 +1,257 @@ -import * as THREE from "three"; -import { useState, useRef, useEffect, useMemo } from "react"; -import { Entity, Scene } from "aframe-react"; -import { generateLabel } from "./generate-label"; -import { getColorFromId } from "./get-color-from-id"; -import { getGraphData } from "./get-graph-data"; -import { useNodeDragger } from "./hooks/use-node-dragger"; -import { useSpaceId } from "../hooks"; +// import * as THREE from "three"; +// import { useState, useRef, useEffect, useMemo } from "react"; +// import { Entity, Scene } from "aframe-react"; +// import { generateLabel } from "./generate-label"; +// import { getColorFromId } from "./get-color-from-id"; +// import { getGraphData } from "./get-graph-data"; +// import { useNodeDragger } from "./hooks/use-node-dragger"; +// import { useSpaceId } from "../hooks"; -export const AframeGraph = ({ deep, links }) => { - const [spaceId, setSpaceId] = useSpaceId(); +// export const AframeGraph = ({ deep, links }) => { +// const [spaceId, setSpaceId] = useSpaceId(); - const handleNodeHover = (node) => { - if (node) { - // console.log({ node }); - // var sceneEl = document.querySelector('a-scene'); - // console.log(sceneEl.querySelector(`#${node.id}`)); - // const sphereGeometry = new THREE.SphereGeometry(0.1, 16, 16); - // const sphereMaterial = new THREE.MeshStandardMaterial({ - // color: getColorFromId(node.type_id), - // emissive: getColorFromId(node.type_id), - // emissiveIntensity: 2 - // }); - // let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); - // // const acene = document.querySelector("[camera]").object3D; - // const scene = document.getElementById("scene"); - // const hoverednode = document.getElementById(`${node.index}`); - // console.log(hoverednode); +// const handleNodeHover = (node) => { +// if (node) { +// // console.log({ node }); +// // var sceneEl = document.querySelector('a-scene'); +// // console.log(sceneEl.querySelector(`#${node.id}`)); +// // const sphereGeometry = new THREE.SphereGeometry(0.1, 16, 16); +// // const sphereMaterial = new THREE.MeshStandardMaterial({ +// // color: getColorFromId(node.type_id), +// // emissive: getColorFromId(node.type_id), +// // emissiveIntensity: 2 +// // }); +// // let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); +// // // const acene = document.querySelector("[camera]").object3D; +// // const scene = document.getElementById("scene"); +// // const hoverednode = document.getElementById(`${node.index}`); +// // console.log(hoverednode); - // // @ts-ignore - // scene.object3D.add(sphere) - // sphere.position.set(node.vx, node.vy, node.vz) - // console.log({scene}) +// // // @ts-ignore +// // scene.object3D.add(sphere) +// // sphere.position.set(node.vx, node.vy, node.vz) +// // console.log({scene}) - } - } - const { initialize } = useNodeDragger(); +// } +// } +// const { initialize } = useNodeDragger(); - const graphData = useMemo(() => { - return getGraphData(deep, links, spaceId); - }, [links]) +// const graphData = useMemo(() => { +// return getGraphData(deep, links, spaceId); +// }, [links]) - return ( - <> - - - {/* */} - {/* - */} - - { - // initialize(); - // } - // }} - > - - - {/* { - // create a group - const group = new THREE.Group(); +// return ( +// <> +// +// +// {/* */} +// {/* +// */} +// +// { +// // initialize(); +// // } +// // }} +// > +// +// +// {/* { +// // create a group +// const group = new THREE.Group(); - // Create two labels for over and under the sphere - let yDistance = 6; // Adjust this to change the y relative distance of the labels - let overLabel = generateLabel(node.id, "red"); - overLabel.position.set(0, yDistance, 0); +// // Create two labels for over and under the sphere +// let yDistance = 6; // Adjust this to change the y relative distance of the labels +// let overLabel = generateLabel(node.id, "red"); +// overLabel.position.set(0, yDistance, 0); - group.add(overLabel); +// group.add(overLabel); - let underLabel = generateLabel(node.type_id, "blue"); - underLabel.position.set(0, -yDistance, 0); +// let underLabel = generateLabel(node.type_id, "blue"); +// underLabel.position.set(0, -yDistance, 0); - group.add(underLabel); +// group.add(underLabel); - return group; - } - }} - /> */} - node.type_id === 55 ? false : true, - linkWidth: 0.4, - linkDirectionalArrowLength: 4, - linkDirectionalArrowRelPos: 1, - nodeResolution: 16, - nodeColor: (node) => getColorFromId(node.type_id), - nodeOpacity: 1, - nodeThreeObjectExtend: true, - nodeThreeObject: (node) => { - const group = new THREE.Group(); +// return group; +// } +// }} +// /> */} +// node.type_id === 55 ? false : true, +// linkWidth: 0.4, +// linkDirectionalArrowLength: 4, +// linkDirectionalArrowRelPos: 1, +// nodeResolution: 16, +// nodeColor: (node) => getColorFromId(node.type_id), +// nodeOpacity: 1, +// nodeThreeObjectExtend: true, +// nodeThreeObject: (node) => { +// const group = new THREE.Group(); - let nodeid = generateLabel(node.id, getColorFromId(node.type_id)); - nodeid.position.set(0, 10, 0); - group.add(nodeid); +// let nodeid = generateLabel(node.id, getColorFromId(node.type_id)); +// nodeid.position.set(0, 10, 0); +// group.add(nodeid); - if (node.type) { - let nodetype = generateLabel(node.type, getColorFromId(node.type_id)); - nodetype.position.set(0, 6, 0); - group.add(nodetype); - } +// if (node.type) { +// let nodetype = generateLabel(node.type, getColorFromId(node.type_id)); +// nodetype.position.set(0, 6, 0); +// group.add(nodetype); +// } - if (node.name) { - let nodename = generateLabel(node.name, getColorFromId(node.type_id)); - nodename.position.set(0, -6, 0); - group.add(nodename); - } +// if (node.name) { +// let nodename = generateLabel(node.name, getColorFromId(node.type_id)); +// nodename.position.set(0, -6, 0); +// group.add(nodename); +// } - const radius = 3; // Half the radius to make sphere smaller - const sphereGeometry = new THREE.SphereGeometry(radius, 16, 16); - const sphereMaterial = new THREE.MeshStandardMaterial({ - color: getColorFromId(node.type_id), - emissive: getColorFromId(node.type_id), - emissiveIntensity: 2 - }); - let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); - group.add(sphere); +// const radius = 3; // Half the radius to make sphere smaller +// const sphereGeometry = new THREE.SphereGeometry(radius, 16, 16); +// const sphereMaterial = new THREE.MeshStandardMaterial({ +// color: getColorFromId(node.type_id), +// emissive: getColorFromId(node.type_id), +// emissiveIntensity: 2 +// }); +// let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); +// group.add(sphere); - // const camera = document.querySelector("[camera]").object3D; - // // create an AudioListener and add it to the camera - // const listener = new THREE.AudioListener(); - // camera.add(listener); +// // const camera = document.querySelector("[camera]").object3D; +// // // create an AudioListener and add it to the camera +// // const listener = new THREE.AudioListener(); +// // camera.add(listener); - // create the PositionalAudio object (passing in the listener) - // const sound = new THREE.PositionalAudio(listener); +// // create the PositionalAudio object (passing in the listener) +// // const sound = new THREE.PositionalAudio(listener); - // // load a sound and set it as the PositionalAudio object's buffer - // const audioLoader = new THREE.AudioLoader(); - // audioLoader.load(thq, function (buffer) { - // sound.setBuffer(buffer); - // sound.setRefDistance(10); - // sound.setVolume(0.1); - // sound.play(); - // }); - // group.add(sound); - return group; - }, - onNodeHover: handleNodeHover, - // onNodeHover: () => { - // const sphereGeometry = new THREE.SphereGeometry(6, 16, 16); - // const sphereMaterial = new THREE.MeshStandardMaterial({ - // color: getColorFromId(node.type_id), - // emissive: getColorFromId(node.type_id), - // emissiveIntensity: 2 - // }); - // let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); - // sphere.position.set(node.x, node.y, node.z) - // } - }} - /> - - {/* */} - {/* */} - {/* - - */} - - - ); -} +// // // load a sound and set it as the PositionalAudio object's buffer +// // const audioLoader = new THREE.AudioLoader(); +// // audioLoader.load(thq, function (buffer) { +// // sound.setBuffer(buffer); +// // sound.setRefDistance(10); +// // sound.setVolume(0.1); +// // sound.play(); +// // }); +// // group.add(sound); +// return group; +// }, +// onNodeHover: handleNodeHover, +// // onNodeHover: () => { +// // const sphereGeometry = new THREE.SphereGeometry(6, 16, 16); +// // const sphereMaterial = new THREE.MeshStandardMaterial({ +// // color: getColorFromId(node.type_id), +// // emissive: getColorFromId(node.type_id), +// // emissiveIntensity: 2 +// // }); +// // let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); +// // sphere.position.set(node.x, node.y, node.z) +// // } +// }} +// /> +// +// {/* */} +// {/* */} +// {/* +// +// */} +// +// +// ); +// } diff --git a/imports/analitics.tsx b/imports/analitics.tsx index 1b26acc9..65567966 100644 --- a/imports/analitics.tsx +++ b/imports/analitics.tsx @@ -36,7 +36,7 @@ const RouterAnalytics = () => { return null; }; -export const Analitics = React.memo(({ +export const Analitics = React.memo(({ yandexMetrikaAccounts = [], googleAnalyticsAccounts = [], context = AnalyticsContext, diff --git a/imports/client-handler.tsx b/imports/client-handler.tsx index 7150edaa..2f4b5169 100644 --- a/imports/client-handler.tsx +++ b/imports/client-handler.tsx @@ -38,8 +38,8 @@ import * as rjsfCore from '@rjsf/core'; import * as rjsfChakra from '@rjsf/chakra-ui'; import * as rjsfValidator from '@rjsf/validator-ajv8'; // @ts-ignore -import * as aframeReact from '@belivvr/aframe-react'; -import { Entity, Scene } from 'aframe-react'; +// import * as aframeReact from '@belivvr/aframe-react'; +// import { Entity, Scene } from 'aframe-react'; import { CatchErrors } from './react-errors'; import _ from 'lodash'; import md5 from "md5"; @@ -55,9 +55,19 @@ import * as recharts from 'recharts'; 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 './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 }); export const ClientHandler = React.memo(function ClientHandler(_props: ClientHandlerProps) { + const log = packageLog.extend(ClientHandler.name); + log({_props}) const { linkId, handlerId, @@ -71,10 +81,13 @@ export const ClientHandler = React.memo(function ClientHandler(_props: ClientHan const deep = useDeep(); const _ml = ml || deep?.minilinks; const hid = useFindClientHandler(_props); + log({hid}) const { data: files } = useDeepSubscription({ id: hid?.dist_id || 0, }); + log({files}) const file = files?.[0]; + log({file}) const [{ Component, errored } = {} as any, setState] = React.useState({ Component: undefined, errored: undefined }); @@ -238,6 +251,9 @@ r.list = { useRefAutofill, useChackraColor, useChackraGlobal, + CytoGraph, + useEditorTabs, + useCytoEditor, }, '@deep-foundation/deeplinks': { useMinilinksFilter @@ -251,8 +267,8 @@ r.list = { '@rjsf/core': rjsfCore, '@rjsf/chakra-ui': rjsfChakra, '@rjsf/validator-ajv8': rjsfValidator, - '@belivvr/aframe-react': aframeReact, - 'aframe-react': { Entity, Scene }, + // '@belivvr/aframe-react': aframeReact, + // 'aframe-react': { Entity, Scene }, 'md5': md5, 'uuid': uuidv4, 'd3-force-3d': d3d, @@ -266,6 +282,9 @@ r.list = { "i18next": i18n, 'i18next-browser-languagedetector': LanguageDetector, "react-i18next": reacti18next, + "@pbe/react-yandex-maps": reactYandexMaps, + // "react-calendar-timeline": ReactCalendarTimeline, + "moment": moment }; export async function evalClientHandler({ diff --git a/imports/component-appearance.tsx b/imports/component-appearance.tsx index 3f7f0b41..f4f05669 100644 --- a/imports/component-appearance.tsx +++ b/imports/component-appearance.tsx @@ -32,7 +32,7 @@ const variants = { } } -export const Appearance = React.memo(({ +export const Appearance = React.memo(({ children, toggle, variantsAnimation = variants, diff --git a/imports/component/grid-component.tsx b/imports/component/grid-component.tsx index a73490cb..24c3f011 100644 --- a/imports/component/grid-component.tsx +++ b/imports/component/grid-component.tsx @@ -6,7 +6,7 @@ import { useChackraColor } from '../get-color'; import { Resize } from '../resize'; -const SemicircularButton = React.memo(({ +const SemicircularButton = React.memo(({ Icon = TiPlusOutline, borderRadius = '4rem 0 0 4rem', onClick = () => {}, @@ -42,7 +42,7 @@ const SemicircularButton = React.memo(({ ) }) -const AddedChild = React.memo(() => { +const AddedChild = React.memo(() => { return (<> @@ -55,7 +55,7 @@ const AddedChild = React.memo(() => { ) }) -const ExecComponent = React.memo(() => { +const ExecComponent = React.memo(() => { return (<> @@ -103,7 +103,7 @@ const ExecComponent = React.memo(() => { ) }) -export const GridComponent = React.memo(({ +export const GridComponent = React.memo(({ mountChildren = , unmountChildren = , executableComponent = , @@ -184,7 +184,7 @@ export const GridComponent = React.memo(({ setViewSize(viewSize)} + onChangeSize={(viewSize: any) => setViewSize(viewSize)} style={{ borderTop: 'none', borderBottom: 'none', diff --git a/imports/connector/connector.tsx b/imports/connector/connector.tsx index f7845290..1d1563a3 100644 --- a/imports/connector/connector.tsx +++ b/imports/connector/connector.tsx @@ -25,7 +25,7 @@ export const parseUrl = (text) : [string, boolean] => { } }; -const ConnectorGrid = React.memo(({ +const ConnectorGrid = React.memo(({ children, ...props }:{ @@ -97,7 +97,7 @@ const callEngine = async ({ serverUrl, operation, terminal }: { serverUrl: strin return r; }; -const TerminalConnect = React.memo(({ +const TerminalConnect = React.memo(({ initializingState = undefined, setInitLocal, serverUrl, @@ -108,9 +108,7 @@ const TerminalConnect = React.memo(({ defaultGqlSsl, }:{ initializingState?: InitializingState; - closeTerminal: () => any; - setInitLocal: (state) => any; - terminalClosed: boolean; + setInitLocal: (state) => any; serverUrl: string; setGqlPath: (path: string) => any; setGqlSsl: (ssl: boolean) => any; @@ -300,7 +298,7 @@ const inputAnimation = { } }; -const InputAnimation = React.memo(({ +const InputAnimation = React.memo(({ bgContainer = '#141214', addRemoteRout = false, valueRemoteRoute = '', @@ -458,7 +456,7 @@ export const checkSystemStatus = async (serverUrl): Promise<{ result?: any; erro } }; -export const Connector = React.memo(({ +export const Connector = React.memo(({ portalOpen = true, setPortal, gqlPath, @@ -670,7 +668,7 @@ export const Connector = React.memo(({ gqlPath={gqlPath} gqlSsl={gqlSsl} // setValueRemote={} - onDeleteValue={(e) => { + onDeleteValue={() => { if (gqlPath == rr.value) { setGqlPath(''); setGqlSsl(false); diff --git a/imports/connector/docker-warning.tsx b/imports/connector/docker-warning.tsx index 431a3c62..5cb656d8 100644 --- a/imports/connector/docker-warning.tsx +++ b/imports/connector/docker-warning.tsx @@ -4,7 +4,7 @@ import { ExternalLinkIcon } from '@chakra-ui/icons'; import { FaExternalLinkSquareAlt } from 'react-icons/fa'; -export const DockerWarning = React.memo(() => { +export const DockerWarning = React.memo(() => { return ( Docker is not detected. Check that Docker is installed and started.
Install{' '} diff --git a/imports/cyto-message-textarea.tsx b/imports/cyto-message-textarea.tsx index 18fa3845..fe983c76 100644 --- a/imports/cyto-message-textarea.tsx +++ b/imports/cyto-message-textarea.tsx @@ -6,7 +6,7 @@ import { BsCheck2 } from 'react-icons/bs'; import { useChackraColor } from './get-color'; -export const MessageTextArea = React.memo(() => { +export const MessageTextArea = React.memo(() => { const gray900 = useChackraColor('gray.900'); const white = useChackraColor('white'); const whiteAlpha = useChackraColor('whiteAlpha.400'); diff --git a/imports/cyto-react-avatar.tsx b/imports/cyto-react-avatar.tsx index 03b4c2a5..7da52bb7 100644 --- a/imports/cyto-react-avatar.tsx +++ b/imports/cyto-react-avatar.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Avatar } from '@chakra-ui/react'; -export const CytoReactLinkAvatar = React.memo(({ +export const CytoReactLinkAvatar = React.memo(({ emoji, name, src, diff --git a/imports/cyto-react-links-card.tsx b/imports/cyto-react-links-card.tsx index 44b303bf..ec5751f0 100644 --- a/imports/cyto-react-links-card.tsx +++ b/imports/cyto-react-links-card.tsx @@ -57,7 +57,7 @@ const variants = { } }; -export const TypeIcon = React.memo(({ +export const TypeIcon = React.memo(({ src, borderColor = 'borderColor', borderWidth = 'thin', @@ -95,7 +95,7 @@ export const TypeIcon = React.memo(({ }) -export const GridPanel = React.memo(({ +export const GridPanel = React.memo(({ borderColor, borderColorSelected, data, @@ -143,7 +143,7 @@ export const GridPanel = React.memo(({ ) }) -const CytoListItem = React.memo(({ +const CytoListItem = React.memo(({ id, src, linkName, @@ -203,7 +203,7 @@ const CytoListItem = React.memo(({ ) }) -const ListPanel = React.memo(({ +const ListPanel = React.memo(({ borderColor, data, onSelectLink, @@ -222,22 +222,22 @@ const ListPanel = React.memo(({ ) }) -export const NoResults = React.memo(() => { +export const NoResults = React.memo(() => { return (
- Not founded + Not found
) }) -export const CytoReactLinksCard = React.memo(({ +export const CytoReactLinksCard = React.memo(({ elements = [], packages = [], onSubmit, onClose, loading = false, - noResults, + noResults = false, search, onSearch, fillSize=false, @@ -253,7 +253,7 @@ export const CytoReactLinksCard = React.memo(({ onSubmit?: (id: number) => any; onClose?: () => any; loading?: boolean; - noResults: any; + noResults?: boolean; search?: any; onSearch?: any; fillSize?: boolean; diff --git a/imports/cyto-react-links-packages.tsx b/imports/cyto-react-links-packages.tsx index 02852de3..893dc195 100644 --- a/imports/cyto-react-links-packages.tsx +++ b/imports/cyto-react-links-packages.tsx @@ -107,7 +107,7 @@ const arrElem = [ }, ] -const PackageItemAccordion = React.memo(({ +const PackageItemAccordion = React.memo(({ id, containerName, version, @@ -115,6 +115,7 @@ const PackageItemAccordion = React.memo(({ typeElements = arrElem, }:IPackage) => { const [expanded, setExpanded] = useState(false); + const [selectedLink, setSelectedLink] = useState(id); const isOpen = id === expanded; return (<> @@ -162,7 +163,7 @@ const PackageItemAccordion = React.memo(({ transition={{ duration: 0.8, ease: [0.04, 0.62, 0.23, 0.98] }} sx={{transformOrigin: 'top center',}} > - + )} @@ -191,7 +192,7 @@ const PackageItemAccordion = React.memo(({ // version: '0.0.0', // }]; -export const PackagesBlock = React.memo(({packages}:{packages :IPackageProps[]}) => { +export const PackagesBlock = React.memo(({packages}:{packages :IPackageProps[]}) => { return ( } -const Done = React.memo(() => { +const Done = React.memo(() => { return(
@@ -98,7 +98,7 @@ const Done = React.memo(() => { ) }) -const DoneAllOpacity = React.memo(() => { +const DoneAllOpacity = React.memo(() => { return(
@@ -106,7 +106,7 @@ const DoneAllOpacity = React.memo(() => { ) }) -const DoneAll = React.memo(() => { +const DoneAll = React.memo(() => { return(
@@ -131,7 +131,7 @@ interface IMessage { answerButton?: any; } -export const CytoReactMessage = React.memo(({ +export const CytoReactMessage = React.memo(({ text='Однообразные мелькают Все с той же болью дни мои, Как будто розы опадают И умирают соловьи. Но и она печальна тоже, Мне приказавшая любовь, И под ее атласной кожей Бежит отравленная кровь.', align = 'left', arrow = align, diff --git a/imports/cyto/drop-zone.tsx b/imports/cyto/drop-zone.tsx index 26448c1d..a3bddebf 100644 --- a/imports/cyto/drop-zone.tsx +++ b/imports/cyto/drop-zone.tsx @@ -21,7 +21,7 @@ export const CytoDropZone = React.memo(function CytoDropZone({ children, }) => ( - {}} position="fixed" left={0} top={0} w={'100%'} h={'100%'} bg={ + {}} position="absolute" left={0} top={0} w={'100%'} h={'100%'} bg={ isDragActive ? 'blue' : isDragAccept ? 'green' : isDragReject ? 'red' : 'transparent' }> {input} diff --git a/imports/cyto/editor-preview.tsx b/imports/cyto/editor-preview.tsx index ac03fbdf..3754245d 100644 --- a/imports/cyto/editor-preview.tsx +++ b/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 <> +
// ) || rightArea === 'handlers' && ( - + ) || rightArea === 'preview' && {[ } editorRightSwitch={ { setFillSize(newFillSize); @@ -211,7 +214,6 @@ export function CytoEditorPreview({ setCurrentLinkId={(newCurrentLinkId) => { setCurrentLinkId(newCurrentLinkId) }} - generated={generated} setGenerated={setGenerated} area={rightArea} setArea={(rightArea) => { setRightArea(rightArea); diff --git a/imports/cyto/editor.tsx b/imports/cyto/editor.tsx index a5424749..e9fe71c5 100644 --- a/imports/cyto/editor.tsx +++ b/imports/cyto/editor.tsx @@ -53,7 +53,7 @@ const MonacoEditor = dynamic(() => import('@monaco-editor/react').then(m => m.de // global._callClientHandler = callClientHandler; export interface EditorTab { id: number; - saved: boolean; + saved?: boolean; active?: boolean; loading?: boolean; initialValue?: string; @@ -634,6 +634,7 @@ export const CytoEditor = React.memo(function CytoEditor() { rightArea === 'results' && } editorRightSwitch={ { setFillSize(newFillSize); diff --git a/imports/cyto/graph.tsx b/imports/cyto/graph.tsx index d787352a..9d957abc 100644 --- a/imports/cyto/graph.tsx +++ b/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'; @@ -32,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), @@ -91,17 +91,24 @@ 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, + useSpaceId: _useSpaceId = useSpaceId, }: 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 [spaceId, setSpaceId] = _useSpaceId(); const [container, setContainer] = useContainer(); const [extra, setExtra] = useShowExtra(); const [showTypes, setShowTypes] = useShowTypes(); @@ -112,6 +119,7 @@ export default function CytoGraph({ const [cy, setCy] = useState(); cyRef.current = cy; const ehRef = useRef(); + const rootRef = useRef(); const cyh = useCytoHandlers(); const { cytoHandlersRef, iterator, onChange } = cyh; @@ -126,17 +134,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, useSpaceId: _useSpaceId }); const { layout, setLayout } = useLayout(); const [ layoutAnimation ] = useLayoutAnimation(); - const [cytoEditor, setCytoEditor] = useCytoEditor(); const returning = (<> - -
+ +
} {!!cy && } - + {false && !!cy && } + {children} - - {appVersion} ({pckg.version}) -
); 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/handlers.tsx b/imports/cyto/handlers.tsx index e5a2fecd..a37ec64e 100644 --- a/imports/cyto/handlers.tsx +++ b/imports/cyto/handlers.tsx @@ -12,7 +12,7 @@ import { useContainer, useSpaceId } from '../hooks'; import { VscCheck, VscDiffAdded } from 'react-icons/vsc'; import { FinderPopover } from './hooks'; -export const CytoEditorHandlersSupportHandle = React.memo(function CytoEditorHandlersSupport({ +export const CytoEditorHandlersSupportHandle = React.memo(function CytoEditorHandlersSupport({ support, handler, handle, @@ -287,7 +287,7 @@ export const CytoEditorHandlersSupportHandle = React.memo(function CytoEdit ; }); -export const CytoEditorHandlersSupport = React.memo(function CytoEditorHandlersSupport({ +export const CytoEditorHandlersSupport = React.memo(function CytoEditorHandlersSupport({ support, linkId, handleredableIds, @@ -373,7 +373,7 @@ export const CytoEditorHandlersSupport = React.memo(function CytoEditorHand ; }); -export const CytoEditorHandlers = React.memo(function CytoEditorHandlers({ +export const CytoEditorHandlers = React.memo(function CytoEditorHandlers({ linkId, handleredableIds, }: { diff --git a/imports/cyto/hooks.tsx b/imports/cyto/hooks.tsx index 2e52f870..5ad73b7d 100644 --- a/imports/cyto/hooks.tsx +++ b/imports/cyto/hooks.tsx @@ -494,7 +494,7 @@ export function useLinkInserting(elements = [], reactElements = [], focus, cyRef return returning; } -export function useLinkReactElements(elements = [], reactElements = [], cy, ml) { +export function useLinkReactElements(elements = [], reactElements = [], cy, ml, spaceId) { const deep = useDeep(); const [linkReactElements, setLinkReactElements] = useState<{ [key: string]: boolean }>({}); const linkReactElementsIds = useMemo(() => Object.keys(linkReactElements).filter(key => !!linkReactElements[key]), [linkReactElements]).map(key => parseInt(key), [linkReactElements]); @@ -503,7 +503,6 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml) const cyRef = useRefAutofill(cy); const { open, close, isOpened } = useOpenedMethods(); - const [spaceId] = useSpaceId(); const { data: Opened } = useDeepId('@deep-foundation/deepcase-opened', 'Opened'); reactElements.push(...((deep.minilinks?.byId?.[spaceId]?.outByType?.[Opened] || [])?.map(l => elements.find(e => e.id === l.to_id))).filter(i => !!i)); @@ -572,26 +571,43 @@ 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(); const [search, setSearch] = useState(''); const [spaceId] = useSpaceId(); - const { data: handleClients } = deep.useDeepQuery({ + const { data: handleClients } = deep.useDeepSubscription({ type_id: deep.idLocal('@deep-foundation/core', 'HandleClient'), from: { down: { tree_id: { _eq: deep.idLocal('@deep-foundation/core', 'typesTree') }, - link_id: { _eq: id }, + link_id: { _eq: linkId }, }, } }); + const { data: Opened } = useDeepId('@deep-foundation/deepcase-opened', 'Opened'); + const { data: OpenedHandler } = useDeepId('@deep-foundation/deepcase-opened', 'OpenedHandler'); + + const openedHandlers = deep.useMinilinksSubscription({ + type_id: OpenedHandler || 0, + from: { + type_id: Opened || 0, + from_id: spaceId, + 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) { @@ -600,7 +616,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml) } } } - }, [handleClients]); + }, [handleClients, openedHandlers]); const handleClient = handleClients.find(h => h.to_id === handlerId); const elements = handleClients?.map(t => ({ @@ -610,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)}
; @@ -647,8 +663,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml) search={search} onSearch={e => setSearch(e.target.value)} onSubmit={async (hid) => { - close(id); - open(id, hid); + open(linkId, hid); onClose(); }} fillSize @@ -664,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)', @@ -690,7 +705,7 @@ export function useLinkReactElements(elements = [], reactElements = [], cy, ml) /> {!handleClient?.to_id && Compatible HandleClient not found.} - {!!handleClient?.to_id && []} + {!!handleClient?.to_id && []}
; }; @@ -714,6 +729,8 @@ export function useCyInitializer({ setCy, ehRef, cytoViewportRef, + rootRef, + useSpaceId: _useSpaceId = useSpaceId, }: { elementsRef: any; elements: any; @@ -722,11 +739,13 @@ export function useCyInitializer({ setCy: any; ehRef: any; cytoViewportRef: any; + rootRef?: any; + useSpaceId?: any; }) { const deep = useDeep(); const { layout, setLayout } = useLayout(); const [extra, setExtra] = useShowExtra(); - const [spaceId, setSpaceId] = useSpaceId(); + const [spaceId, setSpaceId] = _useSpaceId(); const [container, setContainer] = useContainer(); const [showTypes, setShowTypes] = useShowTypes(); const [cytoEditor, setCytoEditor] = useCytoEditor(); @@ -744,7 +763,7 @@ export function useCyInitializer({ const refDragStartedEvent = useRef(); - const { toggleLinkReactElement } = useLinkReactElements(elements, reactElements, cyRef.current, ml); + const { toggleLinkReactElement } = useLinkReactElements(elements, reactElements, cyRef.current, ml, spaceId); // const relayout = useCallback(() => { @@ -1037,7 +1056,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); } }, diff --git a/imports/cyto/menu.tsx b/imports/cyto/menu.tsx index 5fde562c..74cf8c98 100644 --- a/imports/cyto/menu.tsx +++ b/imports/cyto/menu.tsx @@ -13,8 +13,8 @@ import { variants, buttonVariant, iconVariants, sideVariants, itemVariants } fro import { TbArrowRotaryFirstRight } from "react-icons/tb"; import { ClientHandler } from "../client-handler"; -const ListLayout = React.memo(({ - currentLayout = 'cola', +const ListLayout = React.memo(({ + currentLayout = 'deep-d3-force', setCurrentLayout, }:{ currentLayout?: string; @@ -254,7 +254,6 @@ export const CytoMenu = React.memo(function CytoMenu({ <> @@ -389,11 +388,9 @@ export const CytoMenu = React.memo(function CytoMenu({ */} - diff --git a/imports/cyto/query-client-handler.tsx b/imports/cyto/query-client-handler.tsx index e17f27a2..552854e9 100644 --- a/imports/cyto/query-client-handler.tsx +++ b/imports/cyto/query-client-handler.tsx @@ -64,7 +64,7 @@ const stackVariants = { } }; -export const QueryClientHandler = React.memo(({nested = false}:{nested?: boolean;}) => { +export const QueryClientHandler = React.memo(({nested = false}:{nested?: boolean;}) => { const [viewSize, setViewSize] = useState({width: 200, height: 150}); const [save, setSave] = useState(false); const [value, setValue] = useState(false); @@ -102,7 +102,7 @@ export const QueryClientHandler = React.memo(({nested = false}:{nested?: bo return ( setViewSize(viewSize)} + onChangeSize={(viewSize: any) => setViewSize(viewSize)} style={{ position: 'relative', overflow: nested ? 'hidden' : 'inherit', diff --git a/imports/cyto/react.tsx b/imports/cyto/react.tsx index d7506369..bca0f355 100644 --- a/imports/cyto/react.tsx +++ b/imports/cyto/react.tsx @@ -5,9 +5,9 @@ function getId(element) { return typeof(element?.id) === 'function' ? element?.id() : element?.id; } -export function defaultGenerateId(element) { +export function defaultGenerateId(element, spaceId) { const id = getId(element) || 0; - return `${id}-layout-element`; + return `${id}-${spaceId}-layout-element`; } const align = { @@ -34,10 +34,12 @@ export const CytoReactLayout = React.memo(function CytoReactLayout({ cy, elements = [], generateId = defaultGenerateId, + spaceId, }: { cy: any; elements: any[]; - generateId?: (id: string) => string; + generateId?: (id: string, spaceId: string) => string; + spaceId?: number; }) { const divRef = useRef(); @@ -66,8 +68,9 @@ export const CytoReactLayout = React.memo(function CytoReactLayout({ } function renderPosition(cyElement: any, position: any) { - const id = cyElement.id(); - const element = document.getElementById(generateId(cyElement)); + const id = generateId(cyElement, `${spaceId}`); + const element = document.getElementById(id); + // console.log('renderPosition', id, element, cyElement, position); if (element) { const prevX = element.dataset.x; @@ -119,7 +122,7 @@ export const CytoReactLayout = React.memo(function CytoReactLayout({ return
+ }} id={generateId(element, `${spaceId}`)} key={id}> { // cy.$(`#${id}`).data('react-element-size', { width, height }); // cy.$(`#${id}`).style({ diff --git a/imports/cyto/types.tsx b/imports/cyto/types.tsx index db5055d7..a943dfbc 100644 --- a/imports/cyto/types.tsx +++ b/imports/cyto/types.tsx @@ -6,5 +6,7 @@ export interface CytoGraphProps { cyRef?: any; gqlPath: string; gqlSsl: boolean; - appVersion: string; + children?: any; + useCytoViewport?: any; + useSpaceId?: any; }; diff --git a/imports/deep-wysiwyg.tsx b/imports/deep-wysiwyg.tsx index 0b8400ea..0fa24020 100644 --- a/imports/deep-wysiwyg.tsx +++ b/imports/deep-wysiwyg.tsx @@ -71,12 +71,13 @@ interface BaseProps { }; interface IEditor { + disabled?: boolean; fillSize?: boolean; topmenu?: boolean; borderRadiusEditor?: number; borderWidthEditor?: string; paddingEditor?: number; - handleKeyPress?: () => any; + handleKeyPress?: (event: any) => any; onChange?: (result: { value: string; slateValue: any; }) => any; value?: string; initialValue: any; @@ -85,6 +86,9 @@ interface IEditor { width?: string; borderColorEditor?: any; backgroundColorEditor?: any; + EditableProps?: any; + SlateProps?: any; + [key: string]: any; }; type BulletedListElement = { @@ -396,9 +400,10 @@ var check = (el) => ( ); // Only objects editor. -export const DeepWysiwyg = React.memo(({ +export const DeepWysiwyg = React.memo(function DeepWysiwyg({ fillSize, - topmenu, + disabled = false, + topmenu = true, borderRadiusEditor = 0.5, borderWidthEditor = 'thin', paddingEditor = 1, @@ -416,7 +421,10 @@ export const DeepWysiwyg = React.memo(({ autoFocus = false, borderColorEditor, backgroundColorEditor, -}:IEditor) => { + EditableProps = {}, + SlateProps = {}, + ...props +}:IEditor) { const _value = useMemo(() => { if (typeof(value) === 'string' && !!value) { const sl = htmlToSlate(value); @@ -437,7 +445,7 @@ export const DeepWysiwyg = React.memo(({ const boxControl = useAnimation(); useEffect(() => { - if (topmenu) { + if (!topmenu) { control.start('hide'); boxControl.start('hide'); } else { @@ -491,7 +499,6 @@ export const DeepWysiwyg = React.memo(({ const state = State.create(MarkdownParser); const document = state.deserializeToDocument('Hello **World**'); - console.log('document', document); return ((({ '& > * > *:nth-of-type(2)': { } }} + {...props} > (({ slateValue: value, }); }} + {...SlateProps} > - *:hover': { - transform: 'scale(1.15)' - } - }}> - } format='bold' /> - } format="italic" /> - } format="underline" /> - } format="code" /> - - } /> - } /> - } - setColor={() => setColor(random)} - /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - + {!!topmenu && <> + *:hover': { + transform: 'scale(1.15)' + } + }}> + } format='bold' /> + } format="italic" /> + } format="underline" /> + } format="code" /> + + } /> + } /> + } + setColor={() => setColor(random)} + /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + } {/* */} - (({ backgroundColor: backgroundColorEditor, }} spellCheck + readOnly={!!disabled} autoFocus={autoFocus} renderElement={renderElement} renderLeaf={renderLeaf} @@ -580,8 +592,9 @@ export const DeepWysiwyg = React.memo(({ toggleMark(editor, mark) } } - handleKeyPress + handleKeyPress && handleKeyPress(event); }} + {...EditableProps} /> {/* */} @@ -656,7 +669,7 @@ const isBlockActive = (editor, format, blockType = 'type') => { return !!match } -export const BlockButton = React.memo(({ format, icon, colorMode, setColor }:{ format: any; icon: any; colorMode?: any; setColor?: () => any; }) => { +export const BlockButton = React.memo(({ format, icon, colorMode, setColor }:{ format: any; icon: any; colorMode?: any; setColor?: () => any; }) => { const editor = useSlate(); return ( diff --git a/imports/dot-loader.tsx b/imports/dot-loader.tsx index a72dd0bc..25eed447 100644 --- a/imports/dot-loader.tsx +++ b/imports/dot-loader.tsx @@ -24,7 +24,7 @@ const anim = keyframes` } `; -export const DotsLoader = React.memo(() => { +export const DotsLoader = React.memo(() => { const prefersReducedMotion = usePrefersReducedMotion(); const anim1 = prefersReducedMotion ? undefined diff --git a/imports/editor/editor-component-view.tsx b/imports/editor/editor-component-view.tsx index df4c99bf..be79b683 100644 --- a/imports/editor/editor-component-view.tsx +++ b/imports/editor/editor-component-view.tsx @@ -5,7 +5,7 @@ import ReactResizeDetector from 'react-resize-detector'; const RecursionContext = createContext(false); -export const EditorComponentView = React.memo(({ +export const EditorComponentView = React.memo(({ onChangeSize, size, fillSize, diff --git a/imports/editor/editor-grid.tsx b/imports/editor/editor-grid.tsx index e1c4521d..cc3030c9 100644 --- a/imports/editor/editor-grid.tsx +++ b/imports/editor/editor-grid.tsx @@ -16,7 +16,7 @@ interface IGrid { } -export const EditorGrid = React.memo(({ +export const EditorGrid = React.memo(({ columns = 'repeat(2, 50%)', editorTabsElement, editorTextAreaElement, diff --git a/imports/editor/editor-handler.tsx b/imports/editor/editor-handler.tsx index 5847ef4f..e9b89239 100644 --- a/imports/editor/editor-handler.tsx +++ b/imports/editor/editor-handler.tsx @@ -19,7 +19,7 @@ interface IHandler { children?: any; } -export const EditorHandler = React.memo(({ +export const EditorHandler = React.memo(({ id, avatarElement, title, diff --git a/imports/editor/editor-handlers.tsx b/imports/editor/editor-handlers.tsx index 0d4532a8..00d1b4e2 100644 --- a/imports/editor/editor-handlers.tsx +++ b/imports/editor/editor-handlers.tsx @@ -3,7 +3,7 @@ import { VscAdd } from 'react-icons/vsc'; import { Flex, Box, Button, Divider, ButtonGroup, Spacer } from '@chakra-ui/react'; -export const EditorHandlers = React.memo(({ +export const EditorHandlers = React.memo(({ children, onAddHandler, generated, diff --git a/imports/editor/editor-lang-list.tsx b/imports/editor/editor-lang-list.tsx index 772d47f4..a29718b0 100644 --- a/imports/editor/editor-lang-list.tsx +++ b/imports/editor/editor-lang-list.tsx @@ -51,10 +51,16 @@ const iconVariants = { } }; -export const ListLanguages = React.memo(({ + + +export const ListLanguages = React.memo(({ languages = [], currentLanguage, setLanguage, +}: { + languages: any; + currentLanguage: string; + setLanguage: (i: any) => void; }) => { const [open, cycleOpen] = useCycle(false, true); diff --git a/imports/editor/editor-results.tsx b/imports/editor/editor-results.tsx index 1a3c5df3..f0efb9cf 100644 --- a/imports/editor/editor-results.tsx +++ b/imports/editor/editor-results.tsx @@ -3,7 +3,7 @@ import { VscAdd } from 'react-icons/vsc'; import { Flex, Box, Button, Divider, ButtonGroup, Spacer } from '@chakra-ui/react'; import { useDeep } from '@deep-foundation/deeplinks/imports/client'; -export const EditorResultsResolvesRejects = React.memo(({ +export const EditorResultsResolvesRejects = React.memo(({ promiseId }: { promiseId: number; @@ -27,7 +27,7 @@ export const EditorResultsResolvesRejects = React.memo(({ ; }); -export const EditorResults = React.memo(({ +export const EditorResults = React.memo(({ id, }:{ id: number; diff --git a/imports/editor/editor-switcher.tsx b/imports/editor/editor-switcher.tsx index e5b0e6d4..bae98817 100644 --- a/imports/editor/editor-switcher.tsx +++ b/imports/editor/editor-switcher.tsx @@ -1,8 +1,11 @@ -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(({ +export const EditorSwitcher = React.memo(({ area, setArea, rightArea, @@ -10,6 +13,7 @@ export const EditorSwitcher = React.memo(({ setFillSize, currentLinkId, setCurrentLinkId, + portalRef, }:{ area?: string; setArea?: (e: any) => any; @@ -18,8 +22,15 @@ export const EditorSwitcher = React.memo(({ 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( (({ id - setCurrentLinkId(parseInt(e.target.value) || 0)} mr='1rem' /> + + setCurrentLinkId(parseInt(e.target.value) || 0)}/> + + { + setCurrentLinkId(link?.id); + }} + > + 🪬} + style={{ + position: 'relative', + top: -4, + }} + /> + + + fillSize diff --git a/imports/editor/editor-tabs.tsx b/imports/editor/editor-tabs.tsx index 7e18af06..06b268da 100644 --- a/imports/editor/editor-tabs.tsx +++ b/imports/editor/editor-tabs.tsx @@ -8,13 +8,12 @@ import { useDeep } from '@deep-foundation/deeplinks/imports/client'; interface ITab { id: number; - title: string; saved?: boolean; loading?: boolean; active?: boolean; }; -export const EditorTabs_ = React.memo(({ +export const EditorTabs_ = React.memo(({ tabs=[], onClick, onClose, @@ -52,7 +51,7 @@ return ((({ +export const NonSavedIcon = React.memo(({ bg='primary', borderColor='red.200', }:{ @@ -63,7 +62,7 @@ export const NonSavedIcon = React.memo(({ return () }) -export const CloseButton = React.memo(({ +export const CloseButton = React.memo(({ onClick, }: { onClick?: (event) => void; @@ -82,7 +81,7 @@ export interface ITabProps { onSaveTab?: (tab: ITab) => void; } -export const EditorTab = React.memo(({ +export const EditorTab = React.memo(({ tab, onClick, onSaveTab, @@ -187,7 +186,7 @@ export const EditorTab = React.memo(({ ) }) -export const EditorTabs = React.memo(({ +export const EditorTabs = React.memo(({ tabs=[], setTabs, onClick, @@ -246,7 +245,7 @@ return ( {tabs.map(t => - + )} ) diff --git a/imports/editor/editor-textarea.tsx b/imports/editor/editor-textarea.tsx index 950d13f1..1187ab78 100644 --- a/imports/editor/editor-textarea.tsx +++ b/imports/editor/editor-textarea.tsx @@ -12,7 +12,7 @@ const monacoEditorOptions = { interface IEditor { refEditor?: any; - value?: ''; + value?: any; onChange?: (value: string) => void; onSave?: (value: string) => void; onClose?: () => void; @@ -23,9 +23,9 @@ interface IEditor { onMount?: (editor: any, monaco: any) => any; } -export const EditorTextArea = React.memo(({ +export const EditorTextArea = React.memo(({ refEditor = { current: undefined }, - value, + value = '', onChange, onSave, onClose, diff --git a/imports/engine.tsx b/imports/engine.tsx index c8968e47..63b5c78c 100644 --- a/imports/engine.tsx +++ b/imports/engine.tsx @@ -51,7 +51,7 @@ export function useEngine(serverUrl: string) { // const isMac = process.platform === 'darwin'; -// export const EngineWindow = React.memo(function EngineWindow({ +// export const EngineWindow = React.memo(function EngineWindow({ // }: { // }) { // const [connected, setConnected] = useEngineConnected(); @@ -107,7 +107,7 @@ export function useEngine(serverUrl: string) { // ; // }); -// export const EnginePanel = React.memo(function EnginePanel({ +// export const EnginePanel = React.memo(function EnginePanel({ // }: { // }) { // const [connected, setConnected] = useEngineConnected(); diff --git a/imports/hooks.tsx b/imports/hooks.tsx index 5ce2470e..212761df 100644 --- a/imports/hooks.tsx +++ b/imports/hooks.tsx @@ -87,7 +87,9 @@ export function useShowExtra() { return useQueryStore('show-extra', false); }; export function useCytoViewport() { - return useLocalStore('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.innerHeight / 2 : 0; + return useLocalStore('cyto-viewport', { pan: { x, y }, zoom: 1 } as S); }; export function useShowFocus() { return useQueryStore('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); diff --git a/imports/icons-provider.tsx b/imports/icons-provider.tsx index 544bcdcd..788597a3 100644 --- a/imports/icons-provider.tsx +++ b/imports/icons-provider.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { IconContext } from "react-icons"; -export const CustomizableIcon = React.memo(({Component, value, style}:{Component: any; value?: any; style?: any;}) => { +export const CustomizableIcon = React.memo(({Component, value, style}:{Component: any; value?: any; style?: any;}) => { return (
diff --git a/imports/loading-motion-bubble.tsx b/imports/loading-motion-bubble.tsx index 1b879086..a6e73408 100644 --- a/imports/loading-motion-bubble.tsx +++ b/imports/loading-motion-bubble.tsx @@ -15,7 +15,7 @@ interface ILoading { backgroundBubble?: string; } -export const Loading = React.memo(({ +export const Loading = React.memo(({ text, width = '0.1875rem', height = '0.1875rem', diff --git a/imports/modal-window.tsx b/imports/modal-window.tsx index 96eba436..37084f88 100644 --- a/imports/modal-window.tsx +++ b/imports/modal-window.tsx @@ -40,7 +40,7 @@ const backdrop = { } } -export const ModalWindow = React.memo(({ +export const ModalWindow = React.memo(({ portalOpen = false, onClosePortal, children, diff --git a/imports/packager-interface/packager-interface-tabs-content.tsx b/imports/packager-interface/packager-interface-tabs-content.tsx index 07c2d8d6..c74b1b37 100644 --- a/imports/packager-interface/packager-interface-tabs-content.tsx +++ b/imports/packager-interface/packager-interface-tabs-content.tsx @@ -109,12 +109,18 @@ const iconVariants = { } }; -export const ListVersions = React.memo(({ +export const ListVersions = React.memo(({ name, latestVersion, currentVersion, bg, setCurrentVersion +}: { + name: string; + latestVersion: string; + currentVersion: string; + setCurrentVersion: (string) => any; + bg: string; }) => { const [open, cycleOpen] = useCycle(false, true); @@ -224,7 +230,7 @@ export const ListVersions = React.memo(({ ) }) -export const PackageItem = React.memo(function PackageItem({ +export const PackageItem = React.memo(function PackageItem({ id, expanded, onOpen, @@ -389,7 +395,7 @@ const variantsUninstalled = { initial: { opacity: 0, x: '-100%' }, } -export const TabComponent = React.memo(({ +export const TabComponent = React.memo(({ variant = 0, installedPackages = [], notInstalledPackages, diff --git a/imports/packager-interface/packager-interface-tabs-menu.tsx b/imports/packager-interface/packager-interface-tabs-menu.tsx index 2b443db2..5904608e 100644 --- a/imports/packager-interface/packager-interface-tabs-menu.tsx +++ b/imports/packager-interface/packager-interface-tabs-menu.tsx @@ -111,7 +111,7 @@ const textInstall = { } }; -const QuantityPackages = React.memo(({ quantity, borderColor }: { quantity: number; borderColor?: string; }) => { +const QuantityPackages = React.memo(({ quantity, borderColor }: { quantity: number; borderColor?: string; }) => { return ((({ quantity, borderColor }: { quantity: ) }) -export const TabsPackages = React.memo(({ +export const TabsPackages = React.memo(({ selectedTab = 0, onSelectMode, quantityInstall = 0, diff --git a/imports/packager-interface/packager-interface-tabs.tsx b/imports/packager-interface/packager-interface-tabs.tsx index e252d80e..e600caca 100644 --- a/imports/packager-interface/packager-interface-tabs.tsx +++ b/imports/packager-interface/packager-interface-tabs.tsx @@ -102,7 +102,7 @@ const textInstall = { }; -export const TabsPackages = React.memo(({ +export const TabsPackages = React.memo(({ // selectedTab = 0, onClickTab, }:{ diff --git a/imports/packager-interface/packager-interface.tsx b/imports/packager-interface/packager-interface.tsx index 75f6701b..3acefea7 100644 --- a/imports/packager-interface/packager-interface.tsx +++ b/imports/packager-interface/packager-interface.tsx @@ -211,7 +211,7 @@ const buttonVariant = { } -export const PackagerInterface = React.memo(({ +export const PackagerInterface = React.memo(({ toggle, onClose, }:{ @@ -268,8 +268,7 @@ export const PackagerInterface = React.memo(({ >packager (({ setSelectedVariant(variant => variant === 0 ? 1 : 0)} + onSelectMode={() => setSelectedVariant(variant => variant === 0 ? 1 : 0)} quantityInstall={installedPackages.length} quantityUninstalled={notInstalledPackages.length} /> diff --git a/imports/popover-text/popover-text.tsx b/imports/popover-text/popover-text.tsx index 9de306ae..a8cbcc0a 100644 --- a/imports/popover-text/popover-text.tsx +++ b/imports/popover-text/popover-text.tsx @@ -7,7 +7,7 @@ export interface ITypeData { src?: string; } -const ButtonWord = React.memo(({text = 'Trigger'}:{text?: any;}) => { +const ButtonWord = React.memo(({text = 'Trigger'}:{text?: any;}) => { return