aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/documents/Documents.ts4
-rw-r--r--src/client/views/GestureOverlay.scss6
-rw-r--r--src/client/views/GestureOverlay.tsx68
-rw-r--r--src/client/views/MainView.tsx2
-rw-r--r--src/client/views/collections/CollectionLinearView.tsx2
-rw-r--r--src/client/views/nodes/ButtonBox.tsx5
6 files changed, 63 insertions, 24 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 7e7b10ae8..821185518 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -80,7 +80,7 @@ export interface DocumentOptions {
isTemplateDoc?: boolean;
templates?: List<string>;
viewType?: number;
- backgroundColor?: string;
+ backgroundColor?: string | ScriptField;
ignoreClick?: boolean;
lockedPosition?: boolean; // lock the x,y coordinates of the document so that it can't be dragged
lockedTransform?: boolean; // lock the panx,pany and scale parameters of the document so that it be panned/zoomed
@@ -127,6 +127,8 @@ export interface DocumentOptions {
// [key: string]: Opt<Field>;
pointerHack?: boolean; // for buttons, allows onClick handler to fire onPointerDown
isExpanded?: boolean; // is linear view expanded
+ textTransform?: string; // is linear view expanded
+ letterSpacing?: string; // is linear view expanded
}
class EmptyBox {
diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index f9a52d976..d980b0a91 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -11,4 +11,10 @@
position: absolute;
width: 300px;
height: 300px;
+}
+
+.filter-cont {
+ position: absolute;
+ background-color: transparent;
+ border: 1px solid black;
} \ No newline at end of file
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 7fb8e7797..e44db4463 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -24,19 +24,25 @@ import { DocumentContentsView } from "./nodes/DocumentContentsView";
export default class GestureOverlay extends Touchable {
static Instance: GestureOverlay;
- @observable private _points: { X: number, Y: number }[] = [];
- @observable private _palette?: JSX.Element;
- @observable private _clipboardDoc?: JSX.Element;
@observable public Color: string = "rgb(244, 67, 54)";
@observable public Width: number = 5;
@observable public SavedColor?: string;
@observable public SavedWidth?: number;
- private _d1: Doc | undefined;
- private _thumbDoc: Doc | undefined;
@observable private _thumbX?: number;
@observable private _thumbY?: number;
+ @observable private _pointerY?: number;
+ @observable private _points: { X: number, Y: number }[] = [];
+ @observable private _palette?: JSX.Element;
+ @observable private _clipboardDoc?: JSX.Element;
+ @observable private _showBounds: boolean = false;
+
+ @computed private get height(): number { return Math.max(this._pointerY && this._thumbY ? this._thumbY - this._pointerY : 300, 300); }
+
+ private _d1: Doc | undefined;
+ private _thumbDoc: Doc | undefined;
private thumbIdentifier?: number;
+ private pointerIdentifier?: number;
private _hands: Map<number, React.Touch[]> = new Map<number, React.Touch[]>();
protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
@@ -178,7 +184,7 @@ export default class GestureOverlay extends Touchable {
e.stopPropagation();
}
- handleHandDown = (e: React.TouchEvent) => {
+ handleHandDown = async (e: React.TouchEvent) => {
const fingers = new Array<React.Touch>();
for (let i = 0; i < e.touches.length; i++) {
const pt: any = e.touches.item(i);
@@ -194,6 +200,22 @@ export default class GestureOverlay extends Touchable {
}
}
const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]);
+ const rightMost = Math.max(...fingers.map(f => f.clientX));
+ const leftMost = Math.min(...fingers.map(f => f.clientX));
+ let pointer: React.Touch | undefined;
+ // left hand
+ if (thumb.clientX === rightMost) {
+ pointer = fingers.reduce((a, v) => a.clientX > v.clientX || v.identifier === thumb.identifier ? a : v);
+ }
+ // right hand
+ else if (thumb.clientX === leftMost) {
+ pointer = fingers.reduce((a, v) => a.clientX < v.clientX || v.identifier === thumb.identifier ? a : v);
+ }
+ else {
+ console.log("not hand");
+ }
+ this.pointerIdentifier = pointer?.identifier;
+ runInAction(() => this._pointerY = pointer?.clientY);
if (thumb.identifier === this.thumbIdentifier) {
this._thumbX = thumb.clientX;
this._thumbY = thumb.clientY;
@@ -201,15 +223,12 @@ export default class GestureOverlay extends Touchable {
return;
}
this.thumbIdentifier = thumb?.identifier;
- // fingers.forEach((f) => this.prevPoints.delete(f.identifier));
this._hands.set(thumb.identifier, fingers);
const others = fingers.filter(f => f !== thumb);
const minX = Math.min(...others.map(f => f.clientX));
const minY = Math.min(...others.map(f => f.clientY));
- // const t = this.getTransform().transformPoint(minX, minY);
- // const th = this.getTransform().transformPoint(thumb.clientX, thumb.clientY);
- const thumbDoc = FieldValue(Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc));
+ const thumbDoc = await Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc);
if (thumbDoc) {
runInAction(() => {
this._thumbDoc = thumbDoc;
@@ -247,7 +266,7 @@ export default class GestureOverlay extends Touchable {
}
}
const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]);
- if (thumb?.identifier === this.thumbIdentifier) {
+ if (thumb?.identifier && thumb?.identifier === this.thumbIdentifier) {
this._hands.set(thumb.identifier, fingers);
}
@@ -259,6 +278,9 @@ export default class GestureOverlay extends Touchable {
this._thumbX = pt.clientX;
}
}
+ if (pt && pt.identifier === this.pointerIdentifier) {
+ this._pointerY = pt.clientY;
+ }
}
}
@@ -329,8 +351,6 @@ export default class GestureOverlay extends Touchable {
return actionPerformed;
}
-
-
@action
onPointerUp = (e: PointerEvent) => {
if (this._points.length > 1) {
@@ -414,7 +434,6 @@ export default class GestureOverlay extends Touchable {
@computed get elements() {
return [
this.props.children,
- // this._clipboardDoc,
this._palette,
this.currentStroke
];
@@ -422,8 +441,6 @@ export default class GestureOverlay extends Touchable {
@action
public openFloatingDoc = (doc: Doc) => {
- // const t = new Transform(-(this._clipboardDoc ? (this._thumbX ?? 0) : -350), -(this._thumbY ?? 0) + 350, 1);
- // let t =
this._clipboardDoc =
<DocumentView
Document={doc}
@@ -435,7 +452,7 @@ export default class GestureOverlay extends Touchable {
onClick={undefined}
ruleProvider={undefined}
removeDocument={undefined}
- ScreenToLocalTransform={() => new Transform(-(this._thumbX ?? 0), -(this._thumbY ?? 0) + 350, 1)}
+ ScreenToLocalTransform={() => new Transform(-(this._thumbX ?? 0), -(this._thumbY ?? 0) + this.height, 1)}
ContentScaling={returnOne}
PanelWidth={() => 300}
PanelHeight={() => 300}
@@ -462,13 +479,24 @@ export default class GestureOverlay extends Touchable {
<div className="gestureOverlay-cont" onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}>
{this.elements}
<div className="clipboardDoc-cont" style={{
- transform: `translate(${this._thumbX}px, ${(this._thumbY ?? 0) - 350}px)`,
+ transform: `translate(${this._thumbX}px, ${(this._thumbY ?? 0) - this.height}px)`,
+ height: this.height,
+ width: this.height,
pointerEvents: this._clipboardDoc ? "unset" : "none",
- touchAction: this._clipboardDoc ? "unset" : "none"
+ touchAction: this._clipboardDoc ? "unset" : "none",
}}>
{this._clipboardDoc}
</div>
- </div>);
+ <div className="filter-cont" style={{
+ transform: `translate(${this._thumbX}px, ${(this._thumbY ?? 0) - this.height}px)`,
+ height: this.height,
+ width: this.height,
+ pointerEvents: this._showBounds ? "unset" : "none",
+ touchAction: this._showBounds ? "unset" : "none",
+ display: this._showBounds ? "unset" : "none",
+ }}>
+ </div>
+ </div >);
}
}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 168d2ea18..14ee0dc53 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -46,7 +46,7 @@ import RichTextMenu from '../util/RichTextMenu';
@observer
export class MainView extends React.Component {
public static Instance: MainView;
- private _buttonBarHeight = 75;
+ private _buttonBarHeight = 35;
private _flyoutSizeOnDown = 0;
private _urlState: HistoryUtil.DocUrl;
private _docBtnRef = React.createRef<HTMLDivElement>();
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index 8b0638aa1..77af2dc0e 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -48,7 +48,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
(i) => runInAction(() => {
this._selectedIndex = i;
let selected: any = undefined;
- this.childLayoutPairs.filter((pair) => this.isCurrent(pair.layout)).map((pair, ind) => {
+ this.childLayoutPairs.filter((pair) => this.isCurrent(pair.layout)).map(async (pair, ind) => {
const isSelected = this._selectedIndex === ind;
if (isSelected) {
selected = pair;
diff --git a/src/client/views/nodes/ButtonBox.tsx b/src/client/views/nodes/ButtonBox.tsx
index d1272c266..d29fe1711 100644
--- a/src/client/views/nodes/ButtonBox.tsx
+++ b/src/client/views/nodes/ButtonBox.tsx
@@ -80,7 +80,10 @@ export class ButtonBox extends DocComponent<FieldViewProps, ButtonDocument>(Butt
return (
<div className="buttonBox-outerDiv" ref={this.createDropTarget} onContextMenu={this.specificContextMenu}
style={{ boxShadow: this.Document.opacity === 0 ? undefined : StrCast(this.Document.boxShadow, "") }}>
- <div className="buttonBox-mainButton" style={{ background: this.Document.backgroundColor || "", color: this.Document.color || "black", fontSize: this.Document.fontSize }} >
+ <div className="buttonBox-mainButton" style={{
+ background: this.Document.backgroundColor, color: this.Document.color || "black",
+ fontSize: this.Document.fontSize, letterSpacing: this.Document.letterSpacing || "", textTransform: this.Document.textTransform || ""
+ }} >
<div className="buttonBox-mainButtonCenter">
{(this.Document.text || this.Document.title)}
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-29 21:55:18 +0000