wip: initial relation pane styling

Signed-off-by: Alex <[email protected]>
opencaesar · May 25, 2024 · b496ca0 · b496ca0
1 parent 13f20d6
commit b496ca0
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/view/src/components/Diagram/Diagram.tsx b/view/src/components/Diagram/Diagram.tsx
@@ -25,7 +25,7 @@ import ReactFlow, {
   getConnectedEdges,
 } from "reactflow";
 
-import { InsertPanel, InstancePane, InstanceItem } from "./InsertPanel";
+import { InsertPanel, InsertPane, InstanceItem, RelationItem } from "./InsertPanel";
 
 // Icons
 import { IconDownload } from "@nasa-jpl/react-stellar";
@@ -661,20 +661,16 @@ function Diagram({
         />
         <Panel position="top-left" className="flow-panel">
           <InsertPanel>
-            <InstancePane>
+            <InsertPane label="Instance">
               {insertItems.map((item) => {
               return <InstanceItem label={item}/>
               })}
-            </InstancePane>
-            <InstancePane>
-              <ul>
-                <li>Test</li>
-                <li>Test</li>
-                <li>Test</li>
-                <li>Test</li>
-                <li>Test</li>
-              </ul>
-            </InstancePane>
+            </InsertPane>
+            <InsertPane label="Relation">
+            {insertItems.map((item) => {
+              return <RelationItem label={item}/>
+              })}
+            </InsertPane>
           </InsertPanel>
         </Panel>
         <Background gap={12} size={1} />

diff --git a/view/src/components/Diagram/InsertPanel.tsx b/view/src/components/Diagram/InsertPanel.tsx
@@ -31,22 +31,41 @@ export const InstanceItem: React.FC<InsertItemProps> = ({ label, style }) => {
   }, []);
 
   return (
-    <div className="flex flex-row items-center bg-opacity-0">
+    <div className="flex flex-row items-center">
       <div className="relative left-[1px] z-10 h-2 w-2 border-[1px] rounded-full bg-black border-white "></div>
       <div className="flex flex-none justify-center items-center rounded h-11 w-24 bg-[#ff0000] z-0 " ref={ref}>
-        <span className="text-center text-nowrap text-white">{label}</span>
+        <span className="text-center text-nowrap text-white text-[12px]">{label}</span>
       </div>
       <div className="relative right-[1px] z-10 h-2 w-2 border-[1px] rounded-full bg-black border-white"></div>
     </div>
   );
 };
 
-export const InstancePane: React.FC<any> = ({ children }) => {
+export const RelationItem: React.FC<InsertItemProps> = ({ label, style }) => {
+  // TODO: handle onDrag Look at react-beautiful-dnd
+  // TODO: handle cloning object after dragging
+  // TODO: handle dropping object after letting go of the mouse
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    invariant(el);
+    return draggable({element: el});
+  }, []);
+
+  return (
+    <div className="flex flex-row justify-between bg-clip-text w-24" ref={ref}>
+      <span className="text-center text-nowrap text-white text-[12px]">{label}</span>
+      <span className="codicon codicon-arrow-right mr-2 text-[14px]"/>
+    </div>
+  );
+};
+
+export const InsertPane: React.FC<any> = ({ label, children }) => {
   // Refer to http://www.opencaesar.io/oml-tutorials/#tutorial1-create-oml-vocabulary
-  // h-24 pl-2 flex flex-col items-center space-y-2 overflow-y-auto max-h-[9rem] z-10
   return (
     <div className="p-2 rounded shadow-md bg-white/5 h-36">
-      <span className="font-bold">{"Instance"}</span>
+      <span className="font-bold">{label}</span>
       <div className="flex flex-col h-28 items-center space-y-2 overflow-y-auto">
         {children}
       </div>