diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.scss | 7 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 68 |
2 files changed, 65 insertions, 10 deletions
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index b059163ed..d487cd7ce 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -22,6 +22,13 @@ height: 100%; } } +.collectionfreeformview-marquee{ + border-style: dashed; + box-sizing: border-box; + position: absolute; + border-width: 1px; + border-color: black; +} .collectionfreeformview-overlay { .collectionfreeformview > .jsx-parser{ diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 16002ad9f..bc6d02757 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -25,13 +25,16 @@ import "./CollectionFreeFormView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import React = require("react"); -import { render } from "pug"; +import { Utils } from "../../../Utils"; +import { SelectionManager } from "../../util/SelectionManager"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @observer export class CollectionFreeFormView extends CollectionViewBase { private _canvasRef = React.createRef<HTMLDivElement>(); + @observable private _lastX: number = 0; + @observable private _lastY: number = 0; private _selectOnLoaded: string = ""; // id of document that should be selected once it's loaded (used for click-to-type) @@ -68,10 +71,13 @@ export class CollectionFreeFormView extends CollectionViewBase { this.bringToFront(doc); } + @observable + _marquee = false; + @action onPointerDown = (e: React.PointerEvent): void => { - if (((e.button === 2 && this.props.active()) || - !e.defaultPrevented) && (!this.isAnnotationOverlay || this.zoomScaling != 1 || e.button == 0)) { + if (((e.button === 2 && this.props.active()) || !e.defaultPrevented) && + (!this.isAnnotationOverlay || this.zoomScaling != 1 || e.button == 0)) { document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); @@ -80,6 +86,11 @@ export class CollectionFreeFormView extends CollectionViewBase { this._lastY = e.pageY; this._downX = e.pageX; this._downY = e.pageY; + this._marquee = e.shiftKey; + if (this._marquee) { + e.stopPropagation(); + e.preventDefault(); + } } } @@ -88,7 +99,12 @@ export class CollectionFreeFormView extends CollectionViewBase { document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); e.stopPropagation(); - if (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) { + + if (this._marquee) { + this.marqueeSelect(); + this._marquee = false; + } + else if (!this._marquee && Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) { //show preview text cursor on tap this._previewCursorVisible = true; //select is not already selected @@ -100,15 +116,42 @@ export class CollectionFreeFormView extends CollectionViewBase { } @action + marqueeSelect() { + var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1); + let p = this.getTransform().transformPoint(this._downX, this._downY); + let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); + + var curPage = this.props.Document.GetNumber(KeyStore.CurPage, 1); + const lvalue = this.props.Document.GetT<ListField<Document>>(this.props.fieldKey, ListField); + if (lvalue && lvalue != FieldWaiting) { + lvalue.Data.map(doc => { + var page = doc.GetNumber(KeyStore.Page, 0); + if (page == curPage || page == 0) { + var x = doc.GetNumber(KeyStore.X, 0); + var y = doc.GetNumber(KeyStore.Y, 0); + var w = doc.GetNumber(KeyStore.Width, 0); + var h = doc.GetNumber(KeyStore.Height, 0); + if (x > p[0] && x < p[0] + v[0] && y > p[1] && y < p[1] + v[1]) { + // SelectionManager.SelectDoc(doc as any as DocumentView, true); + } + } + }) + } + } + + @action onPointerMove = (e: PointerEvent): void => { if (!e.cancelBubble && this.props.active()) { e.stopPropagation(); e.preventDefault(); - let x = this.props.Document.GetNumber(KeyStore.PanX, 0); - let y = this.props.Document.GetNumber(KeyStore.PanY, 0); - let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); - this._previewCursorVisible = false; - this.SetPan(x - dx, y - dy); + + if (!this._marquee) { + let x = this.props.Document.GetNumber(KeyStore.PanX, 0); + let y = this.props.Document.GetNumber(KeyStore.PanY, 0); + let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); + this._previewCursorVisible = false; + this.SetPan(x - dx, y - dy); + } } this._lastX = e.pageX; this._lastY = e.pageY; @@ -291,6 +334,10 @@ export class CollectionFreeFormView extends CollectionViewBase { cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", position: "absolute", transformOrigin: "left top", transform: `translate(${x}px, ${y}px)` }}>I</div> } + let p = this.getTransform().transformPoint(this._downX, this._downY); + let v = this.getTransform().transformDirection(this._lastX - this._downX, this._lastY - this._downY); + var marquee = this._marquee ? <div className="collectionfreeformview-marquee" style={{ transform: `translate(${p[0]}px, ${p[1]}px)`, width: `${v[0]}`, height: `${v[1]}` }}></div> : (null); + let [dx, dy] = [this.centeringShiftX, this.centeringShiftY]; const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0); @@ -313,7 +360,8 @@ export class CollectionFreeFormView extends CollectionViewBase { {this.backgroundView} <InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} /> {cursor} - {this.views} + {React.Children.map(this.views, (child) => child)} + {marquee} </div> {this.overlayView} </div> |