From 587a97e9f5fc49952d7520829d719614477e2717 Mon Sep 17 00:00:00 2001 From: Stanley Yip Date: Sun, 19 Apr 2020 01:50:59 -0700 Subject: generate snap lines --- src/client/util/DragManager.ts | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'src/client/util') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 3e9a5b63a..21306c339 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -18,6 +18,7 @@ import { AudioBox } from "../views/nodes/AudioBox"; import { DateField } from "../../new_fields/DateField"; import { DocumentView } from "../views/nodes/DocumentView"; import { UndoManager } from "./UndoManager"; +import { PointData } from "../../new_fields/InkField"; export type dropActionType = "place" | "alias" | "copy" | undefined; export function SetupDrag( @@ -73,6 +74,7 @@ export function SetupDrag( export namespace DragManager { let dragDiv: HTMLDivElement; + let snapLines: [PointData, PointData][]; export function Root() { const root = document.getElementById("root"); @@ -281,6 +283,10 @@ export namespace DragManager { StartDrag([ele], {}, downX, downY); } + export function SetSnapLines() { + snapLines = []; + } + function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void) { eles = eles.filter(e => e); if (!dragDiv) { -- cgit v1.2.3-70-g09d2 From 4bdffbc63bcfac5db15e5bb58fb3a41be617b2a1 Mon Sep 17 00:00:00 2001 From: Stanley Yip Date: Mon, 20 Apr 2020 20:06:53 -0700 Subject: better snapping, scaling is off still --- src/client/util/DragManager.ts | 67 +++++++++++++++++++--- .../collectionFreeForm/CollectionFreeFormView.tsx | 55 ++++++++++++------ 2 files changed, 96 insertions(+), 26 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 21306c339..b0cabfaad 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -74,7 +74,8 @@ export function SetupDrag( export namespace DragManager { let dragDiv: HTMLDivElement; - let snapLines: [PointData, PointData][]; + let horizSnapLines: number[]; + let vertSnapLines: number[]; export function Root() { const root = document.getElementById("root"); @@ -283,8 +284,9 @@ export namespace DragManager { StartDrag([ele], {}, downX, downY); } - export function SetSnapLines() { - snapLines = []; + export function SetSnapLines(horizLines: number[], vertLines: number[]) { + horizSnapLines = horizLines; + vertSnapLines = vertLines; } function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void) { @@ -302,12 +304,22 @@ export namespace DragManager { const ys: number[] = []; const docs = dragData instanceof DocumentDragData ? dragData.draggedDocuments : dragData instanceof PdfAnnoDragData ? [dragData.dragDocument] : []; + const elesCont = { + left: Number.MAX_SAFE_INTEGER, + top: Number.MAX_SAFE_INTEGER, + right: Number.MIN_SAFE_INTEGER, + bottom: Number.MIN_SAFE_INTEGER + }; const dragElements = eles.map(ele => { if (!ele.parentNode) dragDiv.appendChild(ele); const dragElement = ele.parentNode === dragDiv ? ele : ele.cloneNode(true) as HTMLElement; const rect = ele.getBoundingClientRect(); const scaleX = rect.width / ele.offsetWidth, scaleY = rect.height / ele.offsetHeight; + elesCont.left = Math.min(rect.left, elesCont.left); + elesCont.top = Math.min(rect.top, elesCont.top); + elesCont.right = Math.max(rect.right, elesCont.right); + elesCont.bottom = Math.max(rect.bottom, elesCont.bottom); xs.push(rect.left); ys.push(rect.top); scaleXs.push(scaleX); @@ -357,6 +369,12 @@ export namespace DragManager { let lastX = downX; let lastY = downY; + const xFromLeft = downX - elesCont.left; + const yFromTop = downY - elesCont.top; + const xFromRight = elesCont.right - downX; + const yFromBottom = elesCont.bottom - downY; + console.log(elesCont); + console.log(xFromLeft, yFromTop); const moveHandler = (e: PointerEvent) => { e.preventDefault(); // required or dragging text menu link item ends up dragging the link button as native drag/drop if (dragData instanceof DocumentDragData) { @@ -373,10 +391,45 @@ export namespace DragManager { }, dragData.droppedDocuments); } //TODO: Why can't we use e.movementX and e.movementY? - const moveX = e.pageX - lastX; - const moveY = e.pageY - lastY; - lastX = e.pageX; - lastY = e.pageY; + let thisX = e.pageX; + let thisY = e.pageY; + const currLeft = e.pageX - xFromLeft; + const currTop = e.pageY - yFromTop; + const currRight = e.pageX + xFromRight; + const currBottom = e.pageY + yFromBottom; + const closestLeft = vertSnapLines.reduce((prev, curr) => Math.abs(prev - currLeft) > Math.abs(curr - currLeft) ? curr : prev); + const closestTop = horizSnapLines.reduce((prev, curr) => Math.abs(prev - currTop) > Math.abs(curr - currTop) ? curr : prev); + const closestRight = vertSnapLines.reduce((prev, curr) => Math.abs(prev - currRight) > Math.abs(curr - currRight) ? curr : prev); + const closestBottom = horizSnapLines.reduce((prev, curr) => Math.abs(prev - currBottom) > Math.abs(curr - currBottom) ? curr : prev); + const distFromClosestLeft = Math.abs(e.pageX - xFromLeft - closestLeft); + const distFromClosestTop = Math.abs(e.pageY - yFromTop - closestTop); + const distFromClosestRight = Math.abs(e.pageX + xFromRight - closestRight); + const distFromClosestBottom = Math.abs(e.pageY + yFromBottom - closestBottom); + if (distFromClosestLeft < 10 && distFromClosestLeft < distFromClosestRight) { + thisX = closestLeft + xFromLeft; + } + else if (distFromClosestRight < 10) { + thisX = closestRight - xFromRight; + } + if (distFromClosestTop < 10 && distFromClosestTop < distFromClosestRight) { + thisY = closestTop + yFromTop; + } + else if (distFromClosestBottom < 10) { + thisY = closestBottom - yFromBottom; + } + + // const closestHoriz = horizSnapLines.reduce((prev, curr) => Math.abs(prev - thisY) > Math.abs(curr - thisY) ? curr : prev); + // const closestVert = vertSnapLines.reduce((prev, curr) => Math.abs(prev - thisX) > Math.abs(curr - thisX) ? curr : prev); + // if (Math.abs(thisY - closestHoriz) < 10) { + // thisY = closestHoriz; + // } + // if (Math.abs(thisX - closestVert) < 10) { + // thisX = closestVert; + // } + const moveX = thisX - lastX; + const moveY = thisY - lastY; + lastX = thisX; + lastY = thisY; dragElements.map((dragElement, i) => (dragElement.style.transform = `translate(${(xs[i] += moveX) + (options?.offsetX || 0)}px, ${(ys[i] += moveY) + (options?.offsetY || 0)}px) scale(${scaleXs[i]}, ${scaleYs[i]})`) ); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 36ec4c72e..c4c37141b 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1094,6 +1094,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u return !(r2.left > r1.left + r1.width || r2.left + r2.width < r1.left || r2.top > r1.top + r1.height || r2.top + r2.height < r1.top); } + @action onPointerOver = (e: React.PointerEvent) => { if (SelectionManager.GetIsDragging()) { const size = this.props.ScreenToLocalTransform().transformDirection(this.props.PanelWidth(), this.props.PanelHeight()); @@ -1123,11 +1124,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u }); } if (!selection.length) { - const left = this._downX < this._lastX ? this._downX : this._lastX; - const top = this._downY < this._lastY ? this._downY : this._lastY; - const topLeft = this.getContainerTransform().transformPoint(left, top); - const size = this.getContainerTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); - const otherBounds = { left: topLeft[0], top: topLeft[1], width: Math.abs(size[0]), height: Math.abs(size[1]) }; + const otherBounds = { left: this.panX(), top: this.panY(), width: Math.abs(size[0]), height: Math.abs(size[1]) }; this.getActiveDocuments().filter(doc => doc.z !== undefined).map(doc => { const layoutDoc = Doc.Layout(doc); const x = NumCast(doc.x); @@ -1139,23 +1136,38 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u } }); } - const lines: [PointData, PointData][] = []; + const horizLines: number[] = []; + const vertLines: number[] = []; selection.forEach(doc => { - const x = NumCast(doc.x); - const y = NumCast(doc.y); - const w = doc[WidthSym](); - const h = doc[HeightSym](); - lines.push([{ X: x, Y: y }, { X: x + w, Y: y }]); // top line - lines.push([{ X: x, Y: y }, { X: x, Y: y + h }]); // left line - lines.push([{ X: x + w, Y: y }, { X: x + w, Y: y + h }]); // right line - lines.push([{ X: x, Y: y + h }, { X: x + w, Y: y + h }]); // bottom line - lines.push([{ X: x + w / 2, Y: y }, { X: x + w / 2, Y: y + h }]); // horizontal center line - lines.push([{ X: x, Y: y + h / 2 }, { X: x + w, Y: y + h / 2 }]); // vertical center line - }) - DragManager.SetSnapLines(lines); + const layoutDoc = Doc.Layout(doc); + const x = NumCast(doc.x) - selRect.left; + const y = NumCast(doc.y) - selRect.top; + const w = NumCast(layoutDoc._width); + const h = NumCast(layoutDoc._height); + // const s = this._mainCont!.getBoundingClientRect().width / selRect.width; + // const tLFromCorner = [s * x, s * y]; + const topLeft = this.getLocalTransform().inverse().transformDirection(x, y); + console.log(topLeft); + const topLeftInScreen = [this._mainCont!.getBoundingClientRect().left + topLeft[0], this._mainCont!.getBoundingClientRect().top + topLeft[1]]; + const docSize = this.getLocalTransform().inverse().transformDirection(w, h); + console.log(topLeftInScreen); + horizLines.push(topLeftInScreen[1]); // top line + horizLines.push(topLeftInScreen[1] + docSize[1]); // bottom line + horizLines.push(topLeftInScreen[1] + docSize[1] / 2); // horiz center line + vertLines.push(topLeftInScreen[0]);//left line + vertLines.push(topLeftInScreen[0] + docSize[0]);// right line + vertLines.push(topLeftInScreen[0] + docSize[0] / 2);// vert center line + }); + // console.log(horizLines, vertLines); + // this._hLines = horizLines; + // this._vLines = vertLines; + DragManager.SetSnapLines(horizLines, vertLines); } } + @observable private _hLines: number[] | undefined; + @observable private _vLines: number[] | undefined; + private childViews = () => { const children = typeof this.props.children === "function" ? (this.props.children as any)() as JSX.Element[] : []; return [ @@ -1242,7 +1254,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u }}> - +
+ + {this._hLines?.map(l => )} + {this._vLines?.map(l => )} + +
; } } -- cgit v1.2.3-70-g09d2 From 58ba643f2642432ca6041f5d348aadf005323b73 Mon Sep 17 00:00:00 2001 From: Stanley Yip Date: Wed, 22 Apr 2020 20:36:06 -0700 Subject: snapping! --- src/client/util/DragManager.ts | 10 ++++++---- src/client/views/MainView.tsx | 10 ++++++++++ .../collectionFreeForm/CollectionFreeFormView.tsx | 22 +++++++--------------- 3 files changed, 23 insertions(+), 19 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index b0cabfaad..02d9f7200 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -19,6 +19,7 @@ import { DateField } from "../../new_fields/DateField"; import { DocumentView } from "../views/nodes/DocumentView"; import { UndoManager } from "./UndoManager"; import { PointData } from "../../new_fields/InkField"; +import { MainView } from "../views/MainView"; export type dropActionType = "place" | "alias" | "copy" | undefined; export function SetupDrag( @@ -74,8 +75,8 @@ export function SetupDrag( export namespace DragManager { let dragDiv: HTMLDivElement; - let horizSnapLines: number[]; - let vertSnapLines: number[]; + export let horizSnapLines: number[]; + export let vertSnapLines: number[]; export function Root() { const root = document.getElementById("root"); @@ -284,9 +285,12 @@ export namespace DragManager { StartDrag([ele], {}, downX, downY); } + @action export function SetSnapLines(horizLines: number[], vertLines: number[]) { horizSnapLines = horizLines; vertSnapLines = vertLines; + MainView.Instance._hLines = horizLines; + MainView.Instance._vLines = vertLines; } function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void) { @@ -373,8 +377,6 @@ export namespace DragManager { const yFromTop = downY - elesCont.top; const xFromRight = elesCont.right - downX; const yFromBottom = elesCont.bottom - downY; - console.log(elesCont); - console.log(xFromLeft, yFromTop); const moveHandler = (e: PointerEvent) => { e.preventDefault(); // required or dragging text menu link item ends up dragging the link button as native drag/drop if (dragData instanceof DocumentDragData) { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 40cabcf83..1f88410b8 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -42,6 +42,7 @@ import { OverlayView } from './OverlayView'; import PDFMenu from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; import { ScriptField } from '../../new_fields/ScriptField'; +import { DragManager } from '../util/DragManager'; @observer export class MainView extends React.Component { @@ -563,6 +564,9 @@ export class MainView extends React.Component { return this._mainViewRef; } + @observable public _hLines: any; + @observable public _vLines: any; + render() { return (
@@ -580,6 +584,12 @@ export class MainView extends React.Component { +
+ + {this._hLines?.map(l => )} + {this._vLines?.map(l => )} + +
); } } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index c4c37141b..ef49970e2 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1099,7 +1099,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u if (SelectionManager.GetIsDragging()) { const size = this.props.ScreenToLocalTransform().transformDirection(this.props.PanelWidth(), this.props.PanelHeight()); const selRect = { left: this.panX() - size[0] / 2, top: this.panY() - size[1] / 2, width: size[0], height: size[1] }; - console.log(selRect); const selection: Doc[] = []; this.getActiveDocuments().filter(doc => !doc.isBackground && doc.z === undefined).map(doc => { const layoutDoc = Doc.Layout(doc); @@ -1140,17 +1139,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u const vertLines: number[] = []; selection.forEach(doc => { const layoutDoc = Doc.Layout(doc); - const x = NumCast(doc.x) - selRect.left; - const y = NumCast(doc.y) - selRect.top; + const x = NumCast(doc.x); + const y = NumCast(doc.y); const w = NumCast(layoutDoc._width); const h = NumCast(layoutDoc._height); - // const s = this._mainCont!.getBoundingClientRect().width / selRect.width; - // const tLFromCorner = [s * x, s * y]; - const topLeft = this.getLocalTransform().inverse().transformDirection(x, y); - console.log(topLeft); - const topLeftInScreen = [this._mainCont!.getBoundingClientRect().left + topLeft[0], this._mainCont!.getBoundingClientRect().top + topLeft[1]]; - const docSize = this.getLocalTransform().inverse().transformDirection(w, h); - console.log(topLeftInScreen); + const topLeftInScreen = this.getTransform().inverse().transformPoint(x, y); + const docSize = this.getTransform().inverse().transformDirection(w, h); horizLines.push(topLeftInScreen[1]); // top line horizLines.push(topLeftInScreen[1] + docSize[1]); // bottom line horizLines.push(topLeftInScreen[1] + docSize[1] / 2); // horiz center line @@ -1158,11 +1152,9 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u vertLines.push(topLeftInScreen[0] + docSize[0]);// right line vertLines.push(topLeftInScreen[0] + docSize[0] / 2);// vert center line }); - // console.log(horizLines, vertLines); - // this._hLines = horizLines; - // this._vLines = vertLines; DragManager.SetSnapLines(horizLines, vertLines); } + e.stopPropagation(); } @observable private _hLines: number[] | undefined; @@ -1254,12 +1246,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument, u }}> -
+ {/*
{this._hLines?.map(l => )} {this._vLines?.map(l => )} -
+
*/} ; } } -- cgit v1.2.3-70-g09d2