From 30338491c7b3cbba852931c76774f6bfd44d4060 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 10 Dec 2020 12:54:41 -0500 Subject: removed annotationsKey prop in favor of reusing fieldKey. Fixed web pages to allow dash annotations again. --- src/client/views/nodes/WebBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 9a1ae336f..197ff20d5 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -699,7 +699,7 @@ export class WebBox extends ViewBoxAnnotatableComponent Date: Thu, 10 Dec 2020 14:18:53 -0500 Subject: more cleanup/organization of 'props' . removed VisibleHeight props and cleaned up PDF and other props --- src/client/util/CurrentUserUtils.ts | 1 - .../util/Import & Export/DirectoryImportBox.tsx | 1 - src/client/views/PropertiesView.tsx | 2 +- .../views/collections/CollectionSchemaView.tsx | 2 +- .../views/collections/CollectionStackingView.tsx | 21 +++-- .../views/collections/CollectionTimeView.tsx | 7 +- src/client/views/collections/CollectionView.tsx | 36 ++++---- src/client/views/collections/SchemaTable.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 16 ++-- .../collectionGrid/CollectionGridView.tsx | 2 +- .../CollectionMulticolumnView.tsx | 2 +- .../CollectionMultirowView.tsx | 2 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 2 +- .../views/nodes/ContentFittingDocumentView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 4 +- src/client/views/nodes/KeyValueBox.tsx | 1 - src/client/views/nodes/PDFBox.tsx | 96 +++++----------------- src/client/views/nodes/VideoBox.tsx | 11 +-- src/client/views/nodes/WebBox.tsx | 19 +---- .../views/nodes/formattedText/FormattedTextBox.tsx | 3 - src/client/views/pdf/PDFViewer.tsx | 50 +++-------- src/fields/documentSchemas.ts | 2 - 22 files changed, 84 insertions(+), 200 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 213bc3d88..676e7ce3e 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -801,7 +801,6 @@ export class CurrentUserUtils { } } - static setupUserDoc(doc: Doc) { if (doc.myUserDoc === undefined) { doc.treeViewOpen = true; diff --git a/src/client/util/Import & Export/DirectoryImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx index 7f01966b9..d9f010557 100644 --- a/src/client/util/Import & Export/DirectoryImportBox.tsx +++ b/src/client/util/Import & Export/DirectoryImportBox.tsx @@ -158,7 +158,6 @@ export class DirectoryImportBox extends React.Component { importContainer = Docs.Create.SchemaDocument(headers, docs, options); } runInAction(() => this.phase = 'External: uploading files to Google Photos...'); - importContainer._columnsStack = false; await GooglePhotos.Export.CollectionToAlbum({ collection: importContainer }); Doc.AddDocToList(Doc.GetProto(parent.props.Document), "data", importContainer); !this.persistent && this.props.removeDocument && this.props.removeDocument(doc); diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 08394cd97..233429f4d 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -272,7 +272,7 @@ export class PropertiesView extends React.Component { treeViewDoc={undefined} styleProvider={this.props.styleProvider} fitToBox={true} - FreezeDimensions={true} + freezeDimensions={true} dontCenter={"y"} NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} NativeHeight={layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined} diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index e22b8effe..c64048345 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -401,7 +401,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { Document={this.previewDocument} DataDoc={undefined} fitToBox={true} - FreezeDimensions={true} + freezeDimensions={true} dontCenter={"y"} focus={emptyFunction} renderDepth={this.props.renderDepth} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 058536f69..b1c5dec84 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -3,7 +3,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { CursorProperty } from "csstype"; import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; -import Switch from 'rc-switch'; import { DataSym, Doc, HeightSym, WidthSym } from "../../../fields/Doc"; import { collectionSchema, documentSchema } from "../../../fields/documentSchemas"; import { Id } from "../../../fields/FieldSymbols"; @@ -12,23 +11,23 @@ import { listSpec, makeInterface } from "../../../fields/Schema"; import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; -import { emptyFunction, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils, smoothScroll, returnVal } from "../../../Utils"; +import { emptyFunction, returnFalse, returnOne, returnVal, returnZero, setupMoveUpEvents, smoothScroll, Utils } from "../../../Utils"; +import { DocUtils } from "../../documents/Documents"; import { DragManager, dropActionType } from "../../util/DragManager"; +import { SnappingManager } from "../../util/SnappingManager"; import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import { EditableView } from "../EditableView"; +import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; +import { DocAfterFocusFunc } from "../nodes/DocumentView"; import { CollectionMasonryViewFieldRow } from "./CollectionMasonryViewFieldRow"; import "./CollectionStackingView.scss"; import { CollectionStackingViewFieldColumn } from "./CollectionStackingViewFieldColumn"; import { CollectionSubView } from "./CollectionSubView"; import { CollectionViewType } from "./CollectionView"; -import { SnappingManager } from "../../util/SnappingManager"; -import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; -import { DocUtils } from "../../documents/Documents"; -import { DocAfterFocusFunc } from "../nodes/DocumentView"; const _global = (window /* browser */ || global /* node */) as any; type StackingDocument = makeInterface<[typeof collectionSchema, typeof documentSchema]>; @@ -56,7 +55,7 @@ export class CollectionStackingView extends CollectionSubView doc) { @computed get contents() { return
- +
; } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 511fc723d..dbbb3e991 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -66,7 +66,6 @@ export interface CollectionViewProps extends FieldViewProps { layoutEngine?: () => string; parentActive: (outsideReaction: boolean) => boolean; filterAddDocument?: (doc: Doc | Doc[]) => boolean; // allows a document that renders a Collection view to filter or modify any documents added to the collection (see PresBox for an example) - VisibleHeight?: () => number; setPreviewCursor?: (func: (x: number, y: number, drag: boolean) => void) => void; // property overrides for child documents @@ -242,28 +241,27 @@ export class CollectionView extends Touchable { private SubView = (type: CollectionViewType, props: SubCollectionViewProps) => { TraceMobx(); switch (type) { - case CollectionViewType.Schema: return (); - case CollectionViewType.Docking: return (); - case CollectionViewType.Tree: return (); - //case CollectionViewType.Staff: return (); - case CollectionViewType.Multicolumn: return (); - case CollectionViewType.Multirow: return (); - case CollectionViewType.Linear: { return (); } - case CollectionViewType.Pile: { return (); } - case CollectionViewType.Carousel: { return (); } - case CollectionViewType.Carousel3D: { return (); } - case CollectionViewType.Stacking: { this.props.Document._columnsStack = true; return (); } - case CollectionViewType.Masonry: { this.props.Document._columnsStack = false; return (); } - case CollectionViewType.Time: { return (); } - case CollectionViewType.Map: return (); - case CollectionViewType.Grid: return (); - case CollectionViewType.Freeform: - default: { this.props.Document._freeformLayoutEngine = undefined; return (); } + default: + case CollectionViewType.Freeform: return ; + case CollectionViewType.Schema: return ; + case CollectionViewType.Docking: return ; + case CollectionViewType.Tree: return ; + case CollectionViewType.Multicolumn: return ; + case CollectionViewType.Multirow: return ; + case CollectionViewType.Linear: return ; + case CollectionViewType.Pile: return ; + case CollectionViewType.Carousel: return ; + case CollectionViewType.Carousel3D: return ; + case CollectionViewType.Stacking: return ; + case CollectionViewType.Masonry: return ; + case CollectionViewType.Time: return ; + case CollectionViewType.Map: return ; + case CollectionViewType.Grid: return ; + //case CollectionViewType.Staff: return ; } } setupViewTypes(category: string, func: (viewType: CollectionViewType) => Doc, addExtras: boolean) { - const subItems: ContextMenuProps[] = []; subItems.push({ description: "Freeform", event: () => func(CollectionViewType.Freeform), icon: "signature" }); if (addExtras && CollectionView._safeMode) { diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index b532d3302..24a67faaf 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -571,7 +571,7 @@ export class SchemaTable extends React.Component { Document={this._showDoc} DataDoc={this._showDataDoc} fitToBox={true} - FreezeDimensions={true} + freezeDimensions={true} focus={emptyFunction} renderDepth={this.props.renderDepth} rootSelected={() => false} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index e09abd017..94de40bc8 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -918,7 +918,7 @@ export class CollectionFreeFormView extends CollectionSubView, bounds: this.childDataProvider(entry[1].pair.layout, entry[1].replica) })); diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index f3e385746..bef197bee 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -170,7 +170,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { PanelWidth={width} PanelHeight={height} ContentScaling={returnOne} - FreezeDimensions={true} + freezeDimensions={true} fitToBox={true} ScreenToLocalTransform={dxf} onClick={this.onChildClickHandler} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index 586c5d1df..d4913a5ed 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -219,7 +219,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu styleProvider={this.props.styleProvider} LayoutTemplate={this.props.childLayoutTemplate} LayoutTemplateString={this.props.childLayoutString} - FreezeDimensions={this.props.childFreezeDimensions} + freezeDimensions={this.props.childFreezeDimensions} renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index 87c56de6f..9039090d1 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -219,7 +219,7 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) styleProvider={this.props.styleProvider} LayoutTemplate={this.props.childLayoutTemplate} LayoutTemplateString={this.props.childLayoutString} - FreezeDimensions={this.props.childFreezeDimensions} + freezeDimensions={this.props.childFreezeDimensions} renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index b4b887617..d68184da6 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -52,7 +52,7 @@ export class CollectionFreeFormDocumentView extends DocComponent(Docu undefined); } @computed get topMost() { return this.props.renderDepth === 0; } - @computed get freezeDimensions() { return this.props.FreezeDimensions; } + @computed get freezeDimensions() { return this.props.freezeDimensions; } @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.dataDoc, this.freezeDimensions)); } @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.dataDoc, this.freezeDimensions)); } @computed get onClickHandler() { return this.props.onClick?.() ?? Cast(this.Document.onClick, ScriptField, Cast(this.layoutDoc.onClick, ScriptField, null)); } diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index 4ac932c24..8acf4081c 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -169,7 +169,6 @@ export class KeyValueBox extends React.Component { getTemplate = async () => { const parent = Docs.Create.StackingDocument([], { _width: 800, _height: 800, title: "Template" }); - parent._columnsStack = false; parent._columnWidth = 100; for (const row of this.rows.filter(row => row.isChecked)) { await this.createTemplateField(parent, row); diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 42b24f6f6..a2f3fb2d1 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -1,28 +1,27 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, observable, runInAction, reaction, IReactionDisposer, trace, untracked, computed } from 'mobx'; +import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; import { observer } from "mobx-react"; import * as Pdfjs from "pdfjs-dist"; import "pdfjs-dist/web/pdf_viewer.css"; -import { Opt, WidthSym, Doc, HeightSym } from "../../../fields/Doc"; +import { Doc, Opt, WidthSym } from "../../../fields/Doc"; +import { documentSchema } from '../../../fields/documentSchemas'; import { makeInterface } from "../../../fields/Schema"; -import { ScriptField } from '../../../fields/ScriptField'; -import { Cast, NumCast, StrCast } from "../../../fields/Types"; -import { PdfField, URLField } from "../../../fields/URLField"; +import { Cast, NumCast } from "../../../fields/Types"; +import { PdfField } from "../../../fields/URLField"; +import { TraceMobx } from '../../../fields/util'; import { Utils } from '../../../Utils'; +import { KeyCodes } from '../../util/KeyCodes'; import { undoBatch } from '../../util/UndoManager'; import { panZoomSchema } from '../collections/collectionFreeForm/CollectionFreeFormView'; +import { CollectionViewType } from '../collections/CollectionView'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { ViewBoxAnnotatableComponent } from "../DocComponent"; import { PDFViewer } from "../pdf/PDFViewer"; import { FieldView, FieldViewProps } from './FieldView'; import { pageSchema } from "./ImageBox"; -import { KeyCodes } from '../../util/KeyCodes'; import "./PDFBox.scss"; import React = require("react"); -import { documentSchema } from '../../../fields/documentSchemas'; -import { CollectionViewType } from '../collections/CollectionView'; -import { TraceMobx } from '../../../fields/util'; type PdfDocument = makeInterface<[typeof documentSchema, typeof panZoomSchema, typeof pageSchema]>; const PdfDocument = makeInterface(documentSchema, panZoomSchema, pageSchema); @@ -30,17 +29,11 @@ const PdfDocument = makeInterface(documentSchema, panZoomSchema, pageSchema); @observer export class PDFBox extends ViewBoxAnnotatableComponent(PdfDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PDFBox, fieldKey); } - private _keyValue: string = ""; - private _valueValue: string = ""; - private _scriptValue: string = ""; private _searchString: string = ""; private _initialScale: number = 0; // the initial scale of the PDF when first rendered which determines whether the document will be live on startup or not. Getting bigger after startup won't make it automatically be live. private _displayPdfLive = false; // has this box ever had its contents activated -- if so, stop drawing the overlay title private _pdfViewer: PDFViewer | undefined; private _searchRef = React.createRef(); - private _keyRef = React.createRef(); - private _valueRef = React.createRef(); - private _scriptRef = React.createRef(); private _selectReactionDisposer: IReactionDisposer | undefined; @observable private _searching: boolean = false; @@ -130,25 +123,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent { - const scriptText = this._scriptValue ? this._scriptValue : - this._keyValue && this._valueValue ? `this.${this._keyValue} === ${this._valueValue}` : "true"; - this.props.Document.filterScript = ScriptField.MakeFunction(scriptText); - } - - private resetFilters = () => { - this._keyValue = this._valueValue = this._scriptValue = ""; - this._keyRef.current && (this._keyRef.current.value = ""); - this._valueRef.current && (this._valueRef.current.value = ""); - this._scriptRef.current && (this._scriptRef.current.value = ""); - this.applyFilter(); - } - private newKeyChange = (e: React.ChangeEvent) => this._keyValue = e.currentTarget.value; - private newValueChange = (e: React.ChangeEvent) => this._valueValue = e.currentTarget.value; - private newScriptChange = (e: React.ChangeEvent) => this._scriptValue = e.currentTarget.value; - whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); setPdfViewer = (pdfViewer: PDFViewer) => { this._pdfViewer = pdfViewer; }; searchStringChanged = (e: React.ChangeEvent) => this._searchString = e.currentTarget.value; @@ -197,36 +171,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent this._pageControls = !this._pageControls)} /> {this._pageControls ? pageBtns : (null)} - {/*
e.stopPropagation()}> - -
-
- Annotation View Settings -
-
- - -
-
- -
-
- - -
-
-
*/} ); } @@ -253,19 +197,19 @@ export class PDFBox extends ViewBoxAnnotatableComponent 600) ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}> -
- 600) ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}> +
+ + startupLive={true} + /> {this.settingsPanel()}
; } diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 8d10768ff..90a5dee23 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -427,11 +427,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent + renderDepth={this.props.renderDepth + 1}> {this.contentFunc} diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 197ff20d5..47464d794 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -646,14 +646,6 @@ export class WebBox extends ViewBoxAnnotatableComponent this._marqueeX; marqueeY = () => this._marqueeY; marqueeing = () => this._marqueeing; - visibleHeight = () => { - if (this._mainCont.current) { - const boundingRect = this._mainCont.current.getBoundingClientRect(); - const scaling = (Doc.NativeWidth(this.Document) || 0) / boundingRect.width; - return Math.min(boundingRect.height * scaling, this.props.PanelHeight() * scaling); - } - return this.props.PanelHeight(); - } scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { const scaling = Number.isFinite(this.props.ContentScaling()) ? this.props.ContentScaling() || 1 : 1; @@ -697,13 +689,8 @@ export class WebBox extends ViewBoxAnnotatableComponent + renderDepth={this.props.renderDepth + 1}> diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 33515e475..bfbd7805d 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1620,8 +1620,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp isAnnotationOverlay: true, fieldKey: this.annotationKey, fitToBox: fitToBox, - focus: this.props.focus, - isSelected: this.props.isSelected, select: emptyFunction, active: this.annotationsActive, ContentScaling: this.sidebarContentScaling, @@ -1632,7 +1630,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp CollectionView: undefined, ScreenToLocalTransform: this.sidebarScreenToLocal, renderDepth: this.props.renderDepth + 1, - ContainingCollectionDoc: this.props.ContainingCollectionDoc, }; return !this.layoutDoc._showSidebar || this.sidebarWidthPercent === "0%" ? (null) :
+ renderDepth={this.props.renderDepth + 1}>
; } @@ -778,7 +751,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent this._marqueeX; marqueeY = () => this._marqueeY; marqueeing = () => this._marqueeing; - visibleHeight = () => this.props.PanelHeight() / this.props.ContentScaling(); contentZoom = () => this._zoomed; render() { TraceMobx(); diff --git a/src/fields/documentSchemas.ts b/src/fields/documentSchemas.ts index 979238767..67df56015 100644 --- a/src/fields/documentSchemas.ts +++ b/src/fields/documentSchemas.ts @@ -49,14 +49,12 @@ export const documentSchema = createSchema({ _showTitle: "string", // the fieldkey whose contents should be displayed at the top of the document _showTitleHover: "string", // the showTitle should be shown only on hover _showAudio: "boolean", // whether to show the audio record icon on documents - _freeformLayoutEngine: "string",// the string ID for the layout engine to use to layout freeform view documents _freeformLOD: "boolean", // whether to enable LOD switching for CollectionFreeFormViews _pivotField: "string", // specifies which field key should be used as the timeline/pivot axis _replacedChrome: "string", // what the default chrome is replaced with. Currently only supports the value of 'replaced' for PresBox's. _chromeStatus: "string", // determines the state of the collection chrome. values allowed are 'replaced', 'enabled', 'disabled', 'collapsed' _columnsFill: "boolean", // whether documents in a stacking view column should be sized to fill the column _columnsSort: "string", // how a document should be sorted "ascending", "descending", undefined (none) - _columnsStack: "boolean", // whether a stacking document stacks vertically (as opposed to masonry horizontal) _columnsHideIfEmpty: "boolean", // whether empty stacking view column headings should be hidden _columnHeaders: listSpec(SchemaHeaderField), // header descriptions for stacking/masonry _schemaHeaders: listSpec(SchemaHeaderField), // header descriptions for schema views -- cgit v1.2.3-70-g09d2 From 890dd1c3d8d6a00cf3111972c20f7b5b9cb09085 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 12 Dec 2020 22:52:26 -0500 Subject: made conentScaling a DocumentView-only prop --- src/client/views/MainView.tsx | 4 ---- src/client/views/StyleProvider.tsx | 12 ++++++++++-- src/client/views/TemplateMenu.tsx | 1 - src/client/views/collections/CollectionStackingView.tsx | 5 +++-- src/client/views/collections/TabDocView.tsx | 4 ++-- src/client/views/collections/TreeView.tsx | 9 +++++---- .../collectionFreeForm/CollectionFreeFormView.tsx | 7 ++++--- src/client/views/nodes/AudioBox.tsx | 3 ++- src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 3 ++- src/client/views/nodes/ColorBox.tsx | 2 +- src/client/views/nodes/ContentFittingDocumentView.tsx | 9 ++++----- src/client/views/nodes/DocumentView.tsx | 7 ++++--- src/client/views/nodes/ImageBox.tsx | 2 +- src/client/views/nodes/KeyValuePair.tsx | 1 - src/client/views/nodes/LinkAnchorBox.tsx | 2 +- src/client/views/nodes/PDFBox.tsx | 2 +- src/client/views/nodes/ScreenshotBox.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 2 +- src/client/views/nodes/WebBox.tsx | 10 ++++------ src/client/views/nodes/formattedText/FormattedTextBox.tsx | 8 ++++---- src/client/views/pdf/PDFViewer.tsx | 5 ++--- src/client/views/presentationview/PresElementBox.tsx | 2 +- 22 files changed, 53 insertions(+), 49 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index d55d43623..b8c7a1a73 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -465,7 +465,6 @@ export class MainView extends React.Component { removeDocument={this.remButtonDoc} onClick={undefined} ScreenToLocalTransform={this.buttonBarXf} - ContentScaling={returnOne} PanelWidth={this.flyoutWidthFunc} PanelHeight={this.getContentsHeight} renderDepth={0} @@ -529,7 +528,6 @@ export class MainView extends React.Component { styleProvider={DefaultStyleProvider} removeDocument={undefined} ScreenToLocalTransform={Transform.Identity} - ContentScaling={returnOne} PanelWidth={this.getPWidth} PanelHeight={this.getPHeight} renderDepth={0} @@ -568,7 +566,6 @@ export class MainView extends React.Component { focus={returnFalse} PanelWidth={() => 500} PanelHeight={() => 800} - ContentScaling={returnOne} docFilters={returnEmptyFilter} docRangeFilters={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} @@ -634,7 +631,6 @@ export class MainView extends React.Component { focus={returnFalse} PanelWidth={() => 500} PanelHeight={() => 800} - ContentScaling={returnOne} docFilters={returnEmptyFilter} docRangeFilters={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 6a534a979..128c3cb96 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -16,6 +16,7 @@ import React = require("react"); import Color = require('color'); import { listSpec } from '../../fields/Schema'; import { MainView } from './MainView'; +import { FieldViewProps } from './nodes/FieldView'; export enum StyleLayers { Background = "background" @@ -59,10 +60,17 @@ function toggleBackground(doc: Doc) { }), "toggleBackground"); } +export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentViewProps { + if (toBeDetermined.ContentScaling) { + return true; + } + return false; +} + // // a preliminary implementation of a dash style sheet for setting rendering properties of documents nested within a Tab // -export function DefaultStyleProvider(doc: Opt, props: Opt, property: string): any { +export function DefaultStyleProvider(doc: Opt, props: Opt, property: string): any { switch (property.split(":")[0]) { case StyleProp.DocContents: return undefined; case StyleProp.WidgetColor: return darkScheme() ? "lightgrey" : "dimgrey"; @@ -121,7 +129,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt { dropAction={undefined} active={returnTrue} parentActive={returnFalse} - ContentScaling={returnOne} bringToFront={emptyFunction} focus={emptyFunction} whenActiveChanged={emptyFunction} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index e8165f673..510e47b20 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -29,6 +29,7 @@ import { CollectionStackingViewFieldColumn } from "./CollectionStackingViewField import { CollectionSubView } from "./CollectionSubView"; import { CollectionViewType } from "./CollectionView"; import { StyleProp } from "../StyleProvider"; +import { FieldViewProps } from "../nodes/FieldView"; const _global = (window /* browser */ || global /* node */) as any; type StackingDocument = makeInterface<[typeof collectionSchema, typeof documentSchema]>; @@ -61,7 +62,7 @@ export class CollectionStackingView extends CollectionSubView Transform, width: () => number) { const dataDoc = (!doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS) ? undefined : this.props.DataDoc; const height = () => this.getDocHeight(doc); - const styleProvider = (doc: Doc | undefined, props: Opt, property: string) => { + const styleProvider = (doc: Doc | undefined, props: Opt, property: string) => { if (property === StyleProp.Opacity && doc) { if (this.props.childOpacity) { return this.props.childOpacity(); diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 8b5143013..fe929abc5 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -33,6 +33,7 @@ import { List } from '../../../fields/List'; import { DocumentType } from '../../documents/DocumentTypes'; import Color = require('color'); import { StyleProp, DefaultStyleProvider, DefaultLayerProvider, StyleLayers } from '../StyleProvider'; +import { FieldViewProps } from '../nodes/FieldView'; const _global = (window /* browser */ || global /* node */) as any; interface TabDocViewProps { @@ -352,7 +353,6 @@ export class TabDocView extends React.Component { addDocument={returnFalse} moveDocument={returnFalse} removeDocument={returnFalse} - ContentScaling={returnOne} PanelWidth={this.returnMiniSize} PanelHeight={this.returnMiniSize} ScreenToLocalTransform={this.ScreenToLocalTransform} @@ -389,7 +389,7 @@ export class TabDocView extends React.Component { active = () => this._isActive; - public static miniStyleProvider = (doc: Opt, props: Opt, property: string): any => { + public static miniStyleProvider = (doc: Opt, props: Opt, property: string): any => { if (doc) { switch (property.split(":")[0]) { default: return DefaultStyleProvider(doc, props, property); diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 843bec6de..11ff4ca3b 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -29,7 +29,8 @@ import { CollectionTreeView } from './CollectionTreeView'; import { CollectionView, CollectionViewType } from './CollectionView'; import "./TreeView.scss"; import React = require("react"); -import { StyleProp } from '../StyleProvider'; +import { StyleProp, testDocProps } from '../StyleProvider'; +import { FieldViewProps } from '../nodes/FieldView'; export interface TreeViewProps { document: Doc; @@ -497,13 +498,13 @@ export class TreeView extends React.Component { e.preventDefault(); } } - titleStyleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { + titleStyleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { if (!doc || doc !== this.doc) return this.props?.treeView?.props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView switch (property.split(":")[0]) { case StyleProp.Opacity: return this.outlineMode ? undefined : 1; case StyleProp.BackgroundColor: return StrCast(doc._backgroundColor, StrCast(doc.backgroundColor)); - case StyleProp.DocContents: return !props?.treeViewDoc ? (null) : + case StyleProp.DocContents: return testDocProps(props) && !props?.treeViewDoc ? (null) :
{ case StyleProp.Decorations: return (null); } } - embeddedStyleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { + embeddedStyleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { if (property.startsWith(StyleProp.Decorations)) return (null); return this.props?.treeView?.props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index b8576681d..3f7eb24f8 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -49,6 +49,7 @@ import React = require("react"); import { CurrentUserUtils } from "../../../util/CurrentUserUtils"; import { StyleProp, StyleLayers } from "../../StyleProvider"; import { DocumentDecorations } from "../../DocumentDecorations"; +import { FieldViewProps } from "../../nodes/FieldView"; export const panZoomSchema = createSchema({ _panX: "number", @@ -116,7 +117,7 @@ export class CollectionFreeFormView extends CollectionSubView e.bounds && !e.bounds.z).map(e => e.bounds!), NumCast(this.layoutDoc._xPadding, 10), NumCast(this.layoutDoc._yPadding, 10)); } @computed get nativeWidth() { return this.fitToContent ? 0 : returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.Document)); } @computed get nativeHeight() { return this.fitToContent ? 0 : returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.Document)); } @@ -405,7 +406,7 @@ export class CollectionFreeFormView extends CollectionSubView, props: Opt, property: string) => { + getClusterColor = (doc: Opt, props: Opt, property: string) => { let styleProp = this.props.styleProvider?.(doc, props, property); // bcz: check 'props' used to be renderDepth + 1 if (property !== StyleProp.BackgroundColor) return styleProp; const cluster = NumCast(doc?.cluster); @@ -1277,7 +1278,7 @@ export class CollectionFreeFormView extends CollectionSubView { - Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); + Doc.toggleNativeDimensions(this.layoutDoc, 1, this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); } @undoBatch diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index b495cdd1b..7b721786f 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -539,7 +539,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent AudioBox.RangeScript; labelScript = () => AudioBox.LabelScript; - static audioStyleProvider = (doc: Doc | undefined, props: Opt, property: string) => { + static audioStyleProvider = (doc: Doc | undefined, props: Opt, property: string) => { if (property === StyleProp.BackgroundColor) return "transparent"; if (property === StyleProp.PointerEvents) return "none"; } @@ -554,6 +554,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined; @@ -59,7 +60,7 @@ export class CollectionFreeFormDocumentView extends DocComponent, property: string) => { + styleProvider = (doc: Doc | undefined, props: Opt, property: string) => { if (property === StyleProp.Opacity && doc === this.layoutDoc) return this.Opacity; // only change the opacity for this specific document, not its children return this.props.styleProvider?.(doc, props, property); } diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index 4fb350b55..52236a648 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -57,7 +57,7 @@ export class ColorBox extends ViewBoxBaseComponent e.button === 0 && !e.ctrlKey && e.stopPropagation()} onClick={e => { (e.nativeEvent as any).stuff = true; e.stopPropagation(); }} - style={{ transform: `scale(${this.props.ContentScaling()})`, width: `${100 / this.props.ContentScaling()}%`, height: `${100 / this.props.ContentScaling()}%` }} > + style={{ width: `${100}%`, height: `${100}%` }} > boolean; export type DocFocusFunc = (doc: Doc, willZoom?: boolean, scale?: number, afterFocus?: DocAfterFocusFunc, dontCenter?: boolean, focused?: boolean) => void; -export type StyleProviderFunc = (doc: Opt, props: Opt, property: string) => any; +export type StyleProviderFunc = (doc: Opt, props: Opt, property: string) => any; export interface DocumentViewSharedProps { renderDepth: number; Document: Doc; @@ -58,7 +59,6 @@ export interface DocumentViewSharedProps { PanelHeight: () => number; NativeWidth?: () => number; NativeHeight?: () => number; - ContentScaling: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal layerProvider?: (doc: Doc, assign?: boolean) => boolean; styleProvider?: StyleProviderFunc; focus: DocFocusFunc; @@ -93,6 +93,7 @@ export interface DocumentViewProps extends DocumentViewSharedProps { dragDivName?: string; contentPointerEvents?: string; radialMenu?: String[]; + ContentScaling: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal contentFittingScaling?: () => number;// scaling done outside the document view (eg in ContentFittingDocumentView) to fit contents into panel (needed for ScreenToLocal but not needed by DocumentView to scale its content) LayoutTemplate?: () => Opt; contextMenuItems?: () => { script: ScriptField, label: string }[]; @@ -972,7 +973,7 @@ export class DocumentView extends DocComponent(Docu hideLinkAnchor = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => flg && (doc.hidden = true), true) anchorPanelWidth = () => this.props.PanelWidth() || 1; anchorPanelHeight = () => this.props.PanelHeight() || 1; - anchorStyleProvider = (doc: Opt, props: Opt, property: string): any => { + anchorStyleProvider = (doc: Opt, props: Opt, property: string): any => { switch (property.split(":")[0]) { case StyleProp.BackgroundColor: return "transparent"; case StyleProp.HideLinkButton: return true; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 44df00709..374f964e3 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -67,7 +67,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent { this._dropDisposer?.(); diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index aaf544c50..3c10cc5fe 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -76,7 +76,6 @@ export class KeyValuePair extends React.Component { PanelHeight: this.props.PanelHeight, addDocTab: returnFalse, pinToPres: returnZero, - ContentScaling: returnOne }; const contents = ; // let fieldKey = Object.keys(props.Document).indexOf(props.fieldKey) !== -1 ? props.fieldKey : "(" + props.fieldKey + ")"; diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx index abefc6561..d0048c67b 100644 --- a/src/client/views/nodes/LinkAnchorBox.tsx +++ b/src/client/views/nodes/LinkAnchorBox.tsx @@ -146,7 +146,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent {!this._editing && !this._forceOpen ? (null) : this._isOpen = true} onClose={action(() => this._isOpen = this._forceOpen = this._editing = false)}> diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index a2f3fb2d1..b34c7966b 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -183,7 +183,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index 713511a94..456de7ede 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -167,7 +167,7 @@ export class ScreenshotBox extends ViewBoxBaseComponent [this.content]; render() { return (
+ style={{ width: `${100}%`, height: `${100}%` }} >
[this.youtubeVideoId ? this.youtubeContent : this.content]; render() { return (
{view}
@@ -648,14 +648,12 @@ export class WebBox extends ViewBoxAnnotatableComponent this._marqueeing; scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { - const scaling = Number.isFinite(this.props.ContentScaling()) ? this.props.ContentScaling() || 1 : 1; return (
@@ -663,7 +661,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 0beea2bcd..feb5e63b2 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -581,7 +581,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp @undoBatch @action toggleNativeDimensions = () => { - Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); + Doc.toggleNativeDimensions(this.layoutDoc, 1, this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); } public static get DefaultLayout(): Doc | string | undefined { @@ -1609,7 +1609,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp />; } - sidebarContentScaling = () => this.props.ContentScaling() * NumCast(this.layoutDoc._viewScale, 1); + sidebarContentScaling = () => NumCast(this.layoutDoc._viewScale, 1); @computed get sidebarCollection() { const fitToBox = this.props.Document._fitToBox; const collectionProps: SubCollectionViewProps & collectionFreeformViewProps = { @@ -1647,13 +1647,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp @computed get sidebarWidthPercent() { return StrCast(this.layoutDoc._sidebarWidthPercent, "0%"); } sidebarWidth = () => Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100 * this.props.PanelWidth(); - sidebarScreenToLocal = () => this.props.ScreenToLocalTransform().translate(-(this.props.PanelWidth() - this.sidebarWidth()) / this.props.ContentScaling(), 0).scale(1 / NumCast(this.layoutDoc._viewScale, 1)); + sidebarScreenToLocal = () => this.props.ScreenToLocalTransform().translate(-(this.props.PanelWidth() - this.sidebarWidth()), 0).scale(1 / NumCast(this.layoutDoc._viewScale, 1)); @computed get sidebarColor() { return StrCast(this.layoutDoc.sidebarColor, StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], "#e4e4e4")); } render() { TraceMobx(); const selected = this.props.isSelected(); const active = this.active(); - const scale = this.props.hideOnLeave ? 1 : this.props.ContentScaling() * NumCast(this.layoutDoc._viewScale, 1); + const scale = this.props.hideOnLeave ? 1 : NumCast(this.layoutDoc._viewScale, 1); const rounded = StrCast(this.layoutDoc.borderRounding) === "100%" ? "-rounded" : ""; const interactive = (Doc.GetSelectedTool() === InkTool.None || SnappingManager.GetIsDragging()) && (this.layoutDoc.z || this.props.layerProvider?.(this.layoutDoc) !== false); if (!selected && FormattedTextBoxComment.textBox === this) setTimeout(() => FormattedTextBoxComment.Hide()); diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 6b7a93747..fc547c60f 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -370,7 +370,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { if (scrollToAnnotation) { - const offset = (this.props.PanelHeight() / this.props.ContentScaling()) / 2; + const offset = this.props.PanelHeight() / 2; this._mainCont.current && smoothScroll(500, this._mainCont.current, NumCast(scrollToAnnotation.y) - offset); Doc.linkFollowHighlight(scrollToAnnotation); } @@ -737,7 +737,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent; } - @computed get contentScaling() { return this.props.ContentScaling(); } + @computed get contentScaling() { return 1; } @computed get standinViews() { return <> {this._showCover ? this.getCoverImage() : (null)} @@ -758,7 +758,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent 600) ? Doc.NativeWidth(this.props.Document) : `${100 / this.contentScaling}%`, height: !this.props.Document._fitWidth && (window.screen.width > 600) ? Doc.NativeHeight(this.props.Document) : `${100 / this.contentScaling}%`, - transform: `scale(${this.props.ContentScaling()})` }} > {this.pdfViewerDiv} {this.annotationLayer} diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 3b6b0259d..8615ba81d 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -78,7 +78,7 @@ export class PresElementBox extends ViewBoxBaseComponent this.props.PanelWidth(); // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); embedWidth = (): number => this.props.PanelWidth() - 35; - styleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { + styleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { if (property === StyleProp.Opacity) return 1; return this.props.styleProvider?.(doc, props, property); } -- cgit v1.2.3-70-g09d2 From 1cc523907d05be7975dabb1901b91b3485083616 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 13 Dec 2020 21:06:38 -0500 Subject: now working on video and web box's to fix their annotation registration with doc decorations. --- src/client/views/nodes/VideoBox.tsx | 5 +++-- src/client/views/nodes/WebBox.tsx | 7 +++++-- 2 files changed, 8 insertions(+), 4 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index b446dab22..06a305515 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -414,8 +414,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent this.contentScaling; + screenToLocalTransform = () => this.props.ScreenToLocalTransform().scale(1 / this.scaling()); contentFunc = () => [this.youtubeVideoId ? this.youtubeContent : this.content]; render() { return (
this._marqueeX; marqueeY = () => this._marqueeY; marqueeing = () => this._marqueeing; - scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); + @computed get contentScaling() { return this.props.scaling?.() || 1; } + scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)).scale(1 / this.contentScaling); + scaling = () => this.contentScaling; + screenToLocalTransform = () => this.props.ScreenToLocalTransform().scale(1 / this.scaling()) render() { return (
-- cgit v1.2.3-70-g09d2 From 4749b1a3132f00c7f11a404e612d9c1ce848579f Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 13 Dec 2020 21:25:35 -0500 Subject: fixed webbox --- src/client/views/nodes/WebBox.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index d1d734255..0fffdf693 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -457,7 +457,7 @@ export class WebBox extends ViewBoxAnnotatableComponent
{view}
@@ -647,16 +647,16 @@ export class WebBox extends ViewBoxAnnotatableComponent this._marqueeY; marqueeing = () => this._marqueeing; @computed get contentScaling() { return this.props.scaling?.() || 1; } - scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)).scale(1 / this.contentScaling); + scrollXf = () => this.props.ScreenToLocalTransform().scale(1 / this.contentScaling).translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); scaling = () => this.contentScaling; - screenToLocalTransform = () => this.props.ScreenToLocalTransform().scale(1 / this.scaling()) render() { return (
@@ -664,7 +664,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { -- cgit v1.2.3-70-g09d2 From 37d9d2cad93a08518cec6c95c8bc941dd5f5ddaa Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 14 Dec 2020 02:01:57 -0500 Subject: more changes to ContentScaling to get web/video/image boxes to work with annotation/DocDecorations in contentfitting and freeform views. --- src/client/views/GlobalKeyHandler.ts | 11 +- src/client/views/StyleProvider.tsx | 12 +- src/client/views/collections/TabDocView.tsx | 2 +- src/client/views/linking/LinkMenuItem.tsx | 2 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 3 - .../views/nodes/ContentFittingDocumentView.tsx | 4 +- src/client/views/nodes/DocumentView.tsx | 164 ++++++++------------- src/client/views/nodes/ImageBox.tsx | 33 +++-- src/client/views/nodes/ScreenshotBox.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 4 +- src/client/views/nodes/WebBox.tsx | 4 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- .../formattedText/FormattedTextBoxComment.tsx | 2 +- 13 files changed, 102 insertions(+), 143 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 283419b82..50a8e71f9 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -177,17 +177,10 @@ export class KeyManager { const preventDefault = true; switch (keyname) { + case "ƒ": case "f": const dv = SelectionManager.SelectedDocuments()?.[0]; - if (dv) { - const ex = dv.props.ScreenToLocalTransform().inverse().transformPoint(0, 0)[0]; - const ey = dv.props.ScreenToLocalTransform().inverse().transformPoint(0, 0)[1]; - DocumentView.FloatDoc(dv, ex, ey); - } - // case "n": - // let toggle = MainView.Instance.addMenuToggle.current!; - // toggle.checked = !toggle.checked; - // break; + dv && DocumentView.FloatDoc(dv); } return { diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 386e03f37..d22f34cd0 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -36,6 +36,7 @@ export enum StyleProp { PointerEvents = "pointerEvents", // pointer events for DocumentView -- inherits pointer events if not specified Decorations = "decorations", // additional decoration to display above a DocumentView -- currently only used to display a Lock for making things background HeaderMargin = "headerMargin", // margin at top of documentview, typically for displaying a title -- doc contents will start below that + ShowTitle = "showTitle", // whether to display a title on a Document } function darkScheme() { return BoolCast(CurrentUserUtils.ActiveDashboard?.darkScheme); } @@ -68,10 +69,16 @@ export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentVie // export function DefaultStyleProvider(doc: Opt, props: Opt, property: string): any { const docProps = testDocProps(props); + const selected = property.includes(":selected"); switch (property.split(":")[0]) { case StyleProp.DocContents: return undefined; case StyleProp.WidgetColor: return darkScheme() ? "lightgrey" : "dimgrey"; case StyleProp.Opacity: return Cast(doc?._opacity, "number", Cast(doc?.opacity, "number", null)); + case StyleProp.HideLinkButton: return props?.dontRegisterView || (!selected && (doc?.isLinkButton || doc?.hideLinkButton)); + case StyleProp.ShowTitle: return doc && !doc.presentationTargetDoc && StrCast(doc._showTitle, + !Doc.IsSystem(doc) && doc.type === DocumentType.RTF ? + (doc.author === Doc.CurrentUserEmail ? StrCast(Doc.UserDoc().showTitle) : "author;creationDate") : + undefined); case StyleProp.Color: const backColor = props?.styleProvider?.(doc, props, StyleProp.BackgroundColor) || "black"; const col = Color(backColor).rgb(); @@ -132,15 +139,16 @@ export function DefaultStyleProvider(doc: Opt, props: Opt 0 && + return doc && (isBackground || selected) && (props?.renderDepth || 0) > 0 && ((doc.type === DocumentType.COL && doc._viewType !== CollectionViewType.Pile) || [DocumentType.RTF, DocumentType.IMG, DocumentType.INK].includes(doc.type as DocumentType)) ?
toggleBackground(doc)}> diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 65b793adb..1f00b3a02 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -374,7 +374,7 @@ export class TabDocView extends React.Component { @computed get docView() { TraceMobx(); return !this._activated || !this._document || this._document._viewType === CollectionViewType.Docking ? (null) : - <> console.log(this._view = r))} + <> this._view = r)} renderDepth={0} Document={this._document} DataDoc={!Doc.AreProtosEqual(this._document[DataSym], this._document) ? this._document[DataSym] : undefined} diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index b31c1fcc1..9ecf3d0fb 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -110,7 +110,7 @@ export class LinkMenuItem extends React.Component { onLinkButtonUp = (e: PointerEvent): void => { document.removeEventListener("pointermove", this.onLinkButtonMoved); document.removeEventListener("pointerup", this.onLinkButtonUp); - DocumentView.followLinkClick(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false, false); + DocumentView.followLinkClick(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false); e.stopPropagation(); } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 0e790d8db..bfdb7d98e 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -167,9 +167,6 @@ export class CollectionFreeFormDocumentView extends DocComponent this.docView = r)} - LayoutTemplate={this.props.LayoutTemplate} PanelWidth={this.PanelWidth} PanelHeight={this.PanelHeight} NativeWidth={this.NativeWidth} NativeHeight={this.NativeHeight} ContentScaling={this.NativeScaling} + contentFittingXf={returnTrue} ScreenToLocalTransform={this.screenToLocalTransform} focus={this.props.focus || emptyFunction} bringToFront={emptyFunction} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d847eff00..460e5c2c6 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -4,14 +4,13 @@ import { AclAdmin, AclEdit, AclPrivate, DataSym, Doc, DocListCast, Field, Opt, S import { Document } from '../../../fields/documentSchemas'; import { Id } from '../../../fields/FieldSymbols'; import { InkTool } from '../../../fields/InkField'; -import { RichTextField } from '../../../fields/RichTextField'; import { listSpec } from "../../../fields/Schema"; import { ScriptField } from '../../../fields/ScriptField'; import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types"; import { GetEffectiveAcl, TraceMobx } from '../../../fields/util'; import { MobileInterface } from '../../../mobile/MobileInterface'; import { GestureUtils } from '../../../pen-gestures/GestureUtils'; -import { emptyFunction, OmitKeys, returnFalse, returnOne, returnTrue, returnVal, Utils } from "../../../Utils"; +import { emptyFunction, OmitKeys, returnFalse, returnVal, Utils } from "../../../Utils"; import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils'; import { Docs, DocUtils } from "../../documents/Documents"; import { DocumentType } from '../../documents/DocumentTypes'; @@ -32,18 +31,18 @@ import { ContextMenuProps } from '../ContextMenuItem'; import { DocComponent } from "../DocComponent"; import { EditableView } from '../EditableView'; import { InkStrokeProperties } from '../InkStrokeProperties'; +import { StyleLayers, StyleProp, testDocProps } from "../StyleProvider"; +import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; import { DocumentContentsView } from "./DocumentContentsView"; import { DocumentLinksButton } from './DocumentLinksButton'; import "./DocumentView.scss"; +import { FieldViewProps } from "./FieldView"; import { LinkAnchorBox } from './LinkAnchorBox'; import { LinkDescriptionPopup } from './LinkDescriptionPopup'; import { PresBox } from './PresBox'; import { RadialMenu } from './RadialMenu'; import { TaskCompletionBox } from './TaskCompletedBox'; import React = require("react"); -import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; -import { StyleProp, StyleLayers, testDocProps } from "../StyleProvider"; -import { FieldViewProps } from "./FieldView"; export type DocAfterFocusFunc = (notFocused: boolean) => boolean; export type DocFocusFunc = (doc: Doc, willZoom?: boolean, scale?: number, afterFocus?: DocAfterFocusFunc, dontCenter?: boolean, focused?: boolean) => void; @@ -52,8 +51,8 @@ export interface DocumentViewSharedProps { renderDepth: number; Document: Doc; DataDoc?: Doc; - ContainingCollectionView: Opt; fitContentsToDoc?: boolean; // used by freeformview to fit its contents to its panel. corresponds to _fitToBox property on a Document + ContainingCollectionView: Opt; ContainingCollectionDoc: Opt; CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView; PanelWidth: () => number; @@ -76,6 +75,7 @@ export interface DocumentViewSharedProps { moveDocument?: (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; pinToPres: (document: Doc) => void; ScreenToLocalTransform: () => Transform; + contentFittingXf?: () => boolean; // bcz: need to figure out why this is needed in VideoBox/ImageBox/WebBox to turn off scaling... bringToFront: (doc: Doc, sendToBack?: boolean) => void; onClick?: () => ScriptField; dropAction?: dropActionType; @@ -124,14 +124,19 @@ export class DocumentView extends DocComponent(Docu public get displayName() { return "DocumentView(" + this.props.Document.title + ")"; } // this makes mobx trace() statements more descriptive public get ContentDiv() { return this._mainCont.current; } public get LayoutFieldKey() { return Doc.LayoutFieldKey(this.layoutDoc); } - @computed get ShowTitle() { - return StrCast(this.layoutDoc._showTitle, - !Doc.IsSystem(this.layoutDoc) && this.rootDoc.type === DocumentType.RTF && !this.rootDoc.presentationTargetDoc ? - (this.dataDoc.author === Doc.CurrentUserEmail ? StrCast(Doc.UserDoc().showTitle) : "author;creationDate") : - undefined); - } + @computed get ShowTitle() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.ShowTitle) as (Opt); } @computed get LocalScaling() { return this.props.ContentScaling?.() || 1; } @computed get topMost() { return this.props.renderDepth === 0; } + @computed get hidden() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Hidden); } + @computed get opacity() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Opacity); } + @computed get borderRounding() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow); } + @computed get hideLinkButton() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkButton + (this.isSelected() ? ":selected" : "")); } + @computed get widgetDecorations() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Decorations + (this.isSelected() ? ":selected" : "")); } + @computed get backgroundColor() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor); } + @computed get docContents() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.DocContents); } + @computed get headerMargin() { return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0; } + @computed get pointerEvents() { return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (this.isSelected() ? ":selected" : "")); } + @computed get finalLayoutKey() { return StrCast(this.props.Document.layoutKey, "layout"); } @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.dataDoc, this.props.freezeDimensions)); } @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.dataDoc, this.props.freezeDimensions)); } @computed get onClickHandler() { return this.props.onClick?.() ?? Cast(this.Document.onClick, ScriptField, Cast(this.layoutDoc.onClick, ScriptField, null)); } @@ -206,11 +211,7 @@ export class DocumentView extends DocComponent(Docu @action componentDidMount() { - this._mainCont.current && (this._dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, this.drop.bind(this), this.props.Document)); - this._mainCont.current && (this._gestureEventDisposer = GestureUtils.MakeGestureTarget(this._mainCont.current, this.onGesture.bind(this))); - this._mainCont.current && (this._multiTouchDisposer = InteractionUtils.MakeMultiTouchTarget(this._mainCont.current, this.onTouchStart.bind(this))); - // this._mainCont.current && (this.holdDisposer = InteractionUtils.MakeHoldTouchTarget(this._mainCont.current, this.handle1PointerHoldStart.bind(this))); - + this.componentDidUpdate(); if (!BoolCast(this.rootDoc.dontRegisterView, this.props.dontRegisterView)) { DocumentManager.Instance.AddView(this); } @@ -237,9 +238,7 @@ export class DocumentView extends DocComponent(Docu this._multiTouchDisposer?.(); this._holdDisposer?.(); Doc.UnBrushDoc(this.props.Document); - if (!this.props.dontRegisterView) { - DocumentManager.Instance.RemoveView(this); - } + !this.props.dontRegisterView && DocumentManager.Instance.RemoveView(this); } startDragging(x: number, y: number, dropAction: dropActionType) { @@ -257,13 +256,13 @@ export class DocumentView extends DocComponent(Docu } @undoBatch @action - public static FloatDoc(topDocView: DocumentView, x?: number, y?: number) { - const topDoc = topDocView.props.Document; - const container = topDocView.props.ContainingCollectionView; - if (container) { + public static FloatDoc(topDocView: DocumentView) { + const { Document: topDoc, ContainingCollectionView: container } = topDocView.props; + const screenXf = container?.screenToLocalTransform(); + if (screenXf) { SelectionManager.DeselectAll(); - if (topDoc.z && (x === undefined && y === undefined)) { - const spt = container.screenToLocalTransform().inverse().transformPoint(NumCast(topDoc.x), NumCast(topDoc.y)); + if (topDoc.z) { + const spt = screenXf.inverse().transformPoint(NumCast(topDoc.x), NumCast(topDoc.y)); topDoc.z = 0; topDoc.x = spt[0]; topDoc.y = spt[1]; @@ -271,7 +270,7 @@ export class DocumentView extends DocComponent(Docu topDocView.props.addDocTab(topDoc, "inParent"); } else { const spt = topDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - const fpt = container.screenToLocalTransform().transformPoint(x !== undefined ? x : spt[0], y !== undefined ? y : spt[1]); + const fpt = screenXf.transformPoint(spt[0], spt[1]); topDoc.z = 1; topDoc.x = fpt[0]; topDoc.y = fpt[1]; @@ -281,28 +280,18 @@ export class DocumentView extends DocComponent(Docu } onKeyDown = (e: React.KeyboardEvent) => { - if (this.rootDoc._singleLine && ((e.key === "Backspace" && this.dataDoc.text && !(this.dataDoc.text as RichTextField)?.Text) || ["Tab", "Enter"].includes(e.key))) { - return; - } - if (e.altKey && !(e.nativeEvent as any).StopPropagationForReal) { - (e.nativeEvent as any).StopPropagationForReal = true; // e.stopPropagation() doesn't seem to work... + if (e.altKey && !e.nativeEvent.cancelBubble) { e.stopPropagation(); e.preventDefault(); if (e.key === "†" || e.key === "t") { if (!StrCast(this.layoutDoc._showTitle)) this.layoutDoc._showTitle = "title"; if (!this._titleRef.current) setTimeout(() => this._titleRef.current?.setIsFocused(true), 0); else if (!this._titleRef.current.setIsFocused(true)) { // if focus didn't change, focus on interior text... - { - this._titleRef.current?.setIsFocused(false); - const any = (this._mainCont.current?.getElementsByClassName("ProseMirror")?.[0] as any); - any.keeplocation = true; - any?.focus(); - } + this._titleRef.current?.setIsFocused(false); + const any = (this._mainCont.current?.getElementsByClassName("ProseMirror")?.[0] as any); + any.keeplocation = true; + any?.focus(); } - } else if (e.key === "f") { - const ex = (e.nativeEvent.target! as any).getBoundingClientRect().left; - const ey = (e.nativeEvent.target! as any).getBoundingClientRect().top; - DocumentView.FloatDoc(this, ex, ey); } } } @@ -363,13 +352,12 @@ export class DocumentView extends DocComponent(Docu } else if (this.Document["onClick-rawScript"] && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes("ScriptingBox")) {// bcz: hack? don't edit a script if you're clicking on a scripting box itself this.props.addDocTab(DocUtils.makeCustomViewClicked(Doc.MakeAlias(this.props.Document), undefined, "onClick"), "add:right"); } else if (this.allLinks && this.Document.isLinkButton && !e.shiftKey && !e.ctrlKey) { - this.allLinks.length && DocumentView.followLinkClick(undefined, this.props.Document, this.props, e.shiftKey, e.altKey); + this.allLinks.length && DocumentView.followLinkClick(undefined, this.props.Document, this.props, e.altKey); } else { if ((this.layoutDoc.onDragStart || this.props.Document.rootDocument) && !(e.ctrlKey || e.button > 0)) { // onDragStart implies a button doc that we don't want to select when clicking. RootDocument & isTemplaetForField implies we're clicking on part of a template instance and we want to select the whole template, not the part stopPropagate = false; // don't stop propagation for field templates -- want the selection to propagate up to the root document of the template } else { this.select(e.ctrlKey || e.shiftKey); - //SelectionManager.SelectDoc(this, e.ctrlKey || e.shiftKey); } preventDefault = false; } @@ -385,7 +373,7 @@ export class DocumentView extends DocComponent(Docu focus: DocFocusFunc, addDocTab: (doc: Doc, where: string) => boolean, ContainingCollectionDoc?: Doc - }, shiftKey: boolean, altKey: boolean) => { + }, altKey: boolean) => { const batch = UndoManager.StartBatch("follow link click"); // open up target if it's not already in view ... const createViewFunc = (doc: Doc, followLoc: string, finished: Opt<() => void>) => { @@ -463,9 +451,8 @@ export class DocumentView extends DocComponent(Docu public iconify() { const layoutKey = Cast(this.props.Document.layoutKey, "string", null); - const collapse = layoutKey !== "layout_icon"; - if (collapse) { - this.switchViews(collapse, "icon"); + if (layoutKey !== "layout_icon") { + this.switchViews(true, "icon"); if (layoutKey && layoutKey !== "layout" && layoutKey !== "layout_icon") this.props.Document.deiconifyLayout = layoutKey.replace("layout_", ""); } else { const deiconifyLayout = Cast(this.props.Document.deiconifyLayout, "string", null); @@ -668,10 +655,9 @@ export class DocumentView extends DocComponent(Docu drop = async (e: Event, de: DragManager.DropEvent) => { if (this.props.LayoutTemplateString) return; if (this.props.Document === CurrentUserUtils.ActiveDashboard) { - if ((e.target as any)?.closest?.("*.lm_content")) { - alert("You can't perform this move most likely because you don't have permission to modify the destination."); - } - else alert("linking to document tabs not yet supported. Drop link on document content."); + alert((e.target as any)?.closest?.("*.lm_content") ? + "You can't perform this move most likely because you don't have permission to modify the destination." : + "linking to document tabs not yet supported. Drop link on document content."); return; } const makeLink = action((linkDoc: Doc) => { @@ -717,13 +703,11 @@ export class DocumentView extends DocComponent(Docu } @undoBatch - @action toggleNativeDimensions = () => { Doc.toggleNativeDimensions(this.layoutDoc, this.LocalScaling, this.props.PanelWidth(), this.props.PanelHeight()); } @undoBatch - @action toggleLockPosition = (): void => { this.Document.lockedPosition = this.Document.lockedPosition ? undefined : true; } @@ -741,7 +725,6 @@ export class DocumentView extends DocComponent(Docu this.Document.isLinkButton = true; } - @action onCopy = () => { const alias = Doc.MakeAlias(this.props.Document); @@ -876,34 +859,20 @@ export class DocumentView extends DocComponent(Docu }); } - // does Document set a layout prop - // does Document set a layout prop - setsLayoutProp = (prop: string) => this.props.Document[prop] !== this.props.Document["default" + prop[0].toUpperCase() + prop.slice(1)] && this.props.Document["default" + prop[0].toUpperCase() + prop.slice(1)]; - // get the a layout prop by first choosing the prop from Document, then falling back to the layout doc otherwise. - getLayoutPropStr = (prop: string) => StrCast(this.setsLayoutProp(prop) ? this.props.Document[prop] : this.layoutDoc[prop]); - getLayoutPropNum = (prop: string) => NumCast(this.setsLayoutProp(prop) ? this.props.Document[prop] : this.layoutDoc[prop]); - isSelected = (outsideReaction?: boolean) => SelectionManager.IsSelected(this, outsideReaction); select = (ctrlPressed: boolean) => { SelectionManager.SelectDoc(this, ctrlPressed); }; - - @computed get headerMargin() { - return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0; - } - - @computed get finalLayoutKey() { - return StrCast(this.props.Document.layoutKey, "layout"); - } rootSelected = (outsideReaction?: boolean) => { return this.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false; } + panelHeight = () => this.props.PanelHeight() - this.headerMargin; - @computed.struct get linkOffset() { return this.topMost ? [0, undefined, undefined, 10] : [-15, undefined, undefined, -20]; } - @observable contentsActive: () => boolean = returnFalse; - @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive; parentActive = (outsideReaction: boolean) => this.props.layerProvider?.(this.layoutDoc) === false ? this.props.parentActive(outsideReaction) : false; screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin); contentScaling = () => !this.props.Document._fitWidth ? this.props.PanelWidth() / (this.props.NativeWidth?.() || this.props.PanelWidth()) : this.LocalScaling; + @observable contentsActive: () => boolean = returnFalse; + @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive; + @computed get contents() { TraceMobx(); return (
(Docu NativeHeight={this.NativeHeight} PanelWidth={this.props.PanelWidth} PanelHeight={this.props.PanelHeight} + contentFittingXf={this.props.contentFittingXf} scaling={this.contentScaling} layerProvider={this.props.layerProvider} styleProvider={this.props.styleProvider} @@ -952,8 +922,7 @@ export class DocumentView extends DocComponent(Docu onClick={this.onClickFunc} layoutKey={this.finalLayoutKey} /> {this.layoutDoc.hideAllLinks ? (null) : this.allAnchors} - {this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkButton) || (!this.isSelected() && (this.layoutDoc.isLinkButton || this.layoutDoc.hideLinkButton)) || this.props.dontRegisterView ? (null) : - } + {this.hideLinkButton ? (null) : }
); } @@ -971,7 +940,7 @@ export class DocumentView extends DocComponent(Docu makeLink = () => this._link; // pass the link placeholde to child views so they can react to make a specialized anchor. This is essentially a function call to the descendants since the value of the _link variable will immediately get set back to undefined. @undoBatch - hideLinkAnchor = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => flg && (doc.hidden = true), true) + hideLinkAnchor = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && (doc.hidden = true), true) anchorPanelWidth = () => this.props.PanelWidth() || 1; anchorPanelHeight = () => this.props.PanelHeight() || 1; anchorStyleProvider = (doc: Opt, props: Opt, property: string): any => { @@ -993,7 +962,7 @@ export class DocumentView extends DocComponent(Docu @computed get allLinks() { TraceMobx(); return LinkManager.Instance.getAllRelatedLinks(this.rootDoc); } @computed get allAnchors() { TraceMobx(); - if (this.props.LayoutTemplateString?.includes("LinkAnchorBox")) return null; + if (this.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) return null; if (this.layoutDoc.presBox || // presentationbox nodes this.rootDoc.type === DocumentType.LINK || this.props.dontRegisterView) {// view that are not registered @@ -1020,6 +989,7 @@ export class DocumentView extends DocComponent(Docu } @computed get innards() { TraceMobx(); + const showTitle = this.ShowTitle; const showTitleHover = StrCast(this.layoutDoc._showTitleHover); const showCaption = StrCast(this.layoutDoc._showCaption); const captionView = (!showCaption ? (null) : @@ -1036,7 +1006,7 @@ export class DocumentView extends DocComponent(Docu onClick={this.onClickFunc} layoutKey={this.finalLayoutKey} />
); - const titleView = (!this.ShowTitle ? (null) : + const titleView = (!showTitle ? (null) :
(Docu pointerEvents: this.onClickHandler || this.Document.ignoreClick ? "none" : undefined, }}> field + ":" + (this.dataDoc || this.props.Document)[field]?.toString()).join(" ")} + contents={showTitle === "title" ? StrCast((this.dataDoc || this.props.Document).title) : showTitle.split(";").map(field => field + ":" + (this.dataDoc || this.props.Document)[field]?.toString()).join(" ")} display={"block"} fontSize={10} - GetValue={() => Field.toString((this.dataDoc || this.props.Document)[this.ShowTitle.split(";")[0]] as any as Field)} + GetValue={() => Field.toString((this.dataDoc || this.props.Document)[showTitle.split(";")[0]] as any as Field)} SetValue={undoBatch((value: string) => { - this.ShowTitle.includes("Date") ? true : (Doc.GetProto(this.dataDoc || this.props.Document)[this.ShowTitle] = value) ? true : true; + showTitle.includes("Date") ? true : (Doc.GetProto(this.dataDoc || this.props.Document)[showTitle] = value) ? true : true; })} />
); - return this.props.hideTitle || (!this.ShowTitle && !showCaption) ? + return this.props.hideTitle || (!showTitle && !showCaption) ? this.contents :
{!this.headerMargin ? <> {this.contents} {titleView} : <> {titleView} {this.contents} } {captionView}
; } - @computed get pointerEvents() { - if (this.props.pointerEvents === "none") return "none"; - return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (this.isSelected() ? ":selected" : "")); - } @undoBatch @action setCustomView = (custom: boolean, layout: string): void => { Doc.setNativeView(this.props.Document); - if (custom) { - DocUtils.makeCustomViewClicked(this.props.Document, Docs.Create.StackingDocument, layout, undefined); - } + custom && DocUtils.makeCustomViewClicked(this.props.Document, Docs.Create.StackingDocument, layout, undefined); } switchViews = action((custom: boolean, view: string) => { @@ -1084,15 +1048,13 @@ export class DocumentView extends DocComponent(Docu @computed get renderDoc() { TraceMobx(); - if (!(this.props.Document instanceof Doc)) return (null); - if (GetEffectiveAcl(this.props.Document[DataSym]) === AclPrivate) return (null); - if (this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Hidden)) return null; - return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.DocContents) ?? + if (!(this.props.Document instanceof Doc) || GetEffectiveAcl(this.props.Document[DataSym]) === AclPrivate || this.hidden) return null; + return this.docContents ??
(Docu }}> {this.innards} {this.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ?
: (null)} - {this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Decorations + (this.isSelected() ? ":selected" : "")) || (null)} + {this.widgetDecorations ?? null}
; } render() { - const borderRounding = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow); const highlightIndex = this.props.LayoutTemplateString ? (Doc.IsHighlighted(this.props.Document) ? 6 : 0) : Doc.isBrushedHighlightedDegree(this.props.Document); // bcz: Argh!! need to identify a tree view doc better than a LayoutTemlatString const highlightColor = (CurrentUserUtils.ActiveDashboard?.darkScheme ? ["transparent", "#65350c", "#65350c", "yellow", "magenta", "cyan", "orange"] : @@ -1130,11 +1091,10 @@ export class DocumentView extends DocComponent(Docu })} style={{ pointerEvents: this.pointerEvents, - outline: highlighting && !borderRounding ? `${highlightColor} ${highlightStyle} ${highlightIndex}px` : "solid 0px", - border: highlighting && borderRounding && highlightStyle === "dashed" ? `${highlightStyle} ${highlightColor} ${highlightIndex}px` : undefined, - boxShadow: highlighting && borderRounding && highlightStyle !== "dashed" ? `0 0 0 ${highlightIndex}px ${highlightColor}` : - this.Document.isLinkButton && !this.props.dontRegisterView && !this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkButton) ? - StrCast(this.layoutDoc._linkButtonShadow, "lightblue 0em 0em 1em") : + outline: highlighting && !this.borderRounding ? `${highlightColor} ${highlightStyle} ${highlightIndex}px` : "solid 0px", + border: highlighting && this.borderRounding && highlightStyle === "dashed" ? `${highlightStyle} ${highlightColor} ${highlightIndex}px` : undefined, + boxShadow: highlighting && this.borderRounding && highlightStyle !== "dashed" ? `0 0 0 ${highlightIndex}px ${highlightColor}` : + this.Document.isLinkButton && !this.hideLinkButton ? StrCast(this.layoutDoc._linkButtonShadow, "lightblue 0em 0em 1em") : this.props.Document.isTemplateForField ? "black 0.2vw 0.2vw 0.8vw" : undefined, }} diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 374f964e3..5fba273fb 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -67,7 +67,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent { this._dropDisposer?.(); @@ -400,9 +400,10 @@ export class ImageBox extends ViewBoxAnnotatableComponent this.props.ScreenToLocalTransform().translate(0, -this.ycenter / this.contentScaling); - + scaling = () => this.contentScaling; + screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.ycenter).scale(1 / this.contentScaling); contentFunc = () => [this.content]; + render() { TraceMobx(); return (
+ whenActiveChanged={this.whenActiveChanged}> {this.contentFunc}
); diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index 456de7ede..4956b315d 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -177,7 +177,7 @@ export class ScreenshotBox extends ViewBoxBaseComponent this.contentScaling; screenToLocalTransform = () => this.props.ScreenToLocalTransform().scale(1 / this.scaling()); contentFunc = () => [this.youtubeVideoId ? this.youtubeContent : this.content]; @@ -434,7 +434,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent this._marqueeY; marqueeing = () => this._marqueeing; @computed get contentScaling() { return this.props.scaling?.() || 1; } - scrollXf = () => this.props.ScreenToLocalTransform().scale(1 / this.contentScaling).translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); + scrollXf = () => this.props.ScreenToLocalTransform().scale(this.props.contentFittingXf?.() ? 1 : 1 / this.contentScaling).translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); scaling = () => this.contentScaling; render() { return (
@@ -700,7 +700,7 @@ export class WebBox extends ViewBoxAnnotatableComponent diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index c6036330d..584674a02 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1627,7 +1627,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp fitContentsToDoc: fitToBox, select: emptyFunction, active: this.annotationsActive, - ContentScaling: this.sidebarContentScaling, + scaling: this.sidebarContentScaling, whenActiveChanged: this.whenActiveChanged, removeDocument: this.removeDocument, moveDocument: this.moveDocument, diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index d517dba1e..a80314f74 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -117,7 +117,7 @@ export class FormattedTextBoxComment { textBox.props.addDocTab(linkDoc, e.ctrlKey ? "add" : "add:right"); } else { const target = LinkManager.getOppositeAnchor(linkDoc, textBox.dataDoc); - target && DocumentView.followLinkClick(linkDoc, textBox.dataDoc, textBox.props, e.shiftKey, e.altKey); + target && DocumentView.followLinkClick(linkDoc, textBox.dataDoc, textBox.props, e.altKey); } } } -- cgit v1.2.3-70-g09d2 From 8d9b38b64e61f2afb2b698004bcef7017d454078 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 14 Dec 2020 14:22:44 -0500 Subject: got rid of fitDocToPanel. made collectionFreeFormDocView always use a ContentFittingDocView. fixed up web box selections. --- src/client/util/DragManager.ts | 33 ++++++++------- src/client/views/PropertiesView.tsx | 1 - .../views/collections/CollectionSchemaView.tsx | 1 - .../views/collections/CollectionStackingView.tsx | 1 - src/client/views/collections/SchemaTable.tsx | 1 - src/client/views/collections/TreeView.tsx | 1 - .../collectionFreeForm/CollectionFreeFormView.tsx | 2 - .../collectionGrid/CollectionGridView.tsx | 1 - .../CollectionMulticolumnView.tsx | 1 - .../CollectionMultirowView.tsx | 1 - .../views/nodes/CollectionFreeFormDocumentView.tsx | 18 +++------ .../views/nodes/ContentFittingDocumentView.tsx | 2 +- src/client/views/nodes/DocHolderBox.tsx | 2 - src/client/views/nodes/DocumentContentsView.tsx | 1 - src/client/views/nodes/DocumentView.tsx | 7 +--- src/client/views/nodes/ImageBox.tsx | 18 ++++----- src/client/views/nodes/LinkDocPreview.tsx | 1 - src/client/views/nodes/VideoBox.tsx | 13 +++--- src/client/views/nodes/WebBox.scss | 1 + src/client/views/nodes/WebBox.tsx | 47 +++++++++++----------- .../views/nodes/formattedText/DashDocView.tsx | 1 - .../formattedText/FormattedTextBoxComment.tsx | 1 - .../views/nodes/formattedText/RichTextSchema.tsx | 1 - .../views/presentationview/PresElementBox.tsx | 1 - 24 files changed, 63 insertions(+), 94 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index e3019d288..db371416c 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -342,12 +342,11 @@ export namespace DragManager { dragLabel.style.zIndex = "100001"; dragLabel.style.fontSize = "10px"; dragLabel.style.position = "absolute"; - // dragLabel.innerText = "press 'a' to embed on drop"; // bcz: need to move this to a status bar + dragLabel.innerText = "press 'a' to embed on drop"; // bcz: need to move this to a status bar dragDiv.appendChild(dragLabel); DragManager.Root().appendChild(dragDiv); } dragDiv.hidden = false; - dragLabel.style.display = ""; const scaleXs: number[] = []; const scaleYs: number[] = []; const xs: number[] = []; @@ -416,13 +415,22 @@ export namespace DragManager { }); const hideSource = options?.hideSource ? true : false; - eles.forEach(ele => { - if (ele.parentElement && ele.parentElement?.className === dragData.dragDivName) { - ele.parentElement.hidden = hideSource; - } else { - ele.hidden = hideSource; - } - }); + const hideDragShowOriginalElements = (hide: boolean) => { + dragLabel.style.display = hide ? "" : "none"; + !hide && dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement)); + eles.forEach(ele => { + if (ele.parentElement?.className === dragData.dragDivName) { + ele.parentElement!.hidden = hide; + } else if (ele.parentElement?.parentElement?.className === dragData.dragDivName) { + ele.parentElement!.parentElement!.hidden = hide; + } else if (ele.parentElement?.parentElement?.parentElement?.className === dragData.dragDivName) { + ele.parentElement!.parentElement!.parentElement!.hidden = hide; + } else { + ele.hidden = hide; + } + }); + }; + hideDragShowOriginalElements(hideSource); SnappingManager.SetIsDragging(true); let lastX = downX; @@ -517,13 +525,8 @@ export namespace DragManager { ); }; - const hideDragShowOriginalElements = () => { - dragLabel.style.display = "none"; - dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement)); - eles.map(ele => ele.parentElement && ele.parentElement?.className === dragData.dragDivName ? (ele.hidden = ele.parentElement.hidden = false) : (ele.hidden = false)); - }; const endDrag = action(() => { - hideDragShowOriginalElements(); + hideDragShowOriginalElements(false); document.removeEventListener("pointermove", moveHandler, true); document.removeEventListener("pointerup", upHandler); SnappingManager.SetIsDragging(false); diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index fdc470103..46d3b201b 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -271,7 +271,6 @@ export class PropertiesView extends React.Component { renderDepth={1} rootSelected={returnFalse} styleProvider={DefaultStyleProvider} - fitDocToPanel={true} freezeDimensions={true} dontCenter={"y"} NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index b2aa0d6ea..81ee16f63 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -401,7 +401,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { { ref="overlay"> { PanelHeight={panelHeight} NativeWidth={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} NativeHeight={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined} - fitDocToPanel={!asText && this.isCollectionDoc !== undefined} fitContentsToDoc={true} hideTitle={asText} LayoutTemplateString={asText ? FormattedTextBox.LayoutString("text") : undefined} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 740fc0658..bda3757e3 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -998,7 +998,6 @@ export class CollectionFreeFormView extends CollectionSubView, bounds: this.childDataProvider(entry[1].pair.layout, entry[1].replica) diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 55467696d..093a4c770 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -168,7 +168,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { PanelWidth={width} PanelHeight={height} freezeDimensions={true} - fitDocToPanel={true} ScreenToLocalTransform={dxf} onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index e3c6ed3ea..fe1595644 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -223,7 +223,6 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - fitDocToPanel={false} rootSelected={this.rootSelected} dropAction={StrCast(this.props.Document.childDropAction) as dropActionType} onClick={this.onChildClickHandler} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index b634e2307..ca712b521 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -223,7 +223,6 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - fitDocToPanel={false} rootSelected={this.rootSelected} dropAction={StrCast(this.props.Document.childDropAction) as dropActionType} onClick={this.onChildClickHandler} diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index bfdb7d98e..667962889 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -7,8 +7,7 @@ import { listSpec } from "../../../fields/Schema"; import { ComputedField } from "../../../fields/ScriptField"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; -import { numberRange, returnVal } from "../../../Utils"; -import { DocumentType } from "../../documents/DocumentTypes"; +import { numberRange, returnVal, returnOne } from "../../../Utils"; import { Transform } from "../../util/Transform"; import { DocComponent } from "../DocComponent"; import { InkingStroke } from "../InkingStroke"; @@ -27,7 +26,6 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { highlight?: boolean; jitterRotation: number; dataTransition?: string; - fitDocToPanel?: boolean; replica: string; } @@ -58,10 +56,7 @@ export class CollectionFreeFormDocumentView extends DocComponent, property: string) => { if (property === StyleProp.Opacity && doc === this.layoutDoc) return this.Opacity; // only change the opacity for this specific document, not its children @@ -144,12 +139,11 @@ export class CollectionFreeFormDocumentView extends DocComponent (this.sizeProvider?.width || this.props.PanelWidth?.()); panelHeight = () => (this.sizeProvider?.height || this.props.PanelHeight?.()); - screenToLocalTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y).scale(1 / this.Scaling()); + screenToLocalTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y); focusDoc = (doc: Doc) => this.props.focus(doc, false); NativeWidth = () => this.nativeWidth; NativeHeight = () => this.nativeHeight; returnThis = () => this; - Scaling = () => this.Document._fitWidth ? this.props.PanelWidth() / this.NativeWidth() : 1; render() { TraceMobx(); const backgroundColor = this.props.styleProvider?.(this.Document, this.props, StyleProp.BackgroundColor); @@ -161,7 +155,7 @@ export class CollectionFreeFormDocumentView extends DocComponent
} - {this.props.fitDocToPanel ? - this._contentView = r)} /> : - } + this._contentView = r)} />
; } } diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index 5111fa041..db9366390 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -31,6 +31,7 @@ export class ContentFittingDocumentView extends React.Component boolean) => boolean; pinToPres: (document: Doc) => void; ScreenToLocalTransform: () => Transform; - contentFittingXf?: () => boolean; // bcz: need to figure out why this is needed in VideoBox/ImageBox/WebBox to turn off scaling... bringToFront: (doc: Doc, sendToBack?: boolean) => void; onClick?: () => ScriptField; dropAction?: dropActionType; @@ -88,7 +87,6 @@ export interface DocumentViewProps extends DocumentViewSharedProps { // properties specific to DocumentViews but not to FieldView freezeDimensions?: boolean; hideTitle?: boolean; // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings - fitDocToPanel?: boolean; // makes the document view fit the panel available to it (if it has native dimensions, then only one dimension will be fit) treeViewDoc?: Doc; dragDivName?: string; contentPointerEvents?: string; // pointer events allowed for content of a document view. eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents @@ -868,12 +866,13 @@ export class DocumentView extends DocComponent(Docu panelHeight = () => this.props.PanelHeight() - this.headerMargin; parentActive = (outsideReaction: boolean) => this.props.layerProvider?.(this.layoutDoc) === false ? this.props.parentActive(outsideReaction) : false; screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin); - contentScaling = () => !this.props.Document._fitWidth ? this.props.PanelWidth() / (this.props.NativeWidth?.() || this.props.PanelWidth()) : this.LocalScaling; + contentScaling = () => this.LocalScaling; @observable contentsActive: () => boolean = returnFalse; @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive; @computed get contents() { + console.log(this.props.Document.title + " " + this.LocalScaling + " " + this.contentScaling()) TraceMobx(); return (
(Docu NativeHeight={this.NativeHeight} PanelWidth={this.props.PanelWidth} PanelHeight={this.props.PanelHeight} - contentFittingXf={this.props.contentFittingXf} scaling={this.contentScaling} layerProvider={this.props.layerProvider} styleProvider={this.props.styleProvider} @@ -906,7 +904,6 @@ export class DocumentView extends DocComponent(Docu makeLink={this.makeLink} focus={this.props.focus} dontRegisterView={this.props.dontRegisterView} - fitDocToPanel={this.props.fitDocToPanel} addDocument={this.props.addDocument} removeDocument={this.props.removeDocument} moveDocument={this.props.moveDocument} diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 5fba273fb..403b12f0d 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -67,8 +67,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent { this._dropDisposer?.(); ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.props.Document)); @@ -264,7 +262,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent { const remoteUrl = this.dataDoc.googlePhotosUrl; return !remoteUrl ? (null) : ( window.open(remoteUrl)} @@ -289,7 +287,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent { const { dataDoc } = this; @@ -400,26 +398,24 @@ export class ImageBox extends ViewBoxAnnotatableComponent this.contentScaling; - screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.ycenter).scale(1 / this.contentScaling); + screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.ycenter); contentFunc = () => [this.content]; render() { TraceMobx(); return (
{ : this.contentScaling; - screenToLocalTransform = () => this.props.ScreenToLocalTransform().scale(1 / this.scaling()); + screenToLocalTransform = () => this.props.ScreenToLocalTransform(); contentFunc = () => [this.youtubeVideoId ? this.youtubeContent : this.content]; render() { return (
{view}
@@ -646,26 +650,23 @@ export class WebBox extends ViewBoxAnnotatableComponent this._marqueeX; marqueeY = () => this._marqueeY; marqueeing = () => this._marqueeing; - @computed get contentScaling() { return this.props.scaling?.() || 1; } - scrollXf = () => this.props.ScreenToLocalTransform().scale(this.props.contentFittingXf?.() ? 1 : 1 / this.contentScaling).translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); - scaling = () => this.contentScaling; + scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { + const inactiveLayer = this.props.layerProvider?.(this.layoutDoc) === false; + const scale = this.props.scaling?.() || 1; + console.log("Scale = " + scale); return (
{this.content}
{ const target = this._outerRef.current; @@ -687,22 +688,22 @@ export class WebBox extends ViewBoxAnnotatableComponent
+ setPreviewCursor={this.setPreviewCursor} + select={emptyFunction} + active={this.active} + whenActiveChanged={this.whenActiveChanged}>
diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx index 04e94391f..c15eb2dac 100644 --- a/src/client/views/nodes/formattedText/DashDocView.tsx +++ b/src/client/views/nodes/formattedText/DashDocView.tsx @@ -228,7 +228,6 @@ export class DashDocView extends React.Component { Date: Mon, 14 Dec 2020 18:46:22 -0500 Subject: renamed ContentFittingDocumentView as DocumentView. Renamed DocmentView as DocumentViewInternal --- src/client/util/DictationManager.ts | 14 +- src/client/util/DocumentManager.ts | 4 +- src/client/util/DragManager.ts | 13 +- src/client/util/SelectionManager.ts | 6 +- src/client/util/SharingManager.tsx | 12 +- src/client/views/.DS_Store | Bin 10244 -> 10244 bytes src/client/views/DocumentDecorations.tsx | 60 ++-- src/client/views/GestureOverlay.tsx | 8 +- src/client/views/GlobalKeyHandler.ts | 2 +- src/client/views/MainView.tsx | 6 +- src/client/views/OverlayView.tsx | 14 +- src/client/views/Palette.tsx | 2 +- src/client/views/PropertiesButtons.tsx | 16 +- src/client/views/PropertiesView.tsx | 13 +- src/client/views/TemplateMenu.tsx | 24 +- .../views/collections/CollectionCarousel3DView.tsx | 6 +- .../views/collections/CollectionCarouselView.tsx | 21 +- .../views/collections/CollectionLinearView.tsx | 6 +- src/client/views/collections/CollectionMenu.tsx | 2 +- .../views/collections/CollectionSchemaView.tsx | 8 +- .../views/collections/CollectionStackingView.tsx | 17 +- .../views/collections/CollectionTreeView.tsx | 4 +- src/client/views/collections/SchemaTable.tsx | 20 +- src/client/views/collections/TabDocView.tsx | 22 +- src/client/views/collections/TreeView.tsx | 15 +- .../CollectionFreeFormLinkView.tsx | 12 +- .../CollectionFreeFormLinksView.tsx | 7 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 12 +- .../collectionGrid/CollectionGridView.tsx | 6 +- .../CollectionMulticolumnView.tsx | 10 +- .../CollectionMultirowView.tsx | 24 +- src/client/views/linking/LinkMenu.tsx | 7 +- src/client/views/linking/LinkMenuItem.tsx | 4 +- src/client/views/nodes/AudioBox.tsx | 4 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 18 +- src/client/views/nodes/ComparisonBox.tsx | 17 +- .../views/nodes/ContentFittingDocumentView.scss | 25 -- .../views/nodes/ContentFittingDocumentView.tsx | 86 ----- src/client/views/nodes/DocHolderBox.tsx | 9 +- src/client/views/nodes/DocumentContentsView.tsx | 2 +- src/client/views/nodes/DocumentIcon.tsx | 5 +- src/client/views/nodes/DocumentView.scss | 23 ++ src/client/views/nodes/DocumentView.tsx | 390 +++++++++++++-------- src/client/views/nodes/LinkDocPreview.tsx | 9 +- src/client/views/nodes/WebBox.tsx | 1 - .../views/nodes/formattedText/DashDocView.tsx | 10 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 3 +- .../formattedText/FormattedTextBoxComment.tsx | 7 +- .../views/nodes/formattedText/RichTextSchema.tsx | 10 +- .../views/presentationview/PresElementBox.tsx | 29 +- src/fields/Doc.ts | 19 +- src/mobile/AudioUpload.tsx | 28 +- src/mobile/MobileInterface.tsx | 1 - 53 files changed, 533 insertions(+), 560 deletions(-) delete mode 100644 src/client/views/nodes/ContentFittingDocumentView.scss delete mode 100644 src/client/views/nodes/ContentFittingDocumentView.tsx (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts index 231e1fa8d..34e274699 100644 --- a/src/client/util/DictationManager.ts +++ b/src/client/util/DictationManager.ts @@ -1,17 +1,17 @@ -import { SelectionManager } from "./SelectionManager"; -import { DocumentView } from "../views/nodes/DocumentView"; -import { UndoManager } from "./UndoManager"; import * as interpreter from "words-to-numbers"; -import { DocumentType } from "../documents/DocumentTypes"; import { Doc, Opt } from "../../fields/Doc"; import { List } from "../../fields/List"; -import { Docs } from "../documents/Documents"; -import { Cast, CastCtor } from "../../fields/Types"; +import { RichTextField } from "../../fields/RichTextField"; import { listSpec } from "../../fields/Schema"; +import { Cast, CastCtor } from "../../fields/Types"; import { AudioField, ImageField } from "../../fields/URLField"; import { Utils } from "../../Utils"; -import { RichTextField } from "../../fields/RichTextField"; +import { Docs } from "../documents/Documents"; +import { DocumentType } from "../documents/DocumentTypes"; import { DictationOverlay } from "../views/DictationOverlay"; +import { DocumentView } from "../views/nodes/DocumentView"; +import { SelectionManager } from "./SelectionManager"; +import { UndoManager } from "./UndoManager"; /** * This namespace provides a singleton instance of a manager that diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index eaccbdb63..6258cc0ab 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -7,10 +7,10 @@ import { DocumentType } from '../documents/DocumentTypes'; import { CollectionDockingView } from '../views/collections/CollectionDockingView'; import { CollectionView } from '../views/collections/CollectionView'; import { DocumentView } from '../views/nodes/DocumentView'; +import { FormattedTextBoxComment } from '../views/nodes/formattedText/FormattedTextBoxComment'; +import { LinkDocPreview } from '../views/nodes/LinkDocPreview'; import { LinkManager } from './LinkManager'; import { Scripting } from './Scripting'; -import { LinkDocPreview } from '../views/nodes/LinkDocPreview'; -import { FormattedTextBoxComment } from '../views/nodes/formattedText/FormattedTextBoxComment'; export type CreateViewFunc = (doc: Doc, followLinkLocation: string, finished?: () => void) => void; diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index db371416c..4704d9e71 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -125,7 +125,6 @@ export namespace DragManager { } draggedDocuments: Doc[]; droppedDocuments: Doc[]; - dragDivName?: string; treeViewDoc?: Doc; offset: number[]; canEmbed?: boolean; @@ -418,17 +417,7 @@ export namespace DragManager { const hideDragShowOriginalElements = (hide: boolean) => { dragLabel.style.display = hide ? "" : "none"; !hide && dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement)); - eles.forEach(ele => { - if (ele.parentElement?.className === dragData.dragDivName) { - ele.parentElement!.hidden = hide; - } else if (ele.parentElement?.parentElement?.className === dragData.dragDivName) { - ele.parentElement!.parentElement!.hidden = hide; - } else if (ele.parentElement?.parentElement?.parentElement?.className === dragData.dragDivName) { - ele.parentElement!.parentElement!.parentElement!.hidden = hide; - } else { - ele.hidden = hide; - } - }); + eles.forEach(ele => ele.hidden = hide); }; hideDragShowOriginalElements(hideSource); diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 34e88c7b0..728a4bce1 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -1,9 +1,9 @@ -import { observable, action, runInAction, ObservableMap } from "mobx"; -import { Doc, Opt } from "../../fields/Doc"; -import { DocumentView } from "../views/nodes/DocumentView"; +import { action, observable, ObservableMap } from "mobx"; import { computedFn } from "mobx-utils"; +import { Doc, Opt } from "../../fields/Doc"; import { CollectionSchemaView } from "../views/collections/CollectionSchemaView"; import { CollectionViewType } from "../views/collections/CollectionView"; +import { DocumentView } from "../views/nodes/DocumentView"; export namespace SelectionManager { diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index 062852e36..646926bb7 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -1,13 +1,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, observable, runInAction, computed } from "mobx"; +import { intersection } from "lodash"; +import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; import * as React from "react"; import Select from "react-select"; import * as RequestPromise from "request-promise"; -import { AclAdmin, AclPrivate, DataSym, Doc, DocListCast, Opt, AclSym, AclAddonly, AclEdit, AclReadonly, DocListCastAsync } from "../../fields/Doc"; +import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, DataSym, Doc, DocListCast, DocListCastAsync, Opt } from "../../fields/Doc"; import { List } from "../../fields/List"; import { Cast, StrCast } from "../../fields/Types"; -import { distributeAcls, GetEffectiveAcl, SharingPermissions, TraceMobx, normalizeEmail } from "../../fields/util"; +import { distributeAcls, GetEffectiveAcl, normalizeEmail, SharingPermissions, TraceMobx } from "../../fields/util"; import { Utils } from "../../Utils"; import { DocServer } from "../DocServer"; import { CollectionView } from "../views/collections/CollectionView"; @@ -15,13 +16,12 @@ import { DictationOverlay } from "../views/DictationOverlay"; import { MainViewModal } from "../views/MainViewModal"; import { DocumentView } from "../views/nodes/DocumentView"; import { TaskCompletionBox } from "../views/nodes/TaskCompletedBox"; +import { SearchBox } from "../views/search/SearchBox"; import { DocumentManager } from "./DocumentManager"; import { GroupManager, UserOptions } from "./GroupManager"; import { GroupMemberView } from "./GroupMemberView"; -import "./SharingManager.scss"; import { SelectionManager } from "./SelectionManager"; -import { intersection } from "lodash"; -import { SearchBox } from "../views/search/SearchBox"; +import "./SharingManager.scss"; export interface User { email: string; diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store index 60b336584..14e9f6680 100644 Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index bce73c60e..1d0c5dac0 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -3,29 +3,29 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Tooltip } from '@material-ui/core'; import { action, computed, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { AclAdmin, AclEdit, DataSym, Doc, Field, WidthSym, HeightSym } from "../../fields/Doc"; +import { AclAdmin, AclEdit, DataSym, Doc, Field, HeightSym, WidthSym } from "../../fields/Doc"; import { Document } from '../../fields/documentSchemas'; import { HtmlField } from '../../fields/HtmlField'; import { InkField } from "../../fields/InkField"; import { ScriptField } from '../../fields/ScriptField'; import { Cast, NumCast } from "../../fields/Types"; import { GetEffectiveAcl } from '../../fields/util'; -import { emptyFunction, returnFalse, setupMoveUpEvents, simulateMouseClick, returnVal } from "../../Utils"; -import { DocUtils, Docs } from "../documents/Documents"; +import { emptyFunction, returnFalse, returnVal, setupMoveUpEvents } from "../../Utils"; +import { Docs, DocUtils } from "../documents/Documents"; import { DocumentType } from '../documents/DocumentTypes'; -import { DragManager, dropActionType } from "../util/DragManager"; +import { CurrentUserUtils } from '../util/CurrentUserUtils'; +import { DragManager } from "../util/DragManager"; import { SelectionManager } from "../util/SelectionManager"; import { SnappingManager } from '../util/SnappingManager'; import { undoBatch, UndoManager } from "../util/UndoManager"; import { CollectionDockingView } from './collections/CollectionDockingView'; import { DocumentButtonBar } from './DocumentButtonBar'; import './DocumentDecorations.scss'; +import { KeyManager } from './GlobalKeyHandler'; +import { InkStrokeProperties } from './InkStrokeProperties'; import { DocumentView } from "./nodes/DocumentView"; import React = require("react"); import e = require('express'); -import { CurrentUserUtils } from '../util/CurrentUserUtils'; -import { InkStrokeProperties } from './InkStrokeProperties'; -import { KeyManager } from './GlobalKeyHandler'; @observer export class DocumentDecorations extends React.Component<{ boundsLeft: number, boundsTop: number }, { value: string }> { @@ -62,31 +62,15 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b @computed get Bounds(): { x: number, y: number, b: number, r: number } { - return SelectionManager.SelectedDocuments().reduce((bounds, documentView) => { - if (documentView.props.renderDepth === 0 || - documentView.props.treeViewDoc || - !documentView.ContentDiv || - Doc.AreProtosEqual(documentView.props.Document, Doc.UserDoc())) { - return bounds; - } - const transform = (documentView.props.ScreenToLocalTransform().scale(documentView.LocalScaling)).inverse(); - var [sptX, sptY] = transform.transformPoint(0, 0); - let [bptX, bptY] = transform.transformPoint(documentView.props.PanelWidth(), documentView.props.PanelHeight()); - if (documentView.props.LayoutTemplateString?.includes("LinkAnchorBox")) { - const docuBox = documentView.ContentDiv.getElementsByClassName("linkAnchorBox-cont"); - if (docuBox.length) { - const rect = docuBox[0].getBoundingClientRect(); - sptX = rect.left; - sptY = rect.top; - bptX = rect.right; - bptY = rect.bottom; - } - } - return { - x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y), - r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b) - }; - }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE }); + return SelectionManager.SelectedDocuments().map(dv => dv.getBounds()).reduce((bounds, rect) => + !rect ? bounds : + { + x: Math.min(rect.left, bounds.x), + y: Math.min(rect.top, bounds.y), + r: Math.max(rect.right, bounds.r), + b: Math.max(rect.bottom, bounds.b) + }, + { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE }); } titleBlur = action((commit: boolean) => { @@ -136,8 +120,8 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b onBackgroundMove = (dragTitle: boolean, e: PointerEvent): boolean => { const dragDocView = SelectionManager.SelectedDocuments()[0]; const dragData = new DragManager.DocumentDragData(SelectionManager.SelectedDocuments().map(dv => dv.props.Document)); - const [left, top] = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.LocalScaling).inverse().transformPoint(0, 0); - dragData.offset = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.LocalScaling).transformDirection(e.x - left, e.y - top); + const { left, top } = dragDocView.getBounds() || { left: 0, top: 0 }; + dragData.offset = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.ContentScale()).transformDirection(e.x - left, e.y - top); dragData.moveDocument = dragDocView.props.moveDocument; dragData.isSelectionMove = true; dragData.canEmbed = dragTitle; @@ -440,12 +424,12 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b if (e.ctrlKey && !Doc.NativeHeight(docView.props.Document)) docView.toggleNativeDimensions(); if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) { const doc = Document(docView.rootDoc); - let nwidth = returnVal(docView.NativeWidth?.(), Doc.NativeWidth(doc)); - let nheight = returnVal(docView.NativeHeight?.(), Doc.NativeHeight(doc)); + let nwidth = docView.nativeWidth; + let nheight = docView.nativeHeight; const width = (doc._width || 0); let height = (doc._height || (nheight / nwidth * width)); height = !height || isNaN(height) ? 20 : height; - const scale = docView.props.ScreenToLocalTransform().Scale * docView.LocalScaling; + const scale = docView.props.ScreenToLocalTransform().Scale * docView.ContentScale(); if (nwidth && nheight) { if (nwidth / nheight !== width / height && !dragBottom) { height = nheight / nwidth * width; @@ -504,7 +488,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b onPointerUp = (e: PointerEvent): void => { SelectionManager.SelectedDocuments().map(dv => { if (NumCast(dv.layoutDoc._delayAutoHeight) < this._dragHeights.get(dv.layoutDoc)!) { - dv.nativeWidth > 0 && Doc.toggleNativeDimensions(dv.layoutDoc, dv.LocalScaling, dv.props.PanelWidth(), dv.props.PanelHeight()); + dv.nativeWidth > 0 && Doc.toggleNativeDimensions(dv.layoutDoc, dv.ContentScale(), dv.props.PanelWidth(), dv.props.PanelHeight()); dv.layoutDoc._autoHeight = true; } dv.layoutDoc._delayAutoHeight = undefined; diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index aaa914fa4..b32acce62 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -1,4 +1,5 @@ import React = require("react"); +import * as fitCurve from 'fit-curve'; import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Doc } from "../../fields/Doc"; @@ -7,7 +8,7 @@ import { Cast, FieldValue, NumCast } from "../../fields/Types"; import MobileInkOverlay from "../../mobile/MobileInkOverlay"; import { GestureUtils } from "../../pen-gestures/GestureUtils"; import { MobileInkOverlayContent } from "../../server/Message"; -import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter, setupMoveUpEvents, returnEmptyDoclist } from "../../Utils"; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from "../../Utils"; import { CognitiveServices } from "../cognitive_services/CognitiveServices"; import { DocUtils } from "../documents/Documents"; import { CurrentUserUtils } from "../util/CurrentUserUtils"; @@ -15,15 +16,14 @@ import { InteractionUtils } from "../util/InteractionUtils"; import { LinkManager } from "../util/LinkManager"; import { Scripting } from "../util/Scripting"; import { Transform } from "../util/Transform"; +import { CollectionFreeFormViewChrome } from "./collections/CollectionMenu"; import "./GestureOverlay.scss"; -import { ActiveInkBezierApprox, ActiveArrowStart, ActiveArrowEnd, ActiveFillColor, ActiveInkColor, ActiveInkWidth, InkingStroke, SetActiveInkColor, SetActiveInkWidth, SetActiveFillColor, SetActiveArrowStart, SetActiveArrowEnd, ActiveDash, SetActiveDash } from "./InkingStroke"; +import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, SetActiveArrowEnd, SetActiveArrowStart, SetActiveDash, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from "./InkingStroke"; import { DocumentView } from "./nodes/DocumentView"; import { RadialMenu } from "./nodes/RadialMenu"; import HorizontalPalette from "./Palette"; import { Touchable } from "./Touchable"; import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu"; -import * as fitCurve from 'fit-curve'; -import { CollectionFreeFormViewChrome } from "./collections/CollectionMenu"; @observer export class GestureOverlay extends Touchable { diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 50a8e71f9..a727e58a4 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -22,11 +22,11 @@ import { DocumentDecorations } from "./DocumentDecorations"; import { InkStrokeProperties } from "./InkStrokeProperties"; import { MainView } from "./MainView"; import { DocumentLinksButton } from "./nodes/DocumentLinksButton"; -import { DocumentView } from "./nodes/DocumentView"; import { PDFMenu } from "./pdf/PDFMenu"; import { SnappingManager } from "../util/SnappingManager"; import { SearchBox } from "./search/SearchBox"; import { random } from "lodash"; +import { DocumentView } from "./nodes/DocumentView"; const modifiers = ["control", "meta", "shift", "alt"]; type KeyHandler = (keycode: string, e: KeyboardEvent) => KeyControlInfo | Promise; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 960b50f43..17f2e0d89 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -13,7 +13,7 @@ import { List } from '../../fields/List'; import { PrefetchProxy } from '../../fields/Proxy'; import { BoolCast, PromiseValue, StrCast } from '../../fields/Types'; import { TraceMobx } from '../../fields/util'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, setupMoveUpEvents, simulateMouseClick, Utils } from '../../Utils'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick, Utils } from '../../Utils'; import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager'; import { DocServer } from '../DocServer'; import { Docs } from '../documents/Documents'; @@ -46,7 +46,7 @@ import { LinkMenu } from './linking/LinkMenu'; import "./MainView.scss"; import { AudioBox } from './nodes/AudioBox'; import { DocumentLinksButton } from './nodes/DocumentLinksButton'; -import { DocumentView, DocumentViewProps } from './nodes/DocumentView'; +import { DocumentView } from './nodes/DocumentView'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup'; import { LinkDocPreview } from './nodes/LinkDocPreview'; @@ -58,7 +58,7 @@ import { PDFMenu } from './pdf/PDFMenu'; import { PreviewCursor } from './PreviewCursor'; import { PropertiesView } from './PropertiesView'; import { SearchBox } from './search/SearchBox'; -import { DefaultStyleProvider, StyleProp } from './StyleProvider'; +import { DefaultStyleProvider } from './StyleProvider'; const _global = (window /* browser */ || global /* node */) as any; @observer diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx index cb7ff20b2..78053be92 100644 --- a/src/client/views/OverlayView.tsx +++ b/src/client/views/OverlayView.tsx @@ -2,20 +2,18 @@ import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import * as React from "react"; import ReactLoading from 'react-loading'; -import { Doc, DocListCast, Opt } from "../../fields/Doc"; +import { Doc } from "../../fields/Doc"; import { Id } from "../../fields/FieldSymbols"; -import { NumCast, Cast } from "../../fields/Types"; -import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, Utils, setupMoveUpEvents, returnEmptyFilter, returnEmptyDoclist } from "../../Utils"; +import { Cast, NumCast } from "../../fields/Types"; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, setupMoveUpEvents, Utils } from "../../Utils"; +import { CurrentUserUtils } from "../util/CurrentUserUtils"; +import { DragManager } from "../util/DragManager"; +import { Scripting } from "../util/Scripting"; import { Transform } from "../util/Transform"; import { CollectionFreeFormLinksView } from "./collections/collectionFreeForm/CollectionFreeFormLinksView"; import { DocumentView } from "./nodes/DocumentView"; import './OverlayView.scss'; -import { Scripting } from "../util/Scripting"; import { ScriptingRepl } from './ScriptingRepl'; -import { DragManager } from "../util/DragManager"; -import { List } from "../../fields/List"; -import { CurrentUserUtils } from "../util/CurrentUserUtils"; -import { TabDocView } from "./collections/TabDocView"; import { DefaultStyleProvider } from "./StyleProvider"; export type OverlayDisposer = () => void; diff --git a/src/client/views/Palette.tsx b/src/client/views/Palette.tsx index 4d0368424..304687123 100644 --- a/src/client/views/Palette.tsx +++ b/src/client/views/Palette.tsx @@ -3,7 +3,7 @@ import { observer } from "mobx-react"; import * as React from "react"; import { Doc } from "../../fields/Doc"; import { NumCast } from "../../fields/Types"; -import { emptyFunction, emptyPath, returnEmptyString, returnZero, returnFalse, returnOne, returnTrue, returnEmptyFilter, returnEmptyDoclist } from "../../Utils"; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue } from "../../Utils"; import { Transform } from "../util/Transform"; import { DocumentView } from "./nodes/DocumentView"; import "./Palette.scss"; diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 9de4f9c67..1731d715a 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -187,7 +187,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { @action @undoBatch onLock = () => { - SelectionManager.SelectedDocuments().forEach(dv => dv.toggleLockPosition()); + SelectionManager.SelectedDocuments().forEach(dv => dv.docView?.toggleLockPosition()); } @computed @@ -327,18 +327,18 @@ export class PropertiesButtons extends React.Component<{}, {}> { SelectionManager.SelectedDocuments().forEach(dv => { if (value === "nothing") { - dv.noOnClick(); + dv.docView?.noOnClick(); } else if (value === "enterPortal") { - dv.noOnClick(); - dv.makeIntoPortal(); + dv.docView?.noOnClick(); + dv.docView?.makeIntoPortal(); } else if (value === "toggleDetail") { - dv.noOnClick(); - dv.toggleDetail(); + dv.docView?.noOnClick(); + dv.docView?.toggleDetail(); } else if (value === "linkInPlace") { - dv.noOnClick(); + dv.docView?.noOnClick(); dv.toggleFollowLink("inPlace", true, false); } else if (value === "linkOnRight") { - dv.noOnClick(); + dv.docView?.noOnClick(); dv.toggleFollowLink("add:right", false, false); } }); diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 46d3b201b..1c14bc721 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -5,13 +5,13 @@ import { intersection } from "lodash"; import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { ColorState, SketchPicker } from "react-color"; -import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, WidthSym, Opt } from "../../fields/Doc"; +import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, WidthSym } from "../../fields/Doc"; import { Id } from "../../fields/FieldSymbols"; import { InkField } from "../../fields/InkField"; import { ComputedField } from "../../fields/ScriptField"; import { Cast, NumCast, StrCast } from "../../fields/Types"; -import { GetEffectiveAcl, SharingPermissions, denormalizeEmail } from "../../fields/util"; -import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne } from "../../Utils"; +import { denormalizeEmail, GetEffectiveAcl, SharingPermissions } from "../../fields/util"; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse } from "../../Utils"; import { DocumentType } from "../documents/DocumentTypes"; import { DocumentManager } from "../util/DocumentManager"; import { SelectionManager } from "../util/SelectionManager"; @@ -19,16 +19,15 @@ import { SharingManager } from "../util/SharingManager"; import { Transform } from "../util/Transform"; import { undoBatch, UndoManager } from "../util/UndoManager"; import { CollectionDockingView } from "./collections/CollectionDockingView"; +import { CollectionViewType } from "./collections/CollectionView"; import { EditableView } from "./EditableView"; import { InkStrokeProperties } from "./InkStrokeProperties"; -import { ContentFittingDocumentView } from "./nodes/ContentFittingDocumentView"; +import { DocumentView, StyleProviderFunc } from "./nodes/DocumentView"; import { KeyValueBox } from "./nodes/KeyValueBox"; import { PresBox } from "./nodes/PresBox"; import { PropertiesButtons } from "./PropertiesButtons"; import { PropertiesDocContextSelector } from "./PropertiesDocContextSelector"; import "./PropertiesView.scss"; -import { CollectionViewType } from "./collections/CollectionView"; -import { DocumentViewProps, StyleProviderFunc } from "./nodes/DocumentView"; import { DefaultStyleProvider } from "./StyleProvider"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; @@ -265,7 +264,7 @@ export class PropertiesView extends React.Component { const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight; const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth; return
- , template: string) => void }> { diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 67f73d44a..9b1e3b80d 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -8,9 +8,9 @@ import { Id } from '../../../fields/FieldSymbols'; import { makeInterface } from '../../../fields/Schema'; import { ScriptField } from '../../../fields/ScriptField'; import { NumCast, ScriptCast, StrCast } from '../../../fields/Types'; -import { returnFalse, Utils, OmitKeys } from '../../../Utils'; +import { OmitKeys, returnFalse, Utils } from '../../../Utils'; import { DragManager } from '../../util/DragManager'; -import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView'; +import { DocumentView } from '../nodes/DocumentView'; import "./CollectionCarousel3DView.scss"; import { CollectionSubView } from './CollectionSubView'; @@ -42,7 +42,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume const displayDoc = (childPair: { layout: Doc, data: Doc }) => { const script = ScriptField.MakeScript("child._showCaption = 'caption'", { child: Doc.name }, { child: childPair.layout }); const onChildClick = script && (() => script); - return ; const CarouselDocument = makeInterface(documentSchema, collectionSchema); @@ -50,7 +47,7 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) return !(curDoc?.layout instanceof Doc) ? (null) : <>
- - { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 81ee16f63..f153f1cca 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -11,7 +11,7 @@ import { listSpec } from "../../../fields/Schema"; import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { Cast, NumCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; -import { emptyFunction, returnFalse, returnOne, setupMoveUpEvents } from "../../../Utils"; +import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../../Utils"; import { SelectionManager } from "../../util/SelectionManager"; import { SnappingManager } from "../../util/SnappingManager"; import { Transform } from "../../util/Transform"; @@ -20,11 +20,11 @@ import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/globa import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import '../DocumentDecorations.scss'; -import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; +import { DocumentView } from "../nodes/DocumentView"; +import { DefaultStyleProvider } from "../StyleProvider"; import "./CollectionSchemaView.scss"; import { CollectionSubView } from "./CollectionSubView"; import { SchemaTable } from "./SchemaTable"; -import { DefaultStyleProvider } from "../StyleProvider"; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 export enum ColumnType { @@ -398,7 +398,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { get previewPanel() { return
{!this.previewDocument ? (null) : - ; @@ -201,7 +200,7 @@ export class CollectionStackingView extends CollectionSubView { background: "dimGray", display: "block", top: 0, left: 0, transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)` }} - ref="overlay"> { addDocTab={this.props.addDocTab} pinToPres={this.props.pinToPres} bringToFront={returnFalse}> - +
}
; } diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 1f00b3a02..a4ab201bc 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -6,14 +6,15 @@ import { clamp } from 'lodash'; import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import * as ReactDOM from 'react-dom'; -import { DataSym, Doc, DocListCast, Opt, DocListCastAsync, StrListCast, WidthSym, HeightSym } from "../../../fields/Doc"; +import { DataSym, Doc, DocListCast, DocListCastAsync, HeightSym, Opt, WidthSym } from "../../../fields/Doc"; import { Id } from '../../../fields/FieldSymbols'; import { FieldId } from "../../../fields/RefField"; import { listSpec } from '../../../fields/Schema'; -import { Cast, NumCast, StrCast, BoolCast } from "../../../fields/Types"; +import { Cast, NumCast, StrCast } from "../../../fields/Types"; import { TraceMobx } from '../../../fields/util'; -import { emptyFunction, emptyPath, returnFalse, returnOne, returnTrue, setupMoveUpEvents, Utils } from "../../../Utils"; +import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents, Utils } from "../../../Utils"; import { DocServer } from "../../DocServer"; +import { DocumentType } from '../../documents/DocumentTypes'; import { CurrentUserUtils } from '../../util/CurrentUserUtils'; import { DocumentManager } from '../../util/DocumentManager'; import { DragManager, dropActionType } from "../../util/DragManager"; @@ -22,19 +23,16 @@ import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { undoBatch, UndoManager } from "../../util/UndoManager"; import { DocumentView, DocAfterFocusFunc, DocumentViewProps } from "../nodes/DocumentView"; +import { FieldViewProps } from '../nodes/FieldView'; import { PresBox, PresMovement } from '../nodes/PresBox'; +import { DefaultLayerProvider, DefaultStyleProvider, StyleLayers, StyleProp } from '../StyleProvider'; import { CollectionDockingView } from './CollectionDockingView'; import { CollectionDockingViewMenu } from './CollectionDockingViewMenu'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; import { CollectionViewType } from './CollectionView'; import "./TabDocView.scss"; import React = require("react"); -import { List } from '../../../fields/List'; -import { DocumentType } from '../../documents/DocumentTypes'; import Color = require('color'); -import { StyleProp, DefaultStyleProvider, DefaultLayerProvider, StyleLayers } from '../StyleProvider'; -import { FieldViewProps } from '../nodes/FieldView'; -import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView'; const _global = (window /* browser */ || global /* node */) as any; interface TabDocViewProps { @@ -51,7 +49,7 @@ export class TabDocView extends React.Component { @observable private _panelHeight = 0; @observable private _isActive: boolean = false; @observable private _document: Doc | undefined; - @observable private _view: ContentFittingDocumentView | undefined; + @observable private _view: DocumentView | undefined; @computed get layoutDoc() { return this._document && Doc.Layout(this._document); } @computed get tabColor() { return StrCast(this._document?._backgroundColor, StrCast(this._document?.backgroundColor, DefaultStyleProvider(this._document, undefined, StyleProp.BackgroundColor))); } @@ -119,7 +117,7 @@ export class TabDocView extends React.Component { // select the tab document when the tab is directly clicked and activate the tab whenver the tab document is selected titleEle.onpointerdown = action((e: any) => { if (e.target.className !== "lm_close_tab") { - if (this.view?.docView) SelectionManager.SelectDoc(this.view.docView, false); + if (this.view) SelectionManager.SelectDoc(this.view, false); else this._activated = true; if (Date.now() - titleEle.lastClick < 1000) titleEle.select(); titleEle.lastClick = Date.now(); @@ -140,7 +138,7 @@ export class TabDocView extends React.Component { const stack = tab.contentItem.parent; const dragHdl = document.createElement("div"); dragHdl.className = "lm_drag_tab"; - tab._disposers.buttonDisposer = reaction(() => this.view?.docView, view => + tab._disposers.buttonDisposer = reaction(() => this.view, view => view && [ReactDOM.render( [view]} Stack={stack} />, dragHdl), tab._disposers.buttonDisposer?.()], { fireImmediately: true }); tab.reactComponents = [dragHdl]; @@ -374,7 +372,7 @@ export class TabDocView extends React.Component { @computed get docView() { TraceMobx(); return !this._activated || !this._document || this._document._viewType === CollectionViewType.Docking ? (null) : - <> this._view = r)} + <> this._view = r)} renderDepth={0} Document={this._document} DataDoc={!Doc.AreProtosEqual(this._document[DataSym], this._document) ? this._document[DataSym] : undefined} diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 2c2498e0b..31a1a2b99 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable, trace } from "mobx"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { DataSym, Doc, DocListCast, DocListCastOrNull, Field, HeightSym, Opt, WidthSym } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; @@ -9,7 +9,7 @@ import { listSpec } from '../../../fields/Schema'; import { ComputedField, ScriptField } from '../../../fields/ScriptField'; import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; -import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, simulateMouseClick, Utils } from '../../../Utils'; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, returnZero, simulateMouseClick, Utils } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; import { DocumentType } from "../../documents/DocumentTypes"; import { CurrentUserUtils } from '../../util/CurrentUserUtils'; @@ -20,17 +20,16 @@ import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { undoBatch, UndoManager } from '../../util/UndoManager'; import { EditableView } from "../EditableView"; -import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView'; import { DocumentView, DocumentViewProps, StyleProviderFunc } from '../nodes/DocumentView'; +import { FieldViewProps } from '../nodes/FieldView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { RichTextMenu } from '../nodes/formattedText/RichTextMenu'; import { KeyValueBox } from '../nodes/KeyValueBox'; +import { StyleProp, testDocProps } from '../StyleProvider'; import { CollectionTreeView } from './CollectionTreeView'; import { CollectionView, CollectionViewType } from './CollectionView'; import "./TreeView.scss"; import React = require("react"); -import { StyleProp, testDocProps } from '../StyleProvider'; -import { FieldViewProps } from '../nodes/FieldView'; export interface TreeViewProps { document: Doc; @@ -84,7 +83,7 @@ export class TreeView extends React.Component { private _uniqueId = Utils.GenerateGuid(); private _editMaxWidth: number | string = 0; - @observable _dref: ContentFittingDocumentView | undefined | null; + @observable _dref: DocumentView | undefined | null; @computed get doc() { TraceMobx(); return this.props.document; } get noviceMode() { return BoolCast(Doc.UserDoc().noviceMode, false); } get displayName() { return "TreeView(" + this.props.document.title + ")"; } // this makes mobx trace() statements more descriptive @@ -609,7 +608,7 @@ export class TreeView extends React.Component { renderEmbeddedDocument = (asText: boolean) => { const panelWidth = asText || StrCast(Doc.LayoutField(this.layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.expandPanelWidth; const panelHeight = asText ? this.rtfOutlineHeight : StrCast(Doc.LayoutField(this.layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.expandPanelHeight; - return this._dref = r)} + return this._dref = r)} Document={this.doc} DataDoc={undefined} PanelWidth={panelWidth} @@ -671,7 +670,7 @@ export class TreeView extends React.Component { else this._editMaxWidth = ""; const hideTitle = this.doc.treeViewHideHeader || this.outlineMode; - return
this.props.active(true) && SelectionManager.DeselectAll()} onKeyDown={this.onKeyDown}> diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 473363292..ae5688b48 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -1,14 +1,14 @@ +import { action, computed, IReactionDisposer, observable, reaction } from "mobx"; import { observer } from "mobx-react"; import { Doc } from "../../../../fields/Doc"; -import { Utils, setupMoveUpEvents, emptyFunction, returnFalse } from '../../../../Utils'; +import { Id } from "../../../../fields/FieldSymbols"; +import { NumCast, StrCast } from "../../../../fields/Types"; +import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../Utils'; +import { DocumentType } from "../../../documents/DocumentTypes"; +import { SnappingManager } from "../../../util/SnappingManager"; import { DocumentView } from "../../nodes/DocumentView"; import "./CollectionFreeFormLinkView.scss"; import React = require("react"); -import { DocumentType } from "../../../documents/DocumentTypes"; -import { observable, action, reaction, IReactionDisposer, trace, computed } from "mobx"; -import { StrCast, Cast, NumCast } from "../../../../fields/Types"; -import { Id } from "../../../../fields/FieldSymbols"; -import { SnappingManager } from "../../../util/SnappingManager"; export interface CollectionFreeFormLinkViewProps { A: DocumentView; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx index 260b257c5..4dab8f15b 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx @@ -1,15 +1,14 @@ -import { computed, trace } from "mobx"; +import { computed } from "mobx"; import { observer } from "mobx-react"; import { Doc } from "../../../../fields/Doc"; import { Id } from "../../../../fields/FieldSymbols"; +import { Utils } from "../../../../Utils"; +import { DocumentType } from "../../../documents/DocumentTypes"; import { DocumentManager } from "../../../util/DocumentManager"; import { DocumentView } from "../../nodes/DocumentView"; import "./CollectionFreeFormLinksView.scss"; import { CollectionFreeFormLinkView } from "./CollectionFreeFormLinkView"; import React = require("react"); -import { Utils, emptyFunction } from "../../../../Utils"; -import { DocumentType } from "../../../documents/DocumentTypes"; -import { SnappingManager } from "../../../util/SnappingManager"; @observer export class CollectionFreeFormLinksView extends React.Component { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index bda3757e3..67ad2b769 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -119,8 +119,8 @@ export class CollectionFreeFormView extends CollectionSubView e.bounds && !e.bounds.z).map(e => e.bounds!), NumCast(this.layoutDoc._xPadding, 10), NumCast(this.layoutDoc._yPadding, 10)); } - @computed get nativeWidth() { return this.fitToContent ? 0 : returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.Document)); } - @computed get nativeHeight() { return this.fitToContent ? 0 : returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.Document)); } + @computed get nativeWidth() { return this.fitToContent ? 0 : Doc.NativeWidth(this.Document); } + @computed get nativeHeight() { return this.fitToContent ? 0 : Doc.NativeHeight(this.Document); } private get isAnnotationOverlay() { return this.props.isAnnotationOverlay; } private get scaleFieldKey() { return this.props.scaleField || "_viewScale"; } private get borderWidth() { return this.isAnnotationOverlay ? 0 : COLLECTION_BORDER_WIDTH; } @@ -322,7 +322,7 @@ export class CollectionFreeFormView extends CollectionSubView DocumentManager.Instance.getDocumentView(ele, this.props.CollectionView)!); const de = new DragManager.DocumentDragData(eles); de.moveDocument = this.props.moveDocument; - const [left, top] = clusterDocs[0].props.ScreenToLocalTransform().scale(clusterDocs[0].LocalScaling).inverse().transformPoint(0, 0); + const { left, top } = clusterDocs[0].getBounds() || { left: 0, top: 0 }; de.offset = this.getTransform().transformDirection(ptsParent.clientX - left, ptsParent.clientY - top); de.dropAction = e.ctrlKey || e.altKey ? "alias" : undefined; DragManager.StartDocumentDrag(clusterDocs.map(v => v.ContentDiv!), de, ptsParent.clientX, ptsParent.clientY, { hideSource: !de.dropAction }); @@ -1275,7 +1275,7 @@ export class CollectionFreeFormView extends CollectionSubView { - Doc.toggleNativeDimensions(this.layoutDoc, 1, this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); + Doc.toggleNativeDimensions(this.layoutDoc, 1, this.nativeWidth, this.nativeHeight); } @undoBatch @@ -1499,8 +1499,8 @@ export class CollectionFreeFormView extends CollectionSubView Transform, width: () => number, height: () => number) { - return ; const MulticolumnDocument = makeInterface(documentSchema); @@ -213,7 +213,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu return this.props.addDocTab(doc, where); } getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { - return ; const MultirowDocument = makeInterface(documentSchema); @@ -213,7 +213,7 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) return this.props.addDocTab(doc, where); } getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { - return { @computed get position() { - const docView = this.props.docView; - const transform = (docView.props.ScreenToLocalTransform().scale(docView.LocalScaling)).inverse(); - const [sptX, sptY] = transform.transformPoint(0, 0); - const [bptX, bptY] = transform.transformPoint(docView.props.PanelWidth(), docView.props.PanelHeight()); - return { x: sptX, y: sptY, r: bptX, b: bptY }; + const docView = this.props.docView.getBounds(); + return { x: docView?.left || 0, y: docView?.top || 0, r: docView?.right || 0, b: docView?.bottom || 0 }; } render() { diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 9ecf3d0fb..8e0004c87 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -1,4 +1,5 @@ -import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@material-ui/core'; import { action, observable, runInAction } from 'mobx'; import { observer } from "mobx-react"; @@ -18,7 +19,6 @@ import { DocumentView } from '../nodes/DocumentView'; import { LinkDocPreview } from '../nodes/LinkDocPreview'; import './LinkMenuItem.scss'; import React = require("react"); -import { IconProp } from '@fortawesome/fontawesome-svg-core'; interface LinkMenuItemProps { diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 2d0441cac..4b3c328b0 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -13,7 +13,7 @@ import { createSchema, listSpec, makeInterface } from "../../../fields/Schema"; import { ComputedField, ScriptField } from "../../../fields/ScriptField"; import { Cast, DateCast, NumCast } from "../../../fields/Types"; import { AudioField, nullAudio } from "../../../fields/URLField"; -import { emptyFunction, formatTime, returnFalse, returnOne, returnTrue, setupMoveUpEvents, Utils, numberRange } from "../../../Utils"; +import { emptyFunction, formatTime, numberRange, returnFalse, returnTrue, setupMoveUpEvents, Utils } from "../../../Utils"; import { Docs, DocUtils } from "../../documents/Documents"; import { Networking } from "../../Network"; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; @@ -23,13 +23,13 @@ import { SnappingManager } from "../../util/SnappingManager"; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import { ViewBoxAnnotatableComponent } from "../DocComponent"; +import { StyleProp } from "../StyleProvider"; import "./AudioBox.scss"; import { DocumentView, DocumentViewProps } from "./DocumentView"; import { FieldView, FieldViewProps } from './FieldView'; import { FormattedTextBoxComment } from "./formattedText/FormattedTextBoxComment"; import { LinkAnchorBox } from "./LinkAnchorBox"; import { LinkDocPreview } from "./LinkDocPreview"; -import { StyleProp } from "../StyleProvider"; declare class MediaRecorder { // whatever MediaRecorder has diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index b124263e7..828b76d3d 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -1,22 +1,21 @@ import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; -import { Doc, HeightSym, Opt, WidthSym } from "../../../fields/Doc"; +import { Doc, Opt } from "../../../fields/Doc"; import { Document } from "../../../fields/documentSchemas"; import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; import { ComputedField } from "../../../fields/ScriptField"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; -import { numberRange, returnVal, returnOne } from "../../../Utils"; +import { numberRange, returnOne } from "../../../Utils"; import { Transform } from "../../util/Transform"; import { DocComponent } from "../DocComponent"; import { InkingStroke } from "../InkingStroke"; +import { StyleProp } from "../StyleProvider"; import "./CollectionFreeFormDocumentView.scss"; -import { ContentFittingDocumentView } from "./ContentFittingDocumentView"; import { DocumentView, DocumentViewProps } from "./DocumentView"; -import React = require("react"); -import { StyleProp } from "../StyleProvider"; import { FieldViewProps } from "./FieldView"; +import React = require("react"); export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { dataProvider?: (doc: Doc, replica: string) => { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined; @@ -33,7 +32,7 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { export class CollectionFreeFormDocumentView extends DocComponent(Document) { static animFields = ["_height", "_width", "x", "y", "_scrollTop", "opacity"]; // fields that are configured to be animatable using animation frames @observable _animPos: number[] | undefined = undefined; - @observable _contentView: ContentFittingDocumentView | undefined | null; + @observable _contentView: DocumentView | undefined | null; random(min: number, max: number) { // min should not be equal to max const mseed = Math.abs(this.X * this.Y); const seed = (mseed * 9301 + 49297) % 233280; @@ -50,7 +49,7 @@ export class CollectionFreeFormDocumentView extends DocComponent, property: string) => { if (property === StyleProp.Opacity && doc === this.layoutDoc) return this.Opacity; // only change the opacity for this specific document, not its children @@ -148,9 +147,8 @@ export class CollectionFreeFormDocumentView extends DocComponent
} - this._contentView = r)} /> + this._contentView = r)} />
; } } diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 1bf448bff..b1bbc9506 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -1,20 +1,19 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, observable } from 'mobx'; import { observer } from "mobx-react"; -import { Doc, WidthSym, HeightSym } from '../../../fields/Doc'; +import { Doc } from '../../../fields/Doc'; import { documentSchema } from '../../../fields/documentSchemas'; import { createSchema, makeInterface } from '../../../fields/Schema'; -import { NumCast, Cast, StrCast } from '../../../fields/Types'; +import { Cast, NumCast, StrCast } from '../../../fields/Types'; +import { emptyFunction, OmitKeys, setupMoveUpEvents } from '../../../Utils'; import { DragManager } from '../../util/DragManager'; +import { SnappingManager } from '../../util/SnappingManager'; +import { undoBatch } from '../../util/UndoManager'; import { ViewBoxAnnotatableComponent } from '../DocComponent'; -import { FieldView, FieldViewProps } from './FieldView'; import "./ComparisonBox.scss"; +import { DocumentView } from './DocumentView'; +import { FieldView, FieldViewProps } from './FieldView'; import React = require("react"); -import { ContentFittingDocumentView } from './ContentFittingDocumentView'; -import { undoBatch } from '../../util/UndoManager'; -import { setupMoveUpEvents, emptyFunction, returnOne, OmitKeys } from '../../../Utils'; -import { SnappingManager } from '../../util/SnappingManager'; -import { DocumentViewProps } from './DocumentView'; export const comparisonSchema = createSchema({}); @@ -84,7 +83,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent { const whichDoc = Cast(this.dataDoc[`compareBox-${which}`], Doc, null); return whichDoc ? <> - { - public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive - public ContentRef = React.createRef(); - - @observable public docView: DocumentView | undefined | null; - - @computed get layoutDoc() { return Doc.Layout(this.props.Document, this.props.LayoutTemplate?.()); } - - @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions)); } - @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions) || 0); } - @computed get nativeScaling() { - const nativeW = this.nativeWidth; - const nativeH = this.nativeHeight; - let scaling = 1; - if (nativeW && (this.layoutDoc?._fitWidth || this.props.PanelHeight() / nativeH > this.props.PanelWidth() / nativeW)) { - scaling = this.props.PanelWidth() / nativeW; // width-limited or fitWidth - } else if (nativeW && nativeH) { - scaling = this.props.PanelHeight() / nativeH; // height-limited - } - console.log(this.props.Document.title + " " + scaling) - return scaling; - } - - @computed get panelWidth() { return this.nativeWidth ? this.nativeWidth * this.nativeScaling : this.props.PanelWidth(); } - @computed get panelHeight() { - if (this.nativeHeight) { - if (this.props.Document._fitWidth) { - return Math.min(this.props.PanelHeight(), NumCast(this.props.Document.scrollHeight, this.props.PanelHeight())); - } - else return Math.min(this.props.PanelHeight(), this.nativeHeight * this.nativeScaling); - } - return this.props.PanelHeight(); - } - - @computed get Xshift() { return this.nativeWidth ? (this.props.PanelWidth() - this.nativeWidth * this.nativeScaling) / 2 : 0; } - @computed get YShift() { return this.nativeWidth && this.nativeHeight && Math.abs(this.Xshift) < 0.001 ? (this.props.PanelHeight() - this.nativeHeight * this.nativeScaling) / 2 : 0; } - @computed get centeringX() { return this.props.dontCenter?.includes("x") ? 0 : this.Xshift; } - @computed get centeringY() { return this.props.Document._fitWidth || this.props.dontCenter?.includes("y") ? 0 : this.YShift; } - - NativeWidth = () => this.nativeWidth; - NativeHeight = () => this.nativeHeight; - PanelWidth = () => this.panelWidth; - PanelHeight = () => this.panelHeight; - NativeScaling = () => this.nativeScaling; - screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(-this.centeringX, -this.centeringY).scale(1 / this.nativeScaling); - - render() { - TraceMobx(); - return (
- {!this.props.Document || !this.props.PanelWidth() ? (null) : ( -
0.001 ? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth(), - height: Math.abs(this.YShift) > 0.001 ? this.props.Document._fitWidth ? `${this.panelHeight}px` : `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(), - }}> - this.docView = r)} - PanelWidth={this.PanelWidth} - PanelHeight={this.PanelHeight} - NativeWidth={this.NativeWidth} - NativeHeight={this.NativeHeight} - ContentScaling={this.NativeScaling} - ScreenToLocalTransform={this.screenToLocalTransform} - focus={this.props.focus || emptyFunction} - bringToFront={emptyFunction} - /> -
)} -
); - } -} \ No newline at end of file diff --git a/src/client/views/nodes/DocHolderBox.tsx b/src/client/views/nodes/DocHolderBox.tsx index b5c068b08..533a4931a 100644 --- a/src/client/views/nodes/DocHolderBox.tsx +++ b/src/client/views/nodes/DocHolderBox.tsx @@ -3,23 +3,22 @@ import { action, IReactionDisposer, reaction } from "mobx"; import { observer } from "mobx-react"; import { Doc, Field } from "../../../fields/Doc"; import { collectionSchema, documentSchema } from "../../../fields/documentSchemas"; -import { makeInterface, listSpec } from "../../../fields/Schema"; +import { listSpec, makeInterface } from "../../../fields/Schema"; import { ComputedField } from "../../../fields/ScriptField"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; -import { emptyPath, returnFalse, returnOne, returnZero } from "../../../Utils"; +import { returnFalse } from "../../../Utils"; import { DocumentType } from "../../documents/DocumentTypes"; import { DragManager } from "../../util/DragManager"; import { undoBatch } from "../../util/UndoManager"; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import { ViewBoxAnnotatableComponent } from "../DocComponent"; -import { ContentFittingDocumentView } from "./ContentFittingDocumentView"; +import { StyleProp } from "../StyleProvider"; import "./DocHolderBox.scss"; import { DocumentView } from "./DocumentView"; import { FieldView, FieldViewProps } from "./FieldView"; import React = require("react"); -import { StyleProp } from "../StyleProvider"; type DocHolderBoxSchema = makeInterface<[typeof documentSchema, typeof collectionSchema]>; const DocHolderBoxDocument = makeInterface(documentSchema, collectionSchema); @@ -142,7 +141,7 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent : - obj.active = this.props.parentActive).omit, + ...OmitKeys(this.props, [...docOnlyProps], "", (obj: any) => obj.active = this.props.parentActive).omit, RootDoc: Cast(this.layoutDoc?.rootDocument, Doc, null) || this.layoutDoc, Document: this.layoutDoc, DataDoc: this.dataDoc, diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx index f2838981d..123212608 100644 --- a/src/client/views/nodes/DocumentIcon.tsx +++ b/src/client/views/nodes/DocumentIcon.tsx @@ -9,13 +9,12 @@ import { Field } from "../../../fields/Doc"; export class DocumentIcon extends React.Component<{ view: DocumentView, index: number }> { render() { const view = this.props.view; - const transform = view.props.ScreenToLocalTransform().scale(view.LocalScaling).inverse(); - const { x, y, width, height } = transform.transformBounds(0, 0, view.props.PanelWidth(), view.props.PanelHeight()); + const { left, top, right, bottom } = view.getBounds() || { left: 0, top: 0, right: 0, bottom: 0 }; return (

d{this.props.index}

diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 8dadd2467..6f041e5ef 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -142,4 +142,27 @@ opacity: 1; } } +} +.contentFittingDocumentView { + position: relative; + display: flex; + width: 100%; + height: 100%; + + .contentFittingDocumentView-previewDoc { + position: relative; + display: inline; + } + + .contentFittingDocumentView-input { + position: absolute; + max-width: 150px; + width: 100%; + bottom: 0px; + } + + .documentView-node:first-child { + position: relative; + background: "#B59B66"; //$light-color; + } } \ No newline at end of file diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 010a270e6..61e17082a 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -10,7 +10,7 @@ import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Ty import { GetEffectiveAcl, TraceMobx } from '../../../fields/util'; import { MobileInterface } from '../../../mobile/MobileInterface'; import { GestureUtils } from '../../../pen-gestures/GestureUtils'; -import { emptyFunction, OmitKeys, returnFalse, returnVal, Utils } from "../../../Utils"; +import { emptyFunction, OmitKeys, returnFalse, Utils, returnVal } from "../../../Utils"; import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils'; import { Docs, DocUtils } from "../../documents/Documents"; import { DocumentType } from '../../documents/DocumentTypes'; @@ -57,8 +57,6 @@ export interface DocumentViewSharedProps { CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView; PanelWidth: () => number; PanelHeight: () => number; - NativeWidth?: () => number; - NativeHeight?: () => number; layerProvider?: (doc: Doc, assign?: boolean) => boolean; styleProvider?: StyleProviderFunc; focus: DocFocusFunc; @@ -88,10 +86,12 @@ export interface DocumentViewProps extends DocumentViewSharedProps { freezeDimensions?: boolean; hideTitle?: boolean; // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings treeViewDoc?: Doc; - dragDivName?: string; contentPointerEvents?: string; // pointer events allowed for content of a document view. eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents radialMenu?: String[]; LayoutTemplateString?: string; + dontCenter?: "x" | "y" | "xy"; + NativeWidth?: () => number; + NativeHeight?: () => number; LayoutTemplate?: () => Opt; ContentScaling?: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal contextMenuItems?: () => { script: ScriptField, label: string }[]; @@ -100,9 +100,16 @@ export interface DocumentViewProps extends DocumentViewSharedProps { onPointerUp?: () => ScriptField; } +export interface DocumentViewInternalProps { + NativeWidth: () => number; + NativeHeight: () => number; + isSelected: (outsideReaction?: boolean) => boolean; + select: (ctrlPressed: boolean) => void; + DocumentView: any; +} + @observer -export class DocumentView extends DocComponent(Document) { - public static ROOT_DIV = "documentView-effectsWrapper"; +export class DocumentViewInternal extends DocComponent(Document) { @observable _animateScalingTo = 0; private _downX: number = 0; private _downY: number = 0; @@ -118,37 +125,32 @@ export class DocumentView extends DocComponent(Docu private _holdDisposer?: InteractionUtils.MultiTouchEventDisposer; protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; - private get active() { return this.isSelected(true) || this.props.parentActive(true); } + private get topMost() { return this.props.renderDepth === 0; } + private get active() { return this.props.isSelected(true) || this.props.parentActive(true); } public get displayName() { return "DocumentView(" + this.props.Document.title + ")"; } // this makes mobx trace() statements more descriptive public get ContentDiv() { return this._mainCont.current; } public get LayoutFieldKey() { return Doc.LayoutFieldKey(this.layoutDoc); } @computed get ShowTitle() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.ShowTitle) as (Opt); } - @computed get LocalScaling() { return this.props.ContentScaling?.() || 1; } - @computed get topMost() { return this.props.renderDepth === 0; } + @computed get ContentScale() { return this.props.ContentScaling?.() || 1; } @computed get hidden() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Hidden); } @computed get opacity() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Opacity); } @computed get borderRounding() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow); } - @computed get hideLinkButton() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkButton + (this.isSelected() ? ":selected" : "")); } - @computed get widgetDecorations() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Decorations + (this.isSelected() ? ":selected" : "")); } + @computed get hideLinkButton() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkButton + (this.props.isSelected() ? ":selected" : "")); } + @computed get widgetDecorations() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Decorations + (this.props.isSelected() ? ":selected" : "")); } @computed get backgroundColor() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor); } @computed get docContents() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.DocContents); } @computed get headerMargin() { return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0; } - @computed get pointerEvents() { return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (this.isSelected() ? ":selected" : "")); } + @computed get pointerEvents() { return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (this.props.isSelected() ? ":selected" : "")); } @computed get finalLayoutKey() { return StrCast(this.props.Document.layoutKey, "layout"); } - @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.dataDoc, this.props.freezeDimensions)); } - @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.dataDoc, this.props.freezeDimensions)); } + @computed get nativeWidth() { return this.props.NativeWidth(); } + @computed get nativeHeight() { return this.props.NativeHeight(); } @computed get onClickHandler() { return this.props.onClick?.() ?? Cast(this.Document.onClick, ScriptField, Cast(this.layoutDoc.onClick, ScriptField, null)); } @computed get onDoubleClickHandler() { return this.props.onDoubleClick?.() ?? (Cast(this.layoutDoc.onDoubleClick, ScriptField, null) ?? this.Document.onDoubleClick); } @computed get onPointerDownHandler() { return this.props.onPointerDown?.() ?? ScriptCast(this.Document.onPointerDown); } @computed get onPointerUpHandler() { return this.props.onPointerUp?.() ?? ScriptCast(this.Document.onPointerUp); } - NativeWidth = () => this.nativeWidth; - NativeHeight = () => this.nativeHeight; - onClickFunc = () => this.onClickHandler; - onDoubleClickFunc = () => this.onDoubleClickHandler; constructor(props: any) { super(props); - props.getView?.(this); } handle1PointerHoldStart = (e: Event, me: InteractionUtils.MultiTouchEvent): any => { @@ -210,9 +212,6 @@ export class DocumentView extends DocComponent(Docu @action componentDidMount() { this.componentDidUpdate(); - if (!BoolCast(this.rootDoc.dontRegisterView, this.props.dontRegisterView)) { - DocumentManager.Instance.AddView(this); - } } @action @@ -236,47 +235,20 @@ export class DocumentView extends DocComponent(Docu this._multiTouchDisposer?.(); this._holdDisposer?.(); Doc.UnBrushDoc(this.props.Document); - !this.props.dontRegisterView && DocumentManager.Instance.RemoveView(this); } startDragging(x: number, y: number, dropAction: dropActionType) { if (this._mainCont.current) { const dragData = new DragManager.DocumentDragData([this.props.Document]); - const [left, top] = this.props.ScreenToLocalTransform().scale(this.LocalScaling).inverse().transformPoint(0, 0); - dragData.offset = this.props.ScreenToLocalTransform().scale(this.LocalScaling).transformDirection(x - left, y - top); + const [left, top] = this.props.ScreenToLocalTransform().scale(this.ContentScale).inverse().transformPoint(0, 0); + dragData.offset = this.props.ScreenToLocalTransform().scale(this.ContentScale).transformDirection(x - left, y - top); dragData.dropAction = dropAction; dragData.removeDocument = this.props.removeDocument; dragData.moveDocument = this.props.moveDocument; - dragData.dragDivName = this.props.dragDivName; dragData.treeViewDoc = this.props.treeViewDoc; DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { hideSource: !dropAction && !this.layoutDoc.onDragStart }); } } - - @undoBatch @action - public static FloatDoc(topDocView: DocumentView) { - const { Document: topDoc, ContainingCollectionView: container } = topDocView.props; - const screenXf = container?.screenToLocalTransform(); - if (screenXf) { - SelectionManager.DeselectAll(); - if (topDoc.z) { - const spt = screenXf.inverse().transformPoint(NumCast(topDoc.x), NumCast(topDoc.y)); - topDoc.z = 0; - topDoc.x = spt[0]; - topDoc.y = spt[1]; - topDocView.props.removeDocument?.(topDoc); - topDocView.props.addDocTab(topDoc, "inParent"); - } else { - const spt = topDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - const fpt = screenXf.transformPoint(spt[0], spt[1]); - topDoc.z = 1; - topDoc.x = fpt[0]; - topDoc.y = fpt[1]; - } - setTimeout(() => SelectionManager.SelectDoc(DocumentManager.Instance.getDocumentView(topDoc, container)!, false), 0); - } - } - onKeyDown = (e: React.KeyboardEvent) => { if (e.altKey && !e.nativeEvent.cancelBubble) { e.stopPropagation(); @@ -355,48 +327,14 @@ export class DocumentView extends DocComponent(Docu if ((this.layoutDoc.onDragStart || this.props.Document.rootDocument) && !(e.ctrlKey || e.button > 0)) { // onDragStart implies a button doc that we don't want to select when clicking. RootDocument & isTemplaetForField implies we're clicking on part of a template instance and we want to select the whole template, not the part stopPropagate = false; // don't stop propagation for field templates -- want the selection to propagate up to the root document of the template } else { - this.select(e.ctrlKey || e.shiftKey); + this.props.select(e.ctrlKey || e.shiftKey); } preventDefault = false; } stopPropagate && e.stopPropagation(); preventDefault && e.preventDefault(); } - }); - - // follows a link - if the target is on screen, it highlights/pans to it. - // if the target isn't onscreen, then it will open up the target in a tab, on the right, or in place - // depending on the followLinkLocation property of the source (or the link itself as a fallback); - public static followLinkClick = async (linkDoc: Opt, sourceDoc: Doc, docView: { - focus: DocFocusFunc, - addDocTab: (doc: Doc, where: string) => boolean, - ContainingCollectionDoc?: Doc - }, altKey: boolean) => { - const batch = UndoManager.StartBatch("follow link click"); - // open up target if it's not already in view ... - const createViewFunc = (doc: Doc, followLoc: string, finished: Opt<() => void>) => { - const targetFocusAfterDocFocus = () => { - const where = StrCast(sourceDoc.followLinkLocation) || followLoc; - const hackToCallFinishAfterFocus = () => { - finished && setTimeout(finished, 0); // finished() needs to be called right after hackToCallFinishAfterFocus(), but there's no callback for that so we use the hacky timeout. - return false; // we must return false here so that the zoom to the document is not reversed. If it weren't for needing to call finished(), we wouldn't need this function at all since not having it is equivalent to returning false - }; - const addTab = docView.addDocTab(doc, where); - addTab && setTimeout(() => { - const targDocView = DocumentManager.Instance.getFirstDocumentView(doc); - targDocView?.props.focus(doc, BoolCast(sourceDoc.followLinkZoom, false), undefined, hackToCallFinishAfterFocus); - }); // add the target and focus on it. - return where !== "inPlace" || addTab; // return true to reset the initial focus&zoom (return false for 'inPlace' since resetting the initial focus&zoom will negate the zoom into the target) - }; - if (!sourceDoc.followLinkZoom) { - targetFocusAfterDocFocus(); - } else { - // first focus & zoom onto this (the clicked document). Then execute the function to focus on the target - docView.focus(sourceDoc, BoolCast(sourceDoc.followLinkZoom, true), 1, targetFocusAfterDocFocus); - } - }; - await DocumentManager.Instance.FollowLink(linkDoc, sourceDoc, createViewFunc, BoolCast(sourceDoc.followLinkZoom, false), docView.ContainingCollectionDoc, batch.end, altKey ? true : undefined); - } + }).bind(this); handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent) => { SelectionManager.DeselectAll(); @@ -421,7 +359,7 @@ export class DocumentView extends DocComponent(Docu if (e.cancelBubble && this.active) { this.removeMoveListeners(); } - else if (!e.cancelBubble && (SelectionManager.IsSelected(this, true) || this.props.parentActive(true) || this.layoutDoc.onDragStart || this.onClickHandler) && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) { + else if (!e.cancelBubble && (this.props.isSelected(true) || this.props.parentActive(true) || this.layoutDoc.onDragStart || this.onClickHandler) && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) { const touch = me.touchEvent.changedTouches.item(0); if (touch && (Math.abs(this._downX - touch.clientX) > 3 || Math.abs(this._downY - touch.clientY) > 3)) { @@ -436,7 +374,7 @@ export class DocumentView extends DocComponent(Docu } handle2PointersDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent) => { - if (!e.nativeEvent.cancelBubble && !this.isSelected()) { + if (!e.nativeEvent.cancelBubble && !this.props.isSelected()) { e.stopPropagation(); e.preventDefault(); @@ -447,17 +385,6 @@ export class DocumentView extends DocComponent(Docu } } - public iconify() { - const layoutKey = Cast(this.props.Document.layoutKey, "string", null); - if (layoutKey !== "layout_icon") { - this.switchViews(true, "icon"); - if (layoutKey && layoutKey !== "layout" && layoutKey !== "layout_icon") this.props.Document.deiconifyLayout = layoutKey.replace("layout_", ""); - } else { - const deiconifyLayout = Cast(this.props.Document.deiconifyLayout, "string", null); - this.switchViews(deiconifyLayout ? true : false, deiconifyLayout); - this.props.Document.deiconifyLayout = undefined; - } - } @action handle2PointersMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent) => { @@ -480,7 +407,7 @@ export class DocumentView extends DocComponent(Docu let nheight = Doc.NativeHeight(layoutDoc); const width = (layoutDoc._width || 0); const height = (layoutDoc._height || (nheight / nwidth * width)); - const scale = this.props.ScreenToLocalTransform().Scale * this.LocalScaling; + const scale = this.props.ScreenToLocalTransform().Scale * this.ContentScale; const actualdW = Math.max(width + (dW * scale), 20); const actualdH = Math.max(height + (dH * scale), 20); doc.x = (doc.x || 0) + dX * (actualdW - width); @@ -523,7 +450,7 @@ export class DocumentView extends DocComponent(Docu if (!(InteractionUtils.IsType(e, InteractionUtils.MOUSETYPE) || Doc.GetSelectedTool() === InkTool.Highlighter || Doc.GetSelectedTool() === InkTool.Pen)) { if (!InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) { e.stopPropagation(); - if (SelectionManager.IsSelected(this, true) && this.props.Document._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it + if (SelectionManager.IsSelected(this.props.DocumentView, true) && this.props.Document._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it // TODO: check here for panning/inking } return; @@ -538,7 +465,7 @@ export class DocumentView extends DocComponent(Docu (e.button === 0 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) { e.stopPropagation(); - if (SelectionManager.IsSelected(this, true) && this.layoutDoc._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it + if (SelectionManager.IsSelected(this.props.DocumentView, true) && this.layoutDoc._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it } document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); @@ -555,7 +482,7 @@ export class DocumentView extends DocComponent(Docu if (e.cancelBubble && this.active) { document.removeEventListener("pointermove", this.onPointerMove); // stop listening to pointerMove if something else has stopPropagated it (e.g., the MarqueeView) } - else if (!e.cancelBubble && (SelectionManager.IsSelected(this, true) || this.props.parentActive(true) || this.layoutDoc.onDragStart) && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) { + else if (!e.cancelBubble && (SelectionManager.IsSelected(this.props.DocumentView, true) || this.props.parentActive(true) || this.layoutDoc.onDragStart) && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) { if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) { if (!e.altKey && (!this.topMost || this.layoutDoc.onDragStart || this.onClickHandler) && (e.buttons === 1 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE))) { document.removeEventListener("pointermove", this.onPointerMove); @@ -702,7 +629,7 @@ export class DocumentView extends DocComponent(Docu @undoBatch toggleNativeDimensions = () => { - Doc.toggleNativeDimensions(this.layoutDoc, this.LocalScaling, this.props.PanelWidth(), this.props.PanelHeight()); + Doc.toggleNativeDimensions(this.layoutDoc, this.ContentScale, this.props.PanelWidth(), this.props.PanelHeight()); } @undoBatch @@ -736,7 +663,7 @@ export class DocumentView extends DocComponent(Docu if (e && this.rootDoc._hideContextMenu && Doc.UserDoc().noviceMode) { e.preventDefault(); e.stopPropagation(); - !this.isSelected(true) && SelectionManager.SelectDoc(this, false); + !this.props.isSelected(true) && SelectionManager.SelectDoc(this.props.DocumentView, false); } // the touch onContextMenu is button 0, the pointer onContextMenu is button 2 if (e) { @@ -818,7 +745,7 @@ export class DocumentView extends DocComponent(Docu const more = cm.findByDescription("More..."); const moreItems = more && "subitems" in more ? more.subitems : []; if (!Doc.IsSystem(this.rootDoc)) { - (this.rootDoc._viewType !== CollectionViewType.Docking || !Doc.UserDoc().noviceMode) && moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "users" }); + (this.rootDoc._viewType !== CollectionViewType.Docking || !Doc.UserDoc().noviceMode) && moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this.props.DocumentView), icon: "users" }); //moreItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" }); if (!Doc.UserDoc().noviceMode) { moreItems.push({ description: "Make View of Metadata Field", event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc), icon: "concierge-bell" }); @@ -853,26 +780,25 @@ export class DocumentView extends DocComponent(Docu e?.stopPropagation(); // DocumentViews should stop propagation of this event } cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15); - !this.isSelected(true) && setTimeout(() => SelectionManager.SelectDoc(this, false), 300); // on a mac, the context menu is triggered on mouse down, but a YouTube video becaomes interactive when selected which means that the context menu won't show up. by delaying the selection until hopefully after the pointer up, the context menu will appear. + !this.props.isSelected(true) && setTimeout(() => SelectionManager.SelectDoc(this.props.DocumentView, false), 300); // on a mac, the context menu is triggered on mouse down, but a YouTube video becaomes interactive when selected which means that the context menu won't show up. by delaying the selection until hopefully after the pointer up, the context menu will appear. }); } - isSelected = (outsideReaction?: boolean) => SelectionManager.IsSelected(this, outsideReaction); - select = (ctrlPressed: boolean) => { SelectionManager.SelectDoc(this, ctrlPressed); }; rootSelected = (outsideReaction?: boolean) => { - return this.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false; + return this.props.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false; } panelHeight = () => this.props.PanelHeight() - this.headerMargin; parentActive = (outsideReaction: boolean) => this.props.layerProvider?.(this.layoutDoc) === false ? this.props.parentActive(outsideReaction) : false; screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin); - contentScaling = () => this.LocalScaling; + contentScaling = () => this.ContentScale; + onClickFunc = () => this.onClickHandler; + onDoubleClickFunc = () => this.onDoubleClickHandler; @observable contentsActive: () => boolean = returnFalse; @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive; @computed get contents() { - console.log(this.props.Document.title + " " + this.LocalScaling + " " + this.contentScaling()) TraceMobx(); return (
(Docu fitContentsToDoc={this.props.fitContentsToDoc} ContainingCollectionView={this.props.ContainingCollectionView} ContainingCollectionDoc={this.props.ContainingCollectionDoc} - NativeWidth={this.NativeWidth} - NativeHeight={this.NativeHeight} PanelWidth={this.props.PanelWidth} PanelHeight={this.props.PanelHeight} scaling={this.contentScaling} @@ -912,14 +836,16 @@ export class DocumentView extends DocComponent(Docu ScreenToLocalTransform={this.screenToLocal} ignoreAutoHeight={this.props.ignoreAutoHeight} bringToFront={this.props.bringToFront} - isSelected={this.isSelected} - select={this.select} + isSelected={this.props.isSelected} + select={this.props.select} rootSelected={this.rootSelected} scriptContext={this.props.scriptContext} onClick={this.onClickFunc} layoutKey={this.finalLayoutKey} /> {this.layoutDoc.hideAllLinks ? (null) : this.allAnchors} - {this.hideLinkButton ? (null) : } + {this.hideLinkButton ? + (null) : + }
); } @@ -933,8 +859,7 @@ export class DocumentView extends DocComponent(Docu return anchor.type === DocumentType.AUDIO && NumCast(ept) ? false : true; } - @observable _link: Opt; // see DocumentButtonBar for explanation of how this works - makeLink = () => this._link; // pass the link placeholde to child views so they can react to make a specialized anchor. This is essentially a function call to the descendants since the value of the _link variable will immediately get set back to undefined. + makeLink = () => this.props.DocumentView._link; // pass the link placeholde to child views so they can react to make a specialized anchor. This is essentially a function call to the descendants since the value of the _link variable will immediately get set back to undefined. @undoBatch hideLinkAnchor = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && (doc.hidden = true), true) @@ -998,8 +923,6 @@ export class DocumentView extends DocComponent(Docu styleProvider={this.captionStyleProvider} dontRegisterView={true} LayoutTemplateString={``} - isSelected={this.isSelected} - select={this.select} onClick={this.onClickFunc} layoutKey={this.finalLayoutKey} />
); @@ -1027,21 +950,7 @@ export class DocumentView extends DocComponent(Docu {captionView}
; } - @undoBatch - @action - setCustomView = (custom: boolean, layout: string): void => { - Doc.setNativeView(this.props.Document); - custom && DocUtils.makeCustomViewClicked(this.props.Document, Docs.Create.StackingDocument, layout, undefined); - } - switchViews = action((custom: boolean, view: string) => { - this._animateScalingTo = 0.1; // shrink doc - setTimeout(action(() => { - this.setCustomView(custom, view); - this._animateScalingTo = 1; // expand it - setTimeout(action(() => this._animateScalingTo = 0), 400); - }), 400); - }); @computed get renderDoc() { TraceMobx(); @@ -1077,7 +986,7 @@ export class DocumentView extends DocComponent(Docu onContextMenu={this.onContextMenu} onKeyDown={this.onKeyDown} onPointerDown={this.onPointerDown} - onClick={this.onClick} + onClick={this.onClick.bind(this)} onPointerEnter={action(e => !SnappingManager.GetIsDragging() && Doc.BrushDoc(this.props.Document))} onPointerLeave={action(e => { let entered = false; @@ -1106,3 +1015,210 @@ Scripting.addGlobal(function toggleDetail(doc: any, layoutKey: string, otherKey: if (dv?.props.Document.layoutKey === layoutKey) dv?.switchViews(otherKey !== "layout", otherKey.replace("layout_", "")); else dv?.switchViews(true, layoutKey.replace("layout_", "")); }); + +@observer +export class DocumentView extends React.Component { + public static ROOT_DIV = "documentView-effectsWrapper"; + public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive + public ContentRef = React.createRef(); + + @observable _link: Opt; // see DocumentButtonBar for explanation of how this works + @observable public docView: DocumentViewInternal | undefined | null; + + get rootDoc() { return this.docView?.rootDoc || this.Document; } + get dataDoc() { return this.docView?.dataDoc || this.Document; } + get finalLayoutKey() { return this.docView?.finalLayoutKey || "layout"; } + get ContentDiv() { return this.docView?.ContentDiv; } + get allLinks() { return this.docView?.allLinks || []; } + get LayoutFieldKey() { return this.docView?.LayoutFieldKey || "layout"; } + toggleFollowLink = (location: Opt, zoom: boolean, setPushpin: boolean) => this.docView?.toggleFollowLink(location, zoom, setPushpin); + toggleNativeDimensions = () => this.docView?.toggleNativeDimensions(); + contentsActive = () => this.docView?.contentsActive(); + + + // follows a link - if the target is on screen, it highlights/pans to it. + // if the target isn't onscreen, then it will open up the target in a tab, on the right, or in place + // depending on the followLinkLocation property of the source (or the link itself as a fallback); + public static followLinkClick = async (linkDoc: Opt, sourceDoc: Doc, docView: { + focus: DocFocusFunc, + addDocTab: (doc: Doc, where: string) => boolean, + ContainingCollectionDoc?: Doc + }, altKey: boolean) => { + const batch = UndoManager.StartBatch("follow link click"); + // open up target if it's not already in view ... + const createViewFunc = (doc: Doc, followLoc: string, finished: Opt<() => void>) => { + const targetFocusAfterDocFocus = () => { + const where = StrCast(sourceDoc.followLinkLocation) || followLoc; + const hackToCallFinishAfterFocus = () => { + finished && setTimeout(finished, 0); // finished() needs to be called right after hackToCallFinishAfterFocus(), but there's no callback for that so we use the hacky timeout. + return false; // we must return false here so that the zoom to the document is not reversed. If it weren't for needing to call finished(), we wouldn't need this function at all since not having it is equivalent to returning false + }; + const addTab = docView.addDocTab(doc, where); + addTab && setTimeout(() => { + const targDocView = DocumentManager.Instance.getFirstDocumentView(doc); + targDocView?.props.focus(doc, BoolCast(sourceDoc.followLinkZoom, false), undefined, hackToCallFinishAfterFocus); + }); // add the target and focus on it. + return where !== "inPlace" || addTab; // return true to reset the initial focus&zoom (return false for 'inPlace' since resetting the initial focus&zoom will negate the zoom into the target) + }; + if (!sourceDoc.followLinkZoom) { + targetFocusAfterDocFocus(); + } else { + // first focus & zoom onto this (the clicked document). Then execute the function to focus on the target + docView.focus(sourceDoc, BoolCast(sourceDoc.followLinkZoom, true), 1, targetFocusAfterDocFocus); + } + }; + await DocumentManager.Instance.FollowLink(linkDoc, sourceDoc, createViewFunc, BoolCast(sourceDoc.followLinkZoom, false), docView.ContainingCollectionDoc, batch.end, altKey ? true : undefined); + } + + @undoBatch @action + public static FloatDoc(topDocView: DocumentView) { + const { Document: topDoc, ContainingCollectionView: container } = topDocView.props; + const screenXf = container?.screenToLocalTransform(); + if (screenXf) { + SelectionManager.DeselectAll(); + if (topDoc.z) { + const spt = screenXf.inverse().transformPoint(NumCast(topDoc.x), NumCast(topDoc.y)); + topDoc.z = 0; + topDoc.x = spt[0]; + topDoc.y = spt[1]; + topDocView.props.removeDocument?.(topDoc); + topDocView.props.addDocTab(topDoc, "inParent"); + } else { + const spt = topDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + const fpt = screenXf.transformPoint(spt[0], spt[1]); + topDoc.z = 1; + topDoc.x = fpt[0]; + topDoc.y = fpt[1]; + } + setTimeout(() => SelectionManager.SelectDoc(DocumentManager.Instance.getDocumentView(topDoc, container)!, false), 0); + } + } + + get Document() { return this.props.Document; } + get topMost() { return this.props.renderDepth === 0; } + @computed get layoutDoc() { return Doc.Layout(this.Document, this.props.LayoutTemplate?.()); } + + @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions)); } + @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions) || 0); } + @computed get nativeScaling() { + const nativeW = this.nativeWidth; + const nativeH = this.nativeHeight; + let scaling = 1; + if (nativeW && (this.layoutDoc?._fitWidth || this.props.PanelHeight() / nativeH > this.props.PanelWidth() / nativeW)) { + scaling = this.props.PanelWidth() / nativeW; // width-limited or fitWidth + } else if (nativeW && nativeH) { + scaling = this.props.PanelHeight() / nativeH; // height-limited + } + return scaling; + } + + @computed get panelWidth() { return this.nativeWidth ? this.nativeWidth * this.nativeScaling : this.props.PanelWidth(); } + @computed get panelHeight() { + if (this.nativeHeight) { + if (this.props.Document._fitWidth) { + return Math.min(this.props.PanelHeight(), NumCast(this.props.Document.scrollHeight, this.props.PanelHeight())); + } + else return Math.min(this.props.PanelHeight(), this.nativeHeight * this.nativeScaling); + } + return this.props.PanelHeight(); + } + + @computed get Xshift() { return this.nativeWidth ? (this.props.PanelWidth() - this.nativeWidth * this.nativeScaling) / 2 : 0; } + @computed get YShift() { return this.nativeWidth && this.nativeHeight && Math.abs(this.Xshift) < 0.001 ? (this.props.PanelHeight() - this.nativeHeight * this.nativeScaling) / 2 : 0; } + @computed get centeringX() { return this.props.dontCenter?.includes("x") ? 0 : this.Xshift; } + @computed get centeringY() { return this.props.Document._fitWidth || this.props.dontCenter?.includes("y") ? 0 : this.YShift; } + + getBounds = () => { + if (!this.docView || + !this.docView.ContentDiv || + this.docView.props.renderDepth === 0 || + this.docView.props.treeViewDoc || + Doc.AreProtosEqual(this.props.Document, Doc.UserDoc())) { + return undefined; + } + const xf = this.docView?.props.ScreenToLocalTransform(); + const transform = (xf.scale(this.nativeScaling)).inverse(); + var [left, top] = transform.transformPoint(0, 0); + let [right, bottom] = transform.transformPoint(this.PanelWidth(), this.PanelHeight()); + if (this.docView.props.LayoutTemplateString?.includes("LinkAnchorBox")) { + const docuBox = this.docView.ContentDiv.getElementsByClassName("linkAnchorBox-cont"); + if (docuBox.length) { + return docuBox[0].getBoundingClientRect(); + } + } + return { left, top, right, bottom }; + } + + public iconify() { + const layoutKey = Cast(this.Document.layoutKey, "string", null); + if (layoutKey !== "layout_icon") { + this.switchViews(true, "icon"); + if (layoutKey && layoutKey !== "layout" && layoutKey !== "layout_icon") this.Document.deiconifyLayout = layoutKey.replace("layout_", ""); + } else { + const deiconifyLayout = Cast(this.Document.deiconifyLayout, "string", null); + this.switchViews(deiconifyLayout ? true : false, deiconifyLayout); + this.Document.deiconifyLayout = undefined; + } + } + @undoBatch + @action + setCustomView = (custom: boolean, layout: string): void => { + Doc.setNativeView(this.props.Document); + custom && DocUtils.makeCustomViewClicked(this.props.Document, Docs.Create.StackingDocument, layout, undefined); + } + switchViews = action((custom: boolean, view: string) => { + this.docView && (this.docView._animateScalingTo = 0.1); // shrink doc + setTimeout(action(() => { + this.setCustomView(custom, view); + this.docView && (this.docView._animateScalingTo = 1); // expand it + setTimeout(action(() => this.docView && (this.docView._animateScalingTo = 0)), 400); + }), 400); + }); + + isSelected = (outsideReaction?: boolean) => SelectionManager.IsSelected(this, outsideReaction); + select = (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed); + NativeWidth = () => this.nativeWidth; + NativeHeight = () => this.nativeHeight; + PanelWidth = () => this.panelWidth; + PanelHeight = () => this.panelHeight; + ContentScale = () => this.nativeScaling; + screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(-this.centeringX, -this.centeringY).scale(1 / this.nativeScaling); + + componentDidMount() { + if (!BoolCast(this.props.Document.dontRegisterView, this.props.dontRegisterView)) { + DocumentManager.Instance.AddView(this); + } + } + componentWillUnmount() { + !this.props.dontRegisterView && DocumentManager.Instance.RemoveView(this); + } + + render() { + TraceMobx(); + return (
+ {!this.props.Document || !this.props.PanelWidth() ? (null) : ( +
0.001 ? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth(), + height: Math.abs(this.YShift) > 0.001 ? this.props.Document._fitWidth ? `${this.panelHeight}px` : `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(), + }}> + this.docView = r)} + PanelWidth={this.PanelWidth} + PanelHeight={this.PanelHeight} + NativeWidth={this.NativeWidth} + NativeHeight={this.NativeHeight} + isSelected={this.isSelected} + select={this.select} + ContentScaling={this.ContentScale} + ScreenToLocalTransform={this.screenToLocalTransform} + focus={this.props.focus || emptyFunction} + bringToFront={emptyFunction} + /> +
)} +
); + } +} diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index fd2425950..c69fb5b33 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -2,17 +2,16 @@ import { action, computed, observable, runInAction } from 'mobx'; import { observer } from "mobx-react"; import wiki from "wikijs"; import { Doc, DocCastAsync, HeightSym, Opt, WidthSym } from "../../../fields/Doc"; +import { Id } from '../../../fields/FieldSymbols'; import { Cast, FieldValue, NumCast } from "../../../fields/Types"; -import { emptyFunction, emptyPath, returnEmptyFilter, returnFalse, returnOne, returnZero, returnEmptyDoclist } from "../../../Utils"; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse } from "../../../Utils"; import { Docs } from "../../documents/Documents"; import { DocumentManager } from "../../util/DocumentManager"; import { Transform } from "../../util/Transform"; import { ContextMenu } from '../ContextMenu'; -import { ContentFittingDocumentView } from "./ContentFittingDocumentView"; import { DocumentLinksButton } from './DocumentLinksButton'; +import { DocumentView, StyleProviderFunc } from "./DocumentView"; import React = require("react"); -import { StyleProviderFunc } from './DocumentView'; -import { Id } from '../../../fields/FieldSymbols'; interface Props { linkDoc?: Doc; @@ -92,7 +91,7 @@ export class LinkDocPreview extends React.Component {
: -
{ - Doc.toggleNativeDimensions(this.layoutDoc, 1, this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); + alert("need to fix"); + // Doc.toggleNativeDimensions(this.layoutDoc, 1, this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); } public static get DefaultLayout(): Doc | string | undefined { diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 447ff5865..c6be25dc2 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -6,16 +6,15 @@ import { EditorState, Plugin } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import * as ReactDOM from 'react-dom'; import wiki from "wikijs"; -import { Doc, DocCastAsync, Opt, DocListCast } from "../../../../fields/Doc"; +import { Doc, DocCastAsync, DocListCast, Opt } from "../../../../fields/Doc"; import { Cast, FieldValue, NumCast, StrCast } from "../../../../fields/Types"; -import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, Utils } from "../../../../Utils"; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, Utils } from "../../../../Utils"; import { DocServer } from "../../../DocServer"; import { Docs } from "../../../documents/Documents"; import { DocumentType } from "../../../documents/DocumentTypes"; import { LinkManager } from "../../../util/LinkManager"; import { Transform } from "../../../util/Transform"; import { undoBatch } from "../../../util/UndoManager"; -import { ContentFittingDocumentView } from "../ContentFittingDocumentView"; import { DocumentLinksButton } from "../DocumentLinksButton"; import { DocumentView } from "../DocumentView"; import { LinkDocPreview } from "../LinkDocPreview"; @@ -295,7 +294,7 @@ export class FormattedTextBoxComment {
- - Date: Tue, 15 Dec 2020 13:01:18 -0500 Subject: simplifying dragging to make links by moving linkDocument to event, instead of dragData. moved link anchor and caption styling to default style provider. CURRENTLY, typing text, brushing doc highlights along with a bunch of other things ARE BROKEN .. --- src/client/documents/Documents.ts | 34 +- src/client/util/DragManager.ts | 7 +- src/client/views/StyleProvider.tsx | 9 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/DocumentLinksButton.tsx | 9 +- src/client/views/nodes/DocumentView.tsx | 386 ++++++++------------- src/client/views/nodes/WebBox.tsx | 4 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 9 +- src/client/views/pdf/PDFViewer.tsx | 6 +- 9 files changed, 197 insertions(+), 269 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 95daecc64..8fd906dc7 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1,4 +1,4 @@ -import { runInAction } from "mobx"; +import { runInAction, action } from "mobx"; import { basename, extname } from "path"; import { DateField } from "../../fields/DateField"; import { Doc, DocListCast, DocListCastAsync, Field, HeightSym, Opt, WidthSym } from "../../fields/Doc"; @@ -53,6 +53,8 @@ import { PresElementBox } from "../views/presentationview/PresElementBox"; import { SearchBox } from "../views/search/SearchBox"; import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo"; import { DocumentType } from "./DocumentTypes"; +import { TaskCompletionBox } from "../views/nodes/TaskCompletedBox"; +import { LinkDescriptionPopup } from "../views/nodes/LinkDescriptionPopup"; const path = require('path'); const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace("px", "")); @@ -1011,11 +1013,37 @@ export namespace DocUtils { DocUtils.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: doc }, { doc: d }, "audio link", "audio timeline")); } - export function MakeLink(source: { doc: Doc }, target: { doc: Doc }, linkRelationship: string = "", description: string = "", id?: string, allowParCollectionLink?: boolean) { + export function MakeLink(source: { doc: Doc }, target: { doc: Doc }, linkRelationship: string = "", description: string = "", id?: string, allowParCollectionLink?: boolean, showPopup?: number[]) { const sv = DocumentManager.Instance.getDocumentView(source.doc); if (!allowParCollectionLink && sv?.props.ContainingCollectionDoc === target.doc) return; if (target.doc === Doc.UserDoc()) return undefined; + + const makeLink = action((linkDoc: Doc, showPopup: number[]) => { + LinkManager.currentLink = linkDoc; + + TaskCompletionBox.textDisplayed = "Link Created"; + TaskCompletionBox.popupX = showPopup[0]; + TaskCompletionBox.popupY = showPopup[1] - 33; + TaskCompletionBox.taskCompleted = true; + + LinkDescriptionPopup.popupX = showPopup[0]; + LinkDescriptionPopup.popupY = showPopup[1]; + LinkDescriptionPopup.descriptionPopup = true; + + const rect = document.body.getBoundingClientRect(); + if (LinkDescriptionPopup.popupX + 200 > rect.width) { + LinkDescriptionPopup.popupX -= 190; + TaskCompletionBox.popupX -= 40; + } + if (LinkDescriptionPopup.popupY + 100 > rect.height) { + LinkDescriptionPopup.popupY -= 40; + TaskCompletionBox.popupY -= 40; + } + + setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2500); + }); + const linkDoc = Docs.Create.LinkDocument(source, target, { linkRelationship, layoutKey: "layout_linkView", description }, id); Doc.GetProto(linkDoc)["anchor1-useLinkSmallAnchor"] = source.doc.useLinkSmallAnchor; Doc.GetProto(linkDoc)["anchor2-useLinkSmallAnchor"] = target.doc.useLinkSmallAnchor; @@ -1024,7 +1052,7 @@ export namespace DocUtils { Doc.GetProto(linkDoc)["acl-Public"] = linkDoc["acl-Public"] = SharingPermissions.Add; linkDoc.layout_linkView = Cast(Cast(Doc.UserDoc()["template-button-link"], Doc, null).dragFactory, Doc, null); Doc.GetProto(linkDoc).title = ComputedField.MakeFunction('self.anchor1?.title +" (" + (self.linkRelationship||"to") +") " + self.anchor2?.title'); - + showPopup && makeLink(linkDoc, showPopup); return linkDoc; } diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 4704d9e71..1a58b4bf1 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -109,6 +109,7 @@ export namespace DragManager { this.linkDragData = dragData instanceof LinkDragData ? dragData : undefined; this.columnDragData = dragData instanceof ColumnDragData ? dragData : undefined; } + linkDocument?: Doc; aborted: boolean; docDragData?: DocumentDragData; annoDragData?: PdfAnnoDragData; @@ -143,8 +144,7 @@ export namespace DragManager { droppedDocuments: Doc[] = []; linkSourceDocument: Doc; dontClearTextBox?: boolean; - linkDocument?: Doc; - linkDropCallback?: (data: { linkDocument?: Doc }) => void; + linkDropCallback?: (data: { linkDocument: Doc }) => void; } export class ColumnDragData { constructor(colKey: SchemaHeaderField) { @@ -161,7 +161,6 @@ export namespace DragManager { this.annotationDocument = annotationDoc; this.offset = [0, 0]; } - linkDocument?: Doc; targetContext: Doc | undefined; dragDocument: Doc; annotationDocument: Doc; @@ -169,7 +168,7 @@ export namespace DragManager { offset: number[]; dropAction: dropActionType; userDropAction: dropActionType; - linkDropCallback?: (data: { linkDocument?: Doc }) => void; + linkDropCallback?: (data: { linkDocument: Doc }) => void; } export function MakeDropTarget( diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index f2569edbd..912d718cf 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -70,20 +70,24 @@ export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentVie export function DefaultStyleProvider(doc: Opt, props: Opt, property: string): any { const docProps = testDocProps(props) ? props : undefined; const selected = property.includes(":selected"); + const isCaption = property.includes(":caption"); + const isAnchor = property.includes(":anchor"); const isBackground = () => StrListCast(doc?.layers).includes(StyleLayers.Background); const backgroundCol = () => props?.styleProvider?.(doc, props, StyleProp.BackgroundColor); const opacity = () => props?.styleProvider?.(doc, props, StyleProp.Opacity); switch (property.split(":")[0]) { case StyleProp.DocContents: return undefined; + case StyleProp.LinkSource: return isAnchor && docProps?.Document; // pass the LinkSource to the LinkAnchorBox case StyleProp.WidgetColor: return darkScheme() ? "lightgrey" : "dimgrey"; case StyleProp.Opacity: return Cast(doc?._opacity, "number", Cast(doc?.opacity, "number", null)); - case StyleProp.HideLinkButton: return props?.dontRegisterView || (!selected && (doc?.isLinkButton || doc?.hideLinkButton)); + case StyleProp.HideLinkButton: return isAnchor || props?.dontRegisterView || (!selected && (doc?.isLinkButton || doc?.hideLinkButton)); case StyleProp.ShowTitle: return doc && !doc.presentationTargetDoc && StrCast(doc._showTitle, !Doc.IsSystem(doc) && doc.type === DocumentType.RTF ? (doc.author === Doc.CurrentUserEmail ? StrCast(Doc.UserDoc().showTitle) : "author;creationDate") : undefined); case StyleProp.Color: + if (isCaption) return "white"; const backColor = backgroundCol() || "black"; const col = Color(backColor).rgb(); const colsum = (col.red() + col.green() + col.blue()); @@ -93,6 +97,8 @@ export function DefaultStyleProvider(doc: Opt, props: Opt = StrCast(doc?._backgroundColor, StrCast(doc?.backgroundColor)); if (!docProps) { @@ -144,6 +150,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt { - const linkDoc = dropEv.linkDragData?.linkDocument as Doc; // equivalent to !dropEve.aborted since linkDocument is only assigned on a completed drop - if (this.props.View && linkDoc) { - !linkDoc.linkRelationship && (Doc.GetProto(linkDoc).linkRelationship = "hyperlink"); + if (this.props.View && dropEv.linkDocument) {// dropEv.linkDocument equivalent to !dropEve.aborted since linkDocument is only assigned on a completed drop + !dropEv.linkDocument.linkRelationship && (Doc.GetProto(dropEv.linkDocument).linkRelationship = "hyperlink"); // we want to allow specific views to handle the link creation in their own way (e.g., rich text makes text hyperlinks) // the dragged view can regiser a linkDropCallback to be notified that the link was made and to update their data structures // however, the dropped document isn't so accessible. What we do is set the newly created link document on the documentView // The documentView passes a function prop returning this link doc to its descendants who can react to changes to it. - dropEv.linkDragData?.linkDropCallback?.(dropEv.linkDragData); - runInAction(() => this.props.View.LinkBeingCreated = linkDoc); + dropEv.linkDragData?.linkDropCallback?.(dropEv as { linkDocument: Doc }); // bcz: typescript can't figure out that this is valid even though we tested dropEv.linkDocument above + runInAction(() => this.props.View.LinkBeingCreated = dropEv.linkDocument); setTimeout(action(() => this.props.View.LinkBeingCreated = undefined), 0); } linkDrag?.end(); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index a005a5db4..da10f2a69 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -153,6 +153,25 @@ export class DocumentViewInternal extends DocComponent): any => { this.removeMoveListeners(); this.removeEndListeners(); @@ -194,6 +213,113 @@ export class DocumentViewInternal extends DocComponent) => { + if (!e.nativeEvent.cancelBubble && !this.props.isSelected()) { + e.stopPropagation(); + e.preventDefault(); + + this.removeMoveListeners(); + this.addMoveListeners(); + this.removeEndListeners(); + this.addEndListeners(); + } + } + + handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent) => { + SelectionManager.DeselectAll(); + if (this.Document.onPointerDown) return; + const touch = me.touchEvent.changedTouches.item(0); + if (touch) { + this._downX = touch.clientX; + this._downY = touch.clientY; + if (!e.nativeEvent.cancelBubble) { + if ((this.active || this.layoutDoc.onDragStart || this.onClickHandler) && !e.ctrlKey && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) e.stopPropagation(); + this.removeMoveListeners(); + this.addMoveListeners(); + this.removeEndListeners(); + this.addEndListeners(); + e.stopPropagation(); + } + } + } + + handle1PointerMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent) => { + if ((e as any).formattedHandled) { e.stopPropagation; return; } + if (e.cancelBubble && this.active) { + this.removeMoveListeners(); + } + else if (!e.cancelBubble && (this.props.isSelected(true) || this.props.parentActive(true) || this.layoutDoc.onDragStart || this.onClickHandler) && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) { + const touch = me.touchEvent.changedTouches.item(0); + if (touch && (Math.abs(this._downX - touch.clientX) > 3 || Math.abs(this._downY - touch.clientY) > 3)) { + if (!e.altKey && (!this.topMost || this.layoutDoc.onDragStart || this.onClickHandler)) { + this.cleanUpInteractions(); + this.startDragging(this._downX, this._downY, this.Document.dropAction ? this.Document.dropAction as any : e.ctrlKey || e.altKey ? "alias" : undefined); + } + } + 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(); + } + } + + @action + handle2PointersMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent) => { + const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true); + const pt1 = myTouches[0]; + const pt2 = myTouches[1]; + const oldPoint1 = this.prevPoints.get(pt1.identifier); + const oldPoint2 = this.prevPoints.get(pt2.identifier); + const pinching = InteractionUtils.Pinning(pt1, pt2, oldPoint1!, oldPoint2!); + if (pinching !== 0 && oldPoint1 && oldPoint2) { + const dW = (Math.abs(pt1.clientX - pt2.clientX) - Math.abs(oldPoint1.clientX - oldPoint2.clientX)); + const dH = (Math.abs(pt1.clientY - pt2.clientY) - Math.abs(oldPoint1.clientY - oldPoint2.clientY)); + const dX = -1 * Math.sign(dW); + const dY = -1 * Math.sign(dH); + + if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) { + const doc = Document(this.props.Document); + const layoutDoc = Document(Doc.Layout(this.props.Document)); + let nwidth = Doc.NativeWidth(layoutDoc); + let nheight = Doc.NativeHeight(layoutDoc); + const width = (layoutDoc._width || 0); + const height = (layoutDoc._height || (nheight / nwidth * width)); + const scale = this.props.ScreenToLocalTransform().Scale * this.ContentScale; + const actualdW = Math.max(width + (dW * scale), 20); + const actualdH = Math.max(height + (dH * scale), 20); + doc.x = (doc.x || 0) + dX * (actualdW - width); + doc.y = (doc.y || 0) + dY * (actualdH - height); + const fixedAspect = e.ctrlKey || (nwidth && nheight); + if (fixedAspect && (!nwidth || !nheight)) { + Doc.SetNativeWidth(layoutDoc, nwidth = layoutDoc._width || 0); + Doc.SetNativeHeight(layoutDoc, nheight = layoutDoc._height || 0); + } + if (nwidth > 0 && nheight > 0) { + if (Math.abs(dW) > Math.abs(dH)) { + if (!fixedAspect) { + Doc.SetNativeWidth(layoutDoc, actualdW / (layoutDoc._width || 1) * Doc.NativeWidth(layoutDoc)); + } + layoutDoc._width = actualdW; + if (fixedAspect && !layoutDoc._fitWidth) layoutDoc._height = nheight / nwidth * layoutDoc._width; + else layoutDoc._height = actualdH; + } + else { + if (!fixedAspect) { + Doc.SetNativeHeight(layoutDoc, actualdH / (layoutDoc._height || 1) * Doc.NativeHeight(doc)); + } + layoutDoc._height = actualdH; + if (fixedAspect && !layoutDoc._fitWidth) layoutDoc._width = nwidth / nheight * layoutDoc._height; + else layoutDoc._width = actualdW; + } + } else { + dW && (layoutDoc._width = actualdW); + dH && (layoutDoc._height = actualdH); + dH && layoutDoc._autoHeight && (layoutDoc._autoHeight = false); + } + } + e.stopPropagation(); + e.preventDefault(); + } + } + @action onRadialMenu = (e: Event, me: InteractionUtils.MultiTouchEvent): void => { const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1]; @@ -209,43 +335,15 @@ export class DocumentViewInternal extends DocComponent) => { - SelectionManager.DeselectAll(); - if (this.Document.onPointerDown) return; - const touch = me.touchEvent.changedTouches.item(0); - if (touch) { - this._downX = touch.clientX; - this._downY = touch.clientY; - if (!e.nativeEvent.cancelBubble) { - if ((this.active || this.layoutDoc.onDragStart || this.onClickHandler) && !e.ctrlKey && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) e.stopPropagation(); - this.removeMoveListeners(); - this.addMoveListeners(); - this.removeEndListeners(); - this.addEndListeners(); - e.stopPropagation(); - } - } - } - - handle1PointerMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent) => { - if ((e as any).formattedHandled) { e.stopPropagation; return; } - if (e.cancelBubble && this.active) { - this.removeMoveListeners(); - } - else if (!e.cancelBubble && (this.props.isSelected(true) || this.props.parentActive(true) || this.layoutDoc.onDragStart || this.onClickHandler) && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) { - - const touch = me.touchEvent.changedTouches.item(0); - if (touch && (Math.abs(this._downX - touch.clientX) > 3 || Math.abs(this._downY - touch.clientY) > 3)) { - if (!e.altKey && (!this.topMost || this.layoutDoc.onDragStart || this.onClickHandler)) { - this.cleanUpInteractions(); - this.startDragging(this._downX, this._downY, this.Document.dropAction ? this.Document.dropAction as any : e.ctrlKey || e.altKey ? "alias" : undefined); - } - } - 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(); - } - } - - handle2PointersDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent) => { - if (!e.nativeEvent.cancelBubble && !this.props.isSelected()) { - e.stopPropagation(); - e.preventDefault(); - - this.removeMoveListeners(); - this.addMoveListeners(); - this.removeEndListeners(); - this.addEndListeners(); - } - } - - - @action - handle2PointersMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent) => { - const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true); - const pt1 = myTouches[0]; - const pt2 = myTouches[1]; - const oldPoint1 = this.prevPoints.get(pt1.identifier); - const oldPoint2 = this.prevPoints.get(pt2.identifier); - const pinching = InteractionUtils.Pinning(pt1, pt2, oldPoint1!, oldPoint2!); - if (pinching !== 0 && oldPoint1 && oldPoint2) { - const dW = (Math.abs(pt1.clientX - pt2.clientX) - Math.abs(oldPoint1.clientX - oldPoint2.clientX)); - const dH = (Math.abs(pt1.clientY - pt2.clientY) - Math.abs(oldPoint1.clientY - oldPoint2.clientY)); - const dX = -1 * Math.sign(dW); - const dY = -1 * Math.sign(dH); - - if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) { - const doc = Document(this.props.Document); - const layoutDoc = Document(Doc.Layout(this.props.Document)); - let nwidth = Doc.NativeWidth(layoutDoc); - let nheight = Doc.NativeHeight(layoutDoc); - const width = (layoutDoc._width || 0); - const height = (layoutDoc._height || (nheight / nwidth * width)); - const scale = this.props.ScreenToLocalTransform().Scale * this.ContentScale; - const actualdW = Math.max(width + (dW * scale), 20); - const actualdH = Math.max(height + (dH * scale), 20); - doc.x = (doc.x || 0) + dX * (actualdW - width); - doc.y = (doc.y || 0) + dY * (actualdH - height); - const fixedAspect = e.ctrlKey || (nwidth && nheight); - if (fixedAspect && (!nwidth || !nheight)) { - Doc.SetNativeWidth(layoutDoc, nwidth = layoutDoc._width || 0); - Doc.SetNativeHeight(layoutDoc, nheight = layoutDoc._height || 0); - } - if (nwidth > 0 && nheight > 0) { - if (Math.abs(dW) > Math.abs(dH)) { - if (!fixedAspect) { - Doc.SetNativeWidth(layoutDoc, actualdW / (layoutDoc._width || 1) * Doc.NativeWidth(layoutDoc)); - } - layoutDoc._width = actualdW; - if (fixedAspect && !layoutDoc._fitWidth) layoutDoc._height = nheight / nwidth * layoutDoc._width; - else layoutDoc._height = actualdH; - } - else { - if (!fixedAspect) { - Doc.SetNativeHeight(layoutDoc, actualdH / (layoutDoc._height || 1) * Doc.NativeHeight(doc)); - } - layoutDoc._height = actualdH; - if (fixedAspect && !layoutDoc._fitWidth) layoutDoc._width = nwidth / nheight * layoutDoc._height; - else layoutDoc._width = actualdW; - } - } else { - dW && (layoutDoc._width = actualdW); - dH && (layoutDoc._height = actualdH); - dH && layoutDoc._autoHeight && (layoutDoc._autoHeight = false); - } - } - e.stopPropagation(); - e.preventDefault(); - } - } + }) onPointerDown = (e: React.PointerEvent): void => { // continue if the event hasn't been canceled AND we are using a moues or this is has an onClick or onDragStart function (meaning it is a button document) @@ -526,11 +515,6 @@ export class DocumentViewInternal extends DocComponent { - this.rootDoc._raiseWhenDragged = this.rootDoc._raiseWhenDragged === undefined ? false : undefined; - } - @undoBatch @action toggleFollowLink = (location: Opt, zoom: boolean, setPushpin: boolean): void => { this.Document.ignoreClick = false; @@ -564,7 +548,6 @@ export class DocumentViewInternal extends DocComponent { this.Document.ignoreClick = false; @@ -585,45 +568,10 @@ export class DocumentViewInternal extends DocComponent { - LinkManager.currentLink = linkDoc; - - TaskCompletionBox.textDisplayed = "Link Created"; - TaskCompletionBox.popupX = de.x; - TaskCompletionBox.popupY = de.y - 33; - TaskCompletionBox.taskCompleted = true; - - LinkDescriptionPopup.popupX = de.x; - LinkDescriptionPopup.popupY = de.y; - LinkDescriptionPopup.descriptionPopup = true; - - const rect = document.body.getBoundingClientRect(); - if (LinkDescriptionPopup.popupX + 200 > rect.width) { - LinkDescriptionPopup.popupX -= 190; - TaskCompletionBox.popupX -= 40; - } - if (LinkDescriptionPopup.popupY + 100 > rect.height) { - LinkDescriptionPopup.popupY -= 40; - TaskCompletionBox.popupY -= 40; - } - - setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2500); - }); - if (de.complete.annoDragData) { - /// this whole section for handling PDF annotations looks weird. Need to rethink this to make it cleaner - e.stopPropagation(); - de.complete.annoDragData.linkDocument = DocUtils.MakeLink({ doc: de.complete.annoDragData.annotationDocument }, { doc: this.props.Document }, "link"); - de.complete.annoDragData.linkDocument && makeLink(de.complete.annoDragData.linkDocument); - } - if (de.complete.linkDragData) { + const linkSource = de.complete.annoDragData ? de.complete.annoDragData.annotationDocument : de.complete.linkDragData ? de.complete.linkDragData.linkSourceDocument : undefined; + if (linkSource && linkSource !== this.props.Document) { e.stopPropagation(); - const linkSource = de.complete.linkDragData.linkSourceDocument; - if (linkSource !== this.props.Document) { - const linkDoc = DocUtils.MakeLink({ doc: linkSource }, { doc: this.props.Document }, `link`); - linkSource !== this.props.Document && (de.complete.linkDragData.linkDocument = linkDoc); // TODODO this is where in text links get passed - linkDoc && makeLink(linkDoc); - } - + de.complete.linkDocument = DocUtils.MakeLink({ doc: linkSource }, { doc: this.props.Document }, "link", undefined, undefined, undefined, [de.x, de.y]); } } @@ -707,7 +655,7 @@ export class DocumentViewInternal extends DocComponent SelectionManager.SelectedDocuments().forEach(dv => dv.props.bringToFront(dv.rootDoc, false)), icon: "expand-arrows-alt" }); zorderItems.push({ description: "Send to Back", event: () => SelectionManager.SelectedDocuments().forEach(dv => dv.props.bringToFront(dv.rootDoc, true)), icon: "expand-arrows-alt" }); - zorderItems.push({ description: this.rootDoc._raiseWhenDragged !== false ? "Keep ZIndex when dragged" : "Allow ZIndex to change when dragged", event: this.toggleRaiseWhenDragged, icon: "expand-arrows-alt" }); + zorderItems.push({ description: this.rootDoc._raiseWhenDragged !== false ? "Keep ZIndex when dragged" : "Allow ZIndex to change when dragged", event: undoBatch(action(() => this.rootDoc._raiseWhenDragged = this.rootDoc._raiseWhenDragged === undefined ? false : undefined)), icon: "expand-arrows-alt" }); !zorders && cm.addItem({ description: "ZOrder...", subitems: zorderItems, icon: "compass" }); onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" }); @@ -784,17 +732,13 @@ export class DocumentViewInternal extends DocComponent { - return this.props.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false; - } - + rootSelected = (outsideReaction?: boolean) => { return this.props.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false; } panelHeight = () => this.props.PanelHeight() - this.headerMargin; parentActive = (outsideReaction: boolean) => this.props.layerProvider?.(this.layoutDoc) === false ? this.props.parentActive(outsideReaction) : false; screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin); contentScaling = () => this.ContentScale; onClickFunc = () => this.onClickHandler; - onDoubleClickFunc = () => this.onDoubleClickHandler; - + makeLink = () => this.props.DocumentView._link; // pass the link placeholde to child views so they can react to make a specialized anchor. This is essentially a function call to the descendants since the value of the _link variable will immediately get set back to undefined. @observable contentsActive: () => boolean = returnFalse; @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive; @@ -805,41 +749,14 @@ export class DocumentViewInternal extends DocComponent - {this.layoutDoc.hideAllLinks ? (null) : this.allAnchors} @@ -859,26 +776,11 @@ export class DocumentViewInternal extends DocComponent this.props.DocumentView._link; // pass the link placeholde to child views so they can react to make a specialized anchor. This is essentially a function call to the descendants since the value of the _link variable will immediately get set back to undefined. - @undoBatch hideLinkAnchor = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && (doc.hidden = true), true) anchorPanelWidth = () => this.props.PanelWidth() || 1; anchorPanelHeight = () => this.props.PanelHeight() || 1; - anchorStyleProvider = (doc: Opt, props: Opt, property: string): any => { - if (testDocProps(props)) { - switch (property.split(":")[0]) { - case StyleProp.BackgroundColor: return "transparent"; // background of linkanchor documentView is transparent since it covers the whole document - case StyleProp.HideLinkButton: return true; // don't want linkAnchor documentview to show its own link button - case StyleProp.PointerEvents: return "none"; // don't want linkAnchor documentView to handle events (since it covers the whole document). However, the linkAnchorBox itself is set to pointerEvent all - } - } else { - switch (property.split(":")[0]) { - case StyleProp.LinkSource: return this.props.Document; // pass the LinkSource to the LinkAnchorBox - } - } - return this.props.styleProvider?.(doc, props, property); - } + anchorStyleProvider = (doc: Opt, props: Opt, property: string): any => this.props.styleProvider?.(doc, props, property + ":anchor"); @computed get directLinks() { TraceMobx(); return LinkManager.Instance.getAllDirectLinks(this.rootDoc); } @computed get allLinks() { TraceMobx(); return LinkManager.Instance.getAllRelatedLinks(this.rootDoc); } @@ -904,11 +806,7 @@ export class DocumentViewInternal extends DocComponent
); } - captionStyleProvider = (doc: Doc | undefined, props: Opt, property: string) => { - if (property === StyleProp.Color) return "white"; - if (property === StyleProp.BackgroundColor) return "rgba(0,0,0 ,0.4)"; - return this.props?.styleProvider?.(doc, props, property); - } + captionStyleProvider = (doc: Opt, props: Opt, property: string) => this.props?.styleProvider?.(doc, props, property + ":caption"); @computed get innards() { TraceMobx(); const showTitle = this.ShowTitle; @@ -938,9 +836,7 @@ export class DocumentViewInternal extends DocComponent Field.toString((this.dataDoc || this.props.Document)[showTitle.split(";")[0]] as any as Field)} - SetValue={undoBatch((value: string) => { - showTitle.includes("Date") ? true : (Doc.GetProto(this.dataDoc || this.props.Document)[showTitle] = value) ? true : true; - })} + SetValue={undoBatch((value) => showTitle.includes("Date") ? true : (Doc.GetProto(this.dataDoc || this.props.Document)[showTitle] = value) ? true : true)} />
); return this.props.hideTitle || (!showTitle && !showCaption) ? @@ -988,7 +884,7 @@ export class DocumentViewInternal extends DocComponent !SnappingManager.GetIsDragging() && Doc.BrushDoc(this.props.Document))} onPointerLeave={action(e => { let entered = false; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 125bf62f0..8e824a447 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -546,8 +546,8 @@ export class WebBox extends ViewBoxAnnotatableComponent { - if (!e.aborted && e.annoDragData && !e.annoDragData.linkDocument) { - e.annoDragData.linkDocument = DocUtils.MakeLink({ doc: annotationDoc }, { doc: e.annoDragData.dropDocument }, "Annotation"); + if (!e.aborted && e.annoDragData && !e.linkDocument) { + e.linkDocument = DocUtils.MakeLink({ doc: annotationDoc }, { doc: e.annoDragData.dropDocument }, "Annotation"); annotationDoc.isLinkButton = true; annotationDoc.isPushpin = e.annoDragData?.dropDocument.annotationOn === this.props.Document; } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index f82e533ad..0bb483b41 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -478,11 +478,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp de.complete.annoDragData.linkDropCallback = this.linkDrop; } } - linkDrop = (data: { linkDocument?: Doc }) => { - const linkDoc = data.linkDocument!; - const anchor1Title = linkDoc.anchor1 instanceof Doc ? StrCast(linkDoc.anchor1.title) : "-untitled-"; - const anchor1Id = linkDoc.anchor1 instanceof Doc ? linkDoc.anchor1[Id] : ""; - this.makeLinkToSelection(linkDoc[Id], anchor1Title, "add:right", anchor1Id); + linkDrop = (data: { linkDocument: Doc }) => { + const anchor1Title = data.linkDocument.anchor1 instanceof Doc ? StrCast(data.linkDocument.anchor1.title) : "-untitled-"; + const anchor1Id = data.linkDocument.anchor1 instanceof Doc ? data.linkDocument.anchor1[Id] : ""; + this.makeLinkToSelection(data.linkDocument[Id], anchor1Title, "add:right", anchor1Id); } getNodeEndpoints(context: Node, node: Node): { from: number, to: number } | null { diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index be64754af..d6d500702 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -633,12 +633,12 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { - if (!e.aborted && e.annoDragData && !e.annoDragData.linkDocument) { - e.annoDragData.linkDocument = DocUtils.MakeLink({ doc: annotationDoc }, { doc: e.annoDragData.dropDocument }, "Annotation"); + if (!e.aborted && e.annoDragData && !e.linkDocument) { + e.linkDocument = DocUtils.MakeLink({ doc: annotationDoc }, { doc: e.annoDragData.dropDocument }, "Annotation"); } annotationDoc.isLinkButton = true; // prevents link button fro showing up --- maybe not a good thing? annotationDoc.isPushpin = e.annoDragData?.dropDocument.annotationOn === this.props.Document; - e.annoDragData && e.annoDragData.linkDocument && e.annoDragData?.linkDropCallback?.({ linkDocument: e.annoDragData.linkDocument }); + e.linkDocument && e.annoDragData?.linkDropCallback?.(e as { linkDocument: Doc });// bcz: typescript can't figure out that this is valid even though we tested e.linkDocument above } }); } -- cgit v1.2.3-70-g09d2