Reworked selectlayer.tsx

src/editor/components/selectlayer.tsx

@@ -29,10 +29,7 @@ function SelectLayer({
         useState<Coordinate2D>(undefined);
     const [selectionEnd, setSelectionEnd] = useState<Coordinate2D>(undefined);
 
-    if (!isEnabled) {
-        return <>{children}</>;
-    }
-
+    // Calculate the nodes included in the bounding box
     const makeSelection = (bb: Box) => {
         // Filter out selected nodes
         const hitNodes: Node[] = [];
@@ -52,16 +49,20 @@ function SelectLayer({
         onBoxSelect(hitNodes);
     };
 
+    // Create bounding box from two points
     const getBoundingBox = (p1: Coordinate2D, p2: Coordinate2D): Box => {
         return {
             left: Math.min(p1.x, p2.x),
             top: Math.min(p1.y, p2.y),
             right: Math.max(p1.x, p2.x),
-            bottom: Math.max(p1.x, p2.x),
+            bottom: Math.max(p1.y, p2.y),
         };
     };
 
     const handlePointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+        if (!isEnabled) {
+            return;
+        }
         e.preventDefault();
         makeSelection(getBoundingBox(selectionStart, selectionEnd));
         setSelectionStart(undefined);
@@ -69,13 +70,22 @@ function SelectLayer({
     };
 
     const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+        if (!isEnabled) {
+            return;
+        }
         e.preventDefault();
-        setSelectionStart({ x: e.screenX, y: e.screenY });
-        setSelectionEnd({ x: e.screenX, y: e.screenY });
+        setSelectionStart({
+            x: e.nativeEvent.offsetX,
+            y: e.nativeEvent.offsetY,
+        });
+        setSelectionEnd({ x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY });
     };
 
     const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
-        setSelectionEnd({ x: e.screenX, y: e.screenY });
+        if (!isEnabled) {
+            return;
+        }
+        setSelectionEnd({ x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY });
     };
 
     let width = 0;
@@ -101,7 +111,7 @@ function SelectLayer({
             <div
                 id="box-select"
                 className={selectionStart ? "visible" : ""}
-                style={{ width: width, height: height, left: left, top: top }}
+                style={{ width, height, left, top }}
             ></div>
             {children}
         </div>
@@ -109,156 +119,3 @@ function SelectLayer({
 }
 
 export default SelectLayer;
-
-// export class SelectLayer extends React.Component<propTypes> {
-//     private layerContainer: React.RefObject<HTMLDivElement>;
-//     private layerBox: React.RefObject<HTMLDivElement>;
-//     private initialSelectPoint: layerCoordinates = undefined;
-//
-//     constructor(props: propTypes) {
-//         super(props);
-//
-//         this.isSelecting = this.isSelecting.bind(this);
-//         this.onBoxSelect = this.onBoxSelect.bind(this);
-//         this.boxSelectOnPointerDown = this.boxSelectOnPointerDown.bind(this);
-//         this.boxSelectOnPointerMove = this.boxSelectOnPointerMove.bind(this);
-//         this.boxSelectOnPointerUp = this.boxSelectOnPointerUp.bind(this);
-//
-//         this.layerContainer = React.createRef();
-//         this.layerBox = React.createRef();
-//     }
-//
-//     componentDidMount(): void {
-//         this.setupBoxSelect();
-//     }
-//
-//     setupBoxSelect() {
-//         // Source: https://github.com/vasturiano/force-graph/issues/151#issuecomment-735850938
-//         this.layerContainer.current.addEventListener(
-//             "pointerdown",
-//             this.boxSelectOnPointerDown
-//         );
-//         this.layerContainer.current.addEventListener(
-//             "pointermove",
-//             this.boxSelectOnPointerMove
-//         );
-//         this.layerContainer.current.addEventListener(
-//             "pointerup",
-//             this.boxSelectOnPointerUp
-//         );
-//     }
-//
-//     private isSelecting(): boolean {
-//         if (!this.initialSelectPoint) {
-//             return false;
-//         }
-//
-//         if (!this.props.isEnabled) {
-//             this.initialSelectPoint = undefined;
-//             this.layerBox.current.className = "";
-//             return false;
-//         }
-//
-//         return true;
-//     }
-//
-//     onBoxSelect(left: number, bottom: number, top: number, right: number) {
-//         // Filter out selected nodes
-//         const hitNodes: Node[] = [];
-//         const tl = this.props.screen2GraphCoords(left, top);
-//         const br = this.props.screen2GraphCoords(right, bottom);
-//         this.props.allNodes.forEach((node: Node) => {
-//             if (
-//                 tl.x < node.x &&
-//                 node.x < br.x &&
-//                 br.y > node.y &&
-//                 node.y > tl.y
-//             ) {
-//                 // Add node if in box area
-//                 hitNodes.push(node);
-//             }
-//         });
-//
-//         this.props.onBoxSelect(hitNodes);
-//     }
-//
-//     boxSelectOnPointerDown(e: PointerEvent) {
-//         if (!this.props.isEnabled) {
-//             return;
-//         }
-//
-//         e.preventDefault();
-//         this.layerBox.current.style.left = e.offsetX.toString() + "px";
-//         this.layerBox.current.style.top = e.offsetY.toString() + "px";
-//         this.layerBox.current.style.width = "0px";
-//         this.layerBox.current.style.height = "0px";
-//         this.initialSelectPoint = {
-//             x: e.offsetX,
-//             y: e.offsetY,
-//         };
-//         this.layerBox.current.className = "visible";
-//     }
-//
-//     boxSelectOnPointerMove(e: PointerEvent) {
-//         if (!this.isSelecting()) {
-//             return;
-//         }
-//
-//         e.preventDefault();
-//         if (e.offsetX < this.initialSelectPoint.x) {
-//             this.layerBox.current.style.left = e.offsetX.toString() + "px";
-//             this.layerBox.current.style.width =
-//                 (this.initialSelectPoint.x - e.offsetX).toString() + "px";
-//         } else {
-//             this.layerBox.current.style.left =
-//                 this.initialSelectPoint.x.toString() + "px";
-//             this.layerBox.current.style.width =
-//                 (e.offsetX - this.initialSelectPoint.x).toString() + "px";
-//         }
-//         if (e.offsetY < this.initialSelectPoint.y) {
-//             this.layerBox.current.style.top = e.offsetY.toString() + "px";
-//             this.layerBox.current.style.height =
-//                 (this.initialSelectPoint.y - e.offsetY).toString() + "px";
-//         } else {
-//             this.layerBox.current.style.top =
-//                 this.initialSelectPoint.y.toString() + "px";
-//             this.layerBox.current.style.height =
-//                 (e.offsetY - this.initialSelectPoint.y).toString() + "px";
-//         }
-//     }
-//
-//     boxSelectOnPointerUp(e: PointerEvent) {
-//         if (!this.isSelecting()) {
-//             return;
-//         }
-//
-//         e.preventDefault();
-//         let left, bottom, top, right;
-//         if (e.offsetX < this.initialSelectPoint.x) {
-//             left = e.offsetX;
-//             right = this.initialSelectPoint.x;
-//         } else {
-//             left = this.initialSelectPoint.x;
-//             right = e.offsetX;
-//         }
-//         if (e.offsetY < this.initialSelectPoint.y) {
-//             top = e.offsetY;
-//             bottom = this.initialSelectPoint.y;
-//         } else {
-//             top = this.initialSelectPoint.y;
-//             bottom = e.offsetY;
-//         }
-//         this.initialSelectPoint = undefined;
-//         this.layerBox.current.className = "";
-//         this.onBoxSelect(left, bottom, top, right);
-//     }
-//
-//     render(): ReactNode {
-//         return (
-//             <div ref={this.layerContainer} id="select-layer">
-//                 <div ref={this.layerBox} id="box-select"></div>
-//                 {this.props.children}
-//             </div>
-//         );
-//     }
-// }