unigraph-dev · thesophiaxu · Apr 13, 2022 · Apr 11, 2022 · Mar 29, 2022 · Mar 29, 2022
diff --git a/packages/default-packages/unigraph.core/executables/addItemToList.js b/packages/default-packages/unigraph.core/executables/addItemToList.js
@@ -1,5 +1,7 @@
 const destUidOrName = context.params.where;
 const sourceUid = context.params.item;
+/** Set `true` to add items before indexes, otherwise after indexes. */
+const listBefore = context.params.before;
 const { indexes, subIds } = context.params;
 let destUid;
 
@@ -39,7 +41,7 @@ if (indexes && Array.isArray(indexes) && indexes.length === sources.length) {
     if (listUid)
         await unigraph.reorderItemInArray(
             listUid,
-            sources.map((el, idx) => [el, indexes[idx]]),
+            sources.map((el, idx) => [el, indexes[listBefore ? idx - 1 : idx]]),
             undefined,
             subIds,
         );

diff --git a/packages/unigraph-dev-common/src/api/unigraph.ts b/packages/unigraph-dev-common/src/api/unigraph.ts
@@ -573,7 +573,7 @@ export default function unigraph(url: string, browserId: string): Unigraph<WebSo
             }
 
             subResults[subId] = newObj;
-            // console.log(newObj);
+            console.log(newObj);
 
             // Record state changes
             if (id) {
@@ -585,12 +585,13 @@ export default function unigraph(url: string, browserId: string): Unigraph<WebSo
         deleteRelation: (uid, relation) => {
             sendEvent(connection, 'delete_relation', { uid, relation });
         },
-        reorderItemInArray: (uid, item, relUid, subIds) => {
+        reorderItemInArray: (uid, item, relUid, subIds, eventId) => {
             sendEvent(connection, 'reorder_item_in_array', {
                 uid,
                 item,
                 relUid,
                 subIds,
+                id: eventId,
             });
         },
         deleteItemFromArray: (uid, item, relUid, subIds) => {

diff --git a/packages/unigraph-dev-common/src/types/unigraph.ts b/packages/unigraph-dev-common/src/types/unigraph.ts
@@ -325,6 +325,7 @@ export interface Unigraph<TT = WebSocket | undefined> {
         item: [number | string, number] | [number | string, number][],
         relationUid?: string,
         subIds?: any[] | any,
+        eventId?: string,
     ): any;
     /**
      * Deletes an item from an array (ordered list).

diff --git a/packages/unigraph-dev-explorer/package.json b/packages/unigraph-dev-explorer/package.json
@@ -58,8 +58,9 @@
         "react-app-polyfill": "^2.0.0",
         "react-big-calendar": "^0.38.5",
         "react-dev-utils": "^11.0.3",
-        "react-dnd": "^14.0.2",
-        "react-dnd-html5-backend": "^14.0.0",
+        "react-dnd": "^15.1.2",
+        "react-dnd-html5-backend": "^15.1.3",
+        "react-dnd-touch-backend": "^15.1.2",
         "react-error-boundary": "^3.1.3",
         "react-force-graph-2d": "^1.23.6",
         "react-grid-layout": "^1.2.4",
@@ -94,7 +95,8 @@
         "webpack": "4.44.2",
         "webpack-dev-server": "3.11.1",
         "webpack-manifest-plugin": "2.2.0",
-        "workbox-webpack-plugin": "5.1.4"
+        "workbox-webpack-plugin": "5.1.4",
+        "zustand": "^3.7.1"
     },
     "devDependencies": {
         "@testing-library/jest-dom": "^4.2.4",

diff --git a/packages/unigraph-dev-explorer/src/App.tsx b/packages/unigraph-dev-explorer/src/App.tsx
@@ -5,11 +5,13 @@ import { styled } from '@mui/styles';
 
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { TouchBackend } from 'react-dnd-touch-backend';
 import { getParameters, globalTheme, isElectron, NavigationContext } from './utils';
 import { ContextMenu } from './components/UnigraphCore/ContextMenu';
 import { InlineSearch } from './components/UnigraphCore/InlineSearchPopup';
 import { SearchOverlayPopover } from './pages/SearchOverlay';
 import { MobileBar } from './components/UnigraphCore/MobileBar';
+import { CustomDragLayer } from './CustomDragLayer';
 
 declare module '@mui/styles/defaultTheme' {
     // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -50,6 +52,10 @@ const StyledStyledEngineProvider = styled(StyledEngineProvider)(({ theme }) => (
 
 const providedTheme = createTheme(globalTheme);
 
+const dndOpts = {
+    enableMouseEvents: true,
+};
+
 function AppToWrap() {
     const history = createBrowserHistory();
     const componentPathName = new URLSearchParams(window.location.search).get('pageName');
@@ -59,7 +65,8 @@ function AppToWrap() {
 
     return (
         <div className={classes.root}>
-            <DndProvider backend={HTML5Backend}>
+            <DndProvider backend={TouchBackend} options={dndOpts}>
+                <CustomDragLayer />
                 <div id="global-elements">
                     <ContextMenu />
                     <InlineSearch />

diff --git a/packages/unigraph-dev-explorer/src/CustomDragLayer.tsx b/packages/unigraph-dev-explorer/src/CustomDragLayer.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { useDragLayer, XYCoord } from 'react-dnd';
+import { DragHandle } from './examples/notes/DragHandle';
+
+const layerStyles: React.CSSProperties = {
+    position: 'fixed',
+    pointerEvents: 'none',
+    zIndex: 100,
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+};
+
+function getItemStyles(initialOffset: XYCoord | null, currentOffset: XYCoord | null) {
+    if (!initialOffset || !currentOffset) {
+        return {
+            display: 'none',
+        };
+    }
+
+    const { x, y } = currentOffset;
+
+    const transform = `translate(${x}px, ${y}px)`;
+    return {
+        transform,
+        WebkitTransform: transform,
+    };
+}
+
+export const CustomDragLayer = () => {
+    const { isDragging, initialOffset, currentOffset } = useDragLayer((monitor) => ({
+        item: monitor.getItem(),
+        itemType: monitor.getItemType(),
+        initialOffset: monitor.getInitialSourceClientOffset(),
+        currentOffset: monitor.getSourceClientOffset(),
+        isDragging: monitor.isDragging(),
+    }));
+
+    React.useEffect(() => {
+        if (isDragging) {
+            document.body.style.cursor = 'grabbing';
+        } else {
+            document.body.style.cursor = 'auto';
+        }
+    }, [isDragging]);
+
+    if (!isDragging) {
+        return null;
+    }
+    return (
+        <div style={layerStyles}>
+            <div style={getItemStyles(initialOffset, currentOffset)}>
+                <DragHandle />
+            </div>
+        </div>
+    );
+};
diff --git a/packages/unigraph-dev-explorer/src/Workspace.tsx b/packages/unigraph-dev-explorer/src/Workspace.tsx
@@ -16,7 +16,7 @@ import { isJsonString } from 'unigraph-dev-common/lib/utils/utils';
 import { getRandomInt } from 'unigraph-dev-common/lib/api/unigraph';
 import { Menu, Details, Home } from '@mui/icons-material';
 import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
+import { TouchBackend } from 'react-dnd-touch-backend';
 
 import MomentUtils from '@date-io/moment';
 // or @mui/lab/Adapter{Dayjs,Luxon,Moment} or any valid date-io adapter
@@ -33,6 +33,7 @@ import { ContextMenu } from './components/UnigraphCore/ContextMenu';
 import { getComponentFromPage, getParameters, globalTheme, isElectron, isSmallScreen, TabContext } from './utils';
 import { SearchOverlayPopover } from './pages/SearchOverlay';
 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);
@@ -279,6 +280,10 @@ const setTitleOnRenderTab = (model: Model) => {
 
 const providedTheme = createTheme(globalTheme);
 
+const dndOpts = {
+    enableMouseEvents: true,
+};
+
 export function WorkSpace(this: any) {
     const json: any = {
         global: {
@@ -491,7 +496,8 @@ export function WorkSpace(this: any) {
         <StyledEngineProvider injectFirst>
             <ThemeProvider theme={providedTheme}>
                 <LocalizationProvider dateAdapter={AdapterMoment}>
-                    <DndProvider backend={HTML5Backend}>
+                    <DndProvider backend={TouchBackend} options={dndOpts}>
+                        <CustomDragLayer />
                         <div id="global-elements" className="lol1">
                             <SearchOverlayPopover />
                             <ContextMenu />

diff --git a/packages/unigraph-dev-explorer/src/examples/notes/DragHandle.tsx b/packages/unigraph-dev-explorer/src/examples/notes/DragHandle.tsx
@@ -0,0 +1,37 @@
+/* eslint-disable react/require-default-props */
+import { styled } from '@mui/styles';
+import React from 'react';
+
+const DragHandleContainer = styled('div')({
+    flex: '0 0 1rem',
+    width: '1rem',
+    height: '1.25rem',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'grab',
+    borderRadius: '0.25rem',
+    transition: 'background 30ms ease-in',
+    '&:hover': {
+        background: 'rgba(0, 0, 0, 0.1)',
+    },
+    '&:active': {
+        background: 'rgba(0, 0, 0, 0.2)',
+        cursor: 'grabbing',
+    },
+});
+
+export const DragHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>((props, ref) => {
+    return (
+        <DragHandleContainer ref={ref} {...props}>
+            <svg width="100%" height="100%" viewBox="0 0 20 24" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="7" cy="7" r="1.5" />
+                <circle cx="7" cy="12" r="1.5" />
+                <circle cx="7" cy="17" r="1.5" />
+                <circle cx="13" cy="7" r="1.5" />
+                <circle cx="13" cy="12" r="1.5" />
+                <circle cx="13" cy="17" r="1.5" />
+            </svg>
+        </DragHandleContainer>
+    );
+});