From df7257d1b39f51a7e00a495f0d4a2366f0e21f7d Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 14 May 2023 22:04:36 -0400 Subject: fixed webpage link following by adding a presData for the current URL to all embedded docs. fixed getView() in showDocuments to not get called with the proper anchors. changed unrendered MARKERs to CONFIGs. changed anchors to Configs or Markers as appropriate. --- src/client/views/DashboardView.tsx | 6 +- src/client/views/InkingStroke.tsx | 8 +- src/client/views/MainView.tsx | 9 +- src/client/views/MarqueeAnnotator.tsx | 2 +- src/client/views/MetadataEntryMenu.tsx | 119 ++++++++++++--------- src/client/views/PropertiesButtons.tsx | 12 +-- src/client/views/SidebarAnnos.tsx | 4 +- src/client/views/StyleProvider.tsx | 18 ++-- .../views/collections/CollectionCarousel3DView.tsx | 8 +- .../views/collections/CollectionCarouselView.tsx | 8 +- .../views/collections/CollectionDockingView.tsx | 4 +- src/client/views/collections/CollectionMenu.tsx | 12 +-- .../views/collections/CollectionStackingView.tsx | 4 +- src/client/views/collections/CollectionSubView.tsx | 6 +- .../views/collections/CollectionTimeView.tsx | 4 +- src/client/views/collections/CollectionView.tsx | 10 +- src/client/views/collections/TabDocView.tsx | 8 +- src/client/views/collections/TreeView.tsx | 10 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 19 ++-- .../collections/collectionFreeForm/MarqueeView.tsx | 4 +- .../collectionLinear/CollectionLinearView.tsx | 2 +- src/client/views/nodes/ComparisonBox.tsx | 7 +- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 3 +- .../nodes/DataVizBox/components/LineChart.tsx | 5 +- src/client/views/nodes/DocumentView.tsx | 20 ++-- src/client/views/nodes/FunctionPlotBox.tsx | 5 +- src/client/views/nodes/ImageBox.tsx | 3 +- src/client/views/nodes/MapBox/MapBoxInfoWindow.tsx | 2 +- src/client/views/nodes/PDFBox.tsx | 3 +- src/client/views/nodes/VideoBox.tsx | 1 + src/client/views/nodes/WebBox.tsx | 11 +- src/client/views/nodes/button/FontIconBox.tsx | 4 +- .../views/nodes/formattedText/DashFieldView.tsx | 2 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 14 ++- src/client/views/nodes/trails/PresBox.tsx | 60 +++++------ src/client/views/nodes/trails/PresElementBox.tsx | 2 +- src/client/views/pdf/PDFViewer.tsx | 2 +- src/client/views/search/SearchBox.tsx | 4 +- 38 files changed, 230 insertions(+), 195 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx index 02c5085a2..b51c77cb2 100644 --- a/src/client/views/DashboardView.tsx +++ b/src/client/views/DashboardView.tsx @@ -66,18 +66,18 @@ export class DashboardView extends React.Component { if (this.selectedDashboardGroup === DashboardGroup.MyDashboards) { return allDashboards.filter(dashboard => Doc.GetProto(dashboard).author === Doc.CurrentUserEmail); } else { - const sharedDashboards = DocListCast(Doc.MySharedDocs.data).filter(doc => doc._viewType === CollectionViewType.Docking); + const sharedDashboards = DocListCast(Doc.MySharedDocs.data).filter(doc => doc._type_collection === CollectionViewType.Docking); return sharedDashboards; } }; isUnviewedSharedDashboard = (dashboard: Doc): boolean => { - // const sharedDashboards = DocListCast(Doc.MySharedDocs.data).filter(doc => doc._viewType === CollectionViewType.Docking); + // const sharedDashboards = DocListCast(Doc.MySharedDocs.data).filter(doc => doc._type_collection === CollectionViewType.Docking); return !DocListCast(Doc.MySharedDocs.viewed).includes(dashboard); }; getSharedDashboards = () => { - const sharedDashs = DocListCast(Doc.MySharedDocs.data).filter(doc => doc._viewType === CollectionViewType.Docking); + const sharedDashs = DocListCast(Doc.MySharedDocs.data).filter(doc => doc._type_collection === CollectionViewType.Docking); return sharedDashs.filter(dashboard => !DocListCast(Doc.MySharedDocs.viewed).includes(dashboard)); }; diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 14c5dc58d..3a8cec07e 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -87,7 +87,13 @@ export class InkingStroke extends ViewBoxBaseComponent() { if (!addAsAnnotation && !pinProps) return this.rootDoc; - const anchor = Docs.Create.InkAnchorDocument({ title: 'Ink anchor:' + this.rootDoc.title, presDuration: 1100, presTransition: 1000, unrendered: true, annotationOn: this.rootDoc }); + const anchor = Docs.Create.InkConfigDocument({ + title: 'Ink anchor:' + this.rootDoc.title, + // set presentation timing for restoring shape + presDuration: 1100, + presTransition: 1000, + annotationOn: this.rootDoc, + }); if (anchor) { anchor.backgroundColor = 'transparent'; // /* addAsAnnotation &&*/ this.addDocument(anchor); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index ce29b63cd..853f9cace 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -81,7 +81,7 @@ export class MainView extends React.Component { @observable private _sidebarContent: any = Doc.MyLeftSidebarPanel; @observable private _leftMenuFlyoutWidth: number = 0; @computed get _hideUI() { - return this.mainDoc && this.mainDoc._viewType !== CollectionViewType.Docking; + return this.mainDoc && this.mainDoc._type_collection !== CollectionViewType.Docking; } @computed private get dashboardTabHeight() { @@ -158,6 +158,7 @@ export class MainView extends React.Component { 'viewTransition', 'treeViewOpen', 'layout_showSidebar', + 'carousel_index', 'itemIndex', // for changing slides in presentations 'layout_sidebarWidthPercent', 'layout_currentTimecode', @@ -177,7 +178,7 @@ export class MainView extends React.Component { 'layout_scrollTop', 'hidden', 'layout_curPage', - 'viewType', + 'type_collection', 'chromeHidden', 'currentFrame', 'width', @@ -236,7 +237,7 @@ export class MainView extends React.Component { if (pathname.length > 1 && pathname[0] === 'doc') { DocServer.GetRefField(pathname[1]).then( action(field => { - if (field instanceof Doc && field._viewType !== CollectionViewType.Docking) { + if (field instanceof Doc && field._type_collection !== CollectionViewType.Docking) { Doc.GuestTarget = field; } }) @@ -693,7 +694,7 @@ export class MainView extends React.Component { sidebarScreenToLocal = () => new Transform(0, -this.topOfSidebarDoc, 1); mainContainerXf = () => this.sidebarScreenToLocal().translate(-this.leftScreenOffsetOfMainDocView, 0); static addDocTabFunc_impl = (doc: Doc, location: OpenWhere): boolean => { - const whereFields = doc._viewType === CollectionViewType.Docking ? [OpenWhere.dashboard] : location.split(':'); + const whereFields = doc._type_collection === CollectionViewType.Docking ? [OpenWhere.dashboard] : location.split(':'); const keyValue = whereFields[1]?.includes('KeyValue'); const whereMods: OpenWhereMod = whereFields.length > 1 ? (whereFields[1].replace('KeyValue', '') as OpenWhereMod) : OpenWhereMod.none; if (doc.dockingConfig) return DashboardView.openDashboard(doc); diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx index eb0fd0c7a..1d6c94c13 100644 --- a/src/client/views/MarqueeAnnotator.tsx +++ b/src/client/views/MarqueeAnnotator.tsx @@ -162,7 +162,7 @@ export class MarqueeAnnotator extends React.Component { return marqueeAnno; } - const textRegionAnno = Docs.Create.HTMLAnchorDocument([], { + const textRegionAnno = Docs.Create.HTMLMarkerDocument([], { annotationOn: this.props.rootDoc, text: this.props.selectionText(), backgroundColor: 'transparent', diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx index 82ec5a5b3..bcbdd3ccb 100644 --- a/src/client/views/MetadataEntryMenu.tsx +++ b/src/client/views/MetadataEntryMenu.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import "./MetadataEntryMenu.scss"; +import './MetadataEntryMenu.scss'; import { observer } from 'mobx-react'; import { observable, action, runInAction, trace, computed, IReactionDisposer, reaction } from 'mobx'; import { KeyValueBox } from './nodes/KeyValueBox'; @@ -16,9 +16,9 @@ export interface MetadataEntryProps { } @observer -export class MetadataEntryMenu extends React.Component{ - @observable private _currentKey: string = ""; - @observable private _currentValue: string = ""; +export class MetadataEntryMenu extends React.Component { + @observable private _currentKey: string = ''; + @observable private _currentValue: string = ''; private _addChildren: boolean = false; @observable _allSuggestions: string[] = []; _suggestionDispser: IReactionDisposer | undefined; @@ -32,7 +32,7 @@ export class MetadataEntryMenu extends React.Component{ if (!this.userModified) { this.previewValue(); } - } + }; previewValue = async () => { let field: Field | undefined | null = null; @@ -45,30 +45,30 @@ export class MetadataEntryMenu extends React.Component{ if (field === null) { field = v; } else if (v !== field) { - value = "multiple values"; + value = 'multiple values'; } } if (value === undefined) { if (field !== null && field !== undefined) { - value = (onProto ? "" : "= ") + Field.toScriptString(field); + value = (onProto ? '' : '= ') + Field.toScriptString(field); } else { - value = ""; + value = ''; } } const s = value; - runInAction(() => this._currentValue = s); - } + runInAction(() => (this._currentValue = s)); + }; @action onValueChange = (e: React.ChangeEvent) => { this._currentValue = e.target.value; - this.userModified = e.target.value.trim() !== ""; - } + this.userModified = e.target.value.trim() !== ''; + }; @undoBatch @action onValueKeyDown = async (e: React.KeyboardEvent) => { - if (e.key === "Enter") { + if (e.key === 'Enter') { e.stopPropagation(); const script = KeyValueBox.CompileKVPScript(this._currentValue); if (!script) return; @@ -95,18 +95,18 @@ export class MetadataEntryMenu extends React.Component{ this.clearInputs(); } } - } + }; @action clearInputs = () => { - this._currentKey = ""; - this._currentValue = ""; + this._currentKey = ''; + this._currentValue = ''; this.userModified = false; if (this.autosuggestRef.current) { const input: HTMLInputElement = (this.autosuggestRef.current as any).input; input && input.focus(); } - } + }; getKeySuggestions = (value: string) => { value = value.toLowerCase(); @@ -114,16 +114,18 @@ export class MetadataEntryMenu extends React.Component{ const keys = new Set(); docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key))); return Array.from(keys).filter(key => key.toLowerCase().startsWith(value)); - } + }; getSuggestionValue = (suggestion: string) => suggestion; renderSuggestion = (suggestion: string) => { - return (null); - } + return null; + }; componentDidMount() { - this._suggestionDispser = reaction(() => this._currentKey, - () => this._allSuggestions = this.getKeySuggestions(this._currentKey), - { fireImmediately: true }); + this._suggestionDispser = reaction( + () => this._currentKey, + () => (this._allSuggestions = this.getKeySuggestions(this._currentKey)), + { fireImmediately: true } + ); } componentWillUnmount() { this._suggestionDispser && this._suggestionDispser(); @@ -131,49 +133,64 @@ export class MetadataEntryMenu extends React.Component{ onClick = (e: React.ChangeEvent) => { this._addChildren = !this._addChildren; - } + }; private get considerChildOptions() { - if (!this.props.docs.every(doc => doc._viewType !== undefined)) { + if (!this.props.docs.every(doc => doc._type_collection !== undefined)) { return null; } return ( -
+
Children: - +
); } _ref = React.createRef(); render() { - return (
e.stopPropagation()}> -
-
- Key: -
this.autosuggestRef.current!.input?.focus()} > - + return ( +
e.stopPropagation()}> +
+
+ Key: +
this.autosuggestRef.current!.input?.focus()}> + +
+
+ Value: + this._ref.current!.focus()} onChange={this.onValueChange} onKeyDown={this.onValueKeyDown} /> +
+ {this.considerChildOptions}
-
- Value: - this._ref.current!.focus()} onChange={this.onValueChange} onKeyDown={this.onValueKeyDown} /> +
+
    + {this._allSuggestions + .slice() + .sort() + .map(s => ( +
  • { + this._currentKey = s; + this.previewValue(); + })}> + {s} +
    • + ))} +
- {this.considerChildOptions} -
-
-
    - {this._allSuggestions.slice().sort().map(s =>
  • { this._currentKey = s; this.previewValue(); })} >{s}
    • )} -
-
); } -} \ No newline at end of file +} diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 86230ca78..a37447505 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -281,11 +281,11 @@ export class PropertiesButtons extends React.Component<{}, {}> { @undoBatch handlePerspectiveChange = (e: any) => { - this.selectedDoc && (this.selectedDoc._viewType = e.target.value); + this.selectedDoc && (this.selectedDoc._type_collection = e.target.value); SelectionManager.Views() .filter(dv => dv.docView) .map(dv => dv.docView!) - .forEach(docView => (docView.layoutDoc._viewType = e.target.value)); + .forEach(docView => (docView.layoutDoc._type_collection = e.target.value)); }; @undoBatch @@ -373,7 +373,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { const makeLabel = (value: string, label: string) => (
@@ -395,9 +395,9 @@ export class PropertiesButtons extends React.Component<{}, {}> { const isMap = this.selectedDoc?.type === DocumentType.MAP; const isCollection = this.selectedDoc?.type === DocumentType.COL; //TODO: will likely need to create separate note-taking view type here - const isStacking = this.selectedDoc?._viewType === CollectionViewType.Stacking || this.selectedDoc?._viewType === CollectionViewType.NoteTaking; - const isFreeForm = this.selectedDoc?._viewType === CollectionViewType.Freeform; - const isTree = this.selectedDoc?._viewType === CollectionViewType.Tree; + const isStacking = this.selectedDoc?._type_collection === CollectionViewType.Stacking || this.selectedDoc?._type_collection === CollectionViewType.NoteTaking; + const isFreeForm = this.selectedDoc?._type_collection === CollectionViewType.Freeform; + const isTree = this.selectedDoc?._type_collection === CollectionViewType.Tree; const isTabView = this.selectedTabView; const toggle = (ele: JSX.Element | null, style?: React.CSSProperties) => (
diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx index 741e87644..e12621f35 100644 --- a/src/client/views/SidebarAnnos.tsx +++ b/src/client/views/SidebarAnnos.tsx @@ -141,7 +141,7 @@ export class SidebarAnnos extends React.Component { return target; }; makeDocUnfiltered = (doc: Doc) => { - if (DocListCast(this.props.rootDoc[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.unrendered ? DocCast(doc.annotationOn) : doc, anno))) { + if (DocListCast(this.props.rootDoc[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) { if (this.props.layoutDoc[this.filtersKey]) { this.props.layoutDoc[this.filtersKey] = new List(); } @@ -245,7 +245,7 @@ export class SidebarAnnos extends React.Component { addDocument={this.addDocument} ScreenToLocalTransform={this.screenToLocalTransform} renderDepth={this.props.renderDepth + 1} - viewType={CollectionViewType.Stacking} + type_collection={CollectionViewType.Stacking} fieldKey={this.sidebarKey} pointerEvents={returnAll} /> diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index e852d9297..28c61a11e 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -112,7 +112,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt, props: Opt, props: Opt (props?.PanelHeight() || 0) ? 5 : 10) : 0; case StyleProp.showCaption: - return doc?._viewType === CollectionViewType.Carousel || props?.hideCaptions ? undefined : StrCast(doc?._layout_showCaption); + return doc?._type_collection === CollectionViewType.Carousel || props?.hideCaptions ? undefined : StrCast(doc?._layout_showCaption); case StyleProp.HeaderMargin: - return ([CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._viewType as any) || + return ([CollectionViewType.Stacking, CollectionViewType.NoteTaking, CollectionViewType.Masonry, CollectionViewType.Tree].includes(doc?._type_collection as any) || (doc?.type === DocumentType.RTF && !layout_showTitle()?.includes('noMargin')) || doc?.type === DocumentType.LABEL) && layout_showTitle() && @@ -265,7 +265,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground, 'string') ?? (darkScheme() ? Colors.BLACK : 'linear-gradient(#065fff, #85c1f9)')); break; - //if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)"; + //if (doc._type_collection !== CollectionViewType.Freeform && doc._type_collection !== CollectionViewType.Time) return "rgb(62,62,62)"; default: docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.WHITE); break; @@ -281,7 +281,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt, props: Opt, props: Opt { - if (props?.docViewPath().lastElement()?.rootDoc?._viewType === CollectionViewType.Freeform) { + if (props?.docViewPath().lastElement()?.rootDoc?._type_collection === CollectionViewType.Freeform) { return doc?.pointerEvents !== 'none' ? null : (
toggleLockedPosition(doc)}> @@ -378,7 +378,7 @@ export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp, */ export function DashboardStyleProvider(doc: Opt, props: Opt, property: string) { if (doc && property.split(':')[0] === StyleProp.Decorations) { - return doc._viewType === CollectionViewType.Docking ? null : ( + return doc._type_collection === CollectionViewType.Docking ? null : ( <> {DashboardToggleButton(doc, 'hidden', 'eye-slash', 'eye', () => { DocFocusOrOpen(doc, { toggleTarget: true, willZoomCentered: true, zoomScale: 0 }, DocCast(doc?.embedContainer ?? doc?.annotationOn)); diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index a266c9207..b10b453bf 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -39,7 +39,7 @@ export class CollectionCarousel3DView extends CollectionSubView() { isChildContentActive = () => (this.isContentActive() ? true : false); @computed get content() { - const currentIndex = NumCast(this.layoutDoc._itemIndex); + const currentIndex = NumCast(this.layoutDoc._carousel_index); const displayDoc = (childPair: { layout: Doc; data: Doc }) => { return ( { - this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length; + this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length; }; onArrowClick = (e: React.MouseEvent, direction: number) => { @@ -139,11 +139,11 @@ export class CollectionCarousel3DView extends CollectionSubView() { } @computed get dots() { - return this.childLayoutPairs.map((_child, index) =>
(this.layoutDoc._itemIndex = index)} />); + return this.childLayoutPairs.map((_child, index) =>
(this.layoutDoc._carousel_index = index)} />); } render() { - const index = NumCast(this.layoutDoc._itemIndex); + const index = NumCast(this.layoutDoc._carousel_index); const translateX = this.panelWidth() * (1 - index); return ( diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 9ec78155c..0eb61a0b2 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -4,7 +4,7 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, Opt } from '../../../fields/Doc'; import { NumCast, ScriptCast, StrCast } from '../../../fields/Types'; -import { emptyFunction, returnFalse, returnZero, StopEvent } from '../../../Utils'; +import { returnFalse, returnZero, StopEvent } from '../../../Utils'; import { DragManager } from '../../util/DragManager'; import { DocumentView, DocumentViewProps } from '../nodes/DocumentView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; @@ -30,11 +30,11 @@ export class CollectionCarouselView extends CollectionSubView() { advance = (e: React.MouseEvent) => { e.stopPropagation(); - this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + 1) % this.childLayoutPairs.length; + this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + 1) % this.childLayoutPairs.length; }; goback = (e: React.MouseEvent) => { e.stopPropagation(); - this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; + this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; }; captionStyleProvider = (doc: Doc | undefined, captionProps: Opt, property: string): any => { // first look for properties on the document in the carousel, then fallback to properties on the container @@ -45,7 +45,7 @@ export class CollectionCarouselView extends CollectionSubView() { onContentDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick); onContentClick = () => ScriptCast(this.layoutDoc.onChildClick); @computed get content() { - const index = NumCast(this.layoutDoc._itemIndex); + const index = NumCast(this.layoutDoc._carousel_index); const curDoc = this.childLayoutPairs?.[index]; const captionProps = { ...this.props, fieldKey: 'caption', setHeight: undefined }; const marginX = NumCast(this.layoutDoc['caption_xMargin']); diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 3a4691484..cce21a3aa 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -127,7 +127,7 @@ export class CollectionDockingView extends CollectionSubView() { SelectionManager.DeselectAll(); const instance = CollectionDockingView.Instance; if (instance) { - if (doc._viewType === CollectionViewType.Docking && doc.layout_fieldKey === 'layout') { + if (doc._type_collection === CollectionViewType.Docking && doc.layout_fieldKey === 'layout') { return DashboardView.openDashboard(doc); } const newItemStackConfig = { @@ -183,7 +183,7 @@ export class CollectionDockingView extends CollectionSubView() { @undoBatch @action public static AddSplit(document: Doc, pullSide: OpenWhereMod, stack?: any, panelName?: string, keyValue?: boolean) { - if (document?._viewType === CollectionViewType.Docking) return DashboardView.openDashboard(document); + if (document?._type_collection === CollectionViewType.Docking) return DashboardView.openDashboard(document); if (!CollectionDockingView.Instance) return false; const tab = Array.from(CollectionDockingView.Instance.tabMap).find(tab => tab.DashDoc === document && !keyValue); if (tab) { diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 615014c4a..570d9c8fb 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -172,7 +172,7 @@ export class CollectionMenu extends AntimodeMenu { // [, + // type={StrCast(this.SelectedCollection?.props.Document._type_collection, CollectionViewType.Invalid) as CollectionViewType} />, // prop, // /*button*/]); } @@ -349,7 +349,7 @@ export class CollectionViewBaseChrome extends React.Component { const target = this.document !== Doc.MyLeftSidebarPanel ? this.document : (this.document.proto as Doc); //@ts-ignore - target._viewType = e.target.selectedOptions[0].value; + target._type_collection = e.target.selectedOptions[0].value; }; commandChanged = (e: React.ChangeEvent) => { @@ -440,8 +440,8 @@ export class CollectionViewBaseChrome extends React.Component (this.document._viewType = Doc.getDocTemplate(source?.[0])), + script: `this.target._type_collection = '${StrCast(this.props.type)}'`, + immediate: (source: Doc[]) => (this.document._type_collection = Doc.getDocTemplate(source?.[0])), initialize: emptyFunction, }; DragManager.StartButtonDrag([this._viewRef.current!], c.script, StrCast(c.title), { target: this.document }, c.params, c.initialize, e.clientX, e.clientY); @@ -639,8 +639,8 @@ export class CollectionViewBaseChrome extends React.Component this.props.docView.props.CollectionFreeFormDocumentView?.().float())}> diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 404ca5d65..e2e352857 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -36,7 +36,7 @@ export type collectionStackingViewProps = { sortFunc?: (a: Doc, b: Doc) => number; chromeHidden?: boolean; // view type is stacking - viewType?: CollectionViewType; + type_collection?: CollectionViewType; NativeWidth?: () => number; NativeHeight?: () => number; }; @@ -94,7 +94,7 @@ export class CollectionStackingView extends CollectionSubView(moreProps?: X) { rawdocs = rootDoc && !this.props.isAnnotationOverlay ? [Doc.GetProto(rootDoc)] : []; } - const childDocs = rawdocs.filter(d => !(d instanceof Promise) && GetEffectiveAcl(Doc.GetProto(d)) !== AclPrivate && (this.props.ignoreUnrendered || !d.unrendered)).map(d => d as Doc); + const childDocs = rawdocs.filter(d => !(d instanceof Promise) && GetEffectiveAcl(Doc.GetProto(d)) !== AclPrivate && (this.props.ignoreUnrendered || !d.layout_unrendered)).map(d => d as Doc); const childDocFilters = this.childDocFilters(); const docRangeFilters = this.childDocRangeFilters(); @@ -213,7 +213,7 @@ export function CollectionSubView(moreProps?: X) { const movedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] === d); const addedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] !== d); if (movedDocs.length) { - const canAdd = this.props.Document._viewType === CollectionViewType.Pile || de.embedKey || this.props.Document.allowOverlayDrop || Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.props.Document); + const canAdd = this.props.Document._type_collection === CollectionViewType.Pile || de.embedKey || this.props.Document.allowOverlayDrop || Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.props.Document); added = docDragData.moveDocument(movedDocs, this.props.Document, canAdd ? this.addDocument : returnFalse); } else { ScriptCast(this.props.Document.dropConverter)?.script.run({ dragData: docDragData }); @@ -448,7 +448,7 @@ export function CollectionSubView(moreProps?: X) { } if (generatedDocuments.length) { // Creating a dash document - const isFreeformView = this.props.Document._viewType === CollectionViewType.Freeform; + const isFreeformView = this.props.Document._type_collection === CollectionViewType.Freeform; const set = !isFreeformView ? generatedDocuments : generatedDocuments.length > 1 diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx index 6135154c3..49a90d828 100644 --- a/src/client/views/collections/CollectionTimeView.tsx +++ b/src/client/views/collections/CollectionTimeView.tsx @@ -47,11 +47,11 @@ export class CollectionTimeView extends CollectionSubView() { } getAnchor = (addAsAnnotation: boolean) => { - const anchor = Docs.Create.HTMLAnchorDocument([], { + const anchor = Docs.Create.HTMLMarkerDocument([], { title: ComputedField.MakeFunction(`"${this.pivotField}"])`) as any, annotationOn: this.rootDoc, }); - PresBox.pinDocView(anchor, { pinData: { viewType: true, pivot: true, filters: true } }, this.rootDoc); + PresBox.pinDocView(anchor, { pinData: { type_collection: true, pivot: true, filters: true } }, this.rootDoc); if (addAsAnnotation) { // when added as an annotation, links to anchors can be found as links to the document even if the anchors are not rendered diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index dd7bf1740..7913d3188 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -87,7 +87,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent Doc) { - if (!Doc.IsSystem(this.rootDoc) && this.rootDoc._viewType !== CollectionViewType.Docking && !this.rootDoc.isGroup && !this.rootDoc.annotationOn) { + setupViewTypes(category: string, func: (type_collection: CollectionViewType) => Doc) { + if (!Doc.IsSystem(this.rootDoc) && this.rootDoc._type_collection !== CollectionViewType.Docking && !this.rootDoc.isGroup && !this.rootDoc.annotationOn) { // prettier-ignore const subItems: ContextMenuProps[] = [ { description: 'Freeform', event: () => func(CollectionViewType.Freeform), icon: 'signature' }, @@ -160,7 +160,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent { const newRendition = Doc.MakeEmbedding(this.rootDoc); - newRendition._viewType = vtype; + newRendition._type_collection = vtype; this.props.addDocTab(newRendition, OpenWhere.addRight); return newRendition; }); @@ -244,7 +244,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent + style={{ pointerEvents: this.props.DocumentView?.()?.props.docViewPath().lastElement()?.rootDoc?._type_collection === CollectionViewType.Freeform && this.rootDoc._lockedPosition ? 'none' : undefined }}> {this.renderSubView(this.collectionViewType, props)}
); diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 69963736b..7e88959a4 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -349,7 +349,7 @@ export class TabDocView extends React.Component { // lightbox - will add the document to any collection along the path from the document to the docking view that has a field isLightbox. if none is found, it adds to the full screen lightbox addDocTab = (doc: Doc, location: OpenWhere) => { SelectionManager.DeselectAll(); - const whereFields = doc._viewType === CollectionViewType.Docking ? [OpenWhere.dashboard] : location.split(':'); + const whereFields = doc._type_collection === CollectionViewType.Docking ? [OpenWhere.dashboard] : location.split(':'); const keyValue = whereFields[1]?.includes('KeyValue'); const whereMods: OpenWhereMod = whereFields.length > 1 ? (whereFields[1].replace('KeyValue', '') as OpenWhereMod) : OpenWhereMod.none; if (doc.dockingConfig) return DashboardView.openDashboard(doc); @@ -383,7 +383,7 @@ export class TabDocView extends React.Component { }; getCurrentFrame = () => { - return NumCast(Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex].presentationTargetDoc, Doc, null)._currentFrame); + return NumCast(Cast(PresBox.Instance.activeItem.presentationTargetDoc, Doc, null)._currentFrame); }; static Activate = (tabDoc: Doc) => { const tab = Array.from(CollectionDockingView.Instance?.tabMap!).find(tab => tab.DashDoc === tabDoc); @@ -408,7 +408,7 @@ export class TabDocView extends React.Component { PanelHeight = () => this._panelHeight; miniMapColor = () => this.tabColor; tabView = () => this._view; - disableMinimap = () => !this._document || this._document.layout !== CollectionView.LayoutString(Doc.LayoutFieldKey(this._document)) || this._document?._viewType !== CollectionViewType.Freeform; + disableMinimap = () => !this._document || this._document.layout !== CollectionView.LayoutString(Doc.LayoutFieldKey(this._document)) || this._document?._type_collection !== CollectionViewType.Freeform; hideMinimap = () => this.disableMinimap() || BoolCast(this._document?.layout_hideMinimap); @computed get docView() { @@ -453,7 +453,7 @@ export class TabDocView extends React.Component {
{ return 'TreeView(' + this.props.document.title + ')'; } // this makes mobx trace() statements more descriptive get defaultExpandedView() { - return this.doc.viewType === CollectionViewType.Docking + return this.doc.type_collection === CollectionViewType.Docking ? this.fieldKey : this.props.treeView.dashboardMode ? this.fieldKey @@ -312,7 +312,7 @@ export class TreeView extends React.Component { title: '-title-', treeViewExpandedViewLock: true, treeViewExpandedView: 'data', - _viewType: CollectionViewType.Tree, + _type_collection: CollectionViewType.Tree, layout_hideLinkButton: true, _layout_showSidebar: true, _layout_fitWidth: true, @@ -713,7 +713,7 @@ export class TreeView extends React.Component { const data = () => (this.childDocs || this.props.treeView.dashboardMode ? this.fieldKey : ''); const embeddings = () => (this.props.treeView.dashboardMode ? '' : 'embeddings'); const fields = () => (Doc.noviceMode ? '' : 'fields'); - const layout = Doc.noviceMode || this.doc.viewType === CollectionViewType.Docking ? [] : ['layout']; + const layout = Doc.noviceMode || this.doc.type_collection === CollectionViewType.Docking ? [] : ['layout']; return [data(), ...layout, ...(this.props.treeView.fileSysMode ? [embeddings(), links(), annos()] : []), fields()].filter(m => m); } @action @@ -771,7 +771,7 @@ export class TreeView extends React.Component { ? [] : this.props.treeView.fileSysMode && this.doc === Doc.GetProto(this.doc) ? [openEmbedding, makeFolder] - : this.doc.viewType === CollectionViewType.Docking + : this.doc.type_collection === CollectionViewType.Docking ? [] : [deleteItem, openEmbedding, focusDoc]), ]; @@ -1030,7 +1030,7 @@ export class TreeView extends React.Component { // renders the text version of a document as the header. This is used in the file system mode and in other vanilla tree views. @computed get renderTitleAsHeader() { - return this.props.treeView.Document.treeViewHideUnrendered && this.doc.unrendered && !this.doc.treeViewFieldKey ? ( + return this.props.treeView.Document.treeViewHideUnrendered && this.doc.layout_unrendered && !this.doc.treeViewFieldKey ? (
) : ( <> diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 4d18ebeea..5ac444147 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1147,7 +1147,7 @@ export class CollectionFreeFormView extends CollectionSubView { const collectionDoc = this.props.docViewPath().lastElement().rootDoc; - if (collectionDoc?._viewType !== CollectionViewType.Freeform || collectionDoc._freeform_ !== undefined) { + if (collectionDoc?._type_collection !== CollectionViewType.Freeform || collectionDoc._freeform_ !== undefined) { this.setPan( NumCast(this.layoutDoc[this.panXFieldKey]) + ((this.props.PanelWidth() / 2) * x) / this.zoomScaling(), // nudge x,y as a function of panel dimension and scale NumCast(this.layoutDoc[this.panYFieldKey]) + ((this.props.PanelHeight() / 2) * -y) / this.zoomScaling(), @@ -1541,8 +1541,8 @@ export class CollectionFreeFormView extends CollectionSubView { // create an anchor that saves information about the current state of the freeform view (pan, zoom, view type) - const anchor = Docs.Create.CollectionAnchorDocument({ title: 'ViewSpec - ' + StrCast(this.layoutDoc._viewType), unrendered: true, presTransition: 500, annotationOn: this.rootDoc }); - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), pannable: !this.Document._isGroup, viewType: true, filters: true } }, this.rootDoc); + const anchor = Docs.Create.CollectionConfigDocument({ title: 'ViewSpec - ' + StrCast(this.layoutDoc._type_collection), layout_unrendered: true, presTransition: 500, annotationOn: this.rootDoc }); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), pannable: !this.Document._isGroup, type_collection: true, filters: true } }, this.rootDoc); if (addAsAnnotation) { if (Cast(this.dataDoc[this.props.fieldKey + '_annotations'], listSpec(Doc), null) !== undefined) { @@ -1851,10 +1851,10 @@ export class CollectionFreeFormView extends CollectionSubView { if (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(this.props.docViewPath())) { - const unrendered = this.childDocs.filter(doc => !this._renderCutoffData.get(doc[Id])); + const layout_unrendered = this.childDocs.filter(doc => !this._renderCutoffData.get(doc[Id])); const loadIncrement = 5; - for (var i = 0; i < Math.min(unrendered.length, loadIncrement); i++) { - this._renderCutoffData.set(unrendered[i][Id] + '', true); + for (var i = 0; i < Math.min(layout_unrendered.length, loadIncrement); i++) { + this._renderCutoffData.set(layout_unrendered[i][Id] + '', true); } } this.childDocs.some(doc => !this._renderCutoffData.get(doc[Id])) && setTimeout(this.incrementalRender, 1); @@ -1991,12 +1991,7 @@ export class CollectionFreeFormView extends CollectionSubView e.preventDefault()} onContextMenu={this.onContextMenu} style={{ - pointerEvents: - this.props.Document.type === DocumentType.MARKER - ? 'none' // bcz: ugh.. this is here to prevent markers, which render as freeform views, from grabbing events -- need a better approach. - : SnappingManager.GetIsDragging() && this.childDocs.includes(DragManager.docsBeingDragged.lastElement()) - ? 'all' - : (this.props.pointerEvents?.() as any), + pointerEvents: SnappingManager.GetIsDragging() && this.childDocs.includes(DragManager.docsBeingDragged.lastElement()) ? 'all' : (this.props.pointerEvents?.() as any), textAlign: this.isAnnotationOverlay ? 'initial' : undefined, transform: `scale(${this.nativeDimScaling || 1})`, width: `${100 / (this.nativeDimScaling || 1)}%`, diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index fdff13b54..47d7801e6 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -432,8 +432,8 @@ export class MarqueeView extends React.Component