diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/DocServer.ts | 4 | ||||
| -rw-r--r-- | src/client/views/GestureOverlay.tsx | 53 | ||||
| -rw-r--r-- | src/mobile/MobileInkOverlay.tsx | 75 |
3 files changed, 81 insertions, 51 deletions
diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts index 132128182..a1cb42df2 100644 --- a/src/client/DocServer.ts +++ b/src/client/DocServer.ts @@ -6,6 +6,7 @@ import { SerializationHelper } from './util/SerializationHelper'; import { RefField } from '../new_fields/RefField'; import { Id, HandleUpdate } from '../new_fields/FieldSymbols'; import GestureOverlay from './views/GestureOverlay'; +import MobileInkOverlay from '../mobile/MobileInkOverlay'; /** * This class encapsulates the transfer and cross-client synchronization of @@ -100,10 +101,11 @@ export namespace DocServer { alert("Your connection to the server has been terminated."); }); _socket.addEventListener("receiveGesturePoints", (content: GestureContent) => { - GestureOverlay.Instance.drawStrokeToMobileInkBox(content); + MobileInkOverlay.Instance.drawStroke(content); }); _socket.addEventListener("receiveBoxTrigger", (content: MobileInkBoxContent) => { GestureOverlay.Instance.enableMobileInkBox(content); + MobileInkOverlay.Instance.initMobileInkOverlay(content); }); } diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 7e74d1d33..81284b543 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -21,6 +21,7 @@ import { MainView } from "./MainView"; import { DocServer } from "../DocServer"; import { GestureContent, MobileInkBoxContent } from "../../server/Message"; import { Point } from "../northstar/model/idea/idea"; +import MobileInkOverlay from "../../mobile/MobileInkOverlay"; @observer export default class GestureOverlay extends Touchable { @@ -32,8 +33,6 @@ export default class GestureOverlay extends Touchable { @observable public Width: number = 5; @observable private showMobileInkOverlay: boolean = false; - @observable private mobileInkOverlaySize: { width: number, height: number } = { width: 500, height: 700 }; - @observable private mobileInkOverlayPosition: { x: number, y: number } = { x: 300, y: 0 }; private _d1: Doc | undefined; private thumbIdentifier?: number; @@ -247,55 +246,9 @@ export default class GestureOverlay extends Touchable { ); } - drawStrokeToMobileInkBox = (content: GestureContent) => { - console.log(content); - const { points, bounds } = content; - - const B = { - right: bounds.right + this.mobileInkOverlayPosition.x, - left: bounds.left + this.mobileInkOverlayPosition.x, - bottom: bounds.bottom + this.mobileInkOverlayPosition.y, - top: bounds.top + this.mobileInkOverlayPosition.y, - width: bounds.width, - height: bounds.height - }; - - const target = document.elementFromPoint(points[0].X, points[0].Y); - target?.dispatchEvent( - new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture", - { - bubbles: true, - detail: { - points: points, - gesture: GestureUtils.Gestures.Stroke, - bounds: B - } - } - ) - ); - } - @action enableMobileInkBox = (content: MobileInkBoxContent) => { - const { enableBox, width, height } = content; - console.log("enable box?", enableBox, width, height); - this.showMobileInkOverlay = enableBox; - this.mobileInkOverlaySize = { width: width ? width : 0, height: height ? height : 0 }; - this.mobileInkOverlayPosition = { x: 300, y: 25 }; // TODO put at center of screen - - } - - @computed get mobileInkOverlay() { - return ( - <div className="mobileInkOverlay" style={{ - width: this.mobileInkOverlaySize.width, - height: this.mobileInkOverlaySize.height, - position: "absolute", - transform: `translate(${this.mobileInkOverlayPosition.x}px, ${this.mobileInkOverlayPosition.y}px)`, - zIndex: 30000, - pointerEvents: "none" - }}></div> - ); + this.showMobileInkOverlay = content.enableBox; } render() { @@ -304,7 +257,7 @@ export default class GestureOverlay extends Touchable { {this.currentStroke} {this.props.children} {this._palette} - {this.showMobileInkOverlay ? this.mobileInkOverlay : <></>} + {this.showMobileInkOverlay ? <MobileInkOverlay /> : <></>} </div>); } } diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx new file mode 100644 index 000000000..240d23b32 --- /dev/null +++ b/src/mobile/MobileInkOverlay.tsx @@ -0,0 +1,75 @@ +import React = require('react'); +import { observer } from "mobx-react"; +import { MobileInkBoxContent, GestureContent } from "../server/Message"; +import { observable, action } from "mobx"; +import { GestureUtils } from "../pen-gestures/GestureUtils"; + + +@observer +export default class MobileInkOverlay extends React.Component { + public static Instance: MobileInkOverlay; + + private _mobileWidth: number = 0; + private _mobileHeight: number = 0; + @observable private _width: number = 0; + @observable private _height: number = 0; + @observable private _x: number = -300; + @observable private _y: number = -300; + + constructor(props: Readonly<{}>) { + super(props); + MobileInkOverlay.Instance = this; + } + + @action + initMobileInkOverlay(content: MobileInkBoxContent) { + const { width, height } = content; + this._mobileWidth = width ? width : 0; + this._mobileHeight = height ? height : 0; + this._width = width ? width : 0; + this._height = height ? height : 0; + this._x = 300; // TODO: center on screen + this._y = 25; // TODO: center on screen + } + + drawStroke = (content: GestureContent) => { + const { points, bounds } = content; + const scale = 1; + + const B = { + right: bounds.right + this._x, + left: bounds.left + this._x, // TODO: scale + bottom: bounds.bottom + this._y, + top: bounds.top + this._y, // TODO: scale + width: bounds.width * scale, + height: bounds.height * scale, + }; + + const target = document.elementFromPoint(points[0].X, points[0].Y); + target?.dispatchEvent( + new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture", + { + bubbles: true, + detail: { + points: points, + gesture: GestureUtils.Gestures.Stroke, + bounds: B + } + } + ) + ); + } + + render() { + return ( + <div className="mobileInkOverlay" style={{ + width: this._width, + height: this._height, + position: "absolute", + transform: `translate(${this._x}px, ${this._y}px)`, + zIndex: 30000, + pointerEvents: "none" + }}></div> + ); + } +}
\ No newline at end of file |