aboutsummaryrefslogtreecommitdiff
path: root/src/mobile
diff options
context:
space:
mode:
Diffstat (limited to 'src/mobile')
-rw-r--r--src/mobile/MobileInkOverlay.scss38
-rw-r--r--src/mobile/MobileInkOverlay.tsx91
-rw-r--r--src/mobile/MobileInterface.scss2
-rw-r--r--src/mobile/MobileInterface.tsx90
4 files changed, 174 insertions, 47 deletions
diff --git a/src/mobile/MobileInkOverlay.scss b/src/mobile/MobileInkOverlay.scss
new file mode 100644
index 000000000..2e45d0441
--- /dev/null
+++ b/src/mobile/MobileInkOverlay.scss
@@ -0,0 +1,38 @@
+.mobileInkOverlay {
+ border: 5px dashed red;
+}
+
+.mobileInkOverlay-border {
+ background-color: rgba(0, 255, 0, .4);
+ position: absolute;
+ pointer-events: auto;
+ cursor: pointer;
+
+ &.top {
+ width: calc(100% + 20px);
+ height: 10px;
+ top: -10px;
+ left: -10px;
+ }
+
+ &.left {
+ width: 10px;
+ height: calc(100% + 20px);
+ top: -10px;
+ left: -10px;
+ }
+
+ &.right {
+ width: 10px;
+ height: calc(100% + 20px);
+ top: -10px;
+ right: -10px;
+ }
+
+ &.bottom {
+ width: calc(100% + 20px);
+ height: 10px;
+ bottom: -10px;
+ left: -10px;
+ }
+} \ No newline at end of file
diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index 71dd20c51..5efc7b83a 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -1,8 +1,9 @@
import React = require('react');
import { observer } from "mobx-react";
-import { MobileInkBoxContent, GestureContent } from "../server/Message";
+import { MobileInkOverlayContent, GestureContent, UpdateMobileInkOverlayPosition } from "../server/Message";
import { observable, action } from "mobx";
import { GestureUtils } from "../pen-gestures/GestureUtils";
+import "./MobileInkOverlay.scss";
@observer
@@ -15,6 +16,11 @@ export default class MobileInkOverlay extends React.Component {
@observable private _x: number = -300;
@observable private _y: number = -300;
+ @observable private _offsetX: number = 0;
+ @observable private _offsetY: number = 0;
+ @observable private _isDragging: boolean = false;
+ private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
+
constructor(props: Readonly<{}>) {
super(props);
MobileInkOverlay.Instance = this;
@@ -28,18 +34,27 @@ export default class MobileInkOverlay extends React.Component {
}
@action
- initMobileInkOverlay(content: MobileInkBoxContent) {
+ initMobileInkOverlay(content: MobileInkOverlayContent) {
const { width, height } = content;
const scaledSize = this.initialSize(width ? width : 0, height ? height : 0);
- this._width = scaledSize.width;
- this._height = scaledSize.height;
- this._scale = scaledSize.scale;
+ this._width = scaledSize.width * .5;
+ this._height = scaledSize.height * .5;
+ this._scale = .5; //scaledSize.scale;
this._x = 300; // TODO: center on screen
this._y = 25; // TODO: center on screen
}
+ @action
+ updatePosition(content: UpdateMobileInkOverlayPosition) {
+ const { dx, dy, dsize } = content;
+ console.log(dx, dy, dsize);
+ }
+
drawStroke = (content: GestureContent) => {
+ // TODO: figure out why strokes drawn in corner of mobile interface dont get inserted
+
const { points, bounds } = content;
+ console.log("received points", points, bounds);
const B = {
right: (bounds.right * this._scale) + this._x,
@@ -65,16 +80,66 @@ 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);
+ document.addEventListener("pointerup", this.dragEnd);
+
+ this._isDragging = true;
+ this._offsetX = e.pageX - this._mainCont.current!.getBoundingClientRect().left;
+ this._offsetY = e.pageY - this._mainCont.current!.getBoundingClientRect().top;
+
+ e.preventDefault();
+ e.stopPropagation();
+ }
+
+ @action
+ dragging = (e: PointerEvent) => {
+ const x = e.pageX - this._offsetX;
+ const y = e.pageY - this._offsetY;
+
+ // TODO: don't allow drag over library?
+ this._x = Math.min(Math.max(x, 0), window.innerWidth - this._width);
+ this._y = Math.min(Math.max(y, 0), window.innerHeight - this._height);
+
+ e.preventDefault();
+ e.stopPropagation();
+ }
+
+ @action
+ dragEnd = (e: PointerEvent) => {
+ document.removeEventListener("pointermove", this.dragging);
+ document.removeEventListener("pointerup", this.dragEnd);
+
+ this._isDragging = false;
+
+ e.preventDefault();
+ e.stopPropagation();
+ }
+
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>
+ <div className="mobileInkOverlay"
+ style={{
+ width: this._width,
+ height: this._height,
+ position: "absolute",
+ transform: `translate(${this._x}px, ${this._y}px)`,
+ zIndex: 30000,
+ pointerEvents: "none",
+ borderStyle: this._isDragging ? "solid" : "dashed"
+ }}
+ ref={this._mainCont}
+ >
+ <div className="mobileInkOverlay-border top" onPointerDown={this.dragStart}></div>
+ <div className="mobileInkOverlay-border bottom" onPointerDown={this.dragStart}></div>
+ <div className="mobileInkOverlay-border left" onPointerDown={this.dragStart}></div>
+ <div className="mobileInkOverlay-border right" onPointerDown={this.dragStart}></div>
+ </div>
);
}
} \ No newline at end of file
diff --git a/src/mobile/MobileInterface.scss b/src/mobile/MobileInterface.scss
index e4cc919a5..8abe5a40d 100644
--- a/src/mobile/MobileInterface.scss
+++ b/src/mobile/MobileInterface.scss
@@ -1,4 +1,4 @@
-.mobileInterface-topButtons {
+.mobileInterface-inkInterfaceButtons {
position: absolute;
display: flex;
justify-content: space-between;
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 4840ea374..b191b3afb 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -10,7 +10,7 @@ import { DocumentView } from '../client/views/nodes/DocumentView';
import { emptyPath, emptyFunction, returnFalse, returnOne, returnEmptyString, returnTrue } from '../Utils';
import { Transform } from '../client/util/Transform';
import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPenNib, faHighlighter, faEraser, faMousePointer, faBreadSlice, faTrash, faCheck } from '@fortawesome/free-solid-svg-icons';
+import { faPenNib, faHighlighter, faEraser, faMousePointer, faBreadSlice, faTrash, faCheck, faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons';
import { Scripting } from '../client/util/Scripting';
import { CollectionFreeFormView } from '../client/views/collections/collectionFreeForm/CollectionFreeFormView';
import GestureOverlay from '../client/views/GestureOverlay';
@@ -23,7 +23,7 @@ import { DateField } from '../new_fields/DateField';
import { GestureUtils } from '../pen-gestures/GestureUtils';
import { DocServer } from '../client/DocServer';
-library.add(faTrash, faCheck);
+library.add(faLongArrowAltLeft);
@observer
export default class MobileInterface extends React.Component {
@@ -68,8 +68,8 @@ export default class MobileInterface extends React.Component {
InkingControl.Instance.switchTool(InkTool.Pen);
this.drawingInk = true;
- DocServer.Mobile.dispatchBoxTrigger({
- enableBox: true,
+ DocServer.Mobile.dispatchOverlayTrigger({
+ enableOverlay: true,
width: window.innerWidth,
height: window.innerHeight
});
@@ -112,12 +112,12 @@ export default class MobileInterface extends React.Component {
return "hello";
}
- onClick = (e: React.MouseEvent) => {
+ onBack = (e: React.MouseEvent) => {
this.switchCurrentView("main");
InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool
- DocServer.Mobile.dispatchBoxTrigger({
- enableBox: false,
+ DocServer.Mobile.dispatchOverlayTrigger({
+ enableOverlay: false,
width: window.innerWidth,
height: window.innerHeight
});
@@ -126,37 +126,61 @@ export default class MobileInterface extends React.Component {
this.drawingInk = false;
}
+ shiftLeft = (e: React.MouseEvent) => {
+ DocServer.Mobile.dispatchOverlayPositionUpdate({
+ dx: -10
+ });
+ }
+
+ shiftRight = (e: React.MouseEvent) => {
+ DocServer.Mobile.dispatchOverlayPositionUpdate({
+ dx: 10
+ });
+ }
+
@computed
get inkContent() {
+ // TODO: support panning and zooming
+ // TODO: handle moving of ink strokes
if (this.mainContainer) {
return (
- <GestureOverlay>
- <div className="mobileInterface-topButtons">
- <button className="mobileInterface-button cancel" onClick={this.onClick} title="Cancel drawing"><FontAwesomeIcon icon="trash" /></button>
- <button className="mobileInterface-button cancel" onClick={this.onClick} title="Insert drawing"><FontAwesomeIcon icon="check" /></button>
+ <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>
+ </div>
+ <div className="inkSettingButtons">
+ <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing"><FontAwesomeIcon icon="long-arrow-alt-left" /></button>
+ </div>
+ <div className="navButtons">
+ <button className="mobileInterface-button" onClick={this.shiftLeft} title="Shift left">left</button>
+ <button className="mobileInterface-button" onClick={this.shiftRight} title="Shift right">right</button>
+ </div>
</div>
- <CollectionView
- Document={this.mainContainer}
- DataDoc={undefined}
- LibraryPath={emptyPath}
- fieldKey={""}
- addDocTab={returnFalse}
- pinToPres={emptyFunction}
- PanelHeight={() => window.innerHeight}
- PanelWidth={() => window.innerWidth}
- focus={emptyFunction}
- isSelected={returnFalse}
- select={emptyFunction}
- active={returnFalse}
- ContentScaling={returnOne}
- whenActiveChanged={returnFalse}
- ScreenToLocalTransform={Transform.Identity}
- ruleProvider={undefined}
- renderDepth={0}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined}>
- </CollectionView>
- </GestureOverlay>
+ <GestureOverlay>
+ <CollectionView
+ Document={this.mainContainer}
+ DataDoc={undefined}
+ LibraryPath={emptyPath}
+ fieldKey={""}
+ addDocTab={returnFalse}
+ pinToPres={emptyFunction}
+ PanelHeight={() => window.innerHeight}
+ PanelWidth={() => window.innerWidth}
+ focus={emptyFunction}
+ isSelected={returnFalse}
+ select={emptyFunction}
+ active={returnFalse}
+ ContentScaling={returnOne}
+ whenActiveChanged={returnFalse}
+ ScreenToLocalTransform={Transform.Identity}
+ ruleProvider={undefined}
+ renderDepth={0}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined}>
+ </CollectionView>
+ </GestureOverlay>
+ </div>
);
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-30 11:55:36 +0000