aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/InteractionUtils.ts168
-rw-r--r--src/client/views/DocComponent.tsx4
-rw-r--r--src/client/views/InkingStroke.tsx17
-rw-r--r--src/client/views/MainView.tsx2
-rw-r--r--src/client/views/Touchable.tsx46
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx52
-rw-r--r--src/client/views/nodes/DocumentView.tsx27
-rw-r--r--src/client/views/nodes/FontIconBox.scss8
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx1
9 files changed, 217 insertions, 108 deletions
diff --git a/src/client/util/InteractionUtils.ts b/src/client/util/InteractionUtils.ts
index e58635a6f..b7738e862 100644
--- a/src/client/util/InteractionUtils.ts
+++ b/src/client/util/InteractionUtils.ts
@@ -1,9 +1,23 @@
export namespace InteractionUtils {
- export const MOUSE = "mouse";
- export const TOUCH = "touch";
+ export const MOUSETYPE = "mouse";
+ export const TOUCHTYPE = "touch";
+ export const PENTYPE = "pen";
+ export const ERASERTYPE = "eraser";
+
+ const POINTER_PEN_BUTTON = -1;
+ const REACT_POINTER_PEN_BUTTON = 0;
+ const ERASER_BUTTON = 5;
export function IsType(e: PointerEvent | React.PointerEvent, type: string): boolean {
- return e.pointerType === type;
+ switch (type) {
+ // pen and eraser are both pointer type 'pen', but pen is button 0 and eraser is button 5. -syip2
+ case PENTYPE:
+ return e.pointerType === PENTYPE && e.button === (e instanceof PointerEvent ? POINTER_PEN_BUTTON : REACT_POINTER_PEN_BUTTON);
+ case ERASERTYPE:
+ return e.pointerType === PENTYPE && e.button === (e instanceof PointerEvent ? ERASER_BUTTON : ERASER_BUTTON);
+ default:
+ return e.pointerType === type;
+ }
}
export function TwoPointEuclidist(pt1: React.Touch, pt2: React.Touch): number {
@@ -43,69 +57,97 @@ export namespace InteractionUtils {
}
/**
- * Returns the type of Touch Interaction from a list of points.
- * Also returns any data that is associated with a Touch Interaction
- * @param pts - List of points
+ * Returns -1 if pinning and pinching out, 0 if not pinning, and 1 if pinching in
+ * @param pt1 - new point that corresponds to oldPoint1
+ * @param pt2 - new point that corresponds to oldPoint2
+ * @param oldPoint1 - previous point 1
+ * @param oldPoint2 - previous point 2
*/
- // export function InterpretPointers(pts: React.Touch[]): { type: Opt<TouchInteraction>, data?: any } {
- // const leniency = 200;
- // switch (pts.length) {
- // case 1:
- // return { type: OneFinger };
- // case 2:
- // return { type: TwoSeperateFingers };
- // case 3:
- // let pt1 = pts[0];
- // let pt2 = pts[1];
- // let pt3 = pts[2];
- // if (pt1 && pt2 && pt3) {
- // let dist12 = TwoPointEuclidist(pt1, pt2);
- // let dist23 = TwoPointEuclidist(pt2, pt3);
- // let dist13 = TwoPointEuclidist(pt1, pt3);
- // console.log(`distances: ${dist12}, ${dist23}, ${dist13}`);
- // let dist12close = dist12 < leniency;
- // let dist23close = dist23 < leniency;
- // let dist13close = dist13 < leniency;
- // let xor2313 = dist23close ? !dist13close : dist13close;
- // let xor = dist12close ? !xor2313 : xor2313;
- // // three input xor because javascript doesn't have logical xor's
- // if (xor) {
- // let points: number[] = [];
- // let min = Math.min(dist12, dist23, dist13);
- // switch (min) {
- // case dist12:
- // points = [0, 1, 2];
- // break;
- // case dist23:
- // points = [1, 2, 0];
- // break;
- // case dist13:
- // points = [0, 2, 1];
- // break;
- // }
- // return { type: TwoToOneFingers, data: points };
- // }
- // else {
- // return { type: ThreeSeperateFingers, data: null };
- // }
- // }
- // default:
- // return { type: undefined };
- // }
- // }
+ export function Pinning(pt1: React.Touch, pt2: React.Touch, oldPoint1: React.Touch, oldPoint2: React.Touch): number {
+ let threshold = 4;
+
+ let pt1Dist = TwoPointEuclidist(oldPoint1, pt1);
+ let pt2Dist = TwoPointEuclidist(oldPoint2, pt2);
- export function IsDragging(oldTouches: Map<number, React.Touch>, newTouches: TouchList, leniency: number): boolean {
- for (let i = 0; i < newTouches.length; i++) {
- let touch = newTouches.item(i);
- if (touch) {
- let oldTouch = oldTouches.get(touch.identifier);
- if (oldTouch) {
- if (TwoPointEuclidist(touch, oldTouch) >= leniency) {
- return true;
- }
- }
+ let pinching = Pinching(pt1, pt2, oldPoint1, oldPoint2);
+
+ if (pinching !== 0) {
+ if ((pt1Dist < threshold && pt2Dist > threshold) || (pt1Dist > threshold && pt2Dist < threshold)) {
+ return pinching;
}
}
- return false;
+ return 0;
+ }
+
+ // These might not be very useful anymore, but I'll leave them here for now -syip2
+ {
+
+
+ /**
+ * Returns the type of Touch Interaction from a list of points.
+ * Also returns any data that is associated with a Touch Interaction
+ * @param pts - List of points
+ */
+ // export function InterpretPointers(pts: React.Touch[]): { type: Opt<TouchInteraction>, data?: any } {
+ // const leniency = 200;
+ // switch (pts.length) {
+ // case 1:
+ // return { type: OneFinger };
+ // case 2:
+ // return { type: TwoSeperateFingers };
+ // case 3:
+ // let pt1 = pts[0];
+ // let pt2 = pts[1];
+ // let pt3 = pts[2];
+ // if (pt1 && pt2 && pt3) {
+ // let dist12 = TwoPointEuclidist(pt1, pt2);
+ // let dist23 = TwoPointEuclidist(pt2, pt3);
+ // let dist13 = TwoPointEuclidist(pt1, pt3);
+ // console.log(`distances: ${dist12}, ${dist23}, ${dist13}`);
+ // let dist12close = dist12 < leniency;
+ // let dist23close = dist23 < leniency;
+ // let dist13close = dist13 < leniency;
+ // let xor2313 = dist23close ? !dist13close : dist13close;
+ // let xor = dist12close ? !xor2313 : xor2313;
+ // // three input xor because javascript doesn't have logical xor's
+ // if (xor) {
+ // let points: number[] = [];
+ // let min = Math.min(dist12, dist23, dist13);
+ // switch (min) {
+ // case dist12:
+ // points = [0, 1, 2];
+ // break;
+ // case dist23:
+ // points = [1, 2, 0];
+ // break;
+ // case dist13:
+ // points = [0, 2, 1];
+ // break;
+ // }
+ // return { type: TwoToOneFingers, data: points };
+ // }
+ // else {
+ // return { type: ThreeSeperateFingers, data: null };
+ // }
+ // }
+ // default:
+ // return { type: undefined };
+ // }
+ // }
+
+ // export function IsDragging(oldTouches: Map<number, React.Touch>, newTouches: TouchList, leniency: number): boolean {
+ // for (let i = 0; i < newTouches.length; i++) {
+ // let touch = newTouches.item(i);
+ // if (touch) {
+ // let oldTouch = oldTouches.get(touch.identifier);
+ // if (oldTouch) {
+ // if (TwoPointEuclidist(touch, oldTouch) >= leniency) {
+ // return true;
+ // }
+ // }
+ // }
+ // }
+ // return false;
+ // }
}
} \ No newline at end of file
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index 1bd1006a8..b3a130b33 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -31,7 +31,7 @@ interface DocExtendableProps {
renderDepth: number;
}
export function DocExtendableComponent<P extends DocExtendableProps, T>(schemaCtor: (doc: Doc) => T) {
- class Component extends React.Component<P> {
+ class Component extends Touchable<P> {
//TODO This might be pretty inefficient if doc isn't observed, because computed doesn't cache then
@computed get Document(): T { return schemaCtor(this.props.Document); }
@computed get layoutDoc() { return Doc.Layout(this.props.Document); }
@@ -53,7 +53,7 @@ interface DocAnnotatableProps {
renderDepth: number;
}
export function DocAnnotatableComponent<P extends DocAnnotatableProps, T>(schemaCtor: (doc: Doc) => T) {
- class Component extends React.Component<P> {
+ class Component extends Touchable<P> {
@observable _isChildActive = false;
//TODO This might be pretty inefficient if doc isn't observed, because computed doesn't cache then
@computed get Document(): T { return schemaCtor(this.props.Document); }
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 723b8cac4..a27f106e3 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -47,12 +47,15 @@ export class InkingStroke extends DocExtendableComponent<FieldViewProps, InkDocu
let height = bottom - top;
let scaleX = this.PanelWidth / width;
let scaleY = this.PanelHeight / height;
- return <svg width={width} height={height} style={{
- transformOrigin: "top left",
- transform: `translate(${left}px, ${top}px) scale(${scaleX}, ${scaleY})`,
- mixBlendMode: this.Document.tool === InkTool.Highlighter ? "multiply" : "unset"
- }}>
- {points}
- </svg>;
+ return (
+ <svg width={width} height={height} style={{
+ transformOrigin: "top left",
+ transform: `translate(${left}px, ${top}px) scale(${scaleX}, ${scaleY})`,
+ mixBlendMode: this.Document.tool === InkTool.Highlighter ? "multiply" : "unset",
+ pointerEvents: "all"
+ }} onTouchStart={this.onTouchStart}>
+ {points}
+ </svg>
+ );
}
} \ No newline at end of file
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 162d0c08a..e6dd2fcad 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -468,7 +468,7 @@ export class MainView extends React.Component {
return new Transform(-translateX, -translateY, 1 / scale);
}
@computed get docButtons() {
- if (CurrentUserUtils.UserDocument.expandingButtons instanceof Doc) {
+ if (CurrentUserUtils.UserDocument?.expandingButtons instanceof Doc) {
return <div className="mainView-docButtons" ref={this._docBtnRef}
style={{ left: (this._flyoutTranslate ? this.flyoutWidth : 0) + 20, height: !CurrentUserUtils.UserDocument.expandingButtons.isExpanded ? "42px" : undefined }} >
<MainViewNotifs />
diff --git a/src/client/views/Touchable.tsx b/src/client/views/Touchable.tsx
index 0dd4f734c..0056a1d96 100644
--- a/src/client/views/Touchable.tsx
+++ b/src/client/views/Touchable.tsx
@@ -17,22 +17,28 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
@action
protected onTouchStart = (e: React.TouchEvent): void => {
for (let i = 0; i < e.targetTouches.length; i++) {
- let pt = e.targetTouches.item(i);
- this.prevPoints.set(pt.identifier, pt);
+ let pt: any = e.targetTouches.item(i);
+ // pen is also a touch, but with a radius of 0.5 (at least with the surface pens). i doubt anyone's fingers are 2 pixels wide,
+ // and this seems to be the only way of differentiating pen and touch on touch events
+ if (pt.radiusX > 2 && pt.radiusY > 2) {
+ this.prevPoints.set(pt.identifier, pt);
+ }
}
- switch (e.targetTouches.length) {
- case 1:
- this.handle1PointerDown(e);
- break;
- case 2:
- this.handle2PointersDown(e);
- }
+ if (this.prevPoints.size) {
+ switch (e.targetTouches.length) {
+ case 1:
+ this.handle1PointerDown(e);
+ break;
+ case 2:
+ this.handle2PointersDown(e);
+ }
- document.removeEventListener("touchmove", this.onTouch);
- document.addEventListener("touchmove", this.onTouch);
- document.removeEventListener("touchend", this.onTouchEnd);
- document.addEventListener("touchend", this.onTouchEnd);
+ document.removeEventListener("touchmove", this.onTouch);
+ document.addEventListener("touchmove", this.onTouch);
+ document.removeEventListener("touchend", this.onTouchEnd);
+ document.addEventListener("touchend", this.onTouchEnd);
+ }
}
/**
@@ -41,7 +47,7 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
@action
protected onTouch = (e: TouchEvent): void => {
// if we're not actually moving a lot, don't consider it as dragging yet
- if (!InteractionUtils.IsDragging(this.prevPoints, e.targetTouches, 5) && !this._touchDrag) return;
+ // if (!InteractionUtils.IsDragging(this.prevPoints, e.targetTouches, 5) && !this._touchDrag) return;
this._touchDrag = true;
switch (e.targetTouches.length) {
case 1:
@@ -51,6 +57,18 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
this.handle2PointersMove(e);
break;
}
+
+ for (let i = 0; i < e.targetTouches.length; i++) {
+ let pt = e.targetTouches.item(i);
+ if (pt) {
+ if (this.prevPoints.has(pt.identifier)) {
+ this.prevPoints.set(pt.identifier, pt);
+ }
+ else {
+ this.prevPoints.set(pt.identifier, pt);
+ }
+ }
+ }
}
@action
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 9bbaa20e7..9506ce084 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -26,7 +26,7 @@ import { COLLECTION_BORDER_WIDTH } from "../../../views/globalCssVariables.scss"
import { ContextMenu } from "../../ContextMenu";
import { ContextMenuProps } from "../../ContextMenuItem";
import { InkingControl } from "../../InkingControl";
-import { CreatePolyline } from "../../InkingStroke";
+import { CreatePolyline, InkingStroke } from "../../InkingStroke";
import { CollectionFreeFormDocumentView } from "../../nodes/CollectionFreeFormDocumentView";
import { DocumentViewProps } from "../../nodes/DocumentView";
import { FormattedTextBox } from "../../nodes/FormattedTextBox";
@@ -283,20 +283,43 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
document.removeEventListener("pointerup", this.onPointerUp);
document.addEventListener("pointermove", this.onPointerMove);
document.addEventListener("pointerup", this.onPointerUp);
- if (InkingControl.Instance.selectedTool === InkTool.None) {
+ // if physically using a pen or we're in pen or highlighter mode
+ if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) {
+ e.stopPropagation();
+ e.preventDefault();
+ let point = this.getTransform().transformPoint(e.pageX, e.pageY);
+ this._points.push({ x: point[0], y: point[1] });
+ }
+ // if not using a pen and in no ink mode
+ else if (InkingControl.Instance.selectedTool === InkTool.None) {
this._lastX = e.pageX;
this._lastY = e.pageY;
}
+ // eraser or scrubber plus anything else mode
else {
e.stopPropagation();
e.preventDefault();
-
- if (InkingControl.Instance.selectedTool !== InkTool.Eraser && InkingControl.Instance.selectedTool !== InkTool.Scrubber) {
- let point = this.getTransform().transformPoint(e.pageX, e.pageY);
- this._points.push({ x: point[0], y: point[1] });
- }
}
}
+ // if (e.button === 0 && !e.shiftKey && !e.altKey && !e.ctrlKey && this.props.active(true)) {
+ // document.removeEventListener("pointermove", this.onPointerMove);
+ // document.removeEventListener("pointerup", this.onPointerUp);
+ // document.addEventListener("pointermove", this.onPointerMove);
+ // document.addEventListener("pointerup", this.onPointerUp);
+ // if (InkingControl.Instance.selectedTool === InkTool.None) {
+ // this._lastX = e.pageX;
+ // this._lastY = e.pageY;
+ // }
+ // else {
+ // e.stopPropagation();
+ // e.preventDefault();
+
+ // if (InkingControl.Instance.selectedTool !== InkTool.Eraser && InkingControl.Instance.selectedTool !== InkTool.Scrubber) {
+ // let point = this.getTransform().transformPoint(e.pageX, e.pageY);
+ // this._points.push({ x: point[0], y: point[1] });
+ // }
+ // }
+ // }
}
@action
@@ -309,7 +332,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
@action
onPointerUp = (e: PointerEvent): void => {
- if (InteractionUtils.IsType(e, InteractionUtils.TOUCH) && this._points.length <= 1) return;
+ if (InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE) && this._points.length <= 1) return;
if (this._points.length > 1) {
let B = this.svgBounds;
@@ -365,14 +388,19 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
@action
onPointerMove = (e: PointerEvent): void => {
- if (InteractionUtils.IsType(e, InteractionUtils.TOUCH)) {
+ if (InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) {
if (this.props.active(true)) {
e.stopPropagation();
}
return;
}
if (!e.cancelBubble) {
- if (InkingControl.Instance.selectedTool === InkTool.None) {
+ const selectedTool = InkingControl.Instance.selectedTool;
+ if (selectedTool === InkTool.Highlighter || selectedTool === InkTool.Pen || InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) {
+ let point = this.getTransform().transformPoint(e.clientX, e.clientY);
+ this._points.push({ x: point[0], y: point[1] });
+ }
+ else if (selectedTool === InkTool.None) {
if (this._hitCluster && this.tryDragCluster(e)) {
e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document' however it does mark the event as cancelBubble=true which we test for in the move event handlers
e.preventDefault();
@@ -382,10 +410,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
}
this.pan(e);
}
- else if (InkingControl.Instance.selectedTool !== InkTool.Eraser && InkingControl.Instance.selectedTool !== InkTool.Scrubber) {
- let point = this.getTransform().transformPoint(e.clientX, e.clientY);
- this._points.push({ x: point[0], y: point[1] });
- }
e.stopPropagation(); // doesn't actually stop propagation since all our listeners are listening to events on 'document' however it does mark the event as cancelBubble=true which we test for in the move event handlers
e.preventDefault();
}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 467fd4b32..39a68f51e 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -194,7 +194,11 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
}
onPointerDown = (e: React.PointerEvent): void => {
- if (e.nativeEvent.cancelBubble && e.button === 0) return;
+ if ((e.nativeEvent.cancelBubble && (e.button === 0 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)))
+ // return if we're inking, and not selecting a button document
+ || (InkingControl.Instance.selectedTool !== InkTool.None && !this.Document.onClick)
+ // return if using pen or eraser
+ || InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || InteractionUtils.IsType(e, InteractionUtils.ERASERTYPE)) return;
this._downX = e.clientX;
this._downY = e.clientY;
this._hitTemplateDrag = false;
@@ -205,7 +209,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
this._hitTemplateDrag = true;
}
}
- if ((this.active || this.Document.onDragStart || this.Document.onClick) && !e.ctrlKey && e.button === 0 && !this.Document.lockedPosition && !this.Document.inOverlay) e.stopPropagation(); // events stop at the lowest document that is active. if right dragging, we let it go through though to allow for context menu clicks. PointerMove callbacks should remove themselves if the move event gets stopPropagated by a lower-level handler (e.g, marquee drag);
+ if ((this.active || this.Document.onDragStart || this.Document.onClick) && !e.ctrlKey && (e.button === 0 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) && !this.Document.lockedPosition && !this.Document.inOverlay) e.stopPropagation(); // events stop at the lowest document that is active. if right dragging, we let it go through though to allow for context menu clicks. PointerMove callbacks should remove themselves if the move event gets stopPropagated by a lower-level handler (e.g, marquee drag);
document.removeEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
document.addEventListener("pointermove", this.onPointerMove);
@@ -220,7 +224,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
}
else if (!e.cancelBubble && (SelectionManager.IsSelected(this, true) || this.props.parentActive(true) || this.Document.onDragStart || this.Document.onClick) && !this.Document.lockedPosition && !this.Document.inOverlay) {
if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
- if (!e.altKey && (!this.topMost || this.Document.onDragStart || this.Document.onClick) && (e.buttons === 1 || InteractionUtils.IsType(e, InteractionUtils.TOUCH))) {
+ if (!e.altKey && (!this.topMost || this.Document.onDragStart || this.Document.onClick) && (e.buttons === 1 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE))) {
document.removeEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
this.startDragging(this._downX, this._downY, this.Document.dropAction ? this.Document.dropAction as any : e.ctrlKey || e.altKey ? "alias" : undefined, this._hitTemplateDrag);
@@ -645,6 +649,21 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
return (this.Document.isBackground && !this.isSelected()) || (this.Document.type === DocumentType.INK && InkingControl.Instance.selectedTool !== InkTool.None);
}
+ @action
+ handle2PointersMove = (e: TouchEvent) => {
+ let pt1 = e.targetTouches.item(0);
+ let pt2 = e.targetTouches.item(1);
+ if (pt1 && pt2 && this.prevPoints.has(pt1.identifier) && this.prevPoints.has(pt2.identifier)) {
+ let oldPoint1 = this.prevPoints.get(pt1.identifier);
+ let oldPoint2 = this.prevPoints.get(pt2.identifier);
+ let pinching = InteractionUtils.Pinning(pt1, pt2, oldPoint1!, oldPoint2!);
+ if (pinching !== 0) {
+ let newWidth = Math.max(Math.abs(oldPoint1!.clientX - oldPoint2!.clientX), Math.abs(pt1.clientX - pt2.clientX))
+ this.props.Document.width = newWidth;
+ }
+ }
+ }
+
render() {
if (!this.props.Document) return (null);
const ruleColor = this.props.ruleProvider ? StrCast(this.props.ruleProvider["ruleColor_" + this.Document.heading]) : undefined;
@@ -686,7 +705,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
width: animwidth,
height: animheight,
opacity: this.Document.opacity
- }} >
+ }} onTouchStart={this.onTouchStart}>
{this.innards}
</div>;
}
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 905601ce3..f0fe7a54e 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -2,12 +2,14 @@
width: 100%;
height: 100%;
pointer-events: all;
+ touch-action: none;
border-radius: inherit;
background: black;
border-radius: 100%;
transform-origin: top left;
+
svg {
- width:95% !important;
- height:95%;
+ width: 95% !important;
+ height: 95%;
}
-}
+} \ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 9910c9ecd..d601e188d 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -1049,6 +1049,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
onPointerUp={this.onPointerUp}
onPointerDown={this.onPointerDown}
onMouseUp={this.onMouseUp}
+ onTouchStart={this.onTouchStart}
onWheel={this.onPointerWheel}
onPointerEnter={action(() => this._entered = true)}
onPointerLeave={action(() => this._entered = false)}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 18:20:38 +0000