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) => {
+    (table) => {
-      const newValue = {
+      onChange((current) => ({
-        ...value,
+        ...current,
-        tables: (tables || []).map((t, i) => (i == index ? table : t)),
+        tables: (current.tables || []).map((x) => (x.designerId == table.designerId ? table : x)),
-      };
+      }));
-      onChange(newValue);
+    },
+    [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) => (
+      {(tables || []).map((table) => (
-        <DesignerTable key={index} {...table} index={index} onChangeTable={changeTable} />
+        <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(
+        onChangeTable({
-          {
           ...props,
           left: movingPositionRef.current.left,
           top: movingPositionRef.current.top,
-          },
+        });
-          index
-        );
       }
 
       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>

packages/web/src/utility/useEditorData.js

@@ -4,6 +4,19 @@ import localforage from 'localforage';
 import { changeTab } from './common';
 import { useSetOpenedTabs } from './globalState';
 
+function getParsedLocalStorage(key) {
+  const value = localStorage.getItem(key);
+  if (value != null) {
+    try {
+      const res = JSON.parse(value);
+      return res;
+    } catch (e) {
+      localStorage.removeItem(key);
+    }
+  }
+  return null;
+}
+
 export default function useEditorData({ tabid, reloadToken = 0, loadFromArgs = null }) {
   const localStorageKey = `tabdata_editor_${tabid}`;
   const setOpenedTabs = useSetOpenedTabs();
@@ -34,7 +47,7 @@ export default function useEditorData({ tabid, reloadToken = 0, loadFromArgs = n
         console.error(err.response);
       }
     } else {
-      const initFallback = localStorage.getItem(localStorageKey);
+      const initFallback = getParsedLocalStorage(localStorageKey);
       if (initFallback != null) {
         const init = JSON.parse(initFallback);
         setValue(init);