introduced designer id, bring to front

packages/web/src/designer/Designer.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import DesignerTable from './DesignerTable';
+import uuidv1 from 'uuid/v1';
 
 const Wrapper = styled.div`
   flex: 1;
@@ -13,6 +14,7 @@ export default function Designer({ value, onChange }) {
     e.preventDefault();
     if (!data) return;
     var json = JSON.parse(data);
+    json.designerId = uuidv1();
     onChange({
       ...value,
       tables: [...(tables || []), json],
@@ -26,20 +28,29 @@ export default function Designer({ value, onChange }) {
   };
 
   const changeTable = React.useCallback(
-    (table, index) => {
-      const newValue = {
-        ...value,
-        tables: (tables || []).map((t, i) => (i == index ? table : t)),
-      };
-      onChange(newValue);
+    (table) => {
+      onChange((current) => ({
+        ...current,
+        tables: (current.tables || []).map((x) => (x.designerId == table.designerId ? table : x)),
+      }));
+    },
+    [onChange]
+  );
+
+  const bringToFront = React.useCallback(
+    (table) => {
+      onChange((current) => ({
+        ...current,
+        tables: [...(current.tables || []).filter((x) => x.designerId != table.designerId), table],
+      }));
     },
     [onChange]
   );
 
   return (
     <Wrapper onDragOver={(e) => e.preventDefault()} onDrop={handleDrop}>
-      {(tables || []).map((table, index) => (
-        <DesignerTable key={index} {...table} index={index} onChangeTable={changeTable} />
+      {(tables || []).map((table) => (
+        <DesignerTable key={table.designerId} {...table} onChangeTable={changeTable} onBringToFront={bringToFront} />
       ))}
     </Wrapper>
   );

packages/web/src/designer/DesignerTable.js

@@ -23,7 +23,7 @@ const ColumnsWrapper = styled.div`
 `;
 
 export default function DesignerTable(props) {
-  const { pureName, columns, left, top, onChangeTable, index } = props;
+  const { pureName, columns, left, top, onChangeTable, onBringToFront } = props;
   const [movingPosition, setMovingPosition] = React.useState(null);
   const movingPositionRef = React.useRef(null);
 
@@ -54,14 +54,11 @@ export default function DesignerTable(props) {
   const handleMoveEnd = React.useCallback(
     (e) => {
       if (movingPositionRef.current) {
-        onChangeTable(
-          {
-            ...props,
-            left: movingPositionRef.current.left,
-            top: movingPositionRef.current.top,
-          },
-          index
-        );
+        onChangeTable({
+          ...props,
+          left: movingPositionRef.current.left,
+          top: movingPositionRef.current.top,
+        });
       }
 
       movingPositionRef.current = null;
@@ -71,7 +68,7 @@ export default function DesignerTable(props) {
 
       // this.props.designer.changedModel(true);
     },
-    [onChangeTable, index]
+    [onChangeTable, props]
   );
 
   React.useEffect(() => {
@@ -103,6 +100,7 @@ export default function DesignerTable(props) {
         left: movingPosition ? movingPosition.left : left,
         top: movingPosition ? movingPosition.top : top,
       }}
+      onMouseDown={() => onBringToFront(props)}
     >
       <Header onMouseDown={headerMouseDown}>{pureName}</Header>
       <ColumnsWrapper>