aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/DocServer.ts12
-rw-r--r--src/client/views/GestureOverlay.scss4
-rw-r--r--src/client/views/GestureOverlay.tsx70
-rw-r--r--src/mobile/MobileInterface.tsx12
-rw-r--r--src/server/Message.ts7
-rw-r--r--src/server/Websocket/Websocket.ts8
6 files changed, 89 insertions, 24 deletions
diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index cfd9612ed..132128182 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -1,5 +1,5 @@
import * as OpenSocket from 'socket.io-client';
-import { MessageStore, YoutubeQueryTypes, GestureContent } from "./../server/Message";
+import { MessageStore, YoutubeQueryTypes, GestureContent, MobileInkBoxContent } from "./../server/Message";
import { Opt, Doc } from '../new_fields/Doc';
import { Utils, emptyFunction } from '../Utils';
import { SerializationHelper } from './util/SerializationHelper';
@@ -71,9 +71,9 @@ export namespace DocServer {
Utils.Emit(_socket, MessageStore.GesturePoints, content);
}
- export function dispatchBoxTrigger(enableBox: boolean) {
+ export function dispatchBoxTrigger(content: MobileInkBoxContent) {
// _socket.emit("dispatchBoxTrigger");
- Utils.Emit(_socket, MessageStore.MobileInkBoxTrigger, enableBox);
+ Utils.Emit(_socket, MessageStore.MobileInkBoxTrigger, content);
}
}
@@ -100,10 +100,10 @@ export namespace DocServer {
alert("Your connection to the server has been terminated.");
});
_socket.addEventListener("receiveGesturePoints", (content: GestureContent) => {
- GestureOverlay.Instance.manualDispatch(content);
+ GestureOverlay.Instance.drawStrokeToMobileInkBox(content);
});
- _socket.addEventListener("receiveBoxTrigger", (enableBox: boolean) => {
- GestureOverlay.Instance.showBox(enableBox);
+ _socket.addEventListener("receiveBoxTrigger", (content: MobileInkBoxContent) => {
+ GestureOverlay.Instance.enableMobileInkBox(content);
});
}
diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index 31601efd4..2996b7073 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -5,4 +5,8 @@
top: 0;
left: 0;
touch-action: none;
+}
+
+.mobileInkOverlay {
+ border: 5px dashed red;
} \ No newline at end of file
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 4b8dfa119..7e74d1d33 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -19,7 +19,8 @@ import Palette from "./Palette";
import MobileInterface from "../../mobile/MobileInterface";
import { MainView } from "./MainView";
import { DocServer } from "../DocServer";
-import { GestureContent } from "../../server/Message";
+import { GestureContent, MobileInkBoxContent } from "../../server/Message";
+import { Point } from "../northstar/model/idea/idea";
@observer
export default class GestureOverlay extends Touchable {
@@ -30,6 +31,10 @@ export default class GestureOverlay extends Touchable {
@observable public Color: string = "rgb(244, 67, 54)";
@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;
@@ -39,14 +44,6 @@ export default class GestureOverlay extends Touchable {
GestureOverlay.Instance = this;
}
- manualDispatch = (content: GestureContent) => {
- console.log(content);
- }
-
- showBox = (enableBox: boolean) => {
- console.log("enable box?", enableBox);
- }
-
@action
handleHandDown = (e: React.TouchEvent) => {
const fingers = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
@@ -151,10 +148,11 @@ export default class GestureOverlay extends Touchable {
const B = this.svgBounds;
const points = this._points.map(p => ({ X: p.X - B.left, Y: p.Y - B.top }));
- if (MobileInterface.Instance.drawingInk) {
+ if (MobileInterface.Instance && MobileInterface.Instance.drawingInk) {
const { selectedColor, selectedWidth } = InkingControl.Instance;
DocServer.Mobile.dispatchGesturePoints({
points: this._points,
+ bounds: B,
color: selectedColor,
width: selectedWidth
});
@@ -249,12 +247,64 @@ 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>
+ );
+ }
+
render() {
return (
<div className="gestureOverlay-cont" onPointerDown={this.onPointerDown} onTouchStart={this.onTouchStart}>
{this.currentStroke}
{this.props.children}
{this._palette}
+ {this.showMobileInkOverlay ? this.mobileInkOverlay : <></>}
</div>);
}
}
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 1429226b4..4840ea374 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -68,7 +68,11 @@ export default class MobileInterface extends React.Component {
InkingControl.Instance.switchTool(InkTool.Pen);
this.drawingInk = true;
- DocServer.Mobile.dispatchBoxTrigger(true);
+ DocServer.Mobile.dispatchBoxTrigger({
+ enableBox: true,
+ width: window.innerWidth,
+ height: window.innerHeight
+ });
break;
}
@@ -112,7 +116,11 @@ export default class MobileInterface extends React.Component {
this.switchCurrentView("main");
InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool
- DocServer.Mobile.dispatchBoxTrigger(false);
+ DocServer.Mobile.dispatchBoxTrigger({
+ enableBox: false,
+ width: window.innerWidth,
+ height: window.innerHeight
+ });
this.inkDoc = undefined;
this.drawingInk = false;
diff --git a/src/server/Message.ts b/src/server/Message.ts
index fe74dafa5..1958286df 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -45,12 +45,15 @@ export interface Diff extends Reference {
export interface GestureContent {
readonly points: Array<Point>;
+ readonly bounds: { right: number, left: number, bottom: number, top: number, width: number, height: number };
readonly width?: string;
readonly color?: string;
}
-export interface MobileInkBoxTriggerContent {
+export interface MobileInkBoxContent {
readonly enableBox: boolean;
+ readonly width?: number;
+ readonly height?: number;
}
export namespace MessageStore {
@@ -63,7 +66,7 @@ export namespace MessageStore {
export const DeleteAll = new Message<any>("Delete All");
export const ConnectionTerminated = new Message<string>("Connection Terminated");
export const GesturePoints = new Message<GestureContent>("Gesture Points");
- export const MobileInkBoxTrigger = new Message<boolean>("Trigger Mobile Ink Box");
+ export const MobileInkBoxTrigger = new Message<MobileInkBoxContent>("Trigger Mobile Ink Box");
export const GetRefField = new Message<string>("Get Ref Field");
export const GetRefFields = new Message<string[]>("Get Ref Fields");
diff --git a/src/server/Websocket/Websocket.ts b/src/server/Websocket/Websocket.ts
index 67777f023..16e34bdfc 100644
--- a/src/server/Websocket/Websocket.ts
+++ b/src/server/Websocket/Websocket.ts
@@ -1,5 +1,5 @@
import { Utils } from "../../Utils";
-import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent } from "../Message";
+import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent, MobileInkBoxContent } from "../Message";
import { Client } from "../Client";
import { Socket } from "socket.io";
import { Database } from "../database";
@@ -55,7 +55,7 @@ export namespace WebSocket {
Utils.AddServerHandler(socket, MessageStore.DeleteField, id => DeleteField(socket, id));
Utils.AddServerHandler(socket, MessageStore.DeleteFields, ids => DeleteFields(socket, ids));
Utils.AddServerHandler(socket, MessageStore.GesturePoints, content => processGesturePoints(socket, content));
- Utils.AddServerHandler(socket, MessageStore.MobileInkBoxTrigger, enableBox => processBoxTrigger(socket, enableBox));
+ Utils.AddServerHandler(socket, MessageStore.MobileInkBoxTrigger, content => processBoxTrigger(socket, content));
Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField);
Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields);
@@ -74,8 +74,8 @@ export namespace WebSocket {
socket.broadcast.emit("receiveGesturePoints", content);
}
- function processBoxTrigger(socket: Socket, enableBox: boolean) {
- socket.broadcast.emit("receiveBoxTrigger", enableBox);
+ function processBoxTrigger(socket: Socket, content: MobileInkBoxContent) {
+ socket.broadcast.emit("receiveBoxTrigger", content);
}
function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: any[]) => void]) {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 20:15:22 +0000