From 7771d8297e646047a12d510f4c1ac7e79c05249c Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 7 Jul 2022 15:02:28 -0400 Subject: updated movable column imports --- .../CollectionSchemaMovableColumn.tsx | 79 ++++++++++------------ 1 file changed, 36 insertions(+), 43 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaMovableColumn.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaMovableColumn.tsx index 2df95ffd8..2cfae4900 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaMovableColumn.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaMovableColumn.tsx @@ -1,17 +1,11 @@ -import React = require("react"); -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action } from "mobx"; -import { ReactTableDefaults, RowInfo, TableCellRenderer } from "react-table"; -import { Doc } from "../../../../fields/Doc"; -import { SchemaHeaderField } from "../../../../fields/SchemaHeaderField"; -import { Cast, FieldValue, StrCast } from "../../../../fields/Types"; -import { DocumentManager } from "../../../util/DocumentManager"; -import { DragManager, dropActionType, SetupDrag } from "../../../util/DragManager"; -import { SnappingManager } from "../../../util/SnappingManager"; -import { Transform } from "../../../util/Transform"; -import { undoBatch } from "../../../util/UndoManager"; -import { ContextMenu } from "../../ContextMenu"; -import "./CollectionSchemaView.scss"; +import React = require('react'); +import { action } from 'mobx'; +import { TableCellRenderer } from 'react-table'; +import { SchemaHeaderField } from '../../../../fields/SchemaHeaderField'; +import { DragManager } from '../../../util/DragManager'; +import { SnappingManager } from '../../../util/SnappingManager'; +import { Transform } from '../../../util/Transform'; +import './CollectionSchemaView.scss'; export interface MovableColumnProps { columnRenderer: TableCellRenderer; @@ -26,7 +20,7 @@ export class MovableColumn extends React.Component { // The container of the function that is responsible for moving the column over to a new plac private _colDropDisposer?: DragManager.DragDropDisposer; // initial column position - private _startDragPosition: { x: number, y: number } = { x: 0, y: 0 }; + private _startDragPosition: { x: number; y: number } = { x: 0, y: 0 }; // sensitivity to being dragged, in pixels private _sensitivity: number = 16; // Column reference ID @@ -35,45 +29,45 @@ export class MovableColumn extends React.Component { onPointerEnter = (e: React.PointerEvent): void => { // if the column is left-clicked and it is being dragged if (e.buttons === 1 && SnappingManager.GetIsDragging()) { - this._header!.current!.className = "collectionSchema-col-wrapper"; - document.addEventListener("pointermove", this.onDragMove, true); + this._header!.current!.className = 'collectionSchema-col-wrapper'; + document.addEventListener('pointermove', this.onDragMove, true); } - } + }; onPointerLeave = (e: React.PointerEvent): void => { - this._header!.current!.className = "collectionSchema-col-wrapper"; - document.removeEventListener("pointermove", this.onDragMove, true); - !e.buttons && document.removeEventListener("pointermove", this.onPointerMove); - } + this._header!.current!.className = 'collectionSchema-col-wrapper'; + document.removeEventListener('pointermove', this.onDragMove, true); + !e.buttons && document.removeEventListener('pointermove', this.onPointerMove); + }; onDragMove = (e: PointerEvent): void => { // only take into account the horizonal direction when a column is dragged const x = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY); const rect = this._header!.current!.getBoundingClientRect(); // Now store the point at the top center of the column when it was in its original position - const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left + ((rect.right - rect.left) / 2), rect.top); + const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left + (rect.right - rect.left) / 2, rect.top); // to be compared with its new horizontal position const before = x[0] < bounds[0]; - this._header!.current!.className = "collectionSchema-col-wrapper"; - if (before) this._header!.current!.className += " col-before"; - if (!before) this._header!.current!.className += " col-after"; + this._header!.current!.className = 'collectionSchema-col-wrapper'; + if (before) this._header!.current!.className += ' col-before'; + if (!before) this._header!.current!.className += ' col-after'; e.stopPropagation(); - } + }; createColDropTarget = (ele: HTMLDivElement) => { this._colDropDisposer?.(); if (ele) { this._colDropDisposer = DragManager.MakeDropTarget(ele, this.colDrop.bind(this)); } - } + }; colDrop = (e: Event, de: DragManager.DropEvent) => { - document.removeEventListener("pointermove", this.onDragMove, true); + document.removeEventListener('pointermove', this.onDragMove, true); // we only care about whether the column is shifted to the side const x = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y); // get the dimensions of the smallest rectangle that bounds the header const rect = this._header!.current!.getBoundingClientRect(); - const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left + ((rect.right - rect.left) / 2), rect.top); + const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left + (rect.right - rect.left) / 2, rect.top); // get whether the column was dragged before or after where it is now const before = x[0] < bounds[0]; const colDragData = de.complete.columnDragData; @@ -84,20 +78,20 @@ export class MovableColumn extends React.Component { return true; } return false; - } + }; onPointerMove = (e: PointerEvent) => { const onRowMove = (e: PointerEvent) => { e.stopPropagation(); e.preventDefault(); - document.removeEventListener("pointermove", onRowMove); + document.removeEventListener('pointermove', onRowMove); document.removeEventListener('pointerup', onRowUp); const dragData = new DragManager.ColumnDragData(this.props.columnValue); DragManager.StartColumnDrag(this._dragRef.current!, dragData, e.x, e.y); }; const onRowUp = (): void => { - document.removeEventListener("pointermove", onRowMove); + document.removeEventListener('pointermove', onRowMove); document.removeEventListener('pointerup', onRowUp); }; // if the left mouse button is the one being held @@ -105,30 +99,29 @@ export class MovableColumn extends React.Component { const [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._startDragPosition.x, e.clientY - this._startDragPosition.y); // If the movemnt of the drag exceeds the sensitivity value if (Math.abs(dx) + Math.abs(dy) > this._sensitivity) { - document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener('pointermove', this.onPointerMove); e.stopPropagation(); - document.addEventListener("pointermove", onRowMove); - document.addEventListener("pointerup", onRowUp); + document.addEventListener('pointermove', onRowMove); + document.addEventListener('pointerup', onRowUp); } } - } + }; onPointerUp = (e: React.PointerEvent) => { - document.removeEventListener("pointermove", this.onPointerMove); - } + document.removeEventListener('pointermove', this.onPointerMove); + }; @action onPointerDown = (e: React.PointerEvent, ref: React.RefObject) => { this._dragRef = ref; const [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX, e.clientY); // If the cell thing dragged is not being edited - if (!(e.target as any)?.tagName.includes("INPUT")) { + if (!(e.target as any)?.tagName.includes('INPUT')) { this._startDragPosition = { x: dx, y: dy }; - document.addEventListener("pointermove", this.onPointerMove); + document.addEventListener('pointermove', this.onPointerMove); } - } - + }; render() { const reference = React.createRef(); -- cgit v1.2.3-70-g09d2