From 7bea91aa499eeb165bd6c6a102dfeea95766befc Mon Sep 17 00:00:00 2001 From: Sophia Xu Date: Wed, 13 Apr 2022 16:42:07 -0400 Subject: [PATCH 1/6] fix: add ability to merge tags --- .../executables/mergeEntities.js | 48 +++++++++++++++++++ .../unigraph.semantic/package.json | 7 +++ .../src/examples/semantic/Tag.tsx | 13 +++++ yarn.lock | 2 +- 4 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 packages/default-packages/unigraph.semantic/executables/mergeEntities.js diff --git a/packages/default-packages/unigraph.semantic/executables/mergeEntities.js b/packages/default-packages/unigraph.semantic/executables/mergeEntities.js new file mode 100644 index 00000000..4745191d --- /dev/null +++ b/packages/default-packages/unigraph.semantic/executables/mergeEntities.js @@ -0,0 +1,48 @@ +const fromUid = context.params.from; +const toUid = context.params.to; + +const newNameQuery = ( + await unigraph.getQueries([ + `(func: uid(${toUid})) { + uid +unigraph.indexes { + name { + uid + expand(_userpredicate_) {uid + expand(_userpredicate_) {uid + expand(_userpredicate_) {uid + expand(_userpredicate_) {uid + expand(_userpredicate_) {uid + expand(_userpredicate_) { } } } } } } + } +} +}`, + ]) +)[0][0]; +const newName = new UnigraphObject(newNameQuery['unigraph.indexes'].name).as('primitive'); +await unigraph.runExecutable('$/executable/rename-entity', { + uid: fromUid, + newName, +}); + +const refs = await unigraph.getQueries([ + `(func: uid(${fromUid})) { + <~_value> { + uid + } + { + uid + } + }`, +]); + +const valUids = refs?.[0]?.[0]?.['~_value'].map((el) => el.uid); +const originUids = refs?.[0]?.[0]?.['unigraph.origin'].map((el) => el.uid); + +const updateTriplets = [ + ...valUids.map((uid) => `<${uid}> <_value> <${toUid}> .`), + ...originUids.map((uid) => `<${toUid}> <${uid}> .`), +]; + +await unigraph.updateTriplets(updateTriplets); +await unigraph.deleteObject(fromUid, true); diff --git a/packages/default-packages/unigraph.semantic/package.json b/packages/default-packages/unigraph.semantic/package.json index aaf57295..3fc721fe 100644 --- a/packages/default-packages/unigraph.semantic/package.json +++ b/packages/default-packages/unigraph.semantic/package.json @@ -80,6 +80,13 @@ "src": "executables/renameEntity.js", "editable": true, "name": "Renames an entity and update all its references" + }, + { + "id": "merge-entities", + "env": "routine/js", + "src": "executables/mergeEntities.js", + "editable": true, + "name": "Merges an entity to another" } ] } diff --git a/packages/unigraph-dev-explorer/src/examples/semantic/Tag.tsx b/packages/unigraph-dev-explorer/src/examples/semantic/Tag.tsx index 2944fd95..8de0324c 100644 --- a/packages/unigraph-dev-explorer/src/examples/semantic/Tag.tsx +++ b/packages/unigraph-dev-explorer/src/examples/semantic/Tag.tsx @@ -40,6 +40,7 @@ export const Tag: DynamicViewRenderer = ({ data, callbacks }) => { export const TagDetailed: DynamicViewRenderer = ({ data, callbacks }) => { const [name, setName] = React.useState(''); + const [uid, setUid] = React.useState(''); // useNameTab('Tag: ', data.uid); React.useEffect(() => { @@ -60,6 +61,18 @@ export const TagDetailed: DynamicViewRenderer = ({ data, callbacks }) => { > Rename Tag + + setUid(e.target.value)} placeholder="UID of tag to merge with"> + UID of tag to merge with + + diff --git a/yarn.lock b/yarn.lock index 06451ac7..31afc01b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18959,7 +18959,7 @@ uuid@^3.3.2, uuid@^3.4.0: resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee" integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A== -uuid@^8.0.0, uuid@^8.3.0: +uuid@^8.0.0, uuid@^8.3.0, uuid@^8.3.2: version "8.3.2" resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2" integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg== From e01349ea8849a0fd8efcaa9108c356fe792d906a Mon Sep 17 00:00:00 2001 From: Sophia Xu Date: Wed, 13 Apr 2022 18:34:23 -0400 Subject: [PATCH 2/6] feat: fix several misc ux issues --- packages/unigraph-dev-explorer/src/Workspace.tsx | 14 +++++++------- .../src/components/ObjectView/AutoDynamicView.tsx | 13 ++++++++++--- .../ObjectView/DynamicObjectListView.tsx | 5 ++--- .../src/components/ObjectView/GraphView.tsx | 3 +-- .../src/examples/todo/TodoTagView.tsx | 1 + packages/unigraph-dev-explorer/src/pages.tsx | 1 + .../src/pages/SearchOverlay.tsx | 13 ++++++------- packages/unigraph-dev-explorer/src/utils.tsx | 7 +++++++ 8 files changed, 35 insertions(+), 22 deletions(-) diff --git a/packages/unigraph-dev-explorer/src/Workspace.tsx b/packages/unigraph-dev-explorer/src/Workspace.tsx index e572bc60..7703eead 100644 --- a/packages/unigraph-dev-explorer/src/Workspace.tsx +++ b/packages/unigraph-dev-explorer/src/Workspace.tsx @@ -36,10 +36,10 @@ import { MobileBar } from './components/UnigraphCore/MobileBar'; import { CustomDragLayer } from './CustomDragLayer'; export function WorkspacePageComponent({ children, maximize, paddingTop, id, tabCtx }: any) { - const [_maximize, setMaximize] = React.useState(maximize); - tabCtx.setMaximize = (val: boolean) => { - setMaximize(val); - }; + // const [_maximize, setMaximize] = React.useState(maximize); + // tabCtx.setMaximize = (val: boolean) => { + // setMaximize(val); + // }; const memoTabCtx = React.useMemo(() => tabCtx, [id]); return ( @@ -49,15 +49,15 @@ export function WorkspacePageComponent({ children, maximize, paddingTop, id, tab width: '100%', height: '100%', overflow: 'auto', - paddingTop: _maximize || !paddingTop ? '0px' : '12px', + paddingTop: maximize || !paddingTop ? '0px' : '12px', }} > = ({ }, { id: 'no-trivial', - fn: (obj) => - ['$/schema/markdown', '$/schema/subentity'].includes(obj?.type?.['unigraph.id']) ? null : obj, + fn: (obj) => (trivialTypes.includes(obj?.type?.['unigraph.id']) ? null : obj), }, { id: 'no-hidden', fn: (obj) => obj._hide !== true }, ...filters, diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/GraphView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/GraphView.tsx index 1c00fccb..964d5d93 100644 --- a/packages/unigraph-dev-explorer/src/components/ObjectView/GraphView.tsx +++ b/packages/unigraph-dev-explorer/src/components/ObjectView/GraphView.tsx @@ -5,7 +5,7 @@ import ForceGraph2D from 'react-force-graph-2d'; import ReactResizeDetector from 'react-resize-detector'; import _ from 'lodash'; import { Checkbox, List, ListItem, Typography } from '@mui/material'; -import { TabContext } from '../../utils'; +import { TabContext, trivialTypes as excludableTypes } from '../../utils'; const queryNameIndex = `@filter(type(Entity) AND (NOT eq(<_propertyType>, "inheritance"))) { uid @@ -20,7 +20,6 @@ const queryNameIndex = `@filter(type(Entity) AND (NOT eq(<_propertyType>, "inher { } }`; -export const excludableTypes = ['$/schema/subentity', '$/schema/interface/textual', '$/schema/markdown']; const getExcluded = (id: number) => excludableTypes.reduce((prev, curr, idx) => ((id >> idx) % 2 ? [...prev, curr] : prev), [] as string[]); diff --git a/packages/unigraph-dev-explorer/src/examples/todo/TodoTagView.tsx b/packages/unigraph-dev-explorer/src/examples/todo/TodoTagView.tsx index 116d5c00..09df55bd 100644 --- a/packages/unigraph-dev-explorer/src/examples/todo/TodoTagView.tsx +++ b/packages/unigraph-dev-explorer/src/examples/todo/TodoTagView.tsx @@ -68,6 +68,7 @@ export function TodoTagView({ ); } }} + compact noRemover groupers={groupers} {...attributes} diff --git a/packages/unigraph-dev-explorer/src/pages.tsx b/packages/unigraph-dev-explorer/src/pages.tsx index 05dd6310..97d37bfe 100644 --- a/packages/unigraph-dev-explorer/src/pages.tsx +++ b/packages/unigraph-dev-explorer/src/pages.tsx @@ -50,6 +50,7 @@ const pages: Record = { }, 'examples/todo': { constructor: (props: any) => , + maximize: true, name: 'Todo List', }, 'examples/bookmarks': { diff --git a/packages/unigraph-dev-explorer/src/pages/SearchOverlay.tsx b/packages/unigraph-dev-explorer/src/pages/SearchOverlay.tsx index 5332c634..d815bc0a 100644 --- a/packages/unigraph-dev-explorer/src/pages/SearchOverlay.tsx +++ b/packages/unigraph-dev-explorer/src/pages/SearchOverlay.tsx @@ -7,7 +7,7 @@ import { UnigraphObject } from 'unigraph-dev-common/lib/utils/utils'; import { AutoDynamicView } from '../components/ObjectView/AutoDynamicView'; import { inlineTextSearch } from '../components/UnigraphCore/InlineSearchPopup'; import { parseQuery } from '../components/UnigraphCore/UnigraphSearch'; -import { isElectron, typeHasDynamicView } from '../utils'; +import { isElectron, trivialTypes, typeHasDynamicView } from '../utils'; const groups = [ { @@ -262,9 +262,7 @@ export function SearchOverlay({ open, setClose, callback, summonerTooltip, defau ? res.entities.filter( (el) => typeHasDynamicView(el?.type?.['unigraph.id']) && - !['$/schema/markdown', '$/schema/subentity'].includes( - el?.type?.['unigraph.id'], - ), + !trivialTypes.includes(el?.type?.['unigraph.id']), ) : [null], ); @@ -281,7 +279,7 @@ export function SearchOverlay({ open, setClose, callback, summonerTooltip, defau }, [input]); const defaultEl = ( -
+
-
+
{summonerTooltip ? {summonerTooltip} : []} {entries} {parsed?.type === 'command' || parsed?.type === '' @@ -431,7 +429,8 @@ export function SearchOverlayPopover({ open, setClose, noShadow }: any) { overflow: 'auto', padding: '16px', borderRadius: '8px', - display: searchEnabled ? 'block' : 'none', + display: searchEnabled ? 'flex' : 'none', + flexDirection: 'column', }} > {searchEnabled ? ( diff --git a/packages/unigraph-dev-explorer/src/utils.tsx b/packages/unigraph-dev-explorer/src/utils.tsx index b45f2291..ef98be78 100644 --- a/packages/unigraph-dev-explorer/src/utils.tsx +++ b/packages/unigraph-dev-explorer/src/utils.tsx @@ -10,6 +10,13 @@ import { isJsonString } from 'unigraph-dev-common/lib/utils/utils'; export const NavigationContext = React.createContext<(location: string) => any>((location: string) => ({})); +export const trivialTypes = [ + '$/schema/markdown', + '$/schema/subentity', + '$/schema/interface/textual', + '$/schema/person', +]; + export function isValidHttpUrl(string: string) { let url; From 21c432e0c7e0f624f4f7aa302129ce1bc135f400 Mon Sep 17 00:00:00 2001 From: Sophia Xu Date: Wed, 13 Apr 2022 19:22:48 -0400 Subject: [PATCH 3/6] fix(dnd): fix lingering data of dragged object --- .../components/ObjectView/AutoDynamicView.tsx | 1 + .../ObjectView/AutoDynamicViewDetailed.tsx | 1 + .../src/examples/notes/Outline.tsx | 19 ++++++++++++++++--- packages/unigraph-dev-explorer/src/utils.tsx | 16 +++++++++++++--- .../unigraph-dev-explorer/src/workspace.css | 1 + 5 files changed, 32 insertions(+), 6 deletions(-) diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx index 2c144a09..e4ab824b 100644 --- a/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx +++ b/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx @@ -316,6 +316,7 @@ export function AutoDynamicView({ parents={finalOptions.ignoreBacklinks ? dataContext.parents : totalParents} viewType="$/schema/dynamic_view" expandedChildren={expandedChildren || false} + subsId={subsId} >
diff --git a/packages/unigraph-dev-explorer/src/examples/notes/Outline.tsx b/packages/unigraph-dev-explorer/src/examples/notes/Outline.tsx index 835a4135..0e14e74f 100644 --- a/packages/unigraph-dev-explorer/src/examples/notes/Outline.tsx +++ b/packages/unigraph-dev-explorer/src/examples/notes/Outline.tsx @@ -6,7 +6,7 @@ import { styled } from '@mui/styles'; import { ChevronRight } from '@mui/icons-material'; import { DragHandle } from './DragHandle'; -import { DataContext, TabContext } from '../../utils'; +import { DataContext, DataContextType, TabContext } from '../../utils'; import { NoteEditorContext, UnigraphObject } from './types'; import { useOutlineCollapsed } from './useOutlineCollapsed'; @@ -118,6 +118,8 @@ interface DragObject { parent: UnigraphObject; /** Index in the list of parent note block. */ indexInParent: number; + /** The dataContext of the note block. */ + dataContext: DataContextType; /** For future global dnd. */ itemType: string | undefined; /** For future global dnd. */ @@ -205,6 +207,7 @@ export function Outline({ indexInParent: index, itemType: noteBlock.type?.['unigraph.id'], tabId: tabContext.viewId, + dataContext, }, collect: (monitor) => { if (monitor.isDragging() && window.dragselect && window.dragselect.isDragging()) { @@ -296,7 +299,17 @@ export function Outline({ const performDrop = React.useCallback( (item: DragObject, side: 'before' | 'after') => { - console.log('drop', item.uid, 'from', item.parentUid, 'to', parentNoteBlock?.uid, `${side} index`, index); + // console.log( + // 'drop', + // item.uid, + // 'from', + // item.parentUid, + // 'to', + // parentNoteBlock?.uid, + // `${side} index`, + // index, + // `, with subsId: ${item.dataContext.subsId}`, + // ); /** * Use `reorderItemInArray` if drag and drop in the same array, to prevent * wrong result due to add-then-remove race condition. @@ -362,7 +375,7 @@ export function Outline({ }, false, false, - editorContext?.callbacks?.subsId, + item.dataContext.subsId || editorContext?.callbacks?.subsId, [], true, ); diff --git a/packages/unigraph-dev-explorer/src/utils.tsx b/packages/unigraph-dev-explorer/src/utils.tsx index ef98be78..cbb01e7a 100644 --- a/packages/unigraph-dev-explorer/src/utils.tsx +++ b/packages/unigraph-dev-explorer/src/utils.tsx @@ -56,12 +56,13 @@ export const isDeveloperMode = () => { return window.unigraph.getState('settings/developerMode').value; }; -type DataContextType = { +export type DataContextType = { contextUid: string; contextData?: any; parents?: string[]; viewType?: string; expandedChildren: boolean; + subsId?: any; getParents: (withParents?: boolean) => string[]; }; @@ -73,7 +74,15 @@ export const DataContext = React.createContext({ expandedChildren: false, }); -export const DataContextWrapper = ({ children, contextUid, contextData, parents, viewType, expandedChildren }: any) => { +export const DataContextWrapper = ({ + children, + contextUid, + contextData, + parents, + viewType, + expandedChildren, + subsId, +}: any) => { const parentContext = React.useContext(DataContext); const dataContext = React.useMemo(() => { @@ -90,8 +99,9 @@ export const DataContextWrapper = ({ children, contextUid, contextData, parents, ...(expandedChildren ? [contextUid] : []), ]; }, + subsId: subsId || parentContext.subsId, }; - }, [contextUid, contextData?.uid, viewType, expandedChildren, JSON.stringify(parents?.sort?.())]); + }, [contextUid, contextData?.uid, viewType, expandedChildren, JSON.stringify(parents?.sort?.()), subsId]); return {children}; }; diff --git a/packages/unigraph-dev-explorer/src/workspace.css b/packages/unigraph-dev-explorer/src/workspace.css index 20fe9a46..63d070a7 100644 --- a/packages/unigraph-dev-explorer/src/workspace.css +++ b/packages/unigraph-dev-explorer/src/workspace.css @@ -143,6 +143,7 @@ .topleft_bar_with_electron { padding-left: 50px; + background: linear-gradient(45deg, var(--app-drawer-background-color), transparent 50px); } .flexlayout__tab_button_leading { From 5aa8ae0c921cb688d38424439a463cdd68f2c353 Mon Sep 17 00:00:00 2001 From: Sophia Xu Date: Wed, 13 Apr 2022 21:17:10 -0400 Subject: [PATCH 4/6] fix(ux): more friendly context menu --- .../components/UnigraphCore/ContextMenu.tsx | 151 +++++++++++------- .../UnigraphCore/InlineSearchPopup.tsx | 4 +- packages/unigraph-dev-explorer/src/index.css | 1 + packages/unigraph-dev-explorer/src/utils.tsx | 8 +- .../unigraph-dev-explorer/src/workspace.css | 4 +- 5 files changed, 103 insertions(+), 65 deletions(-) diff --git a/packages/unigraph-dev-explorer/src/components/UnigraphCore/ContextMenu.tsx b/packages/unigraph-dev-explorer/src/components/UnigraphCore/ContextMenu.tsx index 076273c4..0e43d157 100644 --- a/packages/unigraph-dev-explorer/src/components/UnigraphCore/ContextMenu.tsx +++ b/packages/unigraph-dev-explorer/src/components/UnigraphCore/ContextMenu.tsx @@ -1,10 +1,89 @@ -import { Divider, ListItemText, ListItemIcon, MenuItem, Popover } from '@mui/material'; +import { Divider, ListItemText, ListItemIcon, MenuItem, Popover, Typography } from '@mui/material'; import React from 'react'; import { AppState } from 'unigraph-dev-common/lib/types/unigraph'; import Icon from '@mdi/react'; import { mdiCubeOutline, mdiDatabaseOutline } from '@mdi/js'; import { ContextMenuState } from '../../global.d'; -import { contextMenuItemStyle, deselectUid } from '../../utils'; +import { contextMenuItemStyle, deselectUid, getName, isDeveloperMode } from '../../utils'; + +const ItemDescriptorDeveloper = ({ uid, object, objectType }: any) => { + const objDef = window.unigraph.getNamespaceMap?.()?.[objectType]; + + return ( + + + + + {uid} + + {objDef?._icon ? ( + + ) : ( + + + + )} + {objDef?._name || objectType} + + ); +}; + +const ItemDescriptorNormal = ({ uid, object, objectType }: any) => { + const objDef = window.unigraph.getNamespaceMap?.()?.[objectType]; + + return ( + + + + {objDef?._name || objectType} + + + + {getName(object) || 'unnamed'} + + + ); +}; export function ContextMenu() { const thisRef = React.useRef(null); @@ -22,8 +101,7 @@ export function ContextMenu() { }, [ctxMenuState]); const [schemaMenuConstructors, setSchemaMenuConstructors] = React.useState(null); - const [objDef, setObjDef] = React.useState(null); - const [objCtxDef, setObjCtxDef] = React.useState(null); + const ItemDescriptor = isDeveloperMode() ? ItemDescriptorDeveloper : ItemDescriptorNormal; React.useEffect(() => { setSchemaMenuConstructors([ @@ -31,8 +109,6 @@ export function ContextMenu() { []), ...(state.schemaMenuContent || []), ]); - setObjDef(window.unigraph.getNamespaceMap?.()?.[state.contextObject?.type?.['unigraph.id']]); - setObjCtxDef(window.unigraph.getNamespaceMap?.()?.[state.contextContextObject?.type?.['unigraph.id']]); }, [state]); const handleClose = React.useCallback(() => { @@ -66,29 +142,11 @@ export function ContextMenu() { }} >
- - - - - {state.contextUid} - {objDef?._icon ? ( - - ) : ( - - - - )} - {objDef?._name || state.contextObject?.type?.['unigraph.id']} - + {state.menuContent?.map((el: any) => el( @@ -121,36 +179,11 @@ export function ContextMenu() { {state.contextContextUid ? ( <> - - - - - {state.contextContextUid} - {objCtxDef?._icon ? ( - - ) : ( - - - - )} - - {objCtxDef?._name || state.contextContextObject?.type?.['unigraph.id']} - - + {state.menuContextContent?.map((el: any) => el( diff --git a/packages/unigraph-dev-explorer/src/components/UnigraphCore/InlineSearchPopup.tsx b/packages/unigraph-dev-explorer/src/components/UnigraphCore/InlineSearchPopup.tsx index 0fc1211f..ffe26a15 100644 --- a/packages/unigraph-dev-explorer/src/components/UnigraphCore/InlineSearchPopup.tsx +++ b/packages/unigraph-dev-explorer/src/components/UnigraphCore/InlineSearchPopup.tsx @@ -24,7 +24,7 @@ const ResultDisplay = ({ el }: any) => { }")`, }} /> - + {window.unigraph.getNamespaceMap?.()?.[el.type]?._name} diff --git a/packages/unigraph-dev-explorer/src/index.css b/packages/unigraph-dev-explorer/src/index.css index bc0a9af8..f7b28db0 100644 --- a/packages/unigraph-dev-explorer/src/index.css +++ b/packages/unigraph-dev-explorer/src/index.css @@ -7,6 +7,7 @@ body { -moz-osx-font-smoothing: grayscale; --app-drawer-background-color: #f7f7f7; + --secondary-text-color: #37352f80; background-color: var(--app-drawer-background-color); } diff --git a/packages/unigraph-dev-explorer/src/utils.tsx b/packages/unigraph-dev-explorer/src/utils.tsx index cbb01e7a..85f80c02 100644 --- a/packages/unigraph-dev-explorer/src/utils.tsx +++ b/packages/unigraph-dev-explorer/src/utils.tsx @@ -6,7 +6,7 @@ import stringify from 'json-stable-stringify'; import _ from 'lodash/fp'; import React from 'react'; import { unpad } from 'unigraph-dev-common/lib/utils/entityUtils'; -import { isJsonString } from 'unigraph-dev-common/lib/utils/utils'; +import { isJsonString, UnigraphObject } from 'unigraph-dev-common/lib/utils/utils'; export const NavigationContext = React.createContext<(location: string) => any>((location: string) => ({})); @@ -612,7 +612,7 @@ export const getOrInitLocalStorage = (key: string, defaultValue: any) => { export const hoverSx = { // sx styles (mui v5) for when hovering over components - '&:hover': { backgroundColor: 'action.hover' }, + '&:hover': { backgroundColor: 'action.hover', borderRadius: '4px' }, '&:active': { backgroundColor: 'action.selected' }, }; export const pointerHoverSx = { cursor: 'pointer', ...hoverSx }; @@ -624,3 +624,7 @@ export const globalTheme = { secondary: { main: '#616161' }, }, }; + +export const getName = (obj: UnigraphObject) => { + return (obj?.get?.('name') || obj?.get?.('title') || obj?.get?.('text'))?.as?.('primitive'); +}; diff --git a/packages/unigraph-dev-explorer/src/workspace.css b/packages/unigraph-dev-explorer/src/workspace.css index 63d070a7..eded61fe 100644 --- a/packages/unigraph-dev-explorer/src/workspace.css +++ b/packages/unigraph-dev-explorer/src/workspace.css @@ -36,11 +36,11 @@ } .flexlayout__tab { - transition: width 0.5s, max-width 0.5s, height 0.5s, max-height 0.5s, top 0.5s, left 0.5s; + transition: width 0.3s, max-width 0.3s, height 0.3s, max-height 0.3s, top 0.3s, left 0.3s; } .flexlayout__tab_border { - transition: width 0.5s, max-width 0.5s, height 0.5s, max-height 0.5s, top 0.5s, left 0.5s, visibility 0.5s; + transition: width 0.3s, max-width 0.3s, height 0.3s, max-height 0.3s, top 0.3s, left 0.3s, visibility 0.3s; } .flexlayout__tab_button { From da6a8426fe7dc8c0fb9da7facca243fbdee5ddd5 Mon Sep 17 00:00:00 2001 From: Sophia Xu Date: Wed, 13 Apr 2022 21:34:42 -0400 Subject: [PATCH 5/6] fix(unigraph): add animation for tab close --- packages/unigraph-dev-explorer/src/Workspace.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/unigraph-dev-explorer/src/Workspace.tsx b/packages/unigraph-dev-explorer/src/Workspace.tsx index 7703eead..03b5288c 100644 --- a/packages/unigraph-dev-explorer/src/Workspace.tsx +++ b/packages/unigraph-dev-explorer/src/Workspace.tsx @@ -519,6 +519,17 @@ export function WorkSpace(this: any) { component: (window.layoutModel.getNodeById(action.data.tabNode) as any) ?._attributes?.component, }); + } else if ( + action.type === 'FlexLayout_DeleteTab' && + action.data.animationShown !== true + ) { + console.log('Closing'); + const tabEl = document.getElementById(`tabId${action.data.node}`)?.parentElement; + tabEl?.classList.remove('rendered_tab_button'); + setTimeout(() => { + model.doAction({ ...action, data: { ...action.data, animationShown: true } }); + }, 200); + return undefined; } return action; }} From 438587ca0644faabfd7d5ae7bd867e6844c93127 Mon Sep 17 00:00:00 2001 From: Sophia Xu Date: Wed, 13 Apr 2022 22:08:55 -0400 Subject: [PATCH 6/6] fix(dnd): fix dnd on mobile --- packages/unigraph-dev-explorer/src/App.tsx | 2 ++ packages/unigraph-dev-explorer/src/Workspace.tsx | 2 ++ .../src/components/ObjectView/AutoDynamicView.tsx | 12 +++++++----- packages/unigraph-dev-explorer/src/unigraphEmbed.tsx | 2 ++ 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/unigraph-dev-explorer/src/App.tsx b/packages/unigraph-dev-explorer/src/App.tsx index a05e1fe6..cce7e4a0 100644 --- a/packages/unigraph-dev-explorer/src/App.tsx +++ b/packages/unigraph-dev-explorer/src/App.tsx @@ -54,6 +54,8 @@ const providedTheme = createTheme(globalTheme); const dndOpts = { enableMouseEvents: true, + delayTouchStart: 500, + ignoreContextMenu: true, }; function AppToWrap() { diff --git a/packages/unigraph-dev-explorer/src/Workspace.tsx b/packages/unigraph-dev-explorer/src/Workspace.tsx index 03b5288c..6c712eca 100644 --- a/packages/unigraph-dev-explorer/src/Workspace.tsx +++ b/packages/unigraph-dev-explorer/src/Workspace.tsx @@ -282,6 +282,8 @@ const providedTheme = createTheme(globalTheme); const dndOpts = { enableMouseEvents: true, + delayTouchStart: 500, + ignoreContextMenu: true, }; export function WorkSpace(this: any) { diff --git a/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx b/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx index e4ab824b..f3533412 100644 --- a/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx +++ b/packages/unigraph-dev-explorer/src/components/ObjectView/AutoDynamicView.tsx @@ -338,7 +338,7 @@ export function AutoDynamicView({ window.wsnavigator( `/library/object?uid=${object?.uid}&viewer=${'dynamic-view-detailed'}&type=${ object?.type?.['unigraph.id'] - }&name=${object?.get('name')?.as('primitive')}`, + }&name=${getObject_()?.get?.('name')?.as('primitive') || ''}`, ); })(); } @@ -363,10 +363,12 @@ export function AutoDynamicView({ noContextMenu ? () => false : (event) => - onUnigraphContextMenu(event, getObjectRef.current(), contextEntity, { - ...callbacks, - componentId, - }) + isDragging + ? event.preventDefault() + : onUnigraphContextMenu(event, getObjectRef.current(), contextEntity, { + ...callbacks, + componentId, + }) } {...(attributes || {})} ref={attach} diff --git a/packages/unigraph-dev-explorer/src/unigraphEmbed.tsx b/packages/unigraph-dev-explorer/src/unigraphEmbed.tsx index d5318698..6cf49bd1 100644 --- a/packages/unigraph-dev-explorer/src/unigraphEmbed.tsx +++ b/packages/unigraph-dev-explorer/src/unigraphEmbed.tsx @@ -17,6 +17,8 @@ import { CustomDragLayer } from './CustomDragLayer'; const dndOpts = { enableMouseEvents: true, + delayTouchStart: 500, + ignoreContextMenu: true, }; function UnigraphComponent({ uid }: any) {