designer fixes

packages/web/src/designer/Designer.js

@@ -26,6 +26,21 @@ const EmptyInfo = styled.div`
   font-size: 20px;
 `;
 
+function fixPositions(tables) {
+  const minLeft = _.min(tables.map((x) => x.left));
+  const minTop = _.min(tables.map((x) => x.top));
+  if (minLeft < 0 || minTop < 0) {
+    const dLeft = minLeft < 0 ? -minLeft : 0;
+    const dTop = minTop < 0 ? -minTop : 0;
+    return tables.map((tbl) => ({
+      ...tbl,
+      left: tbl.left + dLeft,
+      top: tbl.top + dTop,
+    }));
+  }
+  return tables;
+}
+
 export default function Designer({ value, onChange, conid, database }) {
   const { tables, references } = value || {};
   const theme = useTheme();
@@ -105,7 +120,7 @@ export default function Designer({ value, onChange, conid, database }) {
     (table) => {
       onChange((current) => ({
         ...current,
-        tables: (current.tables || []).map((x) => (x.designerId == table.designerId ? table : x)),
+        tables: fixPositions((current.tables || []).map((x) => (x.designerId == table.designerId ? table : x))),
       }));
     },
     [onChange]
@@ -288,7 +303,7 @@ export default function Designer({ value, onChange, conid, database }) {
 
   return (
     <Wrapper theme={theme}>
-      {(tables || []).length == 0 && <EmptyInfo>Drag &amp; drop tables or views from left panel list here</EmptyInfo>}
+      {(tables || []).length == 0 && <EmptyInfo>Drag &amp; drop tables or views from left panel here</EmptyInfo>}
       <Canvas onDragOver={(e) => e.preventDefault()} onDrop={handleDrop} ref={wrapperRef}>
         {(references || []).map((ref) => (
           <DesignerReference

packages/web/src/designer/DesignerTable.js

@@ -78,14 +78,14 @@ const ColumnLine = styled.div`
     // @ts-ignore
     props.isDragSource &&
     `
-    background-color: ${props.theme.designtable_background_green[4]};
+    background-color: ${props.theme.designtable_background_cyan[2]};
     `}
 
   ${(props) =>
     // @ts-ignore
     props.isDragTarget &&
     `
-    background-color: ${props.theme.designtable_background_volcano[4]};
+    background-color: ${props.theme.designtable_background_cyan[2]};
     `}
 `;
 
@@ -349,6 +349,10 @@ export default function DesignerTable({
               setSourceDragColumn(dragData);
               e.dataTransfer.setData('designer_column_drag_data', JSON.stringify(dragData));
             }}
+            onDragEnd={(e) => {
+              setTargetDragColumn(null);
+              setSourceDragColumn(null);
+            }}
             onDragOver={(e) => {
               if (sourceDragColumn) {
                 e.preventDefault();

packages/web/src/modals/DropDownMenu.js

@@ -17,6 +17,7 @@ const ContextMenuStyled = styled.ul`
   text-align: left;
   min-width: 160px;
   z-index: 1050;
+  cursor: default;
 `;
 
 const KeyTextSpan = styled.span`