aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts1
-rw-r--r--src/client/util/DocumentManager.ts24
-rw-r--r--src/client/util/LinkFollower.ts7
-rw-r--r--src/client/views/DocumentButtonBar.tsx2
-rw-r--r--src/client/views/LightboxView.tsx8
-rw-r--r--src/client/views/MainView.tsx2
-rw-r--r--src/client/views/PropertiesView.tsx14
-rw-r--r--src/client/views/collections/TabDocView.tsx9
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss50
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx54
-rw-r--r--src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx10
-rw-r--r--src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx8
-rw-r--r--src/client/views/nodes/DocumentView.scss6
-rw-r--r--src/client/views/nodes/trails/PresBox.tsx475
14 files changed, 75 insertions, 595 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index f1b8c3034..e44004f45 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -259,7 +259,6 @@ export class DocumentOptions {
appearFrame?: number; // the frame in which the document appears
presTransition?: number; //the time taken for the transition TO a document
presDuration?: number; //the duration of the slide in presentation view
- presProgressivize?: boolean;
borderRounding?: string;
boxShadow?: string; // box-shadow css string OR "standard" to use dash standard box shadow
data?: any;
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index b046d950f..01ca24439 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -131,6 +131,7 @@ export class DocumentManager {
return views?.find(view => view.ContentDiv?.getBoundingClientRect().width && view.props.focus !== returnFalse) || views?.find(view => view.props.focus !== returnFalse) || (views.length ? views[0] : undefined);
};
public getFirstDocumentView = (toFind: Doc, originatingDoc: Opt<Doc> = undefined): DocumentView | undefined => {
+ if (LightboxView.LightboxDoc) return DocumentManager.Instance.getLightboxDocumentView(toFind, originatingDoc);
const views = this.getDocumentViews(toFind).filter(view => view.rootDoc !== originatingDoc);
return views?.find(view => view.ContentDiv?.getBoundingClientRect().width && view.props.focus !== returnFalse) || views?.find(view => view.props.focus !== returnFalse) || (views.length ? views[0] : undefined);
};
@@ -168,8 +169,7 @@ export class DocumentManager {
presZoomScale?: number
): void => {
originalTarget = originalTarget ?? targetDoc;
- const getFirstDocView = LightboxView.LightboxDoc ? DocumentManager.Instance.getLightboxDocumentView : DocumentManager.Instance.getFirstDocumentView;
- const docView = getFirstDocView(targetDoc, originatingDoc);
+ const docView = this.getFirstDocumentView(targetDoc, originatingDoc);
const annotatedDoc = Cast(targetDoc.annotationOn, Doc, null);
const resolvedTarget = targetDoc.type === DocumentType.MARKER ? annotatedDoc ?? docView?.rootDoc ?? targetDoc : docView?.rootDoc ?? targetDoc; // if target is a marker, then focus toggling should apply to the document it's on since the marker itself doesn't have a hidden field
var wasHidden = resolvedTarget.hidden;
@@ -206,11 +206,11 @@ export class DocumentManager {
}
finished?.();
};
- const annoContainerView = (!wasHidden || resolvedTarget !== annotatedDoc) && annotatedDoc && getFirstDocView(annotatedDoc);
+ const annoContainerView = (!wasHidden || resolvedTarget !== annotatedDoc) && annotatedDoc && this.getFirstDocumentView(annotatedDoc);
const contextDocs = docContext.length ? DocListCast(docContext[0].data) : undefined;
const contextDoc = contextDocs?.find(doc => Doc.AreProtosEqual(doc, targetDoc) || Doc.AreProtosEqual(doc, annotatedDoc)) ? docContext.lastElement() : undefined;
const targetDocContext = contextDoc || annotatedDoc;
- const targetDocContextView = (targetDocContext && getFirstDocView(targetDocContext)) || (wasHidden && annoContainerView); // if we have an annotation container and the target was hidden, then try again because we just un-hid the document above
+ const targetDocContextView = (targetDocContext && this.getFirstDocumentView(targetDocContext)) || (wasHidden && annoContainerView); // if we have an annotation container and the target was hidden, then try again because we just un-hid the document above
const focusView = !docView && targetDoc.type === DocumentType.MARKER && annoContainerView ? annoContainerView : docView;
if (annoContainerView) {
if (annoContainerView.props.Document.layoutKey === 'layout_icon') {
@@ -281,7 +281,7 @@ export class DocumentManager {
} else {
// no timecode means we need to find the context view and focus on our target
const findView = (delay: number) => {
- const retryDocView = getFirstDocView(resolvedTarget); // test again for the target view snce we presumably created the context above by focusing on it
+ const retryDocView = this.getFirstDocumentView(resolvedTarget); // test again for the target view snce we presumably created the context above by focusing on it
if (retryDocView) {
// we found the target in the context.
Doc.linkFollowHighlight(retryDocView.rootDoc);
@@ -316,10 +316,20 @@ export class DocumentManager {
}
}
// there's no context view so we need to create one first and try again when that finishes
- const finishFunc = () => this.jumpToDocument(targetDoc, true, createViewFunc, docContext, linkDoc, true /* if we don't find the target, we want to get rid of the context just created */, undefined, finished, originalTarget);
createViewFunc(
targetDocContext, // after creating the context, this calls the finish function that will retry looking for the target
- finishFunc
+ () =>
+ this.jumpToDocument(
+ targetDoc,
+ true,
+ (doc: Doc, finished?: () => void) => doc !== targetDocContext && createViewFunc(doc, finished),
+ docContext,
+ linkDoc,
+ true /* if target not found, get rid of context just created */,
+ undefined,
+ finished,
+ originalTarget
+ )
);
}
}
diff --git a/src/client/util/LinkFollower.ts b/src/client/util/LinkFollower.ts
index 1608a77f2..c09c9d1c5 100644
--- a/src/client/util/LinkFollower.ts
+++ b/src/client/util/LinkFollower.ts
@@ -30,11 +30,10 @@ export class LinkFollower {
const createViewFunc = (doc: Doc, followLoc: string, finished?: Opt<() => void>) => {
const createTabForTarget = (didFocus: boolean) =>
new Promise<ViewAdjustment>(res => {
- const where = LightboxView.LightboxDoc ? 'lightbox' : StrCast(sourceDoc.followLinkLocation, followLoc);
+ const where = LightboxView.LightboxDoc ? 'inPlace' : StrCast(sourceDoc.followLinkLocation, followLoc);
docViewProps.addDocTab(doc, where);
setTimeout(() => {
- const getFirstDocView = LightboxView.LightboxDoc ? DocumentManager.Instance.getLightboxDocumentView : DocumentManager.Instance.getFirstDocumentView;
- const targDocView = getFirstDocView(doc); // get first document view available within the lightbox if that's open, or anywhere otherwise.
+ const targDocView = DocumentManager.Instance.getFirstDocumentView(doc); // get first document view available within the lightbox if that's open, or anywhere otherwise.
if (targDocView) {
targDocView.props.focus(doc, {
willZoom: BoolCast(sourceDoc.followLinkZoom, false),
@@ -110,7 +109,7 @@ export class LinkFollower {
containerDocContext = [Cast(containerDocContext[0].context, Doc, null), ...containerDocContext];
}
const targetContexts = LightboxView.LightboxDoc ? [containerAnnoDoc || containerDocContext[0]].filter(a => a) : containerDocContext;
- DocumentManager.Instance.jumpToDocument(target, zoom, (doc, finished) => createViewFunc(doc, StrCast(linkDoc.followLinkLocation, 'lightbox'), finished), targetContexts, linkDoc, undefined, sourceDoc, allFinished);
+ DocumentManager.Instance.jumpToDocument(target, zoom, (doc, finished) => createViewFunc(doc, StrCast(linkDoc.followLinkLocation, 'inPlace'), finished), targetContexts, linkDoc, undefined, sourceDoc, allFinished);
}
} else {
allFinished();
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index a110bf51a..36875290e 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -458,7 +458,6 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
<DocumentLinksButton View={this.view0} AlwaysOn={true} InMenu={true} StartLink={false} />
</div>
) : null}
- {Doc.noviceMode ? null : <div className="documentButtonBar-button">{this.recordButton}</div>}
{
Doc.noviceMode ? null : <div className="documentButtonBar-button">{this.templateButton}</div>
/*<div className="documentButtonBar-button">
@@ -467,6 +466,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
}
{Doc.noviceMode || !SelectionManager.Views()?.some(v => v.allLinks.length) ? null : <div className="documentButtonBar-button">{this.followLinkButton}</div>}
<div className="documentButtonBar-button">{this.pinButton}</div>
+ <div className="documentButtonBar-button">{this.recordButton}</div>
{!Doc.UserDoc()['documentLinksButton-fullMenu'] ? null : <div className="documentButtonBar-button">{this.shareButton}</div>}
{!Doc.UserDoc()['documentLinksButton-fullMenu'] ? null : (
<div className="documentButtonBar-button" style={{ display: !considerPush ? 'none' : '' }}>
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 91773419a..5660a34e9 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -4,7 +4,8 @@ import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, DocListCast, Opt } from '../../fields/Doc';
import { InkTool } from '../../fields/InkField';
-import { Cast, NumCast, StrCast } from '../../fields/Types';
+import { List } from '../../fields/List';
+import { Cast, DocCast, NumCast, StrCast } from '../../fields/Types';
import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../Utils';
import { DocUtils } from '../documents/Documents';
import { DocumentManager } from '../util/DocumentManager';
@@ -141,6 +142,11 @@ export class LightboxView extends React.Component<LightboxViewProps> {
}
}
public static AddDocTab = (doc: Doc, location: string, layoutTemplate?: Doc, openInTabFunc?: any) => {
+ const inPlaceView = DocCast(doc.context) ? DocumentManager.Instance.getFirstDocumentView(DocCast(doc.context)) : undefined;
+ if (inPlaceView) {
+ inPlaceView.dataDoc[Doc.LayoutFieldKey(inPlaceView.rootDoc)] = new List<Doc>([doc]);
+ return true;
+ }
LightboxView.openInTabFunc = openInTabFunc;
SelectionManager.DeselectAll();
return LightboxView.SetLightboxDoc(
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 9648a7807..987bfc23d 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -690,11 +690,11 @@ export class MainView extends React.Component {
switch (locationFields[0]) {
default:
case 'inPlace':
+ case 'lightbox': return LightboxView.AddDocTab(doc, location);
case 'add': return CollectionDockingView.AddSplit(doc, locationParams);
case 'dashboard': return DashboardView.openDashboard(doc);
case 'close': return CollectionDockingView.CloseSplit(doc, locationParams);
case 'fullScreen': return CollectionDockingView.OpenFullScreen(doc);
- case 'lightbox': return LightboxView.AddDocTab(doc, location);
case 'toggle': return CollectionDockingView.ToggleSplit(doc, locationParams);
}
};
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 842664402..1f161c01b 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -95,7 +95,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
//Pres Trails booleans:
@observable openPresTransitions: boolean = false;
- @observable openPresProgressivize: boolean = false;
@observable openAddSlide: boolean = false;
@observable openSlideOptions: boolean = false;
@@ -1651,19 +1650,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
{this.openPresTransitions ? <div className="propertiesView-presTrails-content">{PresBox.Instance.transitionDropdown}</div> : null}
</div>
)}
- {/* {!selectedItem || type === DocumentType.VID || type === DocumentType.AUDIO ? (null) : <div className="propertiesView-presTrails">
- <div className="propertiesView-presTrails-title"
- onPointerDown={action(() => this.openPresProgressivize = !this.openPresProgressivize)}
- style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}>
- &nbsp; <FontAwesomeIcon style={{ alignSelf: "center" }} icon={"tasks"} /> &nbsp; Progressivize
- <div className="propertiesView-presTrails-title-icon">
- <FontAwesomeIcon icon={this.openPresProgressivize ? "caret-down" : "caret-right"} size="lg" color="white" />
- </div>
- </div>
- {this.openPresProgressivize ? <div className="propertiesView-presTrails-content">
- {PresBox.Instance.progressivizeDropdown}
- </div> : null}
- </div>} */}
{!selectedItem || (type !== DocumentType.VID && type !== DocumentType.AUDIO) ? null : (
<div className="propertiesView-presTrails">
<div
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index e0c422f94..1a9006356 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -11,7 +11,7 @@ import { List } from '../../../fields/List';
import { FieldId } from '../../../fields/RefField';
import { listSpec } from '../../../fields/Schema';
import { ScriptField } from '../../../fields/ScriptField';
-import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types';
+import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../fields/Types';
import { emptyFunction, lightOrDark, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick, Utils } from '../../../Utils';
import { DocServer } from '../../DocServer';
import { DocUtils } from '../../documents/Documents';
@@ -360,11 +360,16 @@ export class TabDocView extends React.Component<TabDocViewProps> {
// // TabDocView.PinDoc(doc, { hidePresBox: true });
// return LightboxView.AddDocTab(doc, location, undefined, this.addDocTab);
// }
+ case 'inPlace':
+ const inPlaceView = DocCast(doc.context) ? DocumentManager.Instance.getFirstDocumentView(DocCast(doc.context)) : undefined;
+ if (inPlaceView) {
+ inPlaceView.dataDoc[Doc.LayoutFieldKey(inPlaceView.rootDoc)] = new List<Doc>([doc]);
+ return true;
+ }
case 'lightbox':
return LightboxView.AddDocTab(doc, location, undefined, this.addDocTab);
case 'toggle':
return CollectionDockingView.ToggleSplit(doc, locationParams, this.stack);
- case 'inPlace':
case 'add':
default:
return CollectionDockingView.AddSplit(doc, locationParams, this.stack);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index d80fcdfc3..7a7ae3f40 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -96,37 +96,6 @@
border-color: #69a5db;
}
-.progressivizeButton {
- position: absolute;
- display: grid;
- grid-template-columns: auto 20px auto;
- transform: translate(-105%, 0);
- align-items: center;
- border: black solid 1px;
- border-radius: 3px;
- justify-content: center;
- width: 40;
- z-index: 30000;
- height: 20;
- overflow: hidden;
- background-color: #d5dce2;
- transition: all 1s;
-
- .progressivizeButton-prev:hover {
- color: #5a9edd;
- }
-
- .progressivizeButton-frame {
- justify-self: center;
- text-align: center;
- width: 15px;
- }
-
- .progressivizeButton-next:hover {
- color: #5a9edd;
- }
-}
-
.resizable {
background: rgba(0, 0, 0, 0.2);
width: 100px;
@@ -178,25 +147,6 @@
}
}
-.progressivizeMove-frame {
- width: 20px;
- border-radius: 2px;
- z-index: 100000;
- color: white;
- text-align: center;
- background-color: #5a9edd;
- transform: translate(-110%, 110%);
-}
-
-.progressivizeButton:hover {
- box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
-
- .progressivizeButton-frame {
- background-color: #5a9edd;
- color: white;
- }
-}
-
.collectionFreeform-customText {
position: absolute;
text-align: center;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index d44c2f160..e24b116d0 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1,5 +1,5 @@
import { Bezier } from 'bezier-js';
-import { action, computed, IReactionDisposer, observable, reaction, runInAction, trace } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import { computedFn } from 'mobx-utils';
import { DateField } from '../../../../fields/DateField';
@@ -71,6 +71,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
return 'CollectionFreeFormView(' + this.props.Document.title?.toString() + ')';
} // this makes mobx trace() statements more descriptive
+ @observable
+ public static ShowPresPaths = false;
+
private _lastNudge: any;
private _lastX: number = 0;
private _lastY: number = 0;
@@ -1866,6 +1869,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
);
}
+ showPresPaths = () => (CollectionFreeFormView.ShowPresPaths ? PresBox.Instance.getPaths(this.rootDoc) : null);
+
@computed get marqueeView() {
TraceMobx();
return (
@@ -1912,8 +1917,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
isAnnotationOverlayScrollable={this.props.isAnnotationOverlayScrollable}
transform={this.contentTransform}
zoomScaling={this.zoomScaling}
- presPaths={BoolCast(this.Document.presPathView)}
- progressivize={BoolCast(this.Document.editProgressivize)}
+ presPaths={this.showPresPaths}
presPinView={BoolCast(this.Document.presPinView)}
transition={this._viewTransition ? `transform ${this._viewTransition}ms` : Cast(this.layoutDoc._viewTransition, 'string', null)}
viewDefDivClick={this.props.viewDefDivClick}>
@@ -2039,8 +2043,7 @@ interface CollectionFreeFormViewPannableContentsProps {
viewDefDivClick?: ScriptField;
children: () => JSX.Element[];
transition?: string;
- presPaths?: boolean;
- progressivize?: boolean;
+ presPaths: () => JSX.Element | null;
presPinView?: boolean;
isAnnotationOverlay: boolean | undefined;
isAnnotationOverlayScrollable: boolean | undefined;
@@ -2093,42 +2096,11 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
return true;
};
- // scale: NumCast(targetDoc._viewScale),
- @computed get zoomProgressivizeContainer() {
- const activeItem = PresBox.Instance.activeItem;
- // const targetDoc = PresBox.Instance.targetDoc;
- if (activeItem && activeItem.presPinView && activeItem.id) {
- const left = NumCast(activeItem.presPinViewX);
- const top = NumCast(activeItem.presPinViewY);
- const width = 100;
- const height = 100;
- return !this.props.presPinView ? null : (
- <div key="resizable" className="resizable" onPointerDown={this.onPointerDown} style={{ width, height, top, left, position: 'absolute' }}>
- <div className="resizers" key={'resizer' + activeItem.id}>
- <div className="resizer top-left" onPointerDown={this.onPointerDown} />
- <div className="resizer top-right" onPointerDown={this.onPointerDown} />
- <div className="resizer bottom-left" onPointerDown={this.onPointerDown} />
- <div className="resizer bottom-right" onPointerDown={this.onPointerDown} />
- </div>
- </div>
- );
- }
- }
-
- @computed get zoomProgressivize() {
- return PresBox.Instance?.activeItem?.presPinView && PresBox.Instance.layoutDoc.presStatus === 'edit' ? this.zoomProgressivizeContainer : null;
- }
-
- @computed get progressivize() {
- return PresBox.Instance && this.props.progressivize ? PresBox.Instance.progressivizeChildDocs : null;
- }
-
@computed get presPaths() {
- const presPaths = 'presPaths' + (this.props.presPaths ? '' : '-hidden');
- return !PresBox.Instance || !this.props.presPaths ? null : (
+ return !this.props.presPaths() ? null : (
<>
- <div key="presorder">{PresBox.Instance.order}</div>
- <svg key="svg" className={presPaths}>
+ <div key="presorder">{PresBox.Instance?.order}</div>
+ <svg key="svg" className="presPaths">
<defs>
<marker id="markerSquare" markerWidth="3" markerHeight="3" refX="1.5" refY="1.5" orient="auto" overflow="visible">
<rect x="0" y="0" width="3" height="3" stroke="#69a6db" strokeWidth="1" fill="white" fillOpacity="0.8" />
@@ -2140,7 +2112,7 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
<path d="M2,2 L2,6 L6,4 L2,2 Z" stroke="#69a6db" strokeLinejoin="round" strokeWidth="1" fill="white" fillOpacity="0.8" />
</marker>
</defs>
- {PresBox.Instance.paths}
+ {this.props.presPaths()}
</svg>
</>
);
@@ -2180,8 +2152,6 @@ class CollectionFreeFormViewPannableContents extends React.Component<CollectionF
/>
)}
{this.presPaths}
- {this.progressivize}
- {this.zoomProgressivize}
</div>
);
}
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index 465dbfe6d..e5a2d9007 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -9,7 +9,7 @@ import { DragManager, dropActionType } from '../../../util/DragManager';
import { SnappingManager } from '../../../util/SnappingManager';
import { Transform } from '../../../util/Transform';
import { undoBatch } from '../../../util/UndoManager';
-import { DocumentView } from '../../nodes/DocumentView';
+import { DocFocusOptions, DocumentView } from '../../nodes/DocumentView';
import { CollectionSubView } from '../CollectionSubView';
import './CollectionMulticolumnView.scss';
import ResizeBar from './MulticolumnResizer';
@@ -241,9 +241,9 @@ export class CollectionMulticolumnView extends CollectionSubView() {
}
return this.props.addDocTab(doc, where);
};
- isContentActive = () => this.props.isSelected() || this.props.isContentActive();
- isChildContentActive = () =>
- ((this.props.childDocumentsActive?.() || this.Document._childDocumentsActive) && this.props.isDocumentActive?.() && SnappingManager.GetIsDragging()) || this.props.isSelected() || this.props.isAnyChildContentActive() ? true : false;
+ focusDocument = (doc: Doc, options: DocFocusOptions) => this.props.focus(this.rootDoc, options);
+ isContentActive = () => this.props.isSelected() || this.props.isContentActive() || this.props.isAnyChildContentActive();
+ isChildContentActive = () => (((this.props.childDocumentsActive?.() || this.Document._childDocumentsActive) && this.props.isDocumentActive?.() && SnappingManager.GetIsDragging()) || this.isContentActive() ? true : false);
getDisplayDoc = (layout: Doc, dxf: () => Transform, width: () => number, height: () => number) => {
return (
<DocumentView
@@ -267,7 +267,7 @@ export class CollectionMulticolumnView extends CollectionSubView() {
hideResizeHandles={this.props.childHideResizeHandles?.()}
hideDecorationTitle={this.props.childHideDecorationTitle?.()}
fitContentsToBox={this.props.fitContentsToBox}
- focus={this.props.focus}
+ focus={this.focusDocument}
docFilters={this.childDocFilters}
docRangeFilters={this.childDocRangeFilters}
searchFilterDocs={this.searchFilterDocs}
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
index f8de4e5de..d7f317f4f 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
@@ -9,7 +9,7 @@ import { DragManager, dropActionType } from '../../../util/DragManager';
import { SnappingManager } from '../../../util/SnappingManager';
import { Transform } from '../../../util/Transform';
import { undoBatch } from '../../../util/UndoManager';
-import { DocumentView } from '../../nodes/DocumentView';
+import { DocFocusOptions, DocumentView } from '../../nodes/DocumentView';
import { CollectionSubView } from '../CollectionSubView';
import './CollectionMultirowView.scss';
import HeightLabel from './MultirowHeightLabel';
@@ -241,9 +241,9 @@ export class CollectionMultirowView extends CollectionSubView() {
}
return this.props.addDocTab(doc, where);
};
- isContentActive = () => this.props.isSelected() || this.props.isContentActive();
- isChildContentActive = () =>
- ((this.props.childDocumentsActive?.() || this.Document._childDocumentsActive) && this.props.isDocumentActive?.() && SnappingManager.GetIsDragging()) || this.props.isSelected() || this.props.isAnyChildContentActive() ? true : false;
+ focusDocument = (doc: Doc, options: DocFocusOptions) => this.props.focus(this.rootDoc, options);
+ isContentActive = () => this.props.isSelected() || this.props.isContentActive() || this.props.isAnyChildContentActive();
+ isChildContentActive = () => (((this.props.childDocumentsActive?.() || this.Document._childDocumentsActive) && this.props.isDocumentActive?.() && SnappingManager.GetIsDragging()) || this.isContentActive() ? true : false);
getDisplayDoc = (layout: Doc, dxf: () => Transform, width: () => number, height: () => number) => {
return (
<DocumentView
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 6cadeec41..e437d295e 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -198,9 +198,9 @@
> .documentView-titleWrapper-hover {
display: inline-block;
}
- }
-
- > .documentView-styleWrapper {
+ > .documentView-contentsView {
+ opacity: 0.5;
+ }
> .documentView-captionWrapper {
opacity: 1;
}
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 9e3b42cf6..b495a9399 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -93,7 +93,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
@observable _expandBoolean: boolean = false;
@observable _transitionTools: boolean = false;
@observable _newDocumentTools: boolean = false;
- @observable _progressivizeTools: boolean = false;
@observable _openMovementDropdown: boolean = false;
@observable _openEffectDropdown: boolean = false;
@observable _presentTools: boolean = false;
@@ -206,8 +205,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
targetDoc._viewTransition = 'all 1s';
setTimeout(() => (targetDoc._viewTransition = undefined), 1010);
this.nextKeyframe(targetDoc, activeItem);
- if (activeItem.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, targetDoc);
- else targetDoc.keyFrameEditing = true;
+ targetDoc.keyFrameEditing = true;
};
_mediaTimer!: [NodeJS.Timeout, Doc];
@@ -246,22 +244,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
// Called when the user activates 'next' - to move to the next part of the pres. trail
@action
next = () => {
- const activeItem: Doc = this.activeItem;
- const targetDoc: Doc = this.targetDoc;
- const lastFrame = Cast(targetDoc?.lastFrame, 'number', null);
- const curFrame = NumCast(targetDoc?._currentFrame);
- let internalFrames: boolean = false;
- if (activeItem.presProgressivize || activeItem.zoomProgressivize || targetDoc.scrollProgressivize) internalFrames = true;
- if (internalFrames && lastFrame !== undefined && curFrame < lastFrame) {
- // Case 1: There are still other frames and should go through all frames before going to next slide
- this.nextInternalFrame(targetDoc, activeItem);
- } else if (this.childDocs[this.itemIndex + 1] !== undefined) {
- // Case 2: No more frames in current doc and next slide is defined, therefore move to next slide
+ if (this.childDocs[this.itemIndex + 1] !== undefined) {
+ // Case 1: No more frames in current doc and next slide is defined, therefore move to next slide
const slides = DocListCast(this.rootDoc[StrCast(this.presFieldKey, 'data')]);
const curLast = this.selectedArray.size ? Math.max(...Array.from(this.selectedArray).map(d => slides.indexOf(DocCast(d)))) : this.itemIndex;
this.nextSlide(curLast + 1);
} else if (this.childDocs[this.itemIndex + 1] === undefined && (this.layoutDoc.presLoop || this.layoutDoc.presStatus === PresStatus.Edit)) {
- // Case 3: Last slide and presLoop is toggled ON or it is in Edit mode
+ // Case 2: Last slide and presLoop is toggled ON or it is in Edit mode
this.nextSlide(0);
}
return this.itemIndex;
@@ -552,51 +541,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
/**
- * Uses the viewfinder to progressivize through the different views of a single collection.
- * @param activeItem: document for which internal zoom is used
- */
- zoomProgressivizeNext = (activeItem: Doc) => {
- const targetDoc: Doc = this.targetDoc;
- const srcContext = Cast(targetDoc?.context, Doc, null);
- const docView = DocumentManager.Instance.getDocumentView(targetDoc);
- const vfLeft = this.checkList(targetDoc, activeItem['viewfinder-left-indexed']);
- const vfWidth = this.checkList(targetDoc, activeItem['viewfinder-width-indexed']);
- const vfTop = this.checkList(targetDoc, activeItem['viewfinder-top-indexed']);
- const vfHeight = this.checkList(targetDoc, activeItem['viewfinder-height-indexed']);
- // Case 1: document that is not a Golden Layout tab
- if (srcContext) {
- const srcDocView = DocumentManager.Instance.getDocumentView(srcContext);
- if (srcDocView) {
- const layoutdoc = Doc.Layout(targetDoc);
- const panelWidth: number = srcDocView.props.PanelWidth();
- const panelHeight: number = srcDocView.props.PanelHeight();
- const newPanX = NumCast(targetDoc.x) + NumCast(layoutdoc._width) / 2;
- const newPanY = NumCast(targetDoc.y) + NumCast(layoutdoc._height) / 2;
- const newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight);
- srcContext._panX = newPanX + (vfLeft + vfWidth / 2);
- srcContext._panY = newPanY + (vfTop + vfHeight / 2);
- srcContext._viewScale = newScale;
- }
- }
- // Case 2: document is the containing collection
- if (docView && !srcContext) {
- const panelWidth: number = docView.props.PanelWidth();
- const panelHeight: number = docView.props.PanelHeight();
- const newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight);
- targetDoc._panX = vfLeft + vfWidth / 2;
- targetDoc._panY = vfTop + vfWidth / 2;
- targetDoc._viewScale = newScale;
- }
- const resize = document.getElementById('resizable');
- if (resize) {
- resize.style.width = vfWidth + 'px';
- resize.style.height = vfHeight + 'px';
- resize.style.top = vfTop + 'px';
- resize.style.left = vfLeft + 'px';
- }
- };
-
- /**
* For 'Hide Before' and 'Hide After' buttons making sure that
* they are hidden each time the presentation is updated.
*/
@@ -643,6 +587,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
//The function that starts or resets presentaton functionally, depending on presStatus of the layoutDoc
@action
startAutoPres = async (startSlide: number) => {
+ if (!this.childDocs.length) return;
this.layoutDoc.presStatus = PresStatus.Autoplay;
this.startPresentation(startSlide + 1 === this.childDocs.length ? 0 : startSlide);
clearTimeout(this._presTimer);
@@ -682,14 +627,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
};
// The function allows for viewing the pres path on toggle
- @action togglePath = (srcContext: Doc, off?: boolean) => {
- if (off) {
- this._pathBoolean = false;
- srcContext.presPathView = false;
- } else {
- runInAction(() => (this._pathBoolean = !this._pathBoolean));
- srcContext.presPathView = this._pathBoolean;
- }
+ @action togglePath = (off?: boolean) => {
+ this._pathBoolean = off ? false : !this._pathBoolean;
+ CollectionFreeFormView.ShowPresPaths = this._pathBoolean;
};
// The function allows for expanding the view of pres on toggle
@@ -1014,17 +954,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
};
- /**
- *
- */
- @action
- viewPaths = () => {
- const srcContext = Cast(this.rootDoc.presCollection, Doc, null);
- if (srcContext) {
- this.togglePath(srcContext);
- }
- };
-
getAllIndexes = (arr: Doc[], val: Doc) => arr.map((doc, i) => (doc === val ? i : -1)).filter(i => i !== -1);
// Adds the index in the pres path graphically
@@ -1104,16 +1033,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
*/
@computed get paths() {
let pathPoints = '';
- const presCollection = Cast(this.rootDoc.presCollection, Doc, null);
this.childDocs.forEach((doc, index) => {
const tagDoc = Cast(doc.presentationTargetDoc, Doc, null);
- const srcContext = Cast(tagDoc?.context, Doc, null);
- if (tagDoc && presCollection === srcContext) {
+ if (tagDoc) {
const n1x = NumCast(tagDoc.x) + NumCast(tagDoc._width) / 2;
const n1y = NumCast(tagDoc.y) + NumCast(tagDoc._height) / 2;
if ((index = 0)) pathPoints = n1x + ',' + n1y;
else pathPoints = pathPoints + ' ' + n1x + ',' + n1y;
- } else if (doc.presPinView && presCollection === tagDoc) {
+ } else if (doc.presPinView) {
const n1x = NumCast(doc.presPinViewX);
const n1y = NumCast(doc.presPinViewY);
if ((index = 0)) pathPoints = n1x + ',' + n1y;
@@ -1137,6 +1064,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
/>
);
}
+ getPaths = (collection: Doc) => this.paths; // needs to be smarter and figure out the paths to draw for this specific collection. or better yet, draw everything in an overlay layer instad of within a collection
// Converts seconds to ms and updates presTransition
setTransitionTime = (number: String, change?: number) => {
@@ -1840,7 +1768,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
// CollectionFreeFormDocumentView.setupScroll(tagDoc, 0);
// CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0);
}
- // if (tagDoc.editScrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame);
CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, tagDoc);
tagDoc._currentFrame = Math.max(0, (currentFrame || 0) + 1);
tagDoc.lastFrame = Math.max(NumCast(tagDoc._currentFrame), NumCast(tagDoc.lastFrame));
@@ -1882,123 +1809,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
@observable private openActiveColorPicker: boolean = false;
@observable private openViewedColorPicker: boolean = false;
- @computed get progressivizeDropdown() {
- const activeItem: Doc = this.activeItem;
- const targetDoc: Doc = this.targetDoc;
- if (activeItem && targetDoc) {
- const activeFontColor = targetDoc['pres-text-color'] ? StrCast(targetDoc['pres-text-color']) : 'Black';
- const viewedFontColor = targetDoc['pres-text-viewed-color'] ? StrCast(targetDoc['pres-text-viewed-color']) : 'Black';
- return (
- <div className={`presBox-ribbon ${this._progressivizeTools && this.layoutDoc.presStatus === 'edit' ? 'active' : ''}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
- <div className="ribbon-box">
- {this.stringType} selected
- <div
- className="ribbon-doubleButton"
- style={{
- borderTop: 'solid 1px darkgrey',
- display: (targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform') || targetDoc.type === DocumentType.IMG || targetDoc.type === DocumentType.RTF ? 'inline-flex' : 'none',
- }}>
- <div className="ribbon-toggle" style={{ backgroundColor: activeItem.presProgressivize ? Colors.LIGHT_BLUE : '' }} onClick={this.progressivizeChild}>
- Contents
- </div>
- <div className="ribbon-toggle" style={{ opacity: activeItem.presProgressivize ? 1 : 0.4, backgroundColor: targetDoc.editProgressivize ? Colors.LIGHT_BLUE : '' }} onClick={this.editProgressivize}>
- Edit
- </div>
- </div>
- <div className="ribbon-doubleButton" style={{ display: activeItem.presProgressivize ? 'inline-flex' : 'none' }}>
- <div className="presBox-subheading">Active text color</div>
- <div
- className="ribbon-colorBox"
- style={{ backgroundColor: activeFontColor, height: 15, width: 15 }}
- onClick={action(() => {
- this.openActiveColorPicker = !this.openActiveColorPicker;
- })}></div>
- </div>
- {this.activeColorPicker}
- <div className="ribbon-doubleButton" style={{ display: activeItem.presProgressivize ? 'inline-flex' : 'none' }}>
- <div className="presBox-subheading">Viewed font color</div>
- <div className="ribbon-colorBox" style={{ backgroundColor: viewedFontColor, height: 15, width: 15 }} onClick={action(() => (this.openViewedColorPicker = !this.openViewedColorPicker))}></div>
- </div>
- {this.viewedColorPicker}
- <div
- className="ribbon-doubleButton"
- style={{ borderTop: 'solid 1px darkgrey', display: (targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform') || targetDoc.type === DocumentType.IMG ? 'inline-flex' : 'none' }}>
- <div className="ribbon-toggle" style={{ backgroundColor: activeItem.zoomProgressivize ? Colors.LIGHT_BLUE : '' }} onClick={this.progressivizeZoom}>
- Zoom
- </div>
- <div className="ribbon-toggle" style={{ opacity: activeItem.zoomProgressivize ? 1 : 0.4, backgroundColor: activeItem.editZoomProgressivize ? Colors.LIGHT_BLUE : '' }} onClick={this.editZoomProgressivize}>
- Edit
- </div>
- </div>
- <div
- className="ribbon-doubleButton"
- style={{
- borderTop: 'solid 1px darkgrey',
- display: targetDoc._viewType === 'stacking' || targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF ? 'inline-flex' : 'none',
- }}>
- <div className="ribbon-toggle" style={{ backgroundColor: activeItem.scrollProgressivize ? Colors.LIGHT_BLUE : '' }} onClick={this.progressivizeScroll}>
- Scroll
- </div>
- <div className="ribbon-toggle" style={{ opacity: activeItem.scrollProgressivize ? 1 : 0.4, backgroundColor: targetDoc.editScrollProgressivize ? Colors.LIGHT_BLUE : '' }} onClick={this.editScrollProgressivize}>
- Edit
- </div>
- </div>
- </div>
- <div className="ribbon-final-box">
- Frames
- <div className="ribbon-doubleButton">
- <div className="ribbon-frameSelector">
- <div
- key="back"
- title="back frame"
- className="backKeyframe"
- onClick={e => {
- e.stopPropagation();
- this.prevKeyframe(targetDoc, activeItem);
- }}>
- <FontAwesomeIcon icon={'caret-left'} size={'lg'} />
- </div>
- <div
- key="num"
- title="toggle view all"
- className="numKeyframe"
- style={{ color: targetDoc.keyFrameEditing ? 'white' : 'black', backgroundColor: targetDoc.keyFrameEditing ? Colors.MEDIUM_BLUE : Colors.LIGHT_BLUE }}
- onClick={action(() => (targetDoc.keyFrameEditing = !targetDoc.keyFrameEditing))}>
- {NumCast(targetDoc._currentFrame)}
- </div>
- <div
- key="fwd"
- title="forward frame"
- className="fwdKeyframe"
- onClick={e => {
- e.stopPropagation();
- this.nextKeyframe(targetDoc, activeItem);
- }}>
- <FontAwesomeIcon icon={'caret-right'} size={'lg'} />
- </div>
- </div>
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">{'Last frame'}</div>
- </>
- }>
- <div className="ribbon-property">{NumCast(targetDoc.lastFrame)}</div>
- </Tooltip>
- </div>
- <div className="ribbon-frameList">
- {this.frameListHeader}
- {this.frameList}
- </div>
- <div className="ribbon-toggle" style={{ height: 20, backgroundColor: Colors.LIGHT_BLUE }} onClick={() => console.log(' TODO: play frames')}>
- Play
- </div>
- </div>
- </div>
- );
- }
- }
-
@undoBatch
@action
switchActive = (color: ColorState) => {
@@ -2033,262 +1843,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
@action
- turnOffEdit = (paths?: boolean) => {
- // Turn off paths
- if (paths) {
- const srcContext = Cast(this.rootDoc.presCollection, Doc, null);
- if (srcContext) this.togglePath(srcContext, true);
- }
- // Turn off the progressivize editors for each document
- this.childDocs.forEach(doc => {
- doc.editSnapZoomProgressivize = false;
- doc.editZoomProgressivize = false;
- const targetDoc = Cast(doc.presentationTargetDoc, Doc, null);
- if (targetDoc) {
- targetDoc.editZoomProgressivize = false;
- // targetDoc.editScrollProgressivize = false;
- }
- });
- };
-
- //Toggle whether the user edits or not
- @action
- editZoomProgressivize = (e: React.MouseEvent) => {
- const activeItem: Doc = this.activeItem;
- const targetDoc: Doc = this.targetDoc;
- if (!targetDoc.editZoomProgressivize) {
- if (!activeItem.zoomProgressivize) activeItem.zoomProgressivize = true;
- targetDoc.zoomProgressivize = true;
- targetDoc.editZoomProgressivize = true;
- activeItem.editZoomProgressivize = true;
- } else {
- targetDoc.editZoomProgressivize = false;
- activeItem.editZoomProgressivize = false;
- }
- };
-
- //Toggle whether the user edits or not
- @action
- editScrollProgressivize = (e: React.MouseEvent) => {
- const targetDoc: Doc = this.targetDoc;
- if (!targetDoc.editScrollProgressivize) {
- if (!targetDoc.scrollProgressivize) {
- targetDoc.scrollProgressivize = true;
- this.activeItem.scrollProgressivize = true;
- }
- targetDoc.editScrollProgressivize = true;
- } else {
- targetDoc.editScrollProgressivize = false;
- }
- };
-
- //Progressivize Zoom
- @action
- progressivizeScroll = (e: React.MouseEvent) => {
- e.stopPropagation();
- this.activeItem.scrollProgressivize = !this.activeItem.scrollProgressivize;
- const targetDoc: Doc = this.targetDoc;
- targetDoc.scrollProgressivize = !targetDoc.scrollProgressivize;
- // CollectionFreeFormDocumentView.setupScroll(targetDoc, NumCast(targetDoc._currentFrame));
- if (targetDoc.editScrollProgressivize) {
- targetDoc.editScrollProgressivize = false;
- targetDoc._currentFrame = 0;
- targetDoc.lastFrame = 0;
- }
- };
-
- //Progressivize Zoom
- @action
- progressivizeZoom = (e: React.MouseEvent) => {
- e.stopPropagation();
- const activeItem: Doc = this.activeItem;
- activeItem.zoomProgressivize = !activeItem.zoomProgressivize;
- const targetDoc: Doc = this.targetDoc;
- targetDoc.zoomProgressivize = !targetDoc.zoomProgressivize;
- CollectionFreeFormDocumentView.setupZoom(activeItem, targetDoc);
- if (activeItem.editZoomProgressivize) {
- activeItem.editZoomProgressivize = false;
- targetDoc._currentFrame = 0;
- targetDoc.lastFrame = 0;
- }
- };
-
- //Progressivize Child Docs
- @action
- editProgressivize = (e: React.MouseEvent) => {
- const activeItem: Doc = this.activeItem;
- const targetDoc: Doc = this.targetDoc;
- targetDoc._currentFrame = targetDoc.lastFrame;
- if (!targetDoc.editProgressivize) {
- if (!activeItem.presProgressivize) {
- activeItem.presProgressivize = true;
- targetDoc.presProgressivize = true;
- }
- targetDoc.editProgressivize = true;
- } else {
- targetDoc.editProgressivize = false;
- }
- };
-
- @action
- progressivizeChild = (e: React.MouseEvent) => {
- e.stopPropagation();
- const activeItem: Doc = this.activeItem;
- const targetDoc: Doc = this.targetDoc;
- const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
- if (!activeItem.presProgressivize) {
- targetDoc.keyFrameEditing = false;
- activeItem.presProgressivize = true;
- targetDoc.presProgressivize = true;
- targetDoc._currentFrame = 0;
- docs.forEach((doc, i) => CollectionFreeFormDocumentView.setupKeyframes([doc], i, true));
- targetDoc.lastFrame = targetDoc.lastFrame ? NumCast(targetDoc.lastFrame) : docs.length - 1;
- } else {
- // targetDoc.editProgressivize = false;
- activeItem.presProgressivize = false;
- targetDoc.presProgressivize = false;
- targetDoc._currentFrame = 0;
- targetDoc.keyFrameEditing = true;
- }
- };
-
- @action
- checkMovementLists = (doc: Doc, xlist: any, ylist: any) => {
- const x: List<number> = xlist;
- const y: List<number> = ylist;
- const tags: JSX.Element[] = [];
- let pathPoints = ''; //List of all of the pathpoints that need to be added
- for (let i = 0; i < x.length - 1; i++) {
- if (y[i] || x[i]) {
- if (i === 0) pathPoints = x[i] - 11 + ',' + (y[i] + 33);
- else pathPoints = pathPoints + ' ' + (x[i] - 11) + ',' + (y[i] + 33);
- tags.push(
- <div className="progressivizeMove-frame" style={{ position: 'absolute', top: y[i], left: x[i] }}>
- {i}
- </div>
- );
- }
- }
- tags.push(
- <svg style={{ overflow: 'visible', position: 'absolute' }}>
- <polyline
- points={pathPoints}
- style={{
- position: 'absolute',
- opacity: 1,
- stroke: '#000000',
- strokeWidth: 2,
- strokeDasharray: '10 5',
- }}
- fill="none"
- />
- </svg>
- );
- return tags;
- };
-
- @observable
- toggleDisplayMovement = (doc: Doc) => (doc.displayMovement = !doc.displayMovement);
-
- @action
- checkList = (doc: Doc, list: any): number => {
- const x: List<number> = list;
- if (x?.length >= NumCast(doc._currentFrame) + 1) {
- return x[NumCast(doc._currentFrame)];
- } else if (x) {
- x.length = NumCast(doc._currentFrame) + 1;
- x[NumCast(doc._currentFrame)] = x[NumCast(doc._currentFrame) - 1];
- return x[NumCast(doc._currentFrame)];
- }
- return 100;
- };
-
- @computed get progressivizeChildDocs() {
- const targetDoc: Doc = this.targetDoc;
- const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
- const tags: JSX.Element[] = [];
- docs.forEach((doc, index) => {
- if (doc['x-indexed'] && doc['y-indexed']) {
- tags.push(<div style={{ position: 'absolute', display: doc.displayMovement ? 'block' : 'none' }}>{this.checkMovementLists(doc, doc['x-indexed'], doc['y-indexed'])}</div>);
- }
- tags.push(
- <div
- className="progressivizeButton"
- key={index}
- onPointerLeave={() => {
- if (NumCast(targetDoc._currentFrame) < NumCast(doc.appearFrame)) doc.opacity = 0;
- }}
- onPointerOver={() => {
- if (NumCast(targetDoc._currentFrame) < NumCast(doc.appearFrame)) doc.opacity = 0.5;
- }}
- onClick={e => {
- this.toggleDisplayMovement(doc);
- e.stopPropagation();
- }}
- style={{ backgroundColor: doc.displayMovement ? Colors.LIGHT_BLUE : '#c8c8c8', top: NumCast(doc.y), left: NumCast(doc.x) }}>
- <div className="progressivizeButton-prev">
- <FontAwesomeIcon
- icon={'caret-left'}
- size={'lg'}
- onClick={e => {
- e.stopPropagation();
- this.prevAppearFrame(doc, index);
- }}
- />
- </div>
- <div className="progressivizeButton-frame">{NumCast(doc.appearFrame)}</div>
- <div className="progressivizeButton-next">
- <FontAwesomeIcon
- icon={'caret-right'}
- size={'lg'}
- onClick={e => {
- e.stopPropagation();
- this.nextAppearFrame(doc, index);
- }}
- />
- </div>
- </div>
- );
- });
- return tags;
- }
-
- @action
- nextAppearFrame = (doc: Doc, i: number) => {
- doc.appearFrame = (Cast(doc.appearFrame, 'number', null) ?? 0) + 1;
- this.updateOpacityList(doc['opacity-indexed'], NumCast(doc.appearFrame));
- };
-
- @action
- prevAppearFrame = (doc: Doc, i: number) => {
- doc.appearFrame = Math.max(0, (Cast(doc.appearFrame, 'number', null) ?? 0) - 1);
- this.updateOpacityList(doc['opacity-indexed'], NumCast(doc.appearFrame));
- };
-
- @action
- updateOpacityList = (list: any, frame: number) => {
- const x: List<number> = list;
- if (x && x.length >= frame) {
- for (let i = 0; i < x.length; i++) {
- if (i < frame) {
- x[i] = 0;
- } else if (i >= frame) {
- x[i] = 1;
- }
- }
- list = x;
- } else {
- x.length = frame + 1;
- for (let i = 0; i < x.length; i++) {
- if (i < frame) {
- x[i] = 0;
- } else if (i >= frame) {
- x[i] = 1;
- }
- }
- list = x;
- }
- };
+ turnOffEdit = (paths?: boolean) => paths && this.togglePath(true); // Turn off paths
@computed
get toolbarWidth(): number {
@@ -2311,11 +1866,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
<FontAwesomeIcon icon={"plus"} />
<FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
</div></Tooltip> */}
- <Tooltip title={<div className="dash-tooltip">{'View paths'}</div>}>
+ <Tooltip title={<div className="dash-tooltip">View paths</div>}>
<div
- style={{ opacity: this.childDocs.length > 1 && this.layoutDoc.presCollection ? 1 : 0.3, color: this._pathBoolean ? Colors.MEDIUM_BLUE : 'white', width: isMini ? '100%' : undefined }}
+ style={{ opacity: this.childDocs.length > 1 ? 1 : 0.3, color: this._pathBoolean ? Colors.MEDIUM_BLUE : 'white', width: isMini ? '100%' : undefined }}
className={'toolbar-button'}
- onClick={this.childDocs.length > 1 && this.layoutDoc.presCollection ? this.viewPaths : undefined}>
+ onClick={this.childDocs.length > 1 ? () => this.togglePath() : undefined}>
<FontAwesomeIcon icon={'exchange-alt'} />
</div>
</Tooltip>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 13:50:05 +0000