From 4bf88786cc8a7e617bca4eb57f7639d69be06dcd Mon Sep 17 00:00:00 2001 From: andrewdkim Date: Wed, 15 Jan 2020 17:42:41 -0500 Subject: wow this almost drove me crazy but swipey swipes on five fingers --- src/client/views/CollectionLinearView.tsx | 6 ++- src/client/views/GestureOverlay.tsx | 45 ++++++++++++++++++---- src/client/views/Palette.scss | 19 ++++----- src/client/views/Palette.tsx | 20 ++++++++-- .../authentication/models/current_user_utils.ts | 4 +- 5 files changed, 72 insertions(+), 22 deletions(-) (limited to 'src') diff --git a/src/client/views/CollectionLinearView.tsx b/src/client/views/CollectionLinearView.tsx index 2262a3c0c..0a3096833 100644 --- a/src/client/views/CollectionLinearView.tsx +++ b/src/client/views/CollectionLinearView.tsx @@ -3,7 +3,7 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, HeightSym, WidthSym } from '../../new_fields/Doc'; import { makeInterface } from '../../new_fields/Schema'; -import { BoolCast, NumCast, StrCast } from '../../new_fields/Types'; +import { BoolCast, NumCast, StrCast, Cast } from '../../new_fields/Types'; import { emptyFunction, returnEmptyString, returnOne, returnTrue, Utils } from '../../Utils'; import { DragManager } from '../util/DragManager'; import { Transform } from '../util/Transform'; @@ -13,6 +13,7 @@ import { CollectionSubView } from './collections/CollectionSubView'; import { DocumentView } from './nodes/DocumentView'; import { documentSchema } from '../../new_fields/documentSchemas'; import { Id } from '../../new_fields/FieldSymbols'; +import { ScriptField } from '../../new_fields/ScriptField'; type LinearDocument = makeInterface<[typeof documentSchema,]>; @@ -76,6 +77,9 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { const nativeWidth = NumCast(pair.layout.nativeWidth, this.dimension()); const deltaSize = nativeWidth * .15 / 2; const isSelected = this._selectedIndex === ind; + if (isSelected) { + Cast(pair.layout.proto?.onPointerDown, ScriptField)?.script.run({ this: pair.layout.proto }, console.log); + } return
{ - const fingers = Array.from(e.touches); + const fingers = new Array(); + for (let i = 0; i < e.touches.length; i++) { + const pt: any = e.touches.item(i); + if (pt.radiusX > 1 && pt.radiusY > 1) { + for (let j = 0; j < e.targetTouches.length; j++) { + const tPt = e.targetTouches.item(j); + if (tPt?.screenX === pt?.screenX && tPt?.screenY === pt?.screenY) { + if (pt && this.prevPoints.has(pt.identifier)) { + fingers.push(pt); + } + } + } + } + } const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]); + if (thumb.identifier === this.thumbIdentifier) { + this._thumbX = thumb.clientX; + this._thumbY = thumb.clientY; + return; + } this.thumbIdentifier = thumb?.identifier; fingers.forEach((f) => this.prevPoints.delete(f.identifier)); this._hands.push(fingers); @@ -184,6 +205,9 @@ export default class GestureOverlay extends Touchable { const thumbDoc = FieldValue(Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc)); if (thumbDoc) { runInAction(() => { + this._thumbDoc = thumbDoc; + this._thumbX = thumb.clientX; + this._thumbY = thumb.clientY; this._palette = ; }); } @@ -199,17 +223,24 @@ export default class GestureOverlay extends Touchable { handleHandMove = (e: TouchEvent) => { for (let i = 0; i < e.changedTouches.length; i++) { const pt = e.changedTouches.item(i); - if (pt?.identifier === this.thumbIdentifier) { - console.log("thumby movey") + if (pt && pt.identifier === this.thumbIdentifier && this._thumbX && this._thumbDoc) { + if (Math.abs(pt.clientX - this._thumbX) > 20) { + this._thumbDoc.selectedIndex = Math.max(0, NumCast(this._thumbDoc.selectedIndex) - Math.sign(pt.clientX - this._thumbX)); + this._thumbX = pt.clientX; + } } } } @action handleHandUp = (e: TouchEvent) => { - // this.onTouchEnd(e); - this._palette = undefined; - document.removeEventListener("touchend", this.handleHandUp); + if (e.touches.length < 3) { + // this.onTouchEnd(e); + this._palette = undefined; + this.thumbIdentifier = undefined; + this._thumbDoc = undefined; + document.removeEventListener("touchend", this.handleHandUp); + } } @action diff --git a/src/client/views/Palette.scss b/src/client/views/Palette.scss index 2626774cb..4513de2b0 100644 --- a/src/client/views/Palette.scss +++ b/src/client/views/Palette.scss @@ -1,20 +1,21 @@ .palette-container { .palette-thumb { - width: 300px; - height: 300px; touch-action: pan-x; overflow: scroll; position: absolute; + width: 90px; + height: 70px; .palette-thumbContent { - width: 100%; - height: 100%; - } + transition: transform .3s; + + .collectionView { + overflow: visible; - .palette-button { - width: 100px; - height: 100px; - background: blue; + .collectionLinearView-outer { + overflow: visible; + } + } } } } \ No newline at end of file diff --git a/src/client/views/Palette.tsx b/src/client/views/Palette.tsx index aca1811a4..811c24f53 100644 --- a/src/client/views/Palette.tsx +++ b/src/client/views/Palette.tsx @@ -9,8 +9,8 @@ import { DocumentView } from "./nodes/DocumentView"; import { emptyPath, returnFalse, emptyFunction, returnOne, returnEmptyString, returnTrue } from "../../Utils"; import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils"; import { Transform } from "../util/Transform"; -import { computed, action } from "mobx"; -import { FieldValue, Cast } from "../../new_fields/Types"; +import { computed, action, IReactionDisposer, reaction, observable } from "mobx"; +import { FieldValue, Cast, NumCast } from "../../new_fields/Types"; import { observer } from "mobx-react"; import { DocumentContentsView } from "./nodes/DocumentContentsView"; import { CollectionStackingView } from "./collections/CollectionStackingView"; @@ -28,12 +28,26 @@ export interface PaletteProps { @observer export default class Palette extends React.Component { + private _selectedDisposer?: IReactionDisposer; + @observable private _selectedIndex: number = 0; + + componentDidMount = () => { + this._selectedDisposer = reaction( + () => NumCast(this.props.thumbDoc.selectedIndex), + (i) => this._selectedIndex = i, + { fireImmediately: true } + ); + } + + componentWillUnmount = () => { + this._selectedDisposer && this._selectedDisposer(); + } render() { return (
-
+
Docs.Create.FontIconDocument({ - nativeWidth: 100, nativeHeight: 100, width: 100, height: 100, dropAction: data.pointerDown ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick, + nativeWidth: 10, nativeHeight: 10, width: 10, height: 10, dropAction: data.pointerDown ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick, onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined, onPointerUp: data.pointerUp ? ScriptField.MakeScript(data.pointerUp) : undefined, onPointerDown: data.pointerDown ? ScriptField.MakeScript(data.pointerDown) : undefined, ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activePen: data.activePen, pointerHack: true, @@ -127,7 +127,7 @@ export class CurrentUserUtils { static setupThumbDoc(userDoc: Doc) { if (!userDoc.thumbDoc) { return Docs.Create.LinearDocument(CurrentUserUtils.setupThumbButtons(userDoc), { - width: 300, columnWidth: 100, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5 + width: 100, height: 50, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5, isExpanded: true }); } return userDoc.thumbDoc; -- cgit v1.2.3-70-g09d2