aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/CollectionLinearView.tsx6
-rw-r--r--src/client/views/GestureOverlay.tsx45
-rw-r--r--src/client/views/Palette.scss19
-rw-r--r--src/client/views/Palette.tsx20
-rw-r--r--src/server/authentication/models/current_user_utils.ts4
5 files changed, 72 insertions, 22 deletions
diff --git a/src/client/views/CollectionLinearView.tsx b/src/client/views/CollectionLinearView.tsx
index 2262a3c0c..0a3096833 100644
--- a/src/client/views/CollectionLinearView.tsx
+++ b/src/client/views/CollectionLinearView.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, HeightSym, WidthSym } from '../../new_fields/Doc';
import { makeInterface } from '../../new_fields/Schema';
-import { BoolCast, NumCast, StrCast } from '../../new_fields/Types';
+import { BoolCast, NumCast, StrCast, Cast } from '../../new_fields/Types';
import { emptyFunction, returnEmptyString, returnOne, returnTrue, Utils } from '../../Utils';
import { DragManager } from '../util/DragManager';
import { Transform } from '../util/Transform';
@@ -13,6 +13,7 @@ import { CollectionSubView } from './collections/CollectionSubView';
import { DocumentView } from './nodes/DocumentView';
import { documentSchema } from '../../new_fields/documentSchemas';
import { Id } from '../../new_fields/FieldSymbols';
+import { ScriptField } from '../../new_fields/ScriptField';
type LinearDocument = makeInterface<[typeof documentSchema,]>;
@@ -76,6 +77,9 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
const nativeWidth = NumCast(pair.layout.nativeWidth, this.dimension());
const deltaSize = nativeWidth * .15 / 2;
const isSelected = this._selectedIndex === ind;
+ if (isSelected) {
+ Cast(pair.layout.proto?.onPointerDown, ScriptField)?.script.run({ this: pair.layout.proto }, console.log);
+ }
return <div className={`collectionLinearView-docBtn` + (pair.layout.onClick || pair.layout.onDragStart ? "-scalable" : "")} key={pair.layout[Id]} ref={dref}
style={{
width: nested ? pair.layout[WidthSym]() : this.dimension() - deltaSize,
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index e4c14f6b8..96c1513ff 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -13,7 +13,7 @@ import { LinkManager } from "../util/LinkManager";
import { DocUtils } from "../documents/Documents";
import { undoBatch } from "../util/UndoManager";
import { Scripting } from "../util/Scripting";
-import { FieldValue, Cast } from "../../new_fields/Types";
+import { FieldValue, Cast, NumCast } from "../../new_fields/Types";
import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
import Palette from "./Palette";
import { Utils } from "../../Utils";
@@ -28,6 +28,9 @@ export default class GestureOverlay extends Touchable {
@observable public Width: number = 5;
private _d1: Doc | undefined;
+ private _thumbDoc: Doc | undefined;
+ private _thumbX?: number;
+ private _thumbY?: number;
private thumbIdentifier?: number;
private _hands: (React.Touch[])[] = [];
@@ -170,8 +173,26 @@ export default class GestureOverlay extends Touchable {
}
handleHandDown = (e: React.TouchEvent) => {
- const fingers = Array.from(e.touches);
+ const fingers = new Array<React.Touch>();
+ for (let i = 0; i < e.touches.length; i++) {
+ const pt: any = e.touches.item(i);
+ if (pt.radiusX > 1 && pt.radiusY > 1) {
+ for (let j = 0; j < e.targetTouches.length; j++) {
+ const tPt = e.targetTouches.item(j);
+ if (tPt?.screenX === pt?.screenX && tPt?.screenY === pt?.screenY) {
+ if (pt && this.prevPoints.has(pt.identifier)) {
+ fingers.push(pt);
+ }
+ }
+ }
+ }
+ }
const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]);
+ if (thumb.identifier === this.thumbIdentifier) {
+ this._thumbX = thumb.clientX;
+ this._thumbY = thumb.clientY;
+ return;
+ }
this.thumbIdentifier = thumb?.identifier;
fingers.forEach((f) => this.prevPoints.delete(f.identifier));
this._hands.push(fingers);
@@ -184,6 +205,9 @@ export default class GestureOverlay extends Touchable {
const thumbDoc = FieldValue(Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc));
if (thumbDoc) {
runInAction(() => {
+ this._thumbDoc = thumbDoc;
+ this._thumbX = thumb.clientX;
+ this._thumbY = thumb.clientY;
this._palette = <Palette x={minX} y={minY} thumb={[thumb.clientX, thumb.clientY]} thumbDoc={thumbDoc} />;
});
}
@@ -199,17 +223,24 @@ export default class GestureOverlay extends Touchable {
handleHandMove = (e: TouchEvent) => {
for (let i = 0; i < e.changedTouches.length; i++) {
const pt = e.changedTouches.item(i);
- if (pt?.identifier === this.thumbIdentifier) {
- console.log("thumby movey")
+ if (pt && pt.identifier === this.thumbIdentifier && this._thumbX && this._thumbDoc) {
+ if (Math.abs(pt.clientX - this._thumbX) > 20) {
+ this._thumbDoc.selectedIndex = Math.max(0, NumCast(this._thumbDoc.selectedIndex) - Math.sign(pt.clientX - this._thumbX));
+ this._thumbX = pt.clientX;
+ }
}
}
}
@action
handleHandUp = (e: TouchEvent) => {
- // this.onTouchEnd(e);
- this._palette = undefined;
- document.removeEventListener("touchend", this.handleHandUp);
+ if (e.touches.length < 3) {
+ // this.onTouchEnd(e);
+ this._palette = undefined;
+ this.thumbIdentifier = undefined;
+ this._thumbDoc = undefined;
+ document.removeEventListener("touchend", this.handleHandUp);
+ }
}
@action
diff --git a/src/client/views/Palette.scss b/src/client/views/Palette.scss
index 2626774cb..4513de2b0 100644
--- a/src/client/views/Palette.scss
+++ b/src/client/views/Palette.scss
@@ -1,20 +1,21 @@
.palette-container {
.palette-thumb {
- width: 300px;
- height: 300px;
touch-action: pan-x;
overflow: scroll;
position: absolute;
+ width: 90px;
+ height: 70px;
.palette-thumbContent {
- width: 100%;
- height: 100%;
- }
+ transition: transform .3s;
+
+ .collectionView {
+ overflow: visible;
- .palette-button {
- width: 100px;
- height: 100px;
- background: blue;
+ .collectionLinearView-outer {
+ overflow: visible;
+ }
+ }
}
}
} \ No newline at end of file
diff --git a/src/client/views/Palette.tsx b/src/client/views/Palette.tsx
index aca1811a4..811c24f53 100644
--- a/src/client/views/Palette.tsx
+++ b/src/client/views/Palette.tsx
@@ -9,8 +9,8 @@ import { DocumentView } from "./nodes/DocumentView";
import { emptyPath, returnFalse, emptyFunction, returnOne, returnEmptyString, returnTrue } from "../../Utils";
import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
import { Transform } from "../util/Transform";
-import { computed, action } from "mobx";
-import { FieldValue, Cast } from "../../new_fields/Types";
+import { computed, action, IReactionDisposer, reaction, observable } from "mobx";
+import { FieldValue, Cast, NumCast } from "../../new_fields/Types";
import { observer } from "mobx-react";
import { DocumentContentsView } from "./nodes/DocumentContentsView";
import { CollectionStackingView } from "./collections/CollectionStackingView";
@@ -28,12 +28,26 @@ export interface PaletteProps {
@observer
export default class Palette extends React.Component<PaletteProps> {
+ private _selectedDisposer?: IReactionDisposer;
+ @observable private _selectedIndex: number = 0;
+
+ componentDidMount = () => {
+ this._selectedDisposer = reaction(
+ () => NumCast(this.props.thumbDoc.selectedIndex),
+ (i) => this._selectedIndex = i,
+ { fireImmediately: true }
+ );
+ }
+
+ componentWillUnmount = () => {
+ this._selectedDisposer && this._selectedDisposer();
+ }
render() {
return (
<div className="palette-container" style={{ transform: `translate(${this.props.x}px, ${this.props.y}px)` }}>
<div className="palette-thumb" style={{ transform: `translate(${this.props.thumb[0] - this.props.x}px, ${this.props.thumb[1] - this.props.y}px)` }}>
- <div className="palette-thumbContent">
+ <div className="palette-thumbContent" style={{ transform: `translate(-${(this._selectedIndex * 50) + 10}px, 0px)` }}>
<DocumentView
Document={this.props.thumbDoc}
DataDoc={undefined}
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index a850b0f9f..8b8b1e029 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -116,7 +116,7 @@ export class CurrentUserUtils {
{ title: "use highlighter", icon: "highlighter", pointerUp: "resetPen()", pointerDown: 'setPen(20, this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
];
return docProtoData.map(data => Docs.Create.FontIconDocument({
- nativeWidth: 100, nativeHeight: 100, width: 100, height: 100, dropAction: data.pointerDown ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
+ nativeWidth: 10, nativeHeight: 10, width: 10, height: 10, dropAction: data.pointerDown ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined,
onPointerUp: data.pointerUp ? ScriptField.MakeScript(data.pointerUp) : undefined, onPointerDown: data.pointerDown ? ScriptField.MakeScript(data.pointerDown) : undefined,
ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activePen: data.activePen, pointerHack: true,
@@ -127,7 +127,7 @@ export class CurrentUserUtils {
static setupThumbDoc(userDoc: Doc) {
if (!userDoc.thumbDoc) {
return Docs.Create.LinearDocument(CurrentUserUtils.setupThumbButtons(userDoc), {
- width: 300, columnWidth: 100, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5
+ width: 100, height: 50, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5, isExpanded: true
});
}
return userDoc.thumbDoc;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 07:45:49 +0000