aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/InkStrokeProperties.ts140
-rw-r--r--src/client/views/LightboxView.tsx3
-rw-r--r--src/client/views/MainView.tsx4
-rw-r--r--src/client/views/MarqueeAnnotator.tsx9
-rw-r--r--src/client/views/PropertiesView.tsx70
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx24
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeView.tsx10
-rw-r--r--src/client/views/global/globalScripts.ts4
-rw-r--r--src/client/views/nodes/LabelBigText.js270
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.tsx6
-rw-r--r--src/client/views/pdf/AnchorMenu.tsx15
-rw-r--r--src/client/views/pdf/Annotation.tsx3
-rw-r--r--src/client/views/smartdraw/SmartDrawHandler.tsx10
13 files changed, 127 insertions, 441 deletions
diff --git a/src/client/views/InkStrokeProperties.ts b/src/client/views/InkStrokeProperties.ts
index b5cd72fa7..13807c25f 100644
--- a/src/client/views/InkStrokeProperties.ts
+++ b/src/client/views/InkStrokeProperties.ts
@@ -1,22 +1,22 @@
import { Bezier } from 'bezier-js';
import * as _ from 'lodash';
import { action, makeObservable, observable, reaction, runInAction } from 'mobx';
+import simplify from 'simplify-js';
import { Doc, NumListCast, Opt } from '../../fields/Doc';
import { InkData, InkField, InkTool } from '../../fields/InkField';
import { List } from '../../fields/List';
import { listSpec } from '../../fields/Schema';
-import { Cast, NumCast, toList } from '../../fields/Types';
+import { Cast, NumCast } from '../../fields/Types';
import { Gestures, PointData } from '../../pen-gestures/GestureTypes';
+import { GestureUtils } from '../../pen-gestures/GestureUtils';
import { Point } from '../../pen-gestures/ndollar';
import { DocumentType } from '../documents/DocumentTypes';
-import { undoBatch, undoable } from '../util/UndoManager';
+import { undoable } from '../util/UndoManager';
import { FitOneCurve } from '../util/bezierFit';
+import { GestureOverlay } from './GestureOverlay';
import { InkingStroke } from './InkingStroke';
import { CollectionFreeFormView } from './collections/collectionFreeForm';
import { DocumentView } from './nodes/DocumentView';
-import simplify from 'simplify-js';
-import { GestureUtils } from '../../pen-gestures/GestureUtils';
-import { GestureOverlay } from './GestureOverlay';
export class InkStrokeProperties {
// eslint-disable-next-line no-use-before-define
@@ -163,48 +163,46 @@ export class InkStrokeProperties {
/**
* Deletes the current control point of the selected ink instance.
*/
- deletePoints = undoable(
- (inkView: DocumentView, preserve: boolean) =>
- this.applyFunction(
- inkView,
- (view: DocumentView, ink: InkData) => {
- const doc = view.Document;
- const newPoints = ink.slice();
- const brokenIndices = NumListCast(doc.brokenInkIndices);
- if (preserve || this._currentPoint === 0 || this._currentPoint === ink.length - 1 || brokenIndices.includes(this._currentPoint)) {
- newPoints.splice(this._currentPoint === 0 ? 0 : this._currentPoint === ink.length - 1 ? this._currentPoint - 3 : this._currentPoint - 2, 4);
- } else {
- const start = this._currentPoint === 0 ? 0 : this._currentPoint - 4;
- const splicedPoints = ink.slice(start, start + (this._currentPoint === 0 || this._currentPoint === ink.length - 1 ? 4 : 8));
- const samples: Point[] = [];
- let startDir = { x: 0, y: 0 };
- let endDir = { x: 0, y: 0 };
- for (let i = 0; i < splicedPoints.length / 4; i++) {
- const bez = new Bezier(splicedPoints.slice(i * 4, i * 4 + 4).map(p => ({ x: p.X, y: p.Y })));
- if (i === 0) startDir = bez.derivative(0);
- if (i === splicedPoints.length / 4 - 1) endDir = bez.derivative(1);
- for (let t = 0; t < (i === splicedPoints.length / 4 - 1 ? 1 + 1e-7 : 1); t += 0.05) {
- const pt = bez.compute(t);
- samples.push(new Point(pt.x, pt.y));
- }
- }
- const { finalCtrls, error } = FitOneCurve(samples, { X: startDir.x, Y: startDir.y }, { X: endDir.x, Y: endDir.y });
- if (error < 100) {
- newPoints.splice(this._currentPoint - 4, 8, ...finalCtrls);
- } else {
- newPoints.splice(this._currentPoint - 2, 4);
+ deletePoints = undoable((inkView: DocumentView, preserve: boolean) => {
+ this.applyFunction(
+ inkView,
+ (view: DocumentView, ink: InkData) => {
+ const doc = view.Document;
+ const newPoints = ink.slice();
+ const brokenIndices = NumListCast(doc.brokenInkIndices);
+ if (preserve || this._currentPoint === 0 || this._currentPoint === ink.length - 1 || brokenIndices.includes(this._currentPoint)) {
+ newPoints.splice(this._currentPoint === 0 ? 0 : this._currentPoint === ink.length - 1 ? this._currentPoint - 3 : this._currentPoint - 2, 4);
+ } else {
+ const start = this._currentPoint === 0 ? 0 : this._currentPoint - 4;
+ const splicedPoints = ink.slice(start, start + (this._currentPoint === 0 || this._currentPoint === ink.length - 1 ? 4 : 8));
+ const samples: Point[] = [];
+ let startDir = { x: 0, y: 0 };
+ let endDir = { x: 0, y: 0 };
+ for (let i = 0; i < splicedPoints.length / 4; i++) {
+ const bez = new Bezier(splicedPoints.slice(i * 4, i * 4 + 4).map(p => ({ x: p.X, y: p.Y })));
+ if (i === 0) startDir = bez.derivative(0);
+ if (i === splicedPoints.length / 4 - 1) endDir = bez.derivative(1);
+ for (let t = 0; t < (i === splicedPoints.length / 4 - 1 ? 1 + 1e-7 : 1); t += 0.05) {
+ const pt = bez.compute(t);
+ samples.push(new Point(pt.x, pt.y));
}
}
- doc.brokenInkIndices = new List(brokenIndices.map(control => (control >= this._currentPoint ? control - 4 : control)));
- runInAction(() => {
- this._currentPoint = -1;
- });
- return newPoints.length < 4 ? undefined : newPoints;
- },
- true
- ),
- 'delete ink points'
- );
+ const { finalCtrls, error } = FitOneCurve(samples, { X: startDir.x, Y: startDir.y }, { X: endDir.x, Y: endDir.y });
+ if (error < 100) {
+ newPoints.splice(this._currentPoint - 4, 8, ...finalCtrls);
+ } else {
+ newPoints.splice(this._currentPoint - 2, 4);
+ }
+ }
+ doc.brokenInkIndices = new List(brokenIndices.map(control => (control >= this._currentPoint ? control - 4 : control)));
+ runInAction(() => {
+ this._currentPoint = -1;
+ });
+ return newPoints.length < 4 ? undefined : newPoints;
+ },
+ true
+ );
+ }, 'delete ink points');
/**
* Rotates ink stroke(s) about a point
@@ -251,9 +249,8 @@ export class InkStrokeProperties {
/**
* Handles the movement/scaling of a control point.
*/
- moveControlPtHandle = undoable(
- (inkView: DocumentView, deltaX: number, deltaY: number, controlIndex: number, origInk?: InkData) =>
- inkView &&
+ moveControlPtHandle = undoable((inkView: DocumentView, deltaX: number, deltaY: number, controlIndex: number, origInk?: InkData) => {
+ inkView &&
this.applyFunction(inkView, (view: DocumentView, ink: InkData) => {
const order = controlIndex % 4;
const closed = InkingStroke.IsClosed(ink);
@@ -316,9 +313,8 @@ export class InkStrokeProperties {
}
return pt;
});
- }),
- 'move ink ctrl pt'
- );
+ });
+ }, 'move ink ctrl pt');
public static nearestPtToStroke(ctrlPoints: { X: number; Y: number }[], refInkSpacePt: { X: number; Y: number }, excludeSegs?: number[]) {
let distance = Number.MAX_SAFE_INTEGER;
@@ -471,28 +467,26 @@ export class InkStrokeProperties {
/**
* Handles the movement/scaling of a handle point.
*/
- moveTangentHandle = undoable(
- (inkView: DocumentView, deltaX: number, deltaY: number, handleIndex: number, oppositeHandleIndex: number, controlIndex: number) =>
- this.applyFunction(inkView, (view: DocumentView, ink: InkData) => {
- const doc = view.Document;
- const closed = InkingStroke.IsClosed(ink);
- const oldHandlePoint = ink[handleIndex];
- const oppositeHandlePoint = ink[oppositeHandleIndex];
- const controlPoint = ink[controlIndex];
- const newHandlePoint = { X: ink[handleIndex].X - deltaX, Y: ink[handleIndex].Y - deltaY };
- const inkCopy = ink.slice();
- inkCopy[handleIndex] = newHandlePoint;
- const brokenIndices = Cast(doc.brokenInkIndices, listSpec('number'));
- const equivIndex = closed ? (controlIndex === 0 ? ink.length - 1 : controlIndex === ink.length - 1 ? 0 : -1) : -1;
- // Rotate opposite handle if user hasn't held 'Alt' key or not first/final control (which have only 1 handle).
- if ((!brokenIndices || (!brokenIndices?.includes(controlIndex) && !brokenIndices?.includes(equivIndex))) && (closed || (handleIndex !== 1 && handleIndex !== ink.length - 2))) {
- const angle = InkStrokeProperties.angleChange(oldHandlePoint, newHandlePoint, controlPoint);
- inkCopy[oppositeHandleIndex] = this.rotatePoint(oppositeHandlePoint, controlPoint, angle);
- }
- return inkCopy;
- }),
- 'move ink tangent'
- );
+ moveTangentHandle = undoable((inkView: DocumentView, deltaX: number, deltaY: number, handleIndex: number, oppositeHandleIndex: number, controlIndex: number) => {
+ this.applyFunction(inkView, (view: DocumentView, ink: InkData) => {
+ const doc = view.Document;
+ const closed = InkingStroke.IsClosed(ink);
+ const oldHandlePoint = ink[handleIndex];
+ const oppositeHandlePoint = ink[oppositeHandleIndex];
+ const controlPoint = ink[controlIndex];
+ const newHandlePoint = { X: ink[handleIndex].X - deltaX, Y: ink[handleIndex].Y - deltaY };
+ const inkCopy = ink.slice();
+ inkCopy[handleIndex] = newHandlePoint;
+ const brokenIndices = Cast(doc.brokenInkIndices, listSpec('number'));
+ const equivIndex = closed ? (controlIndex === 0 ? ink.length - 1 : controlIndex === ink.length - 1 ? 0 : -1) : -1;
+ // Rotate opposite handle if user hasn't held 'Alt' key or not first/final control (which have only 1 handle).
+ if ((!brokenIndices || (!brokenIndices?.includes(controlIndex) && !brokenIndices?.includes(equivIndex))) && (closed || (handleIndex !== 1 && handleIndex !== ink.length - 2))) {
+ const angle = InkStrokeProperties.angleChange(oldHandlePoint, newHandlePoint, controlPoint);
+ inkCopy[oppositeHandleIndex] = this.rotatePoint(oppositeHandlePoint, controlPoint, angle);
+ }
+ return inkCopy;
+ });
+ }, 'move ink tangent');
/**
* Function that "smooths" ink strokes by using the gesture recognizer to detect shapes and
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 651fb5888..77a2c1b86 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -22,7 +22,6 @@ import { DefaultStyleProvider, returnEmptyDocViewList, wavyBorderPath } from './
import { DocumentView } from './nodes/DocumentView';
import { OpenWhere, OpenWhereMod } from './nodes/OpenWhere';
import { AnnotationPalette } from './smartdraw/AnnotationPalette';
-import { DocData } from '../../fields/DocSymbols';
interface LightboxViewProps {
PanelWidth: number;
@@ -58,6 +57,7 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
}[] = [];
private _savedState: LightboxSavedState = {};
private _history: { doc: Doc; target?: Doc }[] = [];
+ private _annoPaletteView: AnnotationPalette | null = null;
@observable private _future: Doc[] = [];
@observable private _layoutTemplate: Opt<Doc> = undefined;
@observable private _layoutTemplateString: Opt<string> = undefined;
@@ -65,7 +65,6 @@ export class LightboxView extends ObservableReactComponent<LightboxViewProps> {
@observable private _docTarget: Opt<Doc> = undefined;
@observable private _docView: Opt<DocumentView> = undefined;
@observable private _showPalette: boolean = false;
- private _annoPaletteView: AnnotationPalette | null = null;
@computed get leftBorder() { return Math.min(this._props.PanelWidth / 4, this._props.maxBorder[0]); } // prettier-ignore
@computed get topBorder() { return Math.min(this._props.PanelHeight / 4, this._props.maxBorder[1]); } // prettier-ignore
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 2a983a29f..6118cee92 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -580,9 +580,7 @@ export class MainView extends ObservableReactComponent<object> {
DocumentManager.removeOverlayViews();
Doc.linkFollowUnhighlight();
const targets = document.elementsFromPoint(e.x, e.y);
- const targetClasses: string[] = targets.map(target => {
- return target.className.toString();
- });
+ const targetClasses = targets.map(target => target.className.toString());
if (targets.length) {
let targClass = targets[0].className.toString();
for (let i = 0; i < targets.length - 1; i++) {
diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx
index 0d2a11ec4..90323086c 100644
--- a/src/client/views/MarqueeAnnotator.tsx
+++ b/src/client/views/MarqueeAnnotator.tsx
@@ -27,7 +27,7 @@ export interface MarqueeAnnotatorProps {
containerOffset?: () => number[];
marqueeContainer: HTMLDivElement;
docView: () => DocumentView;
- savedAnnotations: () => ObservableMap<number, (HTMLDivElement& { marqueeing?: boolean})[]>;
+ savedAnnotations: () => ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>;
selectionText: () => string;
annotationLayer: HTMLDivElement;
addDocument: (doc: Doc) => boolean;
@@ -60,7 +60,7 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
});
@undoBatch
- makeAnnotationDocument = (color: string, isLinkButton?: boolean, savedAnnotations?: ObservableMap<number, (HTMLDivElement& { marqueeing?: boolean})[]>): Opt<Doc> => {
+ makeAnnotationDocument = (color: string, isLinkButton?: boolean, savedAnnotations?: ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>): Opt<Doc> => {
const savedAnnoMap = savedAnnotations?.values() && Array.from(savedAnnotations?.values()).length ? savedAnnotations : this.props.savedAnnotations();
if (savedAnnoMap.size === 0) return undefined;
const savedAnnos = Array.from(savedAnnoMap.values())[0];
@@ -128,7 +128,6 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
savedAnnoMap.clear();
return textRegionAnno;
};
-
@action
highlight = (color: string, isLinkButton: boolean, savedAnnotations?: ObservableMap<number, HTMLDivElement[]>, addAsAnnotation?: boolean) => {
// creates annotation documents for current highlights
@@ -138,7 +137,7 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
return annotationDoc as Doc;
};
- public static previewNewAnnotation = action((savedAnnotations: ObservableMap<number, (HTMLDivElement& { marqueeing?: boolean})[]>, annotationLayer: HTMLDivElement & { marqueeing?: boolean}, div: HTMLDivElement, page: number) => {
+ public static previewNewAnnotation = action((savedAnnotations: ObservableMap<number, (HTMLDivElement & { marqueeing?: boolean })[]>, annotationLayer: HTMLDivElement & { marqueeing?: boolean }, div: HTMLDivElement, page: number) => {
div.style.backgroundColor = '#ACCEF7';
div.style.opacity = '0.5';
annotationLayer.append(div);
@@ -266,7 +265,7 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
if (!this.isEmpty && marqueeStyle) {
// configure and show the annotation/link menu if a the drag region is big enough
// copy the temporary marquee to allow for multiple selections (not currently available though).
- const copy: (HTMLDivElement & {marqueeing?: boolean}) = document.createElement('div');
+ const copy: HTMLDivElement & { marqueeing?: boolean } = document.createElement('div');
const scale = (this.props.scaling?.() || 1) * NumCast(this.props.Document._freeform_scale, 1);
['border', 'opacity', 'top', 'left', 'width', 'height'].forEach(prop => {
copy.style[prop as unknown as number] = marqueeStyle[prop as unknown as number]; // bcz: hack to get around TS type checking for array index with strings
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index bbe422e9e..6383d4947 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -813,6 +813,9 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
return Field.toString(this.selectedDoc?.[DocData][key] as FieldType);
}
+ @computed get selectedStrokes() {
+ return this.containsInkDoc ? DocListCast(this.selectedDoc[DocData].data) : this.selectedDoc ? [this.selectedDoc] : [];
+ }
@computed get shapeXps() { return NumCast(this.selectedDoc?.x); } // prettier-ignore
set shapeXps(value) { this.selectedDoc && (this.selectedDoc.x = Math.round(value * 100) / 100); } // prettier-ignore
@computed get shapeYps() { return NumCast(this.selectedDoc?.y); } // prettier-ignore
@@ -822,16 +825,11 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
@computed get shapeHgt() { return NumCast(this.selectedDoc?._height); } // prettier-ignore
set shapeHgt(value) { this.selectedDoc && (this.selectedDoc._height = Math.round(value * 100) / 100); } // prettier-ignore
@computed get strokeThk(){ return this.containsInkDoc ? NumCast(this.inkDoc?.[DocData].stroke_width) : NumCast(this.selectedDoc?.[DocData].stroke_width); } // prettier-ignore
- set strokeThk(value) {
- if (this.containsInkDoc) {
- const childDocs = DocListCast(this.selectedDoc[DocData].data);
- childDocs.forEach(doc => {
- doc[DocData].stroke_width = Math.round(value * 100) / 100;
- })
- } else {
- this.selectedDoc && (this.selectedDoc[DocData].stroke_width = Math.round(value * 100) / 100);
- }
- } // prettier-ignore
+ set strokeThk(value) {
+ this.selectedStrokes.forEach(doc => {
+ doc[DocData].stroke_width = Math.round(value * 100) / 100;
+ });
+ }
@computed get hgtInput() {
return this.inputBoxDuo(
@@ -885,14 +883,9 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
}
@computed get colorStk() { return this.containsInkDoc ? StrCast(this.inkDoc?.[DocData].color) : StrCast(this.selectedDoc?.[DocData].color); } // prettier-ignore
set colorStk(value) {
- if (this.containsInkDoc) {
- const childDocs = DocListCast(this.selectedDoc[DocData].data);
- childDocs.forEach(doc => {
- doc[DocData].color = value || undefined;
- });
- } else {
- this.selectedDoc && (this.selectedDoc[DocData].color = value || undefined);
- }
+ this.selectedStrokes.forEach(doc => {
+ doc[DocData].color = value || undefined;
+ });
}
colorButton(value: string, type: string, setter: () => void) {
@@ -1019,14 +1012,9 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
@computed get dashdStk() { return this.containsInkDoc? this.inkDoc?.stroke_dash || '' : this.selectedDoc?.stroke_dash || ''; } // prettier-ignore
set dashdStk(value) {
value && (this._lastDash = value as string);
- if (this.containsInkDoc) {
- const childDocs = DocListCast(this.selectedDoc[DocData].data);
- childDocs.forEach(doc => {
- doc[DocData].stroke_dash = value ? this._lastDash : undefined;
- });
- } else {
- this.selectedDoc && (this.selectedDoc[DocData].stroke_dash = value ? this._lastDash : undefined);
- }
+ this.selectedStrokes.forEach(doc => {
+ doc[DocData].stroke_dash = value ? this._lastDash : undefined;
+ });
}
@computed get widthStk() { return this.getField('stroke_width') || '1'; } // prettier-ignore
set widthStk(value) {
@@ -1034,13 +1022,9 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
}
@computed get markScal() { return Number(this.getField('stroke_markerScale') || '1'); } // prettier-ignore
set markScal(value) {
- if (this.containsInkDoc) {
- const childDocs = DocListCast(this.selectedDoc[DocData].data);
- childDocs.forEach(doc => {
- doc[DocData].stroke_markerScale = Number(value);
- });
- }
- this.selectedDoc && (this.selectedDoc[DocData].stroke_markerScale = Number(value));
+ this.selectedStrokes.forEach(doc => {
+ doc[DocData].stroke_markerScale = Number(value);
+ });
}
@computed get smoothAmt() { return Number(this.getField('stroke_smoothAmount') || '10'); } // prettier-ignore
set smoothAmt(value) {
@@ -1048,23 +1032,15 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
}
@computed get markHead() { return this.getField('stroke_startMarker') || ''; } // prettier-ignore
set markHead(value) {
- if (this.containsInkDoc) {
- const childDocs = DocListCast(this.selectedDoc[DocData].data);
- childDocs.forEach(doc => {
- doc[DocData].stroke_startMarker = value;
- });
- }
- this.selectedDoc && (this.selectedDoc[DocData].stroke_startMarker = value);
+ this.selectedStrokes.forEach(doc => {
+ doc[DocData].stroke_startMarker = value;
+ });
}
@computed get markTail() { return this.getField('stroke_endMarker') || ''; } // prettier-ignore
set markTail(value) {
- if (this.containsInkDoc) {
- const childDocs = DocListCast(this.selectedDoc[DocData].data);
- childDocs.forEach(doc => {
- doc[DocData].stroke_endMarker = value;
- });
- }
- this.selectedDoc && (this.selectedDoc[DocData].stroke_endMarker = value);
+ this.selectedStrokes.forEach(doc => {
+ doc[DocData].stroke_endMarker = value;
+ });
}
regInput = (key: string, value: string | number | undefined, setter: (val: string) => void) => (
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 2963a8f53..7c7764f1d 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -89,8 +89,10 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
}
private _clusters = new CollectionFreeFormClusters(this);
- private _oldWheel: any;
- private _panZoomTransitionTimer: any;
+ private _oldWheel: HTMLDivElement | null = null;
+ private _panZoomTransitionTimer: NodeJS.Timeout | undefined = undefined;
+ private _brushtimer: NodeJS.Timeout | undefined = undefined;
+ private _brushtimer1: NodeJS.Timeout | undefined = undefined;
private _lastX: number = 0;
private _lastY: number = 0;
private _downX: number = 0;
@@ -99,8 +101,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
private _disposers: { [name: string]: IReactionDisposer } = {};
private _renderCutoffData = observable.map<string, boolean>();
private _batch: UndoManager.Batch | undefined = undefined;
- private _brushtimer: any;
- private _brushtimer1: any;
private _keyTimer: NodeJS.Timeout | undefined; // timer for turning off transition flag when key frame change has completed. Need to clear this if you do a second navigation before first finishes, or else first timer can go off during second naviation.
private _presEaseFunc: string = 'ease';
@@ -142,12 +142,12 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
@computed get childPointerEvents() {
return SnappingManager.IsResizing
? 'none'
- : this._props.childPointerEvents?.() ??
+ : (this._props.childPointerEvents?.() ??
(this._props.viewDefDivClick || //
(this.layoutEngine === computePassLayout.name && !this._props.isSelected()) ||
this.isContentActive() === false
? 'none'
- : this._props.pointerEvents?.());
+ : this._props.pointerEvents?.()));
}
@computed get contentViews() {
const viewsMask = this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z && ele.inkMask !== -1 && ele.inkMask !== undefined).map(ele => ele.ele);
@@ -376,14 +376,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
const xfToCollection = options?.docTransform ?? Transform.Identity();
const savedState = { panX: NumCast(this.Document[this.panXFieldKey]), panY: NumCast(this.Document[this.panYFieldKey]), scale: options?.willZoomCentered ? this.Document[this.scaleFieldKey] : undefined };
const cantTransform = this.fitContentsToBox || ((this.Document.isGroup || this.layoutDoc._lockedTransform) && !DocumentView.LightboxDoc());
- const { panX, panY, scale } = cantTransform || (!options.willPan && !options.willZoomCentered) ? savedState : this.calculatePanIntoView(anchor, xfToCollection, options?.willZoomCentered ? options?.zoomScale ?? 0.75 : undefined);
+ const { panX, panY, scale } = cantTransform || (!options.willPan && !options.willZoomCentered) ? savedState : this.calculatePanIntoView(anchor, xfToCollection, options?.willZoomCentered ? (options?.zoomScale ?? 0.75) : undefined);
// focus on the document in the collection
const didMove = !cantTransform && !anchor.z && (panX !== savedState.panX || panY !== savedState.panY || scale !== savedState.scale);
if (didMove) options.didMove = true;
// glr: freeform transform speed can be set by adjusting presentation_transition field - needs a way of knowing when presentation is not active...
if (didMove) {
- const focusTime = options?.instant ? 0 : options.zoomTime ?? 500;
+ const focusTime = options?.instant ? 0 : (options.zoomTime ?? 500);
(options.zoomScale ?? options.willZoomCentered) && scale && (this.Document[this.scaleFieldKey] = scale);
this.setPan(panX, panY, focusTime); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow
return focusTime;
@@ -1546,7 +1546,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
return ret;
};
childPointerEventsFunc = () => this._childPointerEvents;
- childContentsActive = () => (this._props.childContentsActive ?? this.isContentActive() === false ? returnFalse : emptyFunction)();
+ childContentsActive = () => ((this._props.childContentsActive ?? this.isContentActive() === false) ? returnFalse : emptyFunction)();
getChildDocView(entry: PoolData) {
const childLayout = entry.pair.layout;
const childData = entry.pair.data;
@@ -1722,7 +1722,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
* since rendering a large collection of documents can be slow, at startup, docs are rendered in batches.
* each doc's render() method will call the cutoff provider which will let the doc know if it should render itself yet, or wait
*/
- renderCutoffProvider = computedFn((doc: Doc) => (this.Document.isTemplateDoc ? false : !this._renderCutoffData.get(doc[Id] + '')));
+ renderCutoffProvider = computedFn((doc: Doc) => (this.Document.isTemplateDoc || this.Document.isTemplateForField ? false : !this._renderCutoffData.get(doc[Id] + '')));
doEngineLayout(
poolData: Map<string, PoolData>,
@@ -1982,7 +1982,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
icon: 'eye',
});
appearanceItems.push({ description: `Pin View`, event: () => this._props.pinToPres(this.Document, { pinViewport: MarqueeView.CurViewBounds(this.dataDoc, this._props.PanelWidth(), this._props.PanelHeight()) }), icon: 'map-pin' });
- !Doc.noviceMode && appearanceItems.push({ description: `update icon`, event: this.updateIcon, icon: 'compress-arrows-alt' });
+ !Doc.noviceMode && appearanceItems.push({ description: `update icon`, event: () => this.updateIcon(), icon: 'compress-arrows-alt' });
this._props.renderDepth && appearanceItems.push({ description: 'Ungroup collection', event: this.promoteCollection, icon: 'table' });
this.Document.isGroup && this.Document.transcription && appearanceItems.push({ description: 'Ink to text', event: this.transcribeStrokes, icon: 'font' });
@@ -2080,7 +2080,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
incrementalRender = action(() => {
if (!DocumentView.LightboxDoc() || DocumentView.LightboxContains(this.DocumentView?.())) {
const layoutUnrendered = this.childDocs.filter(doc => !this._renderCutoffData.get(doc[Id]));
- const loadIncrement = this.Document.isTemplateDoc ? Number.MAX_VALUE : 5;
+ const loadIncrement = this.Document.isTemplateDoc || this.Document.isTemplateForField ? Number.MAX_VALUE : 5;
for (let i = 0; i < Math.min(layoutUnrendered.length, loadIncrement); i++) {
this._renderCutoffData.set(layoutUnrendered[i][Id] + '', true);
}
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index f85727661..bfb1d12cb 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -8,7 +8,7 @@ import { AclAdmin, AclAugment, AclEdit, DocData } from '../../../../fields/DocSy
import { Id } from '../../../../fields/FieldSymbols';
import { InkData, InkTool } from '../../../../fields/InkField';
import { List } from '../../../../fields/List';
-import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
+import { Cast, NumCast, StrCast } from '../../../../fields/Types';
import { ImageField } from '../../../../fields/URLField';
import { GetEffectiveAcl } from '../../../../fields/util';
import { DocUtils } from '../../../documents/DocUtils';
@@ -22,7 +22,7 @@ import { MainView } from '../../MainView';
import { ObservableReactComponent } from '../../ObservableReactComponent';
import { MarqueeViewBounds } from '../../PinFuncs';
import { PreviewCursor } from '../../PreviewCursor';
-import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, DocumentView } from '../../nodes/DocumentView';
+import { DocumentView } from '../../nodes/DocumentView';
import { OpenWhere } from '../../nodes/OpenWhere';
import { pasteImageBitmap } from '../../nodes/WebBoxRenderer';
import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
@@ -30,12 +30,6 @@ import { SubCollectionViewProps } from '../CollectionSubView';
import { ImageLabelBoxData } from './ImageLabelBox';
import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
import './MarqueeView.scss';
-import { collectionOf, points } from '@turf/turf';
-import { InkingStroke } from '../../InkingStroke';
-import { GestureUtils } from '../../../../pen-gestures/GestureUtils';
-import { Gestures } from '../../../../pen-gestures/GestureTypes';
-import { GestureOverlay } from '../../GestureOverlay';
-import { InkStrokeProperties } from '../../InkStrokeProperties';
interface MarqueeViewProps {
getContainerTransform: () => Transform;
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 50319c466..68d287ac8 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -36,9 +36,6 @@ import { ImageBox } from '../nodes/ImageBox';
import { VideoBox } from '../nodes/VideoBox';
import { WebBox } from '../nodes/WebBox';
import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
-// import { InkTranscription } from '../InkTranscription';
-
-// import { InkTranscription } from '../InkTranscription';
// eslint-disable-next-line prefer-arrow-callback
ScriptingGlobals.add(function IsNoneSelected() {
@@ -367,7 +364,6 @@ ScriptingGlobals.add(function toggleCharStyle(charStyle: attrname, checkResult?:
export function createInkGroup(/* inksToGroup?: Doc[], isSubGroup?: boolean */) {
// TODO nda - if document being added to is a inkGrouping then we can just add to that group
if (Doc.ActiveTool === InkTool.Write) {
- console.log('create inking group ');
CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
// TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
const selected = ffView.unprocessedDocs;
diff --git a/src/client/views/nodes/LabelBigText.js b/src/client/views/nodes/LabelBigText.js
deleted file mode 100644
index 290152cd0..000000000
--- a/src/client/views/nodes/LabelBigText.js
+++ /dev/null
@@ -1,270 +0,0 @@
-/*
-Brorlandi/big-text.js v1.0.0, 2017
-Adapted from DanielHoffmann/jquery-bigtext, v1.3.0, May 2014
-And from Jetroid/bigtext.js v1.0.0, September 2016
-
-Usage:
-BigText("#myElement",{
- rotateText: {Number}, (null)
- fontSizeFactor: {Number}, (0.8)
- maximumFontSize: {Number}, (null)
- limitingDimension: {String}, ("both")
- horizontalAlign: {String}, ("center")
- verticalAlign: {String}, ("center")
- textAlign: {String}, ("center")
- whiteSpace: {String}, ("nowrap")
-});
-
-
-Original Projects:
-https://github.com/DanielHoffmann/jquery-bigtext
-https://github.com/Jetroid/bigtext.js
-
-Options:
-
-rotateText: Rotates the text inside the element by X degrees.
-
-fontSizeFactor: This option is used to give some vertical spacing for letters that overflow the line-height (like 'g', 'Á' and most other accentuated uppercase letters). This does not affect the font-size if the limiting factor is the width of the parent div. The default is 0.8
-
-maximumFontSize: maximum font size to use.
-
-minimumFontSize: minimum font size to use. if font is calculated smaller than this, text will be rendered at this size and wrapped
-
-limitingDimension: In which dimension the font size should be limited. Possible values: "width", "height" or "both". Defaults to both. Using this option with values different than "both" overwrites the element parent width or height.
-
-horizontalAlign: Where to align the text horizontally. Possible values: "left", "center", "right". Defaults to "center".
-
-verticalAlign: Where to align the text vertically. Possible values: "top", "center", "bottom". Defaults to "center".
-
-textAlign: Sets the text align of the element. Possible values: "left", "center", "right". Defaults to "center". This option is only useful if there are linebreaks (<br> tags) inside the text.
-
-whiteSpace: Sets whitespace handling. Possible values: "nowrap", "pre". Defaults to "nowrap". (Can also be set to enable wrapping but this doesn't work well.)
-
-Bruno Orlandi - 2017
-
-Copyright (C) 2013 Daniel Hoffmann Bernardes, Ícaro Technologies
-Copyright (C) 2016 Jet Holt
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-
-function _calculateInnerDimensions(computedStyle) {
- //Calculate the inner width and height
- var innerWidth;
- var innerHeight;
-
- var width = parseInt(computedStyle.getPropertyValue("width"));
- var height = parseInt(computedStyle.getPropertyValue("height"));
- var paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left"));
- var paddingRight = parseInt(computedStyle.getPropertyValue("padding-right"));
- var paddingTop = parseInt(computedStyle.getPropertyValue("padding-top"));
- var paddingBottom = parseInt(computedStyle.getPropertyValue("padding-bottom"));
- var borderLeft = parseInt(computedStyle.getPropertyValue("border-left-width"));
- var borderRight = parseInt(computedStyle.getPropertyValue("border-right-width"));
- var borderTop = parseInt(computedStyle.getPropertyValue("border-top-width"));
- var borderBottom = parseInt(computedStyle.getPropertyValue("border-bottom-width"));
-
- //If box-sizing is border-box, we need to subtract padding and border.
- var parentBoxSizing = computedStyle.getPropertyValue("box-sizing");
- if (parentBoxSizing == "border-box") {
- innerWidth = width - (paddingLeft + paddingRight + borderLeft + borderRight);
- innerHeight = height - (paddingTop + paddingBottom + borderTop + borderBottom);
- } else {
- innerWidth = width;
- innerHeight = height;
- }
- var obj = {};
- obj["width"] = innerWidth;
- obj["height"] = innerHeight;
- return obj;
-}
-
-export default function BigText(element, options) {
-
- if (typeof element === 'string') {
- element = document.querySelector(element);
- } else if (element.length) {
- // Support for array based queries (such as jQuery)
- element = element[0];
- }
-
- var defaultOptions = {
- rotateText: null,
- fontSizeFactor: 0.8,
- maximumFontSize: null,
- limitingDimension: "both",
- horizontalAlign: "center",
- verticalAlign: "center",
- textAlign: "center",
- whiteSpace: "nowrap",
- singleLine: true
- };
-
- //Merge provided options and default options
- options = options || {};
- for (var opt in defaultOptions)
- if (defaultOptions.hasOwnProperty(opt) && !options.hasOwnProperty(opt))
- options[opt] = defaultOptions[opt];
-
- //Get variables which we will reference frequently
- var style = element.style;
- var parent = element.parentNode;
- var parentStyle = parent.style;
- var parentComputedStyle = document.defaultView.getComputedStyle(parent);
-
- //hides the element to prevent "flashing"
- style.visibility = "hidden";
- //Set some properties
- style.display = "inline-block";
- style.clear = "both";
- style.float = "left";
- var fontSize = options.maximumFontSize;
- if (options.singleLine) {
- style.fontSize = (fontSize * options.fontSizeFactor) + "px";
- style.lineHeight = fontSize + "px";
- } else {
- for (; fontSize > options.minimumFontSize; fontSize = fontSize - Math.min(fontSize / 2, Math.max(0, fontSize - 48) + 2)) {
- style.fontSize = (fontSize * options.fontSizeFactor) + "px";
- style.lineHeight = "1";
- if (element.offsetHeight <= +parentComputedStyle.height.replace("px", "")) {
- break;
- }
- }
- }
- style.whiteSpace = options.whiteSpace;
- style.textAlign = options.textAlign;
- style.position = "relative";
- style.padding = 0;
- style.margin = 0;
- style.left = "50%";
- style.top = "50%";
- var computedStyle = document.defaultView.getComputedStyle(element);
-
- //Get properties of parent to allow easier referencing later.
- var parentPadding = {
- top: parseInt(parentComputedStyle.getPropertyValue("padding-top")),
- right: parseInt(parentComputedStyle.getPropertyValue("padding-right")),
- bottom: parseInt(parentComputedStyle.getPropertyValue("padding-bottom")),
- left: parseInt(parentComputedStyle.getPropertyValue("padding-left")),
- };
- var parentBorder = {
- top: parseInt(parentComputedStyle.getPropertyValue("border-top")),
- right: parseInt(parentComputedStyle.getPropertyValue("border-right")),
- bottom: parseInt(parentComputedStyle.getPropertyValue("border-bottom")),
- left: parseInt(parentComputedStyle.getPropertyValue("border-left")),
- };
-
- //Calculate the parent inner width and height
- var parentInnerDimensions = _calculateInnerDimensions(parentComputedStyle);
- var parentInnerWidth = parentInnerDimensions["width"];
- var parentInnerHeight = parentInnerDimensions["height"];
-
- var box = {
- width: element.offsetWidth, //Note: This is slightly larger than the jQuery version
- height: element.offsetHeight,
- };
- if (!box.width || !box.height) return element;
-
-
- if (options.rotateText !== null) {
- if (typeof options.rotateText !== "number")
- throw "bigText error: rotateText value must be a number";
- var rotate = "rotate(" + options.rotateText + "deg)";
- style.webkitTransform = rotate;
- style.msTransform = rotate;
- style.MozTransform = rotate;
- style.OTransform = rotate;
- style.transform = rotate;
- //calculating bounding box of the rotated element
- var sine = Math.abs(Math.sin(options.rotateText * Math.PI / 180));
- var cosine = Math.abs(Math.cos(options.rotateText * Math.PI / 180));
- box.width = element.offsetWidth * cosine + element.offsetHeight * sine;
- box.height = element.offsetWidth * sine + element.offsetHeight * cosine;
- }
-
- var parentWidth = (parentInnerWidth - parentPadding.left - parentPadding.right);
- var parentHeight = (parentInnerHeight - parentPadding.top - parentPadding.bottom);
- var widthFactor = parentWidth / box.width;
- var heightFactor = parentHeight / box.height;
- var lineHeight;
-
- if (options.limitingDimension.toLowerCase() === "width") {
- lineHeight = Math.floor(widthFactor * fontSize);
- } else if (options.limitingDimension.toLowerCase() === "height") {
- lineHeight = Math.floor(heightFactor * fontSize);
- } else if (widthFactor < heightFactor)
- lineHeight = Math.floor(widthFactor * fontSize);
- else if (widthFactor >= heightFactor)
- lineHeight = Math.floor(heightFactor * fontSize);
-
- var fontSize = lineHeight * options.fontSizeFactor;
- if (fontSize < options.minimumFontSize) {
- parentStyle.display = "flex";
- parentStyle.alignItems = "center";
- style.textAlign = "center";
- style.visibility = "";
- style.fontSize = options.minimumFontSize + "px";
- style.lineHeight = "";
- style.overflow = "hidden";
- style.textOverflow = "ellipsis";
- style.top = "";
- style.left = "";
- style.margin = "";
- return element;
- }
- if (options.maximumFontSize && fontSize > options.maximumFontSize) {
- fontSize = options.maximumFontSize;
- lineHeight = fontSize / options.fontSizeFactor;
- }
-
- style.fontSize = Math.floor(fontSize) + "px";
- style.lineHeight = Math.ceil(lineHeight) + "px";
- style.marginBottom = "0px";
- style.marginRight = "0px";
-
- // if (options.limitingDimension.toLowerCase() === "height") {
- // //this option needs the font-size to be set already so computedStyle.getPropertyValue("width") returns the right size
- // //this +4 is to compensate the rounding erros that can occur due to the calls to Math.floor in the centering code
- // parentStyle.width = (parseInt(computedStyle.getPropertyValue("width")) + 4) + "px";
- // }
-
- //Calculate the inner width and height
- var innerDimensions = _calculateInnerDimensions(computedStyle);
- var innerWidth = innerDimensions["width"];
- var innerHeight = innerDimensions["height"];
-
- switch (options.verticalAlign.toLowerCase()) {
- case "top":
- style.top = "0%";
- break;
- case "bottom":
- style.top = "100%";
- style.marginTop = Math.floor(-innerHeight) + "px";
- break;
- default:
- style.marginTop = Math.ceil((-innerHeight / 2)) + "px";
- break;
- }
-
- switch (options.horizontalAlign.toLowerCase()) {
- case "left":
- style.left = "0%";
- break;
- case "right":
- style.left = "100%";
- style.marginLeft = Math.floor(-innerWidth) + "px";
- break;
- default:
- style.marginLeft = Math.ceil((-innerWidth / 2)) + "px";
- break;
- }
-
- //shows the element after the work is done
- style.visibility = "visible";
-
- return element;
-}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 38b22fad2..996c6843e 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -265,11 +265,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
});
AnchorMenu.Instance.AddDrawingAnnotation = (drawing: Doc) => {
- const container = DocCast(this._props.Document.embedContainer);
+ const container = DocCast(this.Document.embedContainer);
const docView = DocumentView.getDocumentView?.(container);
docView?.ComponentView?._props.addDocument?.(drawing);
- drawing.x = NumCast(this._props.Document.x) + (this._props.Document.width as number);
- drawing.y = NumCast(this._props.Document.y);
+ drawing.x = NumCast(this.Document.x) + (this.Document.width as number);
+ drawing.y = NumCast(this.Document.y);
};
AnchorMenu.Instance.setSelectedText(window.getSelection()?.toString() ?? '');
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 4e0c73b02..1a79bbbfe 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -1,25 +1,24 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
-import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction } from 'mobx';
+import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { ColorResult } from 'react-color';
+import ReactLoading from 'react-loading';
import { ClientUtils, returnFalse, setupMoveUpEvents } from '../../../ClientUtils';
import { emptyFunction, unimplementedFunction } from '../../../Utils';
import { Doc, Opt } from '../../../fields/Doc';
+import { DocData } from '../../../fields/DocSymbols';
import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT';
import { Docs } from '../../documents/Documents';
import { SettingsManager } from '../../util/SettingsManager';
+import { undoBatch } from '../../util/UndoManager';
import { AntimodeMenu, AntimodeMenuProps } from '../AntimodeMenu';
import { LinkPopup } from '../linking/LinkPopup';
import { DocumentView } from '../nodes/DocumentView';
+import { DrawingOptions, SmartDrawHandler } from '../smartdraw/SmartDrawHandler';
import './AnchorMenu.scss';
import { GPTPopup, GPTPopupMode } from './GPTPopup/GPTPopup';
-import { DrawingOptions, SmartDrawHandler } from '../smartdraw/SmartDrawHandler';
-import { InkData, InkField } from '../../../fields/InkField';
-import { DocData } from '../../../fields/DocSymbols';
-import { undoBatch } from '../../util/UndoManager';
-import ReactLoading from 'react-loading';
@observer
export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -149,9 +148,9 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
gptDraw = async (e: React.PointerEvent) => {
try {
SmartDrawHandler.Instance.AddDrawing = this.createDrawingAnnotation;
- this._isLoading = true;
+ runInAction(() => (this._isLoading = true));
await SmartDrawHandler.Instance.drawWithGPT({ X: e.clientX, Y: e.clientY }, this._selectedText, 5, 100, true);
- this._isLoading = false;
+ runInAction(() => (this._isLoading = false));
} catch (err) {
console.error(err);
}
diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx
index 3bd42873c..1891cfd4c 100644
--- a/src/client/views/pdf/Annotation.tsx
+++ b/src/client/views/pdf/Annotation.tsx
@@ -13,6 +13,7 @@ import { FieldViewProps } from '../nodes/FieldView';
import { OpenWhere } from '../nodes/OpenWhere';
import { AnchorMenu } from './AnchorMenu';
import './Annotation.scss';
+import { Property } from 'csstype';
interface IRegionAnnotationProps {
x: number;
@@ -45,7 +46,7 @@ interface IAnnotationProps extends FieldViewProps {
annoDoc: Doc;
containerDataDoc: Doc;
fieldKey: string;
- pointerEvents?: () => Opt<string>;
+ pointerEvents?: () => Opt<Property.PointerEvents>;
}
@observer
export class Annotation extends ObservableReactComponent<IAnnotationProps> {
diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx
index 4679941fb..aa10dcead 100644
--- a/src/client/views/smartdraw/SmartDrawHandler.tsx
+++ b/src/client/views/smartdraw/SmartDrawHandler.tsx
@@ -9,7 +9,7 @@ import ReactLoading from 'react-loading';
import { AiOutlineSend } from 'react-icons/ai';
import { gptAPICall, GPTCallType, gptDrawingColor } from '../../apis/gpt/GPT';
import { InkData, InkField, InkTool } from '../../../fields/InkField';
-import { SVGToBezier } from '../../util/bezierFit';
+import { SVGToBezier, SVGType } from '../../util/bezierFit';
import { INode, parse } from 'svgson';
import { Slider, Switch } from '@mui/material';
import { Doc, DocListCast } from '../../../fields/Doc';
@@ -279,14 +279,14 @@ export class SmartDrawHandler extends ObservableReactComponent<{}> {
const svgStrokes: INode[] = svgObject.children;
const strokeData: [InkData, string, string][] = [];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- svgStrokes.forEach((child) => {
- const convertedBezier: InkData = SVGToBezier(child.name, child.attributes);
+ svgStrokes.forEach(child => {
+ const convertedBezier: InkData = SVGToBezier(child.name as SVGType, child.attributes);
strokeData.push([
convertedBezier.map(point => {
return { X: point.X + startPoint.X - this._size / 1.5, Y: point.Y + startPoint.Y - this._size / 2 };
}),
- (regenerate ? this._lastInput.autoColor : autoColor) ? child.attributes.stroke : undefined,
- (regenerate ? this._lastInput.autoColor : autoColor) ? child.attributes.fill : undefined,
+ (regenerate ? this._lastInput.autoColor : autoColor) ? child.attributes.stroke : '',
+ (regenerate ? this._lastInput.autoColor : autoColor) ? child.attributes.fill : '',
]);
});
return { data: strokeData, lastInput: this._lastInput, lastRes: svg[0] };