designer - moving tables

packages/web/src/designer/Designer.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+import DesignerTable from './DesignerTable';
+
+const Wrapper = styled.div`
+  flex: 1;
+`;
+
+export default function Designer({ value, onChange }) {
+  const { tables } = value || {};
+  const handleDrop = (e) => {
+    var data = e.dataTransfer.getData('app_object_drag_data');
+    e.preventDefault();
+    if (!data) return;
+    var json = JSON.parse(data);
+    onChange({
+      ...value,
+      tables: [...(tables || []), json],
+    });
+    // var objs = AppObject.createAppObjectInstances(json);
+    // let targetOffset = $(ev.target).offset();
+    // for (let obj of objs) {
+    //     await this.props.model.addTable(obj, ev.clientX - targetOffset.left, ev.clientY - targetOffset.top);
+    // }
+    // this.changedModel();
+  };
+
+  const changeTable = React.useCallback(
+    (table, index) => {
+      onChange({
+        ...value,
+        tables: (tables || []).map((t, i) => (i == index ? table : t)),
+      });
+    },
+    [onChange]
+  );
+
+  return (
+    <Wrapper onDragOver={(e) => e.preventDefault()} onDrop={handleDrop}>
+      {(tables || []).map((table, index) => (
+        <DesignerTable
+          key={index}
+          {...table}
+          index={index}
+          onChangeTable={changeTable}
+        />
+      ))}
+    </Wrapper>
+  );
+}

packages/web/src/designer/DesignerTable.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import styled from 'styled-components';
+import ColumnLabel from '../datagrid/ColumnLabel';
+
+const Wrapper = styled.div`
+  position: absolute;
+  background-color: white;
+`;
+
+const Header = styled.div`
+  font-weight: bold;
+  text-align: center;
+  padding: 2px;
+  background: lightblue;
+`;
+
+const ColumnsWrapper = styled.div`
+  max-height: 400px;
+  overflow-y: scroll;
+  width: 100%;
+`;
+
+export default function DesignerTable(props) {
+  const { pureName, columns, left, top, onChangeTable, index } = props;
+  const [movingPosition, setMovingPosition] = React.useState(null);
+  const movingPositionRef = React.useRef(null);
+
+  const moveStartXRef = React.useRef(null);
+  const moveStartYRef = React.useRef(null);
+
+  const handleMove = React.useCallback(
+    (e) => {
+      let diffX = e.clientX - moveStartXRef.current;
+      let diffY = e.clientY - moveStartYRef.current;
+      moveStartXRef.current = e.clientX;
+      moveStartYRef.current = e.clientY;
+
+      movingPositionRef.current = {
+        left: (movingPositionRef.current.left || 0) + diffX,
+        top: (movingPositionRef.current.top || 0) + diffY,
+      };
+      setMovingPosition(movingPositionRef.current);
+      //   onChangeTable(
+      //     {
+      //       ...props,
+      //       left: (left || 0) + diffX,
+      //       top: (top || 0) + diffY,
+      //     },
+      //     index
+      //   );
+    },
+    [onChangeTable]
+  );
+
+  const handleMoveEnd = React.useCallback((e) => {
+    setMovingPosition(null);
+
+    onChangeTable(
+      {
+        ...props,
+        left: movingPositionRef.current.left,
+        top: movingPositionRef.current.top,
+      },
+      index
+    );
+
+    // this.props.model.fixPositions();
+
+    // this.props.designer.changedModel(true);
+  }, []);
+
+  React.useEffect(() => {
+    if (movingPosition) {
+      document.addEventListener('mousemove', handleMove, true);
+      document.addEventListener('mouseup', handleMoveEnd, true);
+      return () => {
+        document.removeEventListener('mousemove', handleMove, true);
+        document.removeEventListener('mouseup', handleMoveEnd, true);
+      };
+    }
+  }, [movingPosition == null, handleMove, handleMoveEnd]);
+
+  const headerMouseDown = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      moveStartXRef.current = e.clientX;
+      moveStartYRef.current = e.clientY;
+      movingPositionRef.current = { left, top };
+      setMovingPosition(movingPositionRef.current);
+      // setIsMoving(true);
+    },
+    [handleMove, handleMoveEnd]
+  );
+
+  return (
+    <Wrapper
+      style={{
+        left: movingPosition ? movingPosition.left : left,
+        top: movingPosition ? movingPosition.top : top,
+      }}
+    >
+      <Header onMouseDown={headerMouseDown}>{pureName}</Header>
+      <ColumnsWrapper>
+        {(columns || []).map((column) => (
+          <div key={column.columnName}>
+            <ColumnLabel {...column} />
+          </div>
+        ))}
+      </ColumnsWrapper>
+    </Wrapper>
+  );
+}

packages/web/src/designer/QueryDesigner.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import styled from 'styled-components';
+import Designer from './Designer';
+
+export default function QueryDesigner({ value, conid, database, engine, onChange, onKeyDown }) {
+  return <Designer value={value} onChange={onChange}></Designer>;
+}