From 1e6d81d5f3019a6407ed764e3725611e0228489b Mon Sep 17 00:00:00 2001 From: eeng5 Date: Sun, 9 Feb 2020 15:52:40 -0500 Subject: :asdkfjl --- src/client/views/GestureOverlay.tsx | 56 ++++++++++++++++----------------- src/client/views/MainView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 2 +- 3 files changed, 30 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 4e9b87eea..b85f35fe4 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -144,34 +144,34 @@ export default class GestureOverlay extends Touchable { } ) ); - // if (this.prevPoints.size === 1 && this._holdTimer === undefined) { - // console.log("started"); - // this._holdTimer = setTimeout(() => { - // console.log("hold"); - // const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY); - // target?.dispatchEvent( - // new CustomEvent>("dashOnTouchHoldStart", - // { - // bubbles: true, - // detail: { - // fingers: this.prevPoints.size, - // targetTouches: nts.ntt, - // touches: nts.nt, - // changedTouches: nts.nct, - // touchEvent: te - // } - // } - // ) - // ); - // this._holdTimer = undefined; - // document.removeEventListener("touchmove", this.onReactTouchMove); - // document.removeEventListener("touchend", this.onReactTouchEnd); - // document.removeEventListener("touchmove", this.onReactHoldTouchMove); - // document.removeEventListener("touchend", this.onReactHoldTouchEnd); - // document.addEventListener("touchmove", this.onReactHoldTouchMove); - // document.addEventListener("touchend", this.onReactHoldTouchEnd); - // }, (1000)); - // } + if (this.prevPoints.size === 1 && this._holdTimer === undefined) { + console.log("started"); + this._holdTimer = setTimeout(() => { + console.log("hold"); + const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY); + target?.dispatchEvent( + new CustomEvent>("dashOnTouchHoldStart", + { + bubbles: true, + detail: { + fingers: this.prevPoints.size, + targetTouches: nts.ntt, + touches: nts.nt, + changedTouches: nts.nct, + touchEvent: te + } + } + ) + ); + this._holdTimer = undefined; + document.removeEventListener("touchmove", this.onReactTouchMove); + document.removeEventListener("touchend", this.onReactTouchEnd); + document.removeEventListener("touchmove", this.onReactHoldTouchMove); + document.removeEventListener("touchend", this.onReactHoldTouchEnd); + document.addEventListener("touchmove", this.onReactHoldTouchMove); + document.addEventListener("touchend", this.onReactHoldTouchEnd); + }, (1000)); + } document.removeEventListener("touchmove", this.onReactTouchMove); document.removeEventListener("touchend", this.onReactTouchEnd); document.addEventListener("touchmove", this.onReactTouchMove); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 92b26b9bc..997266266 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -531,7 +531,7 @@ export class MainView extends React.Component { - {/* */} + diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 765077c4d..6b400113b 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -189,7 +189,7 @@ export class DocumentView extends DocComponent(Docu this._mainCont.current && (this._dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, this.drop.bind(this))); this._mainCont.current && (this._gestureEventDisposer = GestureUtils.MakeGestureTarget(this._mainCont.current, this.onGesture.bind(this))); this._mainCont.current && (this.multiTouchDisposer = InteractionUtils.MakeMultiTouchTarget(this._mainCont.current, this.onTouchStart.bind(this))); - // this._mainCont.current && (this.holdDisposer = InteractionUtils.MakeHoldTouchTarget(this._mainCont.current, this.handle1PointerHoldStart.bind(this))); + this._mainCont.current && (this.holdDisposer = InteractionUtils.MakeHoldTouchTarget(this._mainCont.current, this.handle1PointerHoldStart.bind(this))); } @action -- cgit v1.2.3-70-g09d2 From 05c429412d36531bed4e8ece889479fcf93faea6 Mon Sep 17 00:00:00 2001 From: kimdahey Date: Sun, 9 Feb 2020 16:43:01 -0500 Subject: functioning --- package-lock.json | 4 +- package.json | 2 +- .../views/collections/CollectionDockingView.tsx | 69 ++++++++++++++++++++++ .../collectionFreeForm/CollectionFreeFormView.tsx | 40 ++++++++++++- 4 files changed, 110 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/package-lock.json b/package-lock.json index 833710fe7..049c91fcf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16239,7 +16239,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "requires": { "safe-buffer": "~5.1.0" @@ -18560,7 +18560,7 @@ }, "wrap-ansi": { "version": "2.1.0", - "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "requires": { "string-width": "^1.0.1", diff --git a/package.json b/package.json index 67b9b1630..7e0adfba6 100644 --- a/package.json +++ b/package.json @@ -253,4 +253,4 @@ "xoauth2": "^1.2.0", "youtube": "^0.1.0" } -} \ No newline at end of file +} diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 82cb3bc88..7a6d54ac2 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -249,6 +249,75 @@ export class CollectionDockingView extends React.Component(); + private _pullCoords: number[] = [0, 0]; public get displayName() { return "CollectionFreeFormView(" + this.props.Document.title?.toString() + ")"; } // this makes mobx trace() statements more descriptive @observable.shallow _layoutElements: ViewDefResult[] = []; // shallow because some layout items (eg pivot labels) are just generated 'divs' and can't be frozen as observables @@ -596,7 +598,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true); const pt1 = myTouches[0]; const pt2 = myTouches[1]; - console.log(myTouches); if (this.prevPoints.size === 2) { const oldPoint1 = this.prevPoints.get(pt1.identifier); @@ -625,7 +626,11 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { // use the centerx and centery as the "new mouse position" const centerX = Math.min(pt1.clientX, pt2.clientX) + Math.abs(pt2.clientX - pt1.clientX) / 2; const centerY = Math.min(pt1.clientY, pt2.clientY) + Math.abs(pt2.clientY - pt1.clientY) / 2; - this.pan({ clientX: centerX, clientY: centerY }); + + if (!this._pullCoords[0] && !this._pullCoords[1]) { // if we are not bezel movement + this.pan({ clientX: centerX, clientY: centerY }); + } + this._lastX = centerX; this._lastY = centerY; } @@ -650,6 +655,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { const centerY = Math.min(pt1.clientY, pt2.clientY) + Math.abs(pt2.clientY - pt1.clientY) / 2; this._lastX = centerX; this._lastY = centerY; + + // determine if we are using a bezel movement + if ((this.props.PanelWidth() - this._lastX) < 100 || this._lastX < 100 || (this.props.PanelHeight() - this._lastY < 100) || this._lastY < 120) { // to account for header + this._pullCoords = [this._lastX, this._lastY]; + } + this.removeMoveListeners(); this.addMoveListeners(); this.removeEndListeners(); @@ -660,12 +671,37 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { } cleanUpInteractions = () => { + + if (this._pullCoords[0] !== 0 && this._pullCoords[1] !== 0) { // if bezel mvmt was activated + const xDiff = this._pullCoords[0] - this._lastX; + const yDiff = this._pullCoords[1] - this._lastY; + + console.log('went thru', this._pullCoords); + if ((this._lastX < this._pullCoords[0]) && (yDiff < xDiff)) { // pull from right + console.log('pulled from right'); + // CollectionDockingView.AddRightSplit(this.Document, undefined); + CollectionDockingView.AddSplit(this.Document, "right", undefined); + } else if ((this._lastY > this._pullCoords[1]) && (yDiff < xDiff)) { // pull from top + console.log('pulled from top'); + CollectionDockingView.AddSplit(this.Document, "top", undefined); + } else if ((this._lastY < this._pullCoords[1]) && (yDiff > xDiff)) { // pull from bottom + console.log('pulled from bottom'); + CollectionDockingView.AddSplit(this.Document, "bottom", undefined); + } else if ((this._lastX > this._pullCoords[0]) && (yDiff > xDiff)) { // pull from left + console.log('pulled from left'); + CollectionDockingView.AddSplit(this.Document, "left", undefined); + } + } + + this._pullCoords = [0, 0]; + document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); this.removeMoveListeners(); this.removeEndListeners(); } + @action zoom = (pointX: number, pointY: number, deltaY: number): void => { let deltaScale = deltaY > 0 ? (1 / 1.1) : 1.1; -- cgit v1.2.3-70-g09d2 From b6c45582962201b843b1a414fb29d16ec25bdaaf Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Sun, 9 Feb 2020 19:07:01 -0500 Subject: bug fixed the radial menu --- src/client/views/GestureOverlay.tsx | 68 ++++++++++++++++++++---------- src/client/views/nodes/DocumentView.tsx | 33 +++++++++------ src/client/views/nodes/RadialMenu.tsx | 75 ++++++++++++++++++--------------- 3 files changed, 106 insertions(+), 70 deletions(-) (limited to 'src') diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index b85f35fe4..a2d57a69c 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -27,6 +27,7 @@ import { listSpec } from "../../new_fields/Schema"; import { List } from "../../new_fields/List"; import { CollectionViewType } from "./collections/CollectionView"; import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu"; +import { RadialMenu } from "./nodes/RadialMenu"; @observer export default class GestureOverlay extends Touchable { @@ -104,6 +105,16 @@ export default class GestureOverlay extends Touchable { } onReactTouchStart = (te: React.TouchEvent) => { + console.log("STARTING"); + console.log(te.touches); + // if (RadialMenu.Instance._display === true) { + // console.log("display", RadialMenu.Instance._display); + // runInAction(() => { RadialMenu.Instance._display = false; }); + // te.preventDefault(); + // te.stopPropagation(); + // return; + // } + const actualPts: React.Touch[] = []; for (let i = 0; i < te.touches.length; i++) { const pt: any = te.touches.item(i); @@ -127,9 +138,10 @@ export default class GestureOverlay extends Touchable { ptsToDelete.forEach(pt => this.prevPoints.delete(pt)); const nts = this.getNewTouches(te); - + console.log(this.prevPoints.size, nts.ntt.length, nts.nt.length, nts.nct.length); if (nts.nt.length < 5) { const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY); + console.log(te.touches); target?.dispatchEvent( new CustomEvent>("dashOnTouchStart", { @@ -144,33 +156,41 @@ export default class GestureOverlay extends Touchable { } ) ); - if (this.prevPoints.size === 1 && this._holdTimer === undefined) { + console.log("2"); + if (nts.nt.length === 1) { console.log("started"); this._holdTimer = setTimeout(() => { console.log("hold"); const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY); - target?.dispatchEvent( - new CustomEvent>("dashOnTouchHoldStart", - { - bubbles: true, - detail: { - fingers: this.prevPoints.size, - targetTouches: nts.ntt, - touches: nts.nt, - changedTouches: nts.nct, - touchEvent: te + console.log(this.prevPoints.size, nts.ntt.length, nts.nt.length, nts.nct.length); + if (nts.nt.length === 1) { + target?.dispatchEvent( + new CustomEvent>("dashOnTouchHoldStart", + { + bubbles: true, + detail: { + fingers: this.prevPoints.size, + targetTouches: nts.ntt, + touches: nts.nt, + changedTouches: nts.nct, + touchEvent: te + } } - } - ) - ); - this._holdTimer = undefined; - document.removeEventListener("touchmove", this.onReactTouchMove); - document.removeEventListener("touchend", this.onReactTouchEnd); - document.removeEventListener("touchmove", this.onReactHoldTouchMove); - document.removeEventListener("touchend", this.onReactHoldTouchEnd); - document.addEventListener("touchmove", this.onReactHoldTouchMove); - document.addEventListener("touchend", this.onReactHoldTouchEnd); - }, (1000)); + ) + ); + this._holdTimer = undefined; + document.removeEventListener("touchmove", this.onReactTouchMove); + document.removeEventListener("touchend", this.onReactTouchEnd); + document.removeEventListener("touchmove", this.onReactHoldTouchMove); + document.removeEventListener("touchend", this.onReactHoldTouchEnd); + document.addEventListener("touchmove", this.onReactHoldTouchMove); + document.addEventListener("touchend", this.onReactHoldTouchEnd); + } + + }, (500)); + } + else { + clearTimeout(this._holdTimer); } document.removeEventListener("touchmove", this.onReactTouchMove); document.removeEventListener("touchend", this.onReactTouchEnd); @@ -298,6 +318,7 @@ export default class GestureOverlay extends Touchable { } handleHandDown = async (e: React.TouchEvent) => { + clearTimeout(this._holdTimer!); const fingers = new Array(); for (let i = 0; i < e.touches.length; i++) { const pt: any = e.touches.item(i); @@ -347,6 +368,7 @@ export default class GestureOverlay extends Touchable { const thumbDoc = await Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc); if (thumbDoc) { runInAction(() => { + RadialMenu.Instance._display = false; this._inkToTextDoc = FieldValue(Cast(thumbDoc.inkToTextDoc, Doc)); this._thumbDoc = thumbDoc; this._thumbX = thumb.clientX; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 6b400113b..d4e3546f7 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -124,24 +124,27 @@ export class DocumentView extends DocComponent(Docu private _firstY: number = -1; + handle1PointerHoldStart = (e: Event, me: InteractionUtils.MultiTouchEvent): any => { - this.addHoldMoveListeners(); - this.addHoldEndListeners(); - this.onRadialMenu(e, me); - const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0]; - this._firstX = pt.pageX; - this._firstY = pt.pageY; + console.log("START"); + if (RadialMenu.Instance._display === false) { + this.addHoldMoveListeners(); + this.addHoldEndListeners(); + this.onRadialMenu(e, me); + const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1]; + this._firstX = pt.pageX; + this._firstY = pt.pageY; + } } handle1PointerHoldMove = (e: Event, me: InteractionUtils.MultiTouchEvent): void => { - const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0]; - console.log(pt.pageX, this._firstX, pt.pageY, this._firstY); + const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1]; + if (this._firstX === -1 || this._firstY === -1) { return; } if (Math.abs(pt.pageX - this._firstX) > 150 || Math.abs(pt.pageY - this._firstY) > 150) { - console.log("WHY"); this.handle1PointerHoldEnd(e, me); } } @@ -154,20 +157,22 @@ export class DocumentView extends DocComponent(Docu @action onRadialMenu = (e: Event, me: InteractionUtils.MultiTouchEvent): void => { - const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0]; - - RadialMenu.Instance.openMenu(); + console.log("DISPLAYMENUUUU"); + console.log(me.touchEvent.touches); + // console.log(InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)); + // const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0]; + const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1]; + RadialMenu.Instance.openMenu(pt.pageX - 15, pt.pageY - 15); RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group", selected: -1 }); RadialMenu.Instance.addItem({ description: "Delete this document", event: () => this.props.ContainingCollectionView?.removeDocument(this.props.Document), icon: "trash", selected: -1 }); RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, undefined, "onRight"), icon: "folder", selected: -1 }); RadialMenu.Instance.addItem({ description: "Pin to Presentation", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin", selected: -1 }); - RadialMenu.Instance.displayMenu(pt.pageX - 15, pt.pageY - 15); if (!SelectionManager.IsSelected(this, true)) { SelectionManager.SelectDoc(this, false); } - e.stopPropagation(); + } @action diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx index 74c5f53bd..a6fb72a7b 100644 --- a/src/client/views/nodes/RadialMenu.tsx +++ b/src/client/views/nodes/RadialMenu.tsx @@ -24,12 +24,19 @@ export class RadialMenu extends React.Component { private _reactionDisposer?: IReactionDisposer; + catchTouch = (te: React.TouchEvent) => { + console.log("caught"); + te.stopPropagation(); + te.preventDefault(); + } + @action onPointerDown = (e: PointerEvent) => { this._mouseDown = true; this._mouseX = e.clientX; this._mouseY = e.clientY; document.addEventListener("pointermove", this.onPointerMove); + } @observable @@ -42,7 +49,6 @@ export class RadialMenu extends React.Component { const deltX = this._mouseX - curX; const deltY = this._mouseY - curY; const scale = Math.hypot(deltY, deltX); - if (scale < 150 && scale > 50) { const rad = Math.atan2(deltY, deltX) + Math.PI; let closest = 0; @@ -83,6 +89,7 @@ export class RadialMenu extends React.Component { @action componentDidMount = () => { + console.log(this._pageX); document.addEventListener("pointerdown", this.onPointerDown); document.addEventListener("pointerup", this.onPointerUp); this.previewcircle(); @@ -98,7 +105,7 @@ export class RadialMenu extends React.Component { @observable private _pageX: number = 0; @observable private _pageY: number = 0; - @observable private _display: boolean = false; + @observable _display: boolean = false; @observable private _yRelativeToTop: boolean = true; @@ -124,35 +131,34 @@ export class RadialMenu extends React.Component { displayMenu = (x: number, y: number) => { //maxX and maxY will change if the UI/font size changes, but will work for any amount //of items added to the menu - - this._pageX = x; - this._pageY = y; + this._mouseX = x; + this._mouseY = y; this._shouldDisplay = true; } - - get pageX() { - const x = this._pageX; - if (x < 0) { - return 0; - } - const width = this._width; - if (x + width > window.innerWidth - RadialMenu.buffer) { - return window.innerWidth - RadialMenu.buffer - width; - } - return x; - } - - get pageY() { - const y = this._pageY; - if (y < 0) { - return 0; - } - const height = this._height; - if (y + height > window.innerHeight - RadialMenu.buffer) { - return window.innerHeight - RadialMenu.buffer - height; - } - return y; - } + // @computed + // get pageX() { + // const x = this._pageX; + // if (x < 0) { + // return 0; + // } + // const width = this._width; + // if (x + width > window.innerWidth - RadialMenu.buffer) { + // return window.innerWidth - RadialMenu.buffer - width; + // } + // return x; + // } + // @computed + // get pageY() { + // const y = this._pageY; + // if (y < 0) { + // return 0; + // } + // const height = this._height; + // if (y + height > window.innerHeight - RadialMenu.buffer) { + // return window.innerHeight - RadialMenu.buffer - height; + // } + // return y; + // } @computed get menuItems() { return this._items.map((item, index) => ); @@ -166,7 +172,10 @@ export class RadialMenu extends React.Component { } @action - openMenu = () => { + openMenu = (x: number, y: number) => { + + this._pageX = x; + this._pageY = y; this._shouldDisplay; this._display = true; } @@ -207,12 +216,12 @@ export class RadialMenu extends React.Component { if (!this._display) { return null; } - const style = this._yRelativeToTop ? { left: this._mouseX - 150, top: this._mouseY - 150 } : - { left: this._mouseX - 150, top: this._mouseY - 150 }; + const style = this._yRelativeToTop ? { left: this._pageX - 130, top: this._pageY - 130 } : + { left: this._pageX - 130, top: this._pageY - 130 }; return ( -
+
Your browser does not support the HTML5 canvas tag. {this.menuItems}
-- cgit v1.2.3-70-g09d2 From 6c379d0f45a4639484f93ca3416f7e6cf601e443 Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Mon, 10 Feb 2020 19:27:06 -0500 Subject: bugfixes --- src/client/views/GestureOverlay.tsx | 3 ++- src/client/views/nodes/DocumentView.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index a2d57a69c..08083c259 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -163,7 +163,8 @@ export default class GestureOverlay extends Touchable { console.log("hold"); const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY); console.log(this.prevPoints.size, nts.ntt.length, nts.nt.length, nts.nct.length); - if (nts.nt.length === 1) { + let pt: any = te.touches[te.touches.length - 1]; + if (nts.nt.length === 1 && pt.radiusX > 1 && pt.radiusY > 1) { target?.dispatchEvent( new CustomEvent>("dashOnTouchHoldStart", { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d4e3546f7..ff627fbc2 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -164,10 +164,10 @@ export class DocumentView extends DocComponent(Docu const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1]; RadialMenu.Instance.openMenu(pt.pageX - 15, pt.pageY - 15); - RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group", selected: -1 }); - RadialMenu.Instance.addItem({ description: "Delete this document", event: () => this.props.ContainingCollectionView?.removeDocument(this.props.Document), icon: "trash", selected: -1 }); - RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, undefined, "onRight"), icon: "folder", selected: -1 }); - RadialMenu.Instance.addItem({ description: "Pin to Presentation", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin", selected: -1 }); + RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "map-pin", selected: -1 }); + RadialMenu.Instance.addItem({ description: "Delete this document", event: () => { this.props.ContainingCollectionView?.removeDocument(this.props.Document), RadialMenu.Instance.closeMenu() }, icon: "layer-group", selected: -1 }); + RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, undefined, "onRight"), icon: "trash", selected: -1 }); + RadialMenu.Instance.addItem({ description: "Pin to Presentation", event: () => this.props.pinToPres(this.props.Document), icon: "folder", selected: -1 }); if (!SelectionManager.IsSelected(this, true)) { SelectionManager.SelectDoc(this, false); -- cgit v1.2.3-70-g09d2 From 4b09b59dc31b089eada895fa0eabac95fd3931bd Mon Sep 17 00:00:00 2001 From: kimdahey Date: Mon, 10 Feb 2020 22:48:54 -0500 Subject: finished --- .../collectionFreeForm/CollectionFreeFormView.scss | 7 +++ .../collectionFreeForm/CollectionFreeFormView.tsx | 72 ++++++++++++++++------ 2 files changed, 60 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 58fb81453..b70697e9a 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -34,6 +34,7 @@ height: 100%; display: flex; align-items: center; + .collectionfreeformview-placeholderSpan { font-size: 32; display: flex; @@ -97,4 +98,10 @@ #prevCursor { animation: blink 1s infinite; +} + +.pullpane-indicator { + z-index: 999; + background-color: rgba($color: #000000, $alpha: .4); + position: absolute; } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 30ef9eb77..85349b6e3 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -81,7 +81,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { private _hitCluster = false; private _layoutComputeReaction: IReactionDisposer | undefined; private _layoutPoolData = new ObservableMap(); - private _pullCoords: number[] = [0, 0]; + @observable private _pullCoords: number[] = [0, 0]; + @observable private _pullDirection: string = ""; public get displayName() { return "CollectionFreeFormView(" + this.props.Document.title?.toString() + ")"; } // this makes mobx trace() statements more descriptive @observable.shallow _layoutElements: ViewDefResult[] = []; // shallow because some layout items (eg pivot labels) are just generated 'divs' and can't be frozen as observables @@ -627,8 +628,11 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { const centerX = Math.min(pt1.clientX, pt2.clientX) + Math.abs(pt2.clientX - pt1.clientX) / 2; const centerY = Math.min(pt1.clientY, pt2.clientY) + Math.abs(pt2.clientY - pt1.clientY) / 2; - if (!this._pullCoords[0] && !this._pullCoords[1]) { // if we are not bezel movement + if (!this._pullDirection) { // if we are not bezel movement this.pan({ clientX: centerX, clientY: centerY }); + } else { + this._pullCoords = [centerX, centerY]; + console.log(this.layoutDoc._width); } this._lastX = centerX; @@ -657,10 +661,21 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { this._lastY = centerY; // determine if we are using a bezel movement - if ((this.props.PanelWidth() - this._lastX) < 100 || this._lastX < 100 || (this.props.PanelHeight() - this._lastY < 100) || this._lastY < 120) { // to account for header + if ((this.props.PanelWidth() - this._lastX) < 100) { this._pullCoords = [this._lastX, this._lastY]; + this._pullDirection = "right"; + } else if (this._lastX < 100) { + this._pullCoords = [this._lastX, this._lastY]; + this._pullDirection = "left"; + } else if (this.props.PanelHeight() - this._lastY < 100) { + this._pullCoords = [this._lastX, this._lastY]; + this._pullDirection = "bottom"; + } else if (this._lastY < 120) { // to account for header + this._pullCoords = [this._lastX, this._lastY]; + this._pullDirection = "top"; } + this.removeMoveListeners(); this.addMoveListeners(); this.removeEndListeners(); @@ -672,27 +687,29 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { cleanUpInteractions = () => { - if (this._pullCoords[0] !== 0 && this._pullCoords[1] !== 0) { // if bezel mvmt was activated - const xDiff = this._pullCoords[0] - this._lastX; - const yDiff = this._pullCoords[1] - this._lastY; + switch (this._pullDirection) { - console.log('went thru', this._pullCoords); - if ((this._lastX < this._pullCoords[0]) && (yDiff < xDiff)) { // pull from right + case "left": + console.log('pulled from left'); + CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([], { title: "New Collection" }), "left", undefined); + break; + case "right": console.log('pulled from right'); - // CollectionDockingView.AddRightSplit(this.Document, undefined); - CollectionDockingView.AddSplit(this.Document, "right", undefined); - } else if ((this._lastY > this._pullCoords[1]) && (yDiff < xDiff)) { // pull from top + CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([], { title: "New Collection" }), "right", undefined); + break; + case "top": console.log('pulled from top'); - CollectionDockingView.AddSplit(this.Document, "top", undefined); - } else if ((this._lastY < this._pullCoords[1]) && (yDiff > xDiff)) { // pull from bottom + CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([], { title: "New Collection" }), "top", undefined); + break; + case "bottom": console.log('pulled from bottom'); - CollectionDockingView.AddSplit(this.Document, "bottom", undefined); - } else if ((this._lastX > this._pullCoords[0]) && (yDiff > xDiff)) { // pull from left - console.log('pulled from left'); - CollectionDockingView.AddSplit(this.Document, "left", undefined); - } + CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([], { title: "New Collection" }), "bottom", undefined); + break; + default: + break; } + this._pullDirection = ""; this._pullCoords = [0, 0]; document.removeEventListener("pointermove", this.onPointerMove); @@ -1125,7 +1142,24 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { {!this.Document._LODdisable && !this.props.active() && !this.props.isAnnotationOverlay && !this.props.annotationsKey && this.props.renderDepth > 0 ? // && this.props.CollectionView && lodarea < NumCast(this.Document.LODarea, 100000) ? this.placeholder : this.marqueeView} -
; + +
+
+ + ; } } -- cgit v1.2.3-70-g09d2 From 5a32a80e6f3026009522fdc3de614e85930efff2 Mon Sep 17 00:00:00 2001 From: kimdahey Date: Mon, 10 Feb 2020 23:08:17 -0500 Subject: made slight qol improvements --- .../collections/collectionFreeForm/CollectionFreeFormView.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 1f2cdaea4..8f555f315 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -46,6 +46,7 @@ import { RichTextField } from "../../../../new_fields/RichTextField"; import { List } from "../../../../new_fields/List"; import { DocumentViewProps } from "../../nodes/DocumentView"; import { CollectionDockingView } from "../CollectionDockingView"; +import { MainView } from "../../MainView"; library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload); @@ -631,7 +632,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { this.pan({ clientX: centerX, clientY: centerY }); } else { this._pullCoords = [centerX, centerY]; - console.log(this.layoutDoc._width); + console.log(MainView.Instance.flyoutWidth); } this._lastX = centerX; @@ -1149,8 +1150,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { // height: this._pullDirection === "top" || this._pullDirection === "bottom" ? Math.abs(this.props.PanelHeight() - this._pullCoords[1]) : this.props.PanelHeight(), // top: this._pullDirection === "bottom" ? this._pullCoords[0] : 0, // left: this._pullDirection === "right" ? this._pullCoords[1] : 0 - width: this._pullDirection === "left" ? this._pullCoords[0] : this._pullDirection === "right" ? this.props.PanelWidth() - this._pullCoords[0] : this.props.PanelWidth(), - height: this._pullDirection === "top" ? this._pullCoords[1] : this._pullDirection === "bottom" ? this.props.PanelHeight() - this._pullCoords[1] : this.props.PanelHeight(), + width: this._pullDirection === "left" ? this._pullCoords[0] : this._pullDirection === "right" ? MainView.Instance.getPWidth() - this._pullCoords[0] + MainView.Instance.flyoutWidth : MainView.Instance.getPWidth(), + height: this._pullDirection === "top" ? this._pullCoords[1] : this._pullDirection === "bottom" ? MainView.Instance.getPHeight() - this._pullCoords[1] : MainView.Instance.getPHeight(), left: this._pullDirection === "right" ? undefined : 0, right: this._pullDirection === "right" ? 0 : undefined, top: this._pullDirection === "bottom" ? undefined : 0, -- cgit v1.2.3-70-g09d2 From f689b3ae048941f23d67750ba488ca90bba578ee Mon Sep 17 00:00:00 2001 From: Stanley Yip Date: Tue, 11 Feb 2020 18:04:05 -0500 Subject: some more fixes --- src/client/util/InteractionUtils.tsx | 1 + .../collectionFreeForm/CollectionFreeFormView.tsx | 18 ++++++++++++++++-- .../collections/collectionFreeForm/MarqueeView.tsx | 1 + src/pen-gestures/ndollar.ts | 2 +- 4 files changed, 19 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index 8fc5e8098..184e37ba5 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -91,6 +91,7 @@ export namespace InteractionUtils { } export function IsType(e: PointerEvent | React.PointerEvent, type: string): boolean { + console.log(e.button); switch (type) { // pen and eraser are both pointer type 'pen', but pen is button 0 and eraser is button 5. -syip2 case PENTYPE: diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 4b1bb09a9..bb34f3d27 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -454,8 +454,22 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { } return false; }); - const inkFields = inks.map(i => Cast(i.data, InkField)); - CognitiveServices.Inking.Appliers.InterpretStrokes(inkFields.filter(i => i instanceof InkField).map(i => i!.inkData)).then((results) => { + // const inkFields = inks.map(i => Cast(i.data, InkField)); + const strokes: InkData[] = []; + inks.forEach(i => { + const d = Cast(i.data, InkField); + const x = NumCast(i.x); + const y = NumCast(i.y); + const left = Math.min(...d?.inkData.map(pd => pd.X) ?? [0]); + const top = Math.min(...d?.inkData.map(pd => pd.Y) ?? [0]); + if (d) { + strokes.push(d.inkData.map(pd => ({ X: pd.X + x - left, Y: pd.Y + y - top }))); + } + }); + console.log(strokes) + + CognitiveServices.Inking.Appliers.InterpretStrokes(strokes).then((results) => { + console.log(results); const wordResults = results.filter((r: any) => r.category === "inkWord"); for (const word of wordResults) { const indices: number[] = word.strokeIds; diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 8591144c0..e82ca6bf2 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -21,6 +21,7 @@ import MarqueeOptionsMenu from "./MarqueeOptionsMenu"; import { SubCollectionViewProps } from "../CollectionSubView"; import { CognitiveServices } from "../../../cognitive_services/CognitiveServices"; import { RichTextField } from "../../../../new_fields/RichTextField"; +import { InteractionUtils } from "../../../util/InteractionUtils"; interface MarqueeViewProps { getContainerTransform: () => Transform; diff --git a/src/pen-gestures/ndollar.ts b/src/pen-gestures/ndollar.ts index 365896197..bb92f62e1 100644 --- a/src/pen-gestures/ndollar.ts +++ b/src/pen-gestures/ndollar.ts @@ -185,7 +185,7 @@ export class NDollarRecognizer { this.Multistrokes[3] = new Multistroke(GestureUtils.Gestures.EndBracket, useBoundedRotationInvariance, new Array( // new Array(new Point(150, 21), new Point(149, 150), new Point(26, 152)) // new Array(new Point(150, 150), new Point(150, 0), new Point(150, 150), new Point(0, 150)) - new Array(new Point(10, 100), new Point(50, 100), new Point(100, 12), new Point(150, 103), new Point(190, 100)) + new Array(new Point(10, 100), new Point(100, 100), new Point(150, 12), new Point(200, 103), new Point(300, 100)) )); // -- cgit v1.2.3-70-g09d2 From 45de2817224d06ab83f81ceb372c40f4c9185d2e Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Tue, 11 Feb 2020 19:55:21 -0500 Subject: bugfixing event handlers --- src/client/util/SelectionManager.ts | 1 + src/client/views/GestureOverlay.tsx | 36 +++++++++++++++++---------------- src/client/views/Touchable.tsx | 4 ++-- src/client/views/nodes/DocumentView.tsx | 25 ++++++++++++++++++++--- 4 files changed, 44 insertions(+), 22 deletions(-) (limited to 'src') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 86a7a620e..4fd8abb12 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -56,6 +56,7 @@ export namespace SelectionManager { export function SelectDoc(docView: DocumentView, ctrlPressed: boolean): void { manager.SelectDoc(docView, ctrlPressed); } + export function IsSelected(doc: DocumentView, outsideReaction?: boolean): boolean { return outsideReaction ? diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 08083c259..16580ca67 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -28,6 +28,8 @@ import { List } from "../../new_fields/List"; import { CollectionViewType } from "./collections/CollectionView"; import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu"; import { RadialMenu } from "./nodes/RadialMenu"; +import { SelectionManager } from "../util/SelectionManager"; + @observer export default class GestureOverlay extends Touchable { @@ -105,15 +107,14 @@ export default class GestureOverlay extends Touchable { } onReactTouchStart = (te: React.TouchEvent) => { - console.log("STARTING"); - console.log(te.touches); - // if (RadialMenu.Instance._display === true) { - // console.log("display", RadialMenu.Instance._display); - // runInAction(() => { RadialMenu.Instance._display = false; }); - // te.preventDefault(); - // te.stopPropagation(); - // return; - // } + document.removeEventListener("touchmove", this.onReactHoldTouchMove); + document.removeEventListener("touchend", this.onReactHoldTouchEnd); + if (RadialMenu.Instance._display === true) { + te.preventDefault(); + te.stopPropagation(); + RadialMenu.Instance.closeMenu(); + return; + } const actualPts: React.Touch[] = []; for (let i = 0; i < te.touches.length; i++) { @@ -138,7 +139,6 @@ export default class GestureOverlay extends Touchable { ptsToDelete.forEach(pt => this.prevPoints.delete(pt)); const nts = this.getNewTouches(te); - console.log(this.prevPoints.size, nts.ntt.length, nts.nt.length, nts.nct.length); if (nts.nt.length < 5) { const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY); console.log(te.touches); @@ -156,13 +156,11 @@ export default class GestureOverlay extends Touchable { } ) ); - console.log("2"); if (nts.nt.length === 1) { console.log("started"); this._holdTimer = setTimeout(() => { console.log("hold"); const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY); - console.log(this.prevPoints.size, nts.ntt.length, nts.nt.length, nts.nct.length); let pt: any = te.touches[te.touches.length - 1]; if (nts.nt.length === 1 && pt.radiusX > 1 && pt.radiusY > 1) { target?.dispatchEvent( @@ -206,10 +204,15 @@ export default class GestureOverlay extends Touchable { } onReactHoldTouchMove = (e: TouchEvent) => { + document.removeEventListener("touchmove", this.onReactTouchMove); + document.removeEventListener("touchend", this.onReactTouchEnd); + document.removeEventListener("touchmove", this.onReactHoldTouchMove); + document.removeEventListener("touchend", this.onReactHoldTouchEnd); + document.addEventListener("touchmove", this.onReactHoldTouchMove); + document.addEventListener("touchend", this.onReactHoldTouchEnd); const nts: any = this.getNewTouches(e); if (this.prevPoints.size === 1 && this._holdTimer) { clearTimeout(this._holdTimer); - this._holdTimer = undefined; } document.dispatchEvent( new CustomEvent>("dashOnTouchHoldMove", @@ -254,10 +257,9 @@ export default class GestureOverlay extends Touchable { } } - if (this.prevPoints.size === 0) { - document.removeEventListener("touchmove", this.onReactTouchMove); - document.removeEventListener("touchend", this.onReactTouchEnd); - } + document.removeEventListener("touchmove", this.onReactHoldTouchMove); + document.removeEventListener("touchend", this.onReactHoldTouchEnd); + e.stopPropagation(); } diff --git a/src/client/views/Touchable.tsx b/src/client/views/Touchable.tsx index 13cc38589..bc3d07130 100644 --- a/src/client/views/Touchable.tsx +++ b/src/client/views/Touchable.tsx @@ -221,8 +221,8 @@ export abstract class Touchable extends React.Component { handle1PointerHoldMove = (e: Event, me: InteractionUtils.MultiTouchEvent): void => { - e.stopPropagation(); - me.touchEvent.stopPropagation(); + // e.stopPropagation(); + // me.touchEvent.stopPropagation(); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ff627fbc2..572b81b19 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -126,6 +126,11 @@ export class DocumentView extends DocComponent(Docu handle1PointerHoldStart = (e: Event, me: InteractionUtils.MultiTouchEvent): any => { + this.removeMoveListeners(); + this.removeEndListeners(); + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + console.log(SelectionManager.SelectedDocuments()); console.log("START"); if (RadialMenu.Instance._display === false) { this.addHoldMoveListeners(); @@ -139,6 +144,8 @@ export class DocumentView extends DocComponent(Docu } handle1PointerHoldMove = (e: Event, me: InteractionUtils.MultiTouchEvent): void => { + console.log(SelectionManager.SelectedDocuments()); + console.log(SelectionManager.GetIsDragging(), this); const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1]; if (this._firstX === -1 || this._firstY === -1) { @@ -150,9 +157,17 @@ export class DocumentView extends DocComponent(Docu } handle1PointerHoldEnd = (e: Event, me: InteractionUtils.MultiTouchEvent): void => { + this.removeHoldMoveListeners(); + this.removeHoldEndListeners(); RadialMenu.Instance.closeMenu(); this._firstX = -1; this._firstY = -1; + SelectionManager.DeselectAll(); + me.touchEvent.stopPropagation(); + me.touchEvent.preventDefault(); + e.stopPropagation(); + + } @action @@ -169,9 +184,11 @@ export class DocumentView extends DocComponent(Docu RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, undefined, "onRight"), icon: "trash", selected: -1 }); RadialMenu.Instance.addItem({ description: "Pin to Presentation", event: () => this.props.pinToPres(this.props.Document), icon: "folder", selected: -1 }); - if (!SelectionManager.IsSelected(this, true)) { - SelectionManager.SelectDoc(this, false); - } + // if (SelectionManager.IsSelected(this, true)) { + // SelectionManager.SelectDoc(this, false); + // } + SelectionManager.DeselectAll(); + } @@ -320,8 +337,10 @@ export class DocumentView extends DocComponent(Docu } handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent) => { + SelectionManager.DeselectAll(); if (this.Document.onPointerDown) return; const touch = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0]; + console.log("DOWN", SelectionManager.SelectedDocuments()); console.log("down"); if (touch) { this._downX = touch.clientX; -- cgit v1.2.3-70-g09d2 From c708b8f40617263b5d19c37cd4364ea1a6af4138 Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Tue, 11 Feb 2020 20:33:06 -0500 Subject: fixing bugs --- src/client/views/GestureOverlay.tsx | 1 + src/client/views/nodes/DocumentView.tsx | 11 +++++++---- 2 files changed, 8 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 663541022..5bf217974 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -141,6 +141,7 @@ export default class GestureOverlay extends Touchable { const nts = this.getNewTouches(te); if (nts.nt.length < 5) { const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY); + te.changedTouches.item(0).identifier; console.log(te.touches); target?.dispatchEvent( new CustomEvent>("dashOnTouchStart", diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 572b81b19..aa07db2a0 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -144,8 +144,7 @@ export class DocumentView extends DocComponent(Docu } handle1PointerHoldMove = (e: Event, me: InteractionUtils.MultiTouchEvent): void => { - console.log(SelectionManager.SelectedDocuments()); - console.log(SelectionManager.GetIsDragging(), this); + const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1]; if (this._firstX === -1 || this._firstY === -1) { @@ -339,7 +338,7 @@ export class DocumentView extends DocComponent(Docu handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent) => { SelectionManager.DeselectAll(); if (this.Document.onPointerDown) return; - const touch = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0]; + const touch = me.touchEvent.changedTouches.item(0); console.log("DOWN", SelectionManager.SelectedDocuments()); console.log("down"); if (touch) { @@ -368,7 +367,8 @@ export class DocumentView extends DocComponent(Docu this.removeMoveListeners(); } else if (!e.cancelBubble && (SelectionManager.IsSelected(this, true) || this.props.parentActive(true) || this.Document.onDragStart || this.Document.onClick) && !this.Document.lockedPosition && !this.Document.inOverlay) { - const touch = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0]; + + const touch = me.touchEvent.changedTouches.item(0); if (Math.abs(this._downX - touch.clientX) > 3 || Math.abs(this._downY - touch.clientY) > 3) { if (!e.altKey && (!this.topMost || this.Document.onDragStart || this.Document.onClick)) { this.cleanUpInteractions(); @@ -522,11 +522,14 @@ export class DocumentView extends DocComponent(Docu } onPointerUp = (e: PointerEvent): void => { + this.cleanUpInteractions(); + if (this.onPointerUpHandler && this.onPointerUpHandler.script && !InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) { this.onPointerUpHandler.script.run({ this: this.Document.isTemplateForField && this.props.DataDoc ? this.props.DataDoc : this.props.Document }, console.log); document.removeEventListener("pointerup", this.onPointerUp); return; } + document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); this._doubleTap = (Date.now() - this._lastTap < 300 && e.button === 0 && Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2); -- cgit v1.2.3-70-g09d2 From 3910d017f6f06ebaf78884e9935d9206505427b8 Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Tue, 11 Feb 2020 21:02:35 -0500 Subject: bugfixes --- src/client/views/GestureOverlay.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 5bf217974..9a601e07b 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -267,10 +267,9 @@ export default class GestureOverlay extends Touchable { onReactTouchMove = (e: TouchEvent) => { const nts: any = this.getNewTouches(e); - if (this.prevPoints.size === 1 && this._holdTimer) { - clearTimeout(this._holdTimer); - this._holdTimer = undefined; - } + clearTimeout(this._holdTimer); + this._holdTimer = undefined; + document.dispatchEvent( new CustomEvent>("dashOnTouchMove", { @@ -288,10 +287,9 @@ export default class GestureOverlay extends Touchable { onReactTouchEnd = (e: TouchEvent) => { const nts: any = this.getNewTouches(e); - if (this.prevPoints.size === 1 && this._holdTimer) { - clearTimeout(this._holdTimer); - this._holdTimer = undefined; - } + clearTimeout(this._holdTimer); + this._holdTimer = undefined; + document.dispatchEvent( new CustomEvent>("dashOnTouchEnd", { -- cgit v1.2.3-70-g09d2 From 2131c829b8632a87b8ba52bc311d3b0346eed3f7 Mon Sep 17 00:00:00 2001 From: kimdahey Date: Tue, 11 Feb 2020 21:36:20 -0500 Subject: did the maths :') --- src/client/views/collections/CollectionSubView.tsx | 2 + .../collectionFreeForm/CollectionFreeFormView.scss | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 74 +++++++++++++++------- 3 files changed, 53 insertions(+), 25 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 8679c8bd1..12906ee83 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -51,11 +51,13 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T) { private gestureDisposer?: GestureUtils.GestureEventDisposer; protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; private _childLayoutDisposer?: IReactionDisposer; + protected _mainCont?: HTMLDivElement; protected createDashEventsTarget = (ele: HTMLDivElement) => { //used for stacking and masonry view this.dropDisposer?.(); this.gestureDisposer?.(); this.multiTouchDisposer?.(); if (ele) { + this._mainCont = ele; this.dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this)); this.gestureDisposer = GestureUtils.MakeGestureTarget(ele, this.onGesture.bind(this)); this.multiTouchDisposer = InteractionUtils.MakeMultiTouchTarget(ele, this.onTouchStart.bind(this)); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index b70697e9a..2213b7882 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -101,7 +101,7 @@ } .pullpane-indicator { - z-index: 999; + z-index: 99999; background-color: rgba($color: #000000, $alpha: .4); position: absolute; } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 8f555f315..bf517e7c2 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1,6 +1,6 @@ import { library } from "@fortawesome/fontawesome-svg-core"; import { faEye } from "@fortawesome/free-regular-svg-icons"; -import { faBraille, faChalkboard, faCompass, faCompressArrowsAlt, faExpandArrowsAlt, faFileUpload, faPaintBrush, faTable, faUpload } from "@fortawesome/free-solid-svg-icons"; +import { faBraille, faChalkboard, faCompass, faCompressArrowsAlt, faExpandArrowsAlt, faFileUpload, faPaintBrush, faTable, faUpload, faTextHeight } from "@fortawesome/free-solid-svg-icons"; import { action, computed, observable, ObservableMap, reaction, runInAction, IReactionDisposer } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast, HeightSym, Opt, WidthSym, DocListCastAsync, Field } from "../../../../new_fields/Doc"; @@ -47,6 +47,7 @@ import { List } from "../../../../new_fields/List"; import { DocumentViewProps } from "../../nodes/DocumentView"; import { CollectionDockingView } from "../CollectionDockingView"; import { MainView } from "../../MainView"; +import { TouchScrollableMenuItem } from "../../TouchScrollableMenu"; library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload); @@ -627,12 +628,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { // use the centerx and centery as the "new mouse position" const centerX = Math.min(pt1.clientX, pt2.clientX) + Math.abs(pt2.clientX - pt1.clientX) / 2; const centerY = Math.min(pt1.clientY, pt2.clientY) + Math.abs(pt2.clientY - pt1.clientY) / 2; + // const transformed = this.getTransform().inverse().transformPoint(centerX, centerY); if (!this._pullDirection) { // if we are not bezel movement this.pan({ clientX: centerX, clientY: centerY }); } else { this._pullCoords = [centerX, centerY]; - console.log(MainView.Instance.flyoutWidth); } this._lastX = centerX; @@ -657,22 +658,28 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { if (pt1 && pt2) { const centerX = Math.min(pt1.clientX, pt2.clientX) + Math.abs(pt2.clientX - pt1.clientX) / 2; const centerY = Math.min(pt1.clientY, pt2.clientY) + Math.abs(pt2.clientY - pt1.clientY) / 2; + // const screenPoint = this.getTransform().inverse().transformPoint(centerX, centerY); this._lastX = centerX; this._lastY = centerY; + const screenBox = this._mainCont?.getBoundingClientRect(); + + // console.log(this.props.PanelWidth(), transformed[0]); // determine if we are using a bezel movement - if ((this.props.PanelWidth() - this._lastX) < 100) { - this._pullCoords = [this._lastX, this._lastY]; - this._pullDirection = "right"; - } else if (this._lastX < 100) { - this._pullCoords = [this._lastX, this._lastY]; - this._pullDirection = "left"; - } else if (this.props.PanelHeight() - this._lastY < 100) { - this._pullCoords = [this._lastX, this._lastY]; - this._pullDirection = "bottom"; - } else if (this._lastY < 120) { // to account for header - this._pullCoords = [this._lastX, this._lastY]; - this._pullDirection = "top"; + if (screenBox) { + if ((screenBox.right - centerX) < 100) { + this._pullCoords = [centerX, centerY]; + this._pullDirection = "right"; + } else if (centerX - screenBox.left < 100) { + this._pullCoords = [centerX, centerY]; + this._pullDirection = "left"; + } else if (screenBox.bottom - centerY < 100) { + this._pullCoords = [centerX, centerY]; + this._pullDirection = "bottom"; + } else if (centerY - screenBox.top < 100) { + this._pullCoords = [centerX, centerY]; + this._pullDirection = "top"; + } } @@ -708,6 +715,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { default: break; } + console.log(""); this._pullDirection = ""; this._pullCoords = [0, 0]; @@ -1120,6 +1128,14 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { } render() { TraceMobx(); + const clientRect = this._mainCont?.getBoundingClientRect(); + // console.log('clientrect has upd8ed', clientRect, this._pullCoords); + console.log( + 'left', clientRect ? this._pullDirection === "right" ? this._pullCoords[0] - MainView.Instance.flyoutWidth : clientRect.x - MainView.Instance.flyoutWidth : "auto", + 'top indicator', clientRect ? this._pullDirection === "bottom" ? this._pullCoords[1] - clientRect.y : clientRect.y - 20 : "auto", + 'width', clientRect ? this._pullDirection === "left" ? this._pullCoords[0] - clientRect.left : this._pullDirection === "right" ? clientRect.right - this._pullCoords[0] : clientRect.width : 0, + 'height', clientRect ? this._pullDirection === "top" ? this._pullCoords[1] - clientRect.top : this._pullDirection === "bottom" ? clientRect.bottom - this._pullCoords[1] : clientRect.height : 0); + console.log(clientRect); // update the actual dimensions of the collection so that they can inquired (e.g., by a minimap) // this.Document.fitX = this.contentBounds && this.contentBounds.x; // this.Document.fitY = this.contentBounds && this.contentBounds.y; @@ -1146,16 +1162,26 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
-- cgit v1.2.3-70-g09d2 From ff268c1440cc4c5553d19524150d6f2d00cbd14c Mon Sep 17 00:00:00 2001 From: kimdahey Date: Tue, 11 Feb 2020 21:41:32 -0500 Subject: removed console logs + comments --- .../collectionFreeForm/CollectionFreeFormView.tsx | 32 ++-------------------- 1 file changed, 2 insertions(+), 30 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index bf517e7c2..5fe5895a8 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -658,13 +658,11 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { if (pt1 && pt2) { const centerX = Math.min(pt1.clientX, pt2.clientX) + Math.abs(pt2.clientX - pt1.clientX) / 2; const centerY = Math.min(pt1.clientY, pt2.clientY) + Math.abs(pt2.clientY - pt1.clientY) / 2; - // const screenPoint = this.getTransform().inverse().transformPoint(centerX, centerY); this._lastX = centerX; this._lastY = centerY; const screenBox = this._mainCont?.getBoundingClientRect(); - // console.log(this.props.PanelWidth(), transformed[0]); // determine if we are using a bezel movement if (screenBox) { if ((screenBox.right - centerX) < 100) { @@ -697,19 +695,15 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { switch (this._pullDirection) { case "left": - console.log('pulled from left'); CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([], { title: "New Collection" }), "left", undefined); break; case "right": - console.log('pulled from right'); CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([], { title: "New Collection" }), "right", undefined); break; case "top": - console.log('pulled from top'); CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([], { title: "New Collection" }), "top", undefined); break; case "bottom": - console.log('pulled from bottom'); CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([], { title: "New Collection" }), "bottom", undefined); break; default: @@ -1129,13 +1123,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { render() { TraceMobx(); const clientRect = this._mainCont?.getBoundingClientRect(); - // console.log('clientrect has upd8ed', clientRect, this._pullCoords); - console.log( - 'left', clientRect ? this._pullDirection === "right" ? this._pullCoords[0] - MainView.Instance.flyoutWidth : clientRect.x - MainView.Instance.flyoutWidth : "auto", - 'top indicator', clientRect ? this._pullDirection === "bottom" ? this._pullCoords[1] - clientRect.y : clientRect.y - 20 : "auto", - 'width', clientRect ? this._pullDirection === "left" ? this._pullCoords[0] - clientRect.left : this._pullDirection === "right" ? clientRect.right - this._pullCoords[0] : clientRect.width : 0, - 'height', clientRect ? this._pullDirection === "top" ? this._pullCoords[1] - clientRect.top : this._pullDirection === "bottom" ? clientRect.bottom - this._pullCoords[1] : clientRect.height : 0); - console.log(clientRect); // update the actual dimensions of the collection so that they can inquired (e.g., by a minimap) // this.Document.fitX = this.contentBounds && this.contentBounds.x; // this.Document.fitY = this.contentBounds && this.contentBounds.y; @@ -1162,25 +1149,10 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
-- cgit v1.2.3-70-g09d2 From 7dbcd2011ec08476151a08c113191a1676e757a2 Mon Sep 17 00:00:00 2001 From: Stanley Yip Date: Tue, 11 Feb 2020 22:36:54 -0500 Subject: some small stuff --- .../collectionFreeForm/CollectionFreeFormView.tsx | 3 +-- .../collections/collectionFreeForm/MarqueeView.tsx | 31 +++++++++++++++++++--- 2 files changed, 28 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index cc6a2f4a5..41a22c558 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -470,7 +470,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { strokes.push(d.inkData.map(pd => ({ X: pd.X + x - left, Y: pd.Y + y - top }))); } }); - console.log(strokes) CognitiveServices.Inking.Appliers.InterpretStrokes(strokes).then((results) => { console.log(results); @@ -487,7 +486,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { if (this._wordPalette.has(word.recognizedText.toLowerCase())) { inks[i].color = this._wordPalette.get(word.recognizedText.toLowerCase()); } - else { + else if (word.alternates) { for (const alt of word.alternates) { if (this._wordPalette.has(alt.recognizedString.toLowerCase())) { inks[i].color = this._wordPalette.get(alt.recognizedString.toLowerCase()); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index e82ca6bf2..d4faa4dc1 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -384,16 +384,39 @@ export class MarqueeView extends React.Component Cast(i.data, InkField)); CognitiveServices.Inking.Appliers.InterpretStrokes(inkFields.filter(i => i instanceof InkField).map(i => i!.inkData)).then((results) => { + // const wordResults = results.filter((r: any) => r.category === "inkWord"); + // console.log(wordResults); + // console.log(results); + // for (const word of wordResults) { + // const indices: number[] = word.strokeIds; + // indices.forEach(i => { + // if (wordToColor.has(word.recognizedText.toLowerCase())) { + // inks[i].color = wordToColor.get(word.recognizedText.toLowerCase()); + // } + // else { + // for (const alt of word.alternates) { + // if (wordToColor.has(alt.recognizedString.toLowerCase())) { + // inks[i].color = wordToColor.get(alt.recognizedString.toLowerCase()); + // break; + // } + // } + // } + // }) + // } const wordResults = results.filter((r: any) => r.category === "inkWord"); - console.log(wordResults); - console.log(results); for (const word of wordResults) { const indices: number[] = word.strokeIds; indices.forEach(i => { + const otherInks: Doc[] = []; + indices.forEach(i2 => i2 !== i && otherInks.push(inks[i2])); + inks[i].relatedInks = new List(otherInks); + const uniqueColors: string[] = []; + Array.from(wordToColor.values()).forEach(c => uniqueColors.indexOf(c) === -1 && uniqueColors.push(c)); + inks[i].alternativeColors = new List(uniqueColors); if (wordToColor.has(word.recognizedText.toLowerCase())) { inks[i].color = wordToColor.get(word.recognizedText.toLowerCase()); } - else { + else if (word.alternates) { for (const alt of word.alternates) { if (wordToColor.has(alt.recognizedString.toLowerCase())) { inks[i].color = wordToColor.get(alt.recognizedString.toLowerCase()); @@ -401,7 +424,7 @@ export class MarqueeView extends React.Component Date: Tue, 11 Feb 2020 22:45:13 -0500 Subject: small fix --- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 3 ++- src/client/views/nodes/DocumentView.tsx | 2 -- 2 files changed, 2 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index ec01fc7a5..4b2ac94c1 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1163,7 +1163,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { style={{ display: this._pullDirection ? "block" : "none", top: clientRect ? this._pullDirection === "bottom" ? this._pullCoords[1] - clientRect.y : 0 : "auto", - left: clientRect ? this._pullDirection === "right" ? this._pullCoords[0] - clientRect.x - MainView.Instance.flyoutWidth : 0 : "auto", + // left: clientRect ? this._pullDirection === "right" ? this._pullCoords[0] - clientRect.x - MainView.Instance.flyoutWidth : 0 : "auto", + left: clientRect ? this._pullDirection === "right" ? this._pullCoords[0] - clientRect.x : 0 : "auto", width: clientRect ? this._pullDirection === "left" ? this._pullCoords[0] - clientRect.left : this._pullDirection === "right" ? clientRect.right - this._pullCoords[0] : clientRect.width : 0, height: clientRect ? this._pullDirection === "top" ? this._pullCoords[1] - clientRect.top : this._pullDirection === "bottom" ? clientRect.bottom - this._pullCoords[1] : clientRect.height : 0, diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index aa07db2a0..a69de60df 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -339,8 +339,6 @@ export class DocumentView extends DocComponent(Docu SelectionManager.DeselectAll(); if (this.Document.onPointerDown) return; const touch = me.touchEvent.changedTouches.item(0); - console.log("DOWN", SelectionManager.SelectedDocuments()); - console.log("down"); if (touch) { this._downX = touch.clientX; this._downY = touch.clientY; -- cgit v1.2.3-70-g09d2