aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
diff options
context:
space:
mode:
authorsrichman333 <sarah_n_richman@brown.edu>2024-02-19 10:56:45 -0500
committersrichman333 <sarah_n_richman@brown.edu>2024-02-19 10:56:45 -0500
commit89bb6c977e57f696fd96e9e79bcb44840b20cb49 (patch)
treebea14fd2f1ca3faf0bd1b2cb9b96a4404d2340f1 /src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
parenta1939f7547413aa97c8d8967f57b4bb5aea0cdef (diff)
parent6641de1eec4ee71fa08baa0600d0dcb2a3b03a4a (diff)
Merge branch 'master' into data-visualization-sarah
Diffstat (limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx')
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx82
1 files changed, 25 insertions, 57 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index ec3ac4174..a69030019 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -5,11 +5,12 @@ import { observer } from 'mobx-react';
import { computedFn } from 'mobx-utils';
import * as React from 'react';
import { DateField } from '../../../../fields/DateField';
-import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
+import { Doc, DocListCast, Field, Opt } from '../../../../fields/Doc';
import { DocData, Height, Width } from '../../../../fields/DocSymbols';
import { Id } from '../../../../fields/FieldSymbols';
import { InkData, InkField, InkTool, PointData, Segment } from '../../../../fields/InkField';
import { List } from '../../../../fields/List';
+import { RichTextField } from '../../../../fields/RichTextField';
import { listSpec } from '../../../../fields/Schema';
import { ScriptField } from '../../../../fields/ScriptField';
import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
@@ -22,8 +23,8 @@ import { Docs, DocUtils } from '../../../documents/Documents';
import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
import { DocumentManager } from '../../../util/DocumentManager';
import { DragManager, dropActionType } from '../../../util/DragManager';
-import { FollowLinkScript } from '../../../util/LinkFollower';
import { ReplayMovements } from '../../../util/ReplayMovements';
+import { CompileScript } from '../../../util/Scripting';
import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
import { SelectionManager } from '../../../util/SelectionManager';
import { freeformScrollMode } from '../../../util/SettingsManager';
@@ -75,11 +76,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
@observable _paintedId = 'id' + Utils.GenerateGuid().replace(/-/g, '');
@computed get paintFunc() {
- const paintFunc = StrCast(this.Document[DocData].paintFunc).trim();
+ const field = this.layoutDoc[this.fieldKey];
+ const paintFunc = StrCast(Field.toJavascriptString(Cast(field, RichTextField, null)?.Text as Field)).trim();
return !paintFunc
? ''
- : `const dashDiv = document.querySelector('#${this._paintedId}');
- (async () => { ${paintFunc} })()`;
+ : paintFunc.includes('dashDiv')
+ ? `const dashDiv = document.querySelector('#${this._paintedId}');
+ (async () => { ${paintFunc} })()`
+ : paintFunc;
}
constructor(props: any) {
super(props);
@@ -233,6 +237,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
onChildClickHandler = () => this._props.childClickScript || ScriptCast(this.Document.onChildClick);
onChildDoubleClickHandler = () => this._props.childDoubleClickScript || ScriptCast(this.Document.onChildDoubleClick);
elementFunc = () => this._layoutElements;
+ viewTransition = () => (this._panZoomTransition ? '' + this._panZoomTransition : undefined);
fitContentOnce = () => {
const vals = this.fitToContentVals;
this.layoutDoc._freeform_panX = vals.bounds.cx;
@@ -371,28 +376,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
!d._keepZWhenDragged && (d.zIndex = zsorted.length + 1 + i); // bringToFront
}
- if (this.layoutDoc._autoArrange || de.metaKey) {
- const sorted = this.childLayoutPairs.slice().sort((a, b) => NumCast(a.layout.y) - NumCast(b.layout.y));
- sorted.splice(
- sorted.findIndex(pair => pair.layout === refDoc),
- 1
- );
- if (sorted.length && refDoc && NumCast(sorted[0].layout.y) < NumCast(refDoc.y)) {
- const topIndexed = NumCast(refDoc.y) < NumCast(sorted[0].layout.y) + NumCast(sorted[0].layout._height) / 2;
- const deltay = sorted.length > 1 ? NumCast(refDoc.y) - (NumCast(sorted[0].layout.y) + (topIndexed ? 0 : NumCast(sorted[0].layout._height))) : 0;
- const deltax = sorted.length > 1 ? NumCast(refDoc.x) - NumCast(sorted[0].layout.x) : 0;
-
- let lastx = NumCast(refDoc.x);
- let lasty = NumCast(refDoc.y) + (topIndexed ? 0 : NumCast(refDoc._height));
- runInAction(() =>
- sorted.slice(1).forEach((pair, i) => {
- lastx = pair.layout.x = lastx + deltax;
- lasty = (pair.layout.y = lasty + deltay) + (topIndexed ? 0 : NumCast(pair.layout._height));
- })
- );
- }
- }
-
(docDragData.droppedDocuments.length === 1 || de.shiftKey) && this.updateClusterDocs(docDragData.droppedDocuments);
return true;
}
@@ -419,27 +402,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
const [x, y] = this.screenToFreeformContentsXf.transformPoint(de.x, de.y);
let added = false;
// do nothing if link is dropped into any freeform view parent of dragged document
- const source =
- !linkDragData.dragDocument.embedContainer || linkDragData.dragDocument.embedContainer !== this.Document
- ? Docs.Create.TextDocument('', { _width: 200, _height: 75, x, y, title: 'dropped annotation' })
- : Docs.Create.FontIconDocument({
- title: 'anchor',
- icon_label: '',
- followLinkToggle: true,
- icon: 'map-pin',
- x,
- y,
- backgroundColor: '#ACCEF7',
- layout_hideAllLinks: true,
- layout_hideLinkButton: true,
- _width: 15,
- _height: 15,
- _xPadding: 0,
- onClick: FollowLinkScript(),
- });
+ const source = Docs.Create.TextDocument('', { _width: 200, _height: 75, x, y, title: 'dropped annotation' });
added = this._props.addDocument?.(source) ? true : false;
de.complete.linkDocument = DocUtils.MakeLink(linkDragData.linkSourceGetAnchor(), source, { link_relationship: 'annotated by:annotation of' }); // TODODO this is where in text links get passed
-
+ if (de.complete.linkDocument) {
+ de.complete.linkDocument.layout_isSvg = true;
+ this.addDocument(de.complete.linkDocument);
+ }
e.stopPropagation();
!added && e.preventDefault();
return added;
@@ -1008,7 +977,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
if (!this.isAnnotationOverlay && clamp) {
// this section wraps the pan position, horizontally and/or vertically whenever the content is panned out of the viewing bounds
- const docs = this.childLayoutPairs.map(pair => pair.layout).filter(doc => doc instanceof Doc);
+ const docs = this.childLayoutPairs.map(pair => pair.layout).filter(doc => doc instanceof Doc && doc.type !== DocumentType.LINK);
const measuredDocs = docs
.map(doc => ({ pos: { x: NumCast(doc.x), y: NumCast(doc.y) }, size: { width: NumCast(doc._width), height: NumCast(doc._height) } }))
.filter(({ pos, size }) => pos && size)
@@ -1494,7 +1463,12 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
this._disposers.paintFunc = reaction(
() => ({ code: this.paintFunc, first: this._firstRender, width: this.Document._width, height: this.Document._height }),
- ({ code, first }) => code && !first && eval(code),
+ ({ code, first }) => {
+ if (!code.includes('dashDiv')) {
+ const script = CompileScript(code, { params: { docView: 'any' }, typecheck: false, editable: true });
+ if (script.compiled) script.run({ this: this.DocumentView?.() });
+ } else code && !first && eval(code);
+ },
{ fireImmediately: true }
);
@@ -1641,9 +1615,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
toggleResetView = () => {
this.dataDoc[this.autoResetFieldKey] = !this.dataDoc[this.autoResetFieldKey];
if (this.dataDoc[this.autoResetFieldKey]) {
- this.dataDoc[this.panXFieldKey + '_reset'] = this.dataDoc[this.panXFieldKey];
- this.dataDoc[this.panYFieldKey + '_reset'] = this.dataDoc[this.panYFieldKey];
- this.dataDoc[this.scaleFieldKey + '_reset'] = this.dataDoc[this.scaleFieldKey];
+ this.dataDoc[this.panXFieldKey + '_reset'] = this.layoutDoc[this.panXFieldKey];
+ this.dataDoc[this.panYFieldKey + '_reset'] = this.layoutDoc[this.panYFieldKey];
+ this.dataDoc[this.scaleFieldKey + '_reset'] = this.layoutDoc[this.scaleFieldKey];
}
};
@@ -1654,12 +1628,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
const appearanceItems = appearance && 'subitems' in appearance ? appearance.subitems : [];
!this.Document.isGroup && appearanceItems.push({ description: 'Reset View', event: this.resetView, icon: 'compress-arrows-alt' });
!this.Document.isGroup && appearanceItems.push({ description: 'Toggle Auto Reset View', event: this.toggleResetView, icon: 'compress-arrows-alt' });
- !Doc.noviceMode &&
- appearanceItems.push({
- description: 'Toggle auto arrange',
- event: () => (this.layoutDoc._autoArrange = !this.layoutDoc._autoArrange),
- icon: 'compress-arrows-alt',
- });
if (this._props.setContentViewBox === emptyFunction) {
!appearance && ContextMenu.Instance.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' });
return;