diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/util/InteractionUtils.ts | 23 | ||||
| -rw-r--r-- | src/client/views/Touchable.tsx | 12 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 17 | ||||
| -rw-r--r-- | src/client/views/nodes/FontIconBox.scss | 8 |
4 files changed, 56 insertions, 4 deletions
diff --git a/src/client/util/InteractionUtils.ts b/src/client/util/InteractionUtils.ts index d5799c21f..b7738e862 100644 --- a/src/client/util/InteractionUtils.ts +++ b/src/client/util/InteractionUtils.ts @@ -56,6 +56,29 @@ export namespace InteractionUtils { return 0; } + /** + * Returns -1 if pinning and pinching out, 0 if not pinning, and 1 if pinching in + * @param pt1 - new point that corresponds to oldPoint1 + * @param pt2 - new point that corresponds to oldPoint2 + * @param oldPoint1 - previous point 1 + * @param oldPoint2 - previous point 2 + */ + export function Pinning(pt1: React.Touch, pt2: React.Touch, oldPoint1: React.Touch, oldPoint2: React.Touch): number { + let threshold = 4; + + let pt1Dist = TwoPointEuclidist(oldPoint1, pt1); + let pt2Dist = TwoPointEuclidist(oldPoint2, pt2); + + let pinching = Pinching(pt1, pt2, oldPoint1, oldPoint2); + + if (pinching !== 0) { + if ((pt1Dist < threshold && pt2Dist > threshold) || (pt1Dist > threshold && pt2Dist < threshold)) { + return pinching; + } + } + return 0; + } + // These might not be very useful anymore, but I'll leave them here for now -syip2 { diff --git a/src/client/views/Touchable.tsx b/src/client/views/Touchable.tsx index dbadc27ea..0056a1d96 100644 --- a/src/client/views/Touchable.tsx +++ b/src/client/views/Touchable.tsx @@ -57,6 +57,18 @@ export abstract class Touchable<T = {}> extends React.Component<T> { this.handle2PointersMove(e); break; } + + for (let i = 0; i < e.targetTouches.length; i++) { + let pt = e.targetTouches.item(i); + if (pt) { + if (this.prevPoints.has(pt.identifier)) { + this.prevPoints.set(pt.identifier, pt); + } + else { + this.prevPoints.set(pt.identifier, pt); + } + } + } } @action diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 687106a9e..f8c592f07 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -648,6 +648,21 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu return this.Document.isBackground && !this.isSelected(); } + @action + handle2PointersMove = (e: TouchEvent) => { + let pt1 = e.targetTouches.item(0); + let pt2 = e.targetTouches.item(1); + if (pt1 && pt2 && this.prevPoints.has(pt1.identifier) && this.prevPoints.has(pt2.identifier)) { + let oldPoint1 = this.prevPoints.get(pt1.identifier); + let oldPoint2 = this.prevPoints.get(pt2.identifier); + let pinching = InteractionUtils.Pinning(pt1, pt2, oldPoint1!, oldPoint2!); + if (pinching !== 0) { + let newWidth = Math.max(Math.abs(oldPoint1!.clientX - oldPoint2!.clientX), Math.abs(pt1.clientX - pt2.clientX)) + this.props.Document.width = newWidth; + } + } + } + render() { if (!this.props.Document) return (null); const ruleColor = this.props.ruleProvider ? StrCast(this.props.ruleProvider["ruleColor_" + this.Document.heading]) : undefined; @@ -682,7 +697,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu width: animwidth, height: animheight, opacity: this.Document.opacity - }} > + }} onTouchStart={this.onTouchStart}> {this.innards} </div>; } diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss index 905601ce3..f0fe7a54e 100644 --- a/src/client/views/nodes/FontIconBox.scss +++ b/src/client/views/nodes/FontIconBox.scss @@ -2,12 +2,14 @@ width: 100%; height: 100%; pointer-events: all; + touch-action: none; border-radius: inherit; background: black; border-radius: 100%; transform-origin: top left; + svg { - width:95% !important; - height:95%; + width: 95% !important; + height: 95%; } -} +}
\ No newline at end of file |