aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/DocServer.ts6
-rw-r--r--src/mobile/MobileInkOverlay.tsx15
-rw-r--r--src/mobile/MobileInterface.tsx72
-rw-r--r--src/server/Message.ts4
-rw-r--r--src/server/Websocket/Websocket.ts7
-rw-r--r--src/server/authentication/models/current_user_utils.ts14
6 files changed, 99 insertions, 19 deletions
diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index b20cd3521..c03764471 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, MobileInkOverlayContent, UpdateMobileInkOverlayPosition } from "./../server/Message";
+import { MessageStore, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent } from "./../server/Message";
import { Opt, Doc } from '../new_fields/Doc';
import { Utils, emptyFunction } from '../Utils';
import { SerializationHelper } from './util/SerializationHelper';
@@ -77,7 +77,7 @@ export namespace DocServer {
Utils.Emit(_socket, MessageStore.MobileInkOverlayTrigger, content);
}
- export function dispatchOverlayPositionUpdate(content: UpdateMobileInkOverlayPosition) {
+ export function dispatchOverlayPositionUpdate(content: UpdateMobileInkOverlayPositionContent) {
Utils.Emit(_socket, MessageStore.UpdateMobileInkOverlayPosition, content);
}
@@ -113,7 +113,7 @@ export namespace DocServer {
GestureOverlay.Instance.enableMobileInkOverlay(content);
MobileInkOverlay.Instance.initMobileInkOverlay(content);
});
- _socket.addEventListener("updateMobileOverlayPosition", (content: UpdateMobileInkOverlayPosition) => {
+ _socket.addEventListener("receiveUpdateOverlayPosition", (content: UpdateMobileInkOverlayPositionContent) => {
MobileInkOverlay.Instance.updatePosition(content);
});
}
diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index 5efc7b83a..600e8a91b 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -1,6 +1,6 @@
import React = require('react');
import { observer } from "mobx-react";
-import { MobileInkOverlayContent, GestureContent, UpdateMobileInkOverlayPosition } from "../server/Message";
+import { MobileInkOverlayContent, GestureContent, UpdateMobileInkOverlayPositionContent } from "../server/Message";
import { observable, action } from "mobx";
import { GestureUtils } from "../pen-gestures/GestureUtils";
import "./MobileInkOverlay.scss";
@@ -37,17 +37,19 @@ export default class MobileInkOverlay extends React.Component {
initMobileInkOverlay(content: MobileInkOverlayContent) {
const { width, height } = content;
const scaledSize = this.initialSize(width ? width : 0, height ? height : 0);
- this._width = scaledSize.width * .5;
- this._height = scaledSize.height * .5;
- this._scale = .5; //scaledSize.scale;
+ this._width = scaledSize.width * .8;
+ this._height = scaledSize.height * .8;
+ this._scale = .8; //scaledSize.scale;
this._x = 300; // TODO: center on screen
this._y = 25; // TODO: center on screen
}
@action
- updatePosition(content: UpdateMobileInkOverlayPosition) {
+ updatePosition(content: UpdateMobileInkOverlayPositionContent) {
const { dx, dy, dsize } = content;
- console.log(dx, dy, dsize);
+ if (dx) this._x += dx;
+ if (dy) this._y += dy;
+ // TODO: scale dsize
}
drawStroke = (content: GestureContent) => {
@@ -82,7 +84,6 @@ export default class MobileInkOverlay extends React.Component {
@action
dragStart = (e: React.PointerEvent) => {
- console.log("pointer down");
document.removeEventListener("pointermove", this.dragging);
document.removeEventListener("pointerup", this.dragEnd);
document.addEventListener("pointermove", this.dragging);
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index b191b3afb..03bcbca80 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -30,12 +30,15 @@ export default class MobileInterface extends React.Component {
@observable static Instance: MobileInterface;
@computed private get userDoc() { return CurrentUserUtils.UserDocument; }
@computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
- @observable private currentView: "main" | "ink" | "library" = "main";
+ @observable private currentView: "main" | "ink" | "upload" = "main";
private mainDoc = CurrentUserUtils.setupMobileDoc(this.userDoc);
+
private inkDoc?: Doc;
public drawingInk: boolean = false;
+ private uploadDoc?: Doc;
+
constructor(props: Readonly<{}>) {
super(props);
MobileInterface.Instance = this;
@@ -52,7 +55,7 @@ export default class MobileInterface extends React.Component {
}
@action
- switchCurrentView = (view: "main" | "ink" | "library") => {
+ switchCurrentView = (view: "main" | "ink" | "upload") => {
this.currentView = view;
if (this.userDoc) {
@@ -76,6 +79,11 @@ export default class MobileInterface extends React.Component {
break;
}
+ case "upload": {
+ this.uploadDoc = CurrentUserUtils.setupMobileUploadDoc(this.userDoc);
+ this.userDoc.activeMobile = this.uploadDoc;
+
+ }
}
}
}
@@ -127,15 +135,20 @@ export default class MobileInterface extends React.Component {
}
shiftLeft = (e: React.MouseEvent) => {
+ console.log("shift left!");
DocServer.Mobile.dispatchOverlayPositionUpdate({
dx: -10
});
+ e.preventDefault();
+ e.stopPropagation();
}
shiftRight = (e: React.MouseEvent) => {
DocServer.Mobile.dispatchOverlayPositionUpdate({
dx: 10
});
+ e.preventDefault();
+ e.stopPropagation();
}
@computed
@@ -147,7 +160,7 @@ export default class MobileInterface extends React.Component {
<div className="mobileInterface">
<div className="mobileInterface-inkInterfaceButtons">
<div className="navButtons">
- <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing"><FontAwesomeIcon icon="long-arrow-alt-left" /></button>
+ <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing">BACK</button>
</div>
<div className="inkSettingButtons">
<button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing"><FontAwesomeIcon icon="long-arrow-alt-left" /></button>
@@ -185,8 +198,57 @@ export default class MobileInterface extends React.Component {
}
}
+ upload = () => {
+
+ }
+
+ @computed
+ get uploadContent() {
+ if (this.mainContainer) {
+ return (
+ <div className="mobileInterface">
+ <div className="mobileInterface-inkInterfaceButtons">
+ <div className="navButtons">
+ <button className="mobileInterface-button cancel" onClick={this.onBack} title="Back">BACK</button>
+ </div>
+ <div className="uploadSettings">
+ <button className="mobileInterface-button" onClick={this.upload} title="Shift left">UPLOAD</button>
+ </div>
+ </div>
+ <DocumentView
+ Document={this.mainContainer}
+ DataDoc={undefined}
+ LibraryPath={emptyPath}
+ addDocument={returnFalse}
+ addDocTab={returnFalse}
+ pinToPres={emptyFunction}
+ removeDocument={undefined}
+ ruleProvider={undefined}
+ onClick={undefined}
+ ScreenToLocalTransform={Transform.Identity}
+ ContentScaling={returnOne}
+ PanelWidth={() => window.screen.width}
+ PanelHeight={() => window.screen.height}
+ renderDepth={0}
+ focus={emptyFunction}
+ backgroundColor={returnEmptyString}
+ parentActive={returnTrue}
+ whenActiveChanged={emptyFunction}
+ bringToFront={emptyFunction}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined}
+ zoomToScale={emptyFunction}
+ getScale={returnOne}>
+ </DocumentView>
+ </div>
+ );
+ }
+ }
+
render() {
- const content = this.currentView === "main" ? this.mainContent : this.currentView === "ink" ? this.inkContent : <></>;
+ const content = this.currentView === "main" ? this.mainContent :
+ this.currentView === "ink" ? this.inkContent :
+ this.currentView === "upload" ? this.uploadContent : <></>;
return (
<div className="mobile-container">
{content}
@@ -195,4 +257,4 @@ export default class MobileInterface extends React.Component {
}
}
-Scripting.addGlobal(function switchMobileView(view: "main" | "ink" | "library") { return MobileInterface.Instance.switchCurrentView(view); });
+Scripting.addGlobal(function switchMobileView(view: "main" | "ink" | "upload") { return MobileInterface.Instance.switchCurrentView(view); });
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 064a19653..236df3f3c 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -56,7 +56,7 @@ export interface MobileInkOverlayContent {
readonly height?: number;
}
-export interface UpdateMobileInkOverlayPosition {
+export interface UpdateMobileInkOverlayPositionContent {
readonly dx?: number;
readonly dy?: number;
readonly dsize?: number;
@@ -74,7 +74,7 @@ export namespace MessageStore {
export const GesturePoints = new Message<GestureContent>("Gesture Points");
export const MobileInkOverlayTrigger = new Message<MobileInkOverlayContent>("Trigger Mobile Ink Overlay");
- export const UpdateMobileInkOverlayPosition = new Message<UpdateMobileInkOverlayPosition>("Update Mobile Ink Overlay Position");
+ export const UpdateMobileInkOverlayPosition = new Message<UpdateMobileInkOverlayPositionContent>("Update Mobile Ink Overlay Position");
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 fe253400c..77816c897 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, MobileInkOverlayContent } from "../Message";
+import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent } from "../Message";
import { Client } from "../Client";
import { Socket } from "socket.io";
import { Database } from "../database";
@@ -56,6 +56,7 @@ export namespace WebSocket {
Utils.AddServerHandler(socket, MessageStore.DeleteFields, ids => DeleteFields(socket, ids));
Utils.AddServerHandler(socket, MessageStore.GesturePoints, content => processGesturePoints(socket, content));
Utils.AddServerHandler(socket, MessageStore.MobileInkOverlayTrigger, content => processOverlayTrigger(socket, content));
+ Utils.AddServerHandler(socket, MessageStore.UpdateMobileInkOverlayPosition, content => processUpdateOverlayPosition(socket, content));
Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField);
Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields);
@@ -78,6 +79,10 @@ export namespace WebSocket {
socket.broadcast.emit("receiveOverlayTrigger", content);
}
+ function processUpdateOverlayPosition(socket: Socket, content: UpdateMobileInkOverlayPositionContent) {
+ socket.broadcast.emit("receiveUpdateOverlayPosition", content);
+ }
+
function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: any[]) => void]) {
const { ProjectCredentials } = GoogleCredentialsLoader;
switch (query.type) {
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 98092ddfe..82bed76f7 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -101,7 +101,8 @@ export class CurrentUserUtils {
{ title: "use eraser", icon: "eraser", click: 'activateEraser(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "pink", activePen: doc },
{ title: "use scrubber", icon: "eraser", click: 'activateScrubber(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "green", activePen: doc },
{ title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activePen.pen = this;', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "white", activePen: doc },
- { title: "draw", icon: "mouse-pointer", click: 'switchMobileView("ink");', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "red", activePen: doc },
+ { title: "draw", icon: "pen-nib", click: 'switchMobileView("ink");', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "red", activePen: doc },
+ { title: "upload", icon: "upload", click: 'switchMobileView("upload");', backgroundColor: "orange" },
];
return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({
nativeWidth: 100, nativeHeight: 100, width: 100, height: 100, dropAction: data.click ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
@@ -144,6 +145,17 @@ export class CurrentUserUtils {
return Docs.Create.FreeformDocument([], { title: "Mobile Inking", backgroundColor: "white" });
}
+ static setupMobileUploadDoc(userDoc: Doc) {
+ console.log("setup mobile upload", window.innerWidth, window.innerHeight);
+ const webDoc = Docs.Create.WebDocument("https://wikipedia.com", { title: "Mobile Upload Web", chromeStatus: "enabled", ignoreClick: true });
+ const uploadDoc = Docs.Create.StackingDocument([], { title: "Mobile Upload", backgroundColor: "pink" });
+ return Docs.Create.StackingDocument([webDoc, uploadDoc], {
+ title: "Mobile Upload", backgroundColor: "white",
+ columnWidth: window.innerWidth, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", autoHeight: true, yMargin: 5,
+ width: window.innerWidth, height: window.innerHeight
+ });
+ }
+
// setup the Creator button which will display the creator panel. This panel will include the drag creators and the color picker. when clicked, this panel will be displayed in the target container (ie, sidebarContainer)
static setupToolsPanel(sidebarContainer: Doc, doc: Doc) {
// setup a masonry view of all he creators
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 13:09:52 +0000