aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/CollectionTimeView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/collections/CollectionTimeView.tsx')
-rw-r--r--src/client/views/collections/CollectionTimeView.tsx158
1 files changed, 14 insertions, 144 deletions
diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx
index d75c633ac..98bd06221 100644
--- a/src/client/views/collections/CollectionTimeView.tsx
+++ b/src/client/views/collections/CollectionTimeView.tsx
@@ -1,33 +1,22 @@
-import { action, computed, makeObservable, observable, runInAction } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { returnFalse, returnTrue, setupMoveUpEvents } from '../../../ClientUtils';
import { emptyFunction } from '../../../Utils';
import { Doc, Opt, StrListCast } from '../../../fields/Doc';
-import { List } from '../../../fields/List';
-import { ObjectField } from '../../../fields/ObjectField';
-import { listSpec } from '../../../fields/Schema';
-import { ComputedField, ScriptField } from '../../../fields/ScriptField';
-import { Cast, NumCast, StrCast } from '../../../fields/Types';
+import { NumCast, StrCast } from '../../../fields/Types';
import { Docs } from '../../documents/Documents';
-import { ScriptingGlobals } from '../../util/ScriptingGlobals';
-import { ContextMenu } from '../ContextMenu';
-import { ContextMenuProps } from '../ContextMenuItem';
import { FieldsDropdown } from '../FieldsDropdown';
import { PinDocView } from '../PinFuncs';
import { DocumentView } from '../nodes/DocumentView';
import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
import './CollectionTimeView.scss';
-import { ViewDefBounds, computePivotLayout, computeTimelineLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines';
+import { computeTimelineLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines';
import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
@observer
export class CollectionTimeView extends CollectionSubView() {
- _changing = false;
- @observable _layoutEngine = computePivotLayout.name;
@observable _collapsed: boolean = false;
- @observable _childClickedScript: Opt<ScriptField> = undefined;
- @observable _viewDefDivClick: Opt<ScriptField> = undefined;
@observable _focusPivotField: Opt<string> = undefined;
constructor(props: SubCollectionViewProps) {
@@ -37,10 +26,6 @@ export class CollectionTimeView extends CollectionSubView() {
componentDidMount() {
this._props.setContentViewBox?.(this);
- runInAction(() => {
- this._childClickedScript = ScriptField.MakeScript('openInLightbox(this)', { this: Doc.name });
- this._viewDefDivClick = ScriptField.MakeScript('pivotColumnClick(this,payload)', { payload: 'any' });
- });
}
get pivotField() {
@@ -49,19 +34,10 @@ export class CollectionTimeView extends CollectionSubView() {
getAnchor = (addAsAnnotation: boolean) => {
const anchor = Docs.Create.ConfigDocument({
- title: ComputedField.MakeFunction(`"${this.pivotField}"])`) as unknown as string, // title can take a functiono or a string
annotationOn: this.Document,
});
PinDocView(anchor, { pinData: { collectionType: true, pivot: true, filters: true } }, this.Document);
-
- 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
- if (Cast(this.dataDoc[this._props.fieldKey + '_annotations'], listSpec(Doc), null) !== undefined) {
- Cast(this.dataDoc[this._props.fieldKey + '_annotations'], listSpec(Doc), []).push(anchor);
- } else {
- this.dataDoc[this._props.fieldKey + '_annotations'] = new List<Doc>([anchor]);
- }
- }
+ addAsAnnotation && Doc.AddDocToList(this.dataDoc, this.fieldKey + '_annotations', anchor); // when added as an annotation, links to anchors can be found as links to the document even if the anchors are not rendered
return anchor;
};
@@ -74,7 +50,6 @@ export class CollectionTimeView extends CollectionSubView() {
return undefined;
};
- layoutEngine = () => this._layoutEngine;
toggleVisibility = action(() => {
this._collapsed = !this._collapsed;
});
@@ -126,105 +101,24 @@ export class CollectionTimeView extends CollectionSubView() {
);
};
- goTo = (prevFilterIndex: number) => {
- this.layoutDoc._pivotField = this.layoutDoc['_prevPivotFields' + prevFilterIndex];
- this.layoutDoc._childFilters = ObjectField.MakeCopy(this.layoutDoc['_prevDocFilter' + prevFilterIndex] as ObjectField);
- this.layoutDoc._childFiltersByRanges = ObjectField.MakeCopy(this.layoutDoc['_prevDocRangeFilters' + prevFilterIndex] as ObjectField);
- this.layoutDoc._prevFilterIndex = prevFilterIndex;
- };
-
- @action
- contentsDown = () => {
- const prevFilterIndex = NumCast(this.layoutDoc._prevFilterIndex);
- if (prevFilterIndex > 0) {
- this.goTo(prevFilterIndex - 1);
- } else {
- this.layoutDoc._childFilters = new List([]);
- }
- };
-
+ layoutEngine = () => computeTimelineLayout.name;
@computed get contents() {
return (
- <div className="collectionTimeView-innards" key="timeline" style={{ pointerEvents: this._props.isContentActive() ? undefined : 'none' }} onClick={this.contentsDown}>
+ <div className="collectionTimeView-innards" key="timeline" style={{ pointerEvents: this._props.isContentActive() ? undefined : 'none' }}>
<CollectionFreeFormView
{...this._props}
engineProps={{ pivotField: this.pivotField, childFilters: this.childDocFilters, childFiltersByRanges: this.childDocRangeFilters }}
fitContentsToBox={returnTrue}
- childClickScript={this._childClickedScript}
- viewDefDivClick={this.layoutEngine() === computeTimelineLayout.name ? undefined : this._viewDefDivClick}
layoutEngine={this.layoutEngine}
/>
</div>
);
}
- public static SyncTimelineToPresentation(doc: Doc) {
- const fieldKey = Doc.LayoutFieldKey(doc);
- doc[fieldKey + '-timelineCur'] = ComputedField.MakeFunction("(activePresentationItem()[this._pivotField || 'year'] || 0)");
- }
- specificMenu = () => {
- const layoutItems: ContextMenuProps[] = [];
- const doc = this.layoutDoc;
-
- layoutItems.push({
- description: 'Force Timeline',
- event: () => {
- doc._forceRenderEngine = computeTimelineLayout.name;
- },
- icon: 'compress-arrows-alt',
- });
- layoutItems.push({
- description: 'Force Pivot',
- event: () => {
- doc._forceRenderEngine = computePivotLayout.name;
- },
- icon: 'compress-arrows-alt',
- });
- layoutItems.push({
- description: 'Auto Time/Pivot layout',
- event: () => {
- doc._forceRenderEngine = undefined;
- },
- icon: 'compress-arrows-alt',
- });
- layoutItems.push({ description: 'Sync with presentation', event: () => CollectionTimeView.SyncTimelineToPresentation(doc), icon: 'compress-arrows-alt' });
-
- ContextMenu.Instance.addItem({ description: 'Options...', subitems: layoutItems, icon: 'eye' });
- };
-
render() {
- let nonNumbers = 0;
- this.childDocs.forEach(doc => {
- const num = NumCast(doc[this.pivotField], Number(StrCast(doc[this.pivotField])));
- if (isNaN(num)) {
- nonNumbers++;
- }
- });
- const forceLayout = StrCast(this.layoutDoc._forceRenderEngine);
- const doTimeline = forceLayout ? forceLayout === computeTimelineLayout.name : nonNumbers / this.childDocs.length < 0.1 && this._props.PanelWidth() / this._props.PanelHeight() > 6;
- if (doTimeline !== (this._layoutEngine === computeTimelineLayout.name)) {
- if (!this._changing) {
- this._changing = true;
- setTimeout(
- action(() => {
- this._layoutEngine = doTimeline ? computeTimelineLayout.name : computePivotLayout.name;
- this._changing = false;
- }),
- 0
- );
- }
- }
-
return (
- <div className={'collectionTimeView' + (doTimeline ? '' : '-pivot')} onContextMenu={this.specificMenu} style={{ width: this._props.PanelWidth(), height: '100%' }}>
+ <div className="collectionTimeView" style={{ width: this._props.PanelWidth(), height: '100%' }}>
{this.contents}
- {!this._props.isSelected() || !doTimeline ? null : (
- <>
- <div className="collectionTimeView-thumb-min collectionTimeView-thumb" key="min" onPointerDown={this.onMinDown} />
- <div className="collectionTimeView-thumb-max collectionTimeView-thumb" key="mid" onPointerDown={this.onMaxDown} />
- <div className="collectionTimeView-thumb-mid collectionTimeView-thumb" key="max" onPointerDown={this.onMidDown} />
- </>
- )}
<div style={{ right: 0, top: 0, position: 'absolute' }}>
<FieldsDropdown
Document={this.Document}
@@ -234,38 +128,14 @@ export class CollectionTimeView extends CollectionSubView() {
placeholder={StrCast(this.layoutDoc._pivotField)}
/>
</div>
+ {!this._props.isSelected() ? null : (
+ <>
+ <div className="collectionTimeView-thumb-min collectionTimeView-thumb" key="min" onPointerDown={this.onMinDown} />
+ <div className="collectionTimeView-thumb-max collectionTimeView-thumb" key="mid" onPointerDown={this.onMaxDown} />
+ <div className="collectionTimeView-thumb-mid collectionTimeView-thumb" key="max" onPointerDown={this.onMidDown} />
+ </>
+ )}
</div>
);
}
}
-
-// eslint-disable-next-line prefer-arrow-callback
-ScriptingGlobals.add(function pivotColumnClick(pivotDoc: Doc, bounds: ViewDefBounds) {
- const pivotField = StrCast(pivotDoc._pivotField, 'author');
- let prevFilterIndex = NumCast(pivotDoc._prevFilterIndex);
- const originalFilter = StrListCast(ObjectField.MakeCopy(pivotDoc._childFilters as ObjectField));
- pivotDoc['_prevDocFilter' + prevFilterIndex] = ObjectField.MakeCopy(pivotDoc._childFilters as ObjectField);
- pivotDoc['_prevDocRangeFilters' + prevFilterIndex] = ObjectField.MakeCopy(pivotDoc._childFiltersByRanges as ObjectField);
- pivotDoc['_prevPivotFields' + prevFilterIndex] = pivotField;
- pivotDoc._prevFilterIndex = ++prevFilterIndex;
- pivotDoc._childFilters = new List();
- setTimeout(
- action(() => {
- const filterVals = bounds.payload as string[];
- filterVals.map(filterVal => Doc.setDocFilter(pivotDoc, pivotField, filterVal, 'check'));
- const pivotView = DocumentView.getDocumentView(pivotDoc);
- if (pivotDoc && pivotView?.ComponentView instanceof CollectionTimeView && filterVals.length === 1) {
- if (pivotView?.ComponentView.childDocs.length && pivotView.ComponentView.childDocs[0][filterVals[0]]) {
- pivotDoc._pivotField = filterVals[0];
- }
- }
- const newFilters = StrListCast(pivotDoc._childFilters);
- if (newFilters.length && originalFilter.length && newFilters.lastElement() === originalFilter.lastElement()) {
- pivotDoc._prevFilterIndex = --prevFilterIndex;
- pivotDoc['_prevDocFilter' + prevFilterIndex] = undefined;
- pivotDoc['_prevDocRangeFilters' + prevFilterIndex] = undefined;
- pivotDoc['_prevPivotFields' + prevFilterIndex] = undefined;
- }
- })
- );
-});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 14:50:17 +0000