From 693665069c170983bd76336b804ec73870642fe3 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sat, 1 Feb 2020 16:25:10 -0500 Subject: simplified Presentations a bit by using templates --- .../views/collections/CollectionDockingView.tsx | 15 ++-- src/client/views/nodes/DocumentContentsView.tsx | 7 +- src/client/views/nodes/ImageBox.tsx | 6 +- src/client/views/nodes/PresBox.tsx | 54 +++++++------- .../views/presentationview/PresElementBox.tsx | 85 ++++++++++++---------- src/new_fields/Doc.ts | 16 ++-- 6 files changed, 97 insertions(+), 86 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 159a1cded..e691788ad 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -35,6 +35,7 @@ import { ComputedField } from '../../../new_fields/ScriptField'; import { InteractionUtils } from '../../util/InteractionUtils'; import { TraceMobx } from '../../../new_fields/util'; import { Scripting } from '../../util/Scripting'; +import { PresElementBox } from '../presentationview/PresElementBox'; library.add(faFile); const _global = (window /* browser */ || global /* node */) as any; @@ -326,7 +327,7 @@ export class CollectionDockingView extends React.Component void = () => { if (this._containerRef.current) { this.reactionDisposer = reaction( - () => StrCast(this.props.Document.dockingConfig), + () => this.props.Document.dockingConfig, () => { if (!this._goldenLayout || this._ignoreStateChange !== JSON.stringify(this._goldenLayout.toConfig())) { // Because this is in a set timeout, if this component unmounts right after mounting, @@ -643,15 +644,9 @@ export class DockedFrameRenderer extends React.Component { //add this new doc to props.Document const curPres = Cast(CurrentUserUtils.UserDocument.curPresentation, Doc) as Doc; if (curPres) { - const pinDoc = Docs.Create.PresElementBoxDocument({ backgroundColor: "transparent", _xMargin: 5 }); - Doc.GetProto(pinDoc).presentationTargetDoc = doc; - Doc.GetProto(pinDoc).title = ComputedField.MakeFunction('(this.presentationTargetDoc instanceof Doc) && this.presentationTargetDoc.title?.toString()'); - const data = Cast(curPres.data, listSpec(Doc)); - if (data) { - data.push(pinDoc); - } else { - curPres.data = new List([pinDoc]); - } + const pinDoc = Doc.MakeAlias(doc); + pinDoc.presentationTargetDoc = doc; + Doc.AddDocToList(curPres, "data", pinDoc); if (!DocumentManager.Instance.getDocumentView(curPres)) { this.addDocTab(curPres, undefined, "onRight"); } diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 0b01e6471..3b9015994 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -81,6 +81,11 @@ export class DocumentContentsView extends React.Component 7 || !this.layout) ? (null) : + return (this.props.renderDepth > 7 || !this.layout || !this.layoutDoc) ? (null) : console.log(err)); } else if (this.Document._nativeHeight !== cachedNativeSize.width || this.Document._nativeWidth !== cachedNativeSize.height) { !(this.Document[StrCast(this.props.Document.layoutKey)] instanceof Doc) && setTimeout(() => { - this.Document._nativeWidth = cachedNativeSize.width; - this.Document._nativeHeight = cachedNativeSize.height; + if (!(this.Document[StrCast(this.props.Document.layoutKey)] instanceof Doc)) { + this.Document._nativeWidth = cachedNativeSize.width; + this.Document._nativeHeight = cachedNativeSize.height; + } }, 0); } } diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 8d53f45a6..c661b7f4e 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -2,23 +2,22 @@ import React = require("react"); import { library } from '@fortawesome/fontawesome-svg-core'; import { faArrowLeft, faArrowRight, faEdit, faMinus, faPlay, faPlus, faStop, faTimes } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, computed, reaction, IReactionDisposer } from "mobx"; +import { action, computed, IReactionDisposer, reaction } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc"; import { listSpec } from "../../../new_fields/Schema"; +import { ComputedField } from "../../../new_fields/ScriptField"; import { Cast, FieldValue, NumCast } from "../../../new_fields/Types"; import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; +import { Docs } from "../../documents/Documents"; import { DocumentManager } from "../../util/DocumentManager"; import { undoBatch } from "../../util/UndoManager"; -import { CollectionViewType } from "../collections/CollectionView"; import { CollectionDockingView } from "../collections/CollectionDockingView"; -import { CollectionView } from "../collections/CollectionView"; +import { CollectionView, CollectionViewType } from "../collections/CollectionView"; import { ContextMenu } from "../ContextMenu"; import { FieldView, FieldViewProps } from './FieldView'; import "./PresBox.scss"; -import { DocumentType } from "../../documents/DocumentTypes"; -import { Docs } from "../../documents/Documents"; -import { ComputedField } from "../../../new_fields/ScriptField"; +import { presSchema } from "../presentationview/PresElementBox"; library.add(faArrowLeft); library.add(faArrowRight); @@ -32,28 +31,18 @@ library.add(faEdit); @observer export class PresBox extends React.Component { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); } - _docListChangedReaction: IReactionDisposer | undefined; componentDidMount() { - this._docListChangedReaction = reaction(() => { - const value = FieldValue(Cast(this.props.Document[this.props.fieldKey], listSpec(Doc))); - return value ? value.slice() : value; - }, () => { - const value = FieldValue(Cast(this.props.Document[this.props.fieldKey], listSpec(Doc))); - if (value) { - value.forEach((item, i) => { - if (item instanceof Doc && item.type !== DocumentType.PRESELEMENT) { - const pinDoc = Docs.Create.PresElementBoxDocument({ backgroundColor: "transparent", _xMargin: 5 }); - Doc.GetProto(pinDoc).presentationTargetDoc = item; - Doc.GetProto(pinDoc).title = ComputedField.MakeFunction('this.presentationTargetDoc?.title?.toString()'); - value.splice(i, 1, pinDoc); - } - }); - } - }); - } - - componentWillUnmount() { - this._docListChangedReaction && this._docListChangedReaction(); + const userDoc = CurrentUserUtils.UserDocument; + let presTemp = Cast(userDoc.presentationTemplate, Doc); + if (presTemp instanceof Promise) { + presTemp.then(presTemp => this.props.Document.childLayout = presTemp); + } + else if (presTemp === undefined) { + presTemp = userDoc.presentationTemplate = Docs.Create.PresElementBoxDocument({ backgroundColor: "transparent", _xMargin: 5, isTemplateDoc: true, isTemplateForField: "data" }); + } + else { + this.props.Document.childLayout = presTemp; + } } @computed get childDocs() { return DocListCast(this.props.Document[this.props.fieldKey]); } @@ -282,6 +271,13 @@ export class PresBox extends React.Component { } } + addDocument = (doc: Doc) => { + const newPinDoc = Doc.MakeAlias(doc); + newPinDoc.presentationTargetDoc = doc; + return Doc.AddDocToList(this.props.Document, this.props.fieldKey, newPinDoc); + } + + //The function that resets the presentation by removing every action done by it. It also //stops the presentaton. @action @@ -342,7 +338,7 @@ export class PresBox extends React.Component { doc.presBox = this.props.Document; doc.presBoxKey = this.props.fieldKey; doc.collapsedHeight = hgt; - doc._height = ComputedField.MakeFunction("this.collapsedHeight + Number(this.embedOpen ? 100:0)"); + doc._nativeWidth = doc._nativeHeight = undefined; const curScale = NumCast(doc.viewScale, null); if (curScale === undefined) { doc.viewScale = 1; @@ -373,7 +369,7 @@ export class PresBox extends React.Component { {this.props.Document.inOverlay ? (null) :
- +
} diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index dad55e1fd..afc88833e 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -2,7 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons'; import { faArrowDown, faArrowUp, faFile as fileSolid, faFileDownload, faLocationArrow, faSearch } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, computed } from "mobx"; +import { action, computed, reaction, IReactionDisposer } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast } from "../../../new_fields/Doc"; import { documentSchema } from '../../../new_fields/documentSchemas'; @@ -14,7 +14,7 @@ import { DocumentType } from "../../documents/DocumentTypes"; import { Transform } from "../../util/Transform"; import { CollectionViewType } from '../collections/CollectionView'; import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView'; -import { DocComponent } from '../DocComponent'; +import { DocComponent, DocExtendableComponent } from '../DocComponent'; import { FieldView, FieldViewProps } from '../nodes/FieldView'; import "./PresElementBox.scss"; import React = require("react"); @@ -46,13 +46,23 @@ const PresDocument = makeInterface(presSchema, documentSchema); * It involves some functionality for its buttons and options. */ @observer -export class PresElementBox extends DocComponent(PresDocument) { +export class PresElementBox extends DocExtendableComponent(PresDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresElementBox, fieldKey); } - @computed get indexInPres() { return DocListCast(this.presentationDoc[this.Document.presBoxKey || ""]).indexOf(this.props.Document); } - @computed get presentationDoc() { return Cast(this.Document.presBox, Doc) as Doc; } - @computed get targetDoc() { return this.Document.presentationTargetDoc as Doc; } - @computed get currentIndex() { return NumCast(this.presentationDoc.selectedDoc); } + _heightDisposer: IReactionDisposer | undefined; + @computed get indexInPres() { return this.originalLayout?.presBoxKey ? DocListCast(this.presentationDoc[StrCast(this.originalLayout?.presBoxKey)]).indexOf(this.originalLayout) : 0; } + @computed get presentationDoc() { return Cast(this.originalLayout?.presBox, Doc) as Doc; } + @computed get originalLayout() { return this.props.Document.expandedTemplate as Doc; } + @computed get targetDoc() { return this.originalLayout?.presentationTargetDoc as Doc; } + @computed get currentIndex() { return NumCast(this.presentationDoc?.selectedDoc); } + + componentDidMount() { + this._heightDisposer = reaction(() => [this.originalLayout.embedOpen, this.originalLayout.collapsedHeight], + params => this.originalLayout._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true }); + } + componentWillUnmount() { + this._heightDisposer?.(); + } /** * The function that is called on click to turn Hiding document till press option on/off. @@ -61,8 +71,8 @@ export class PresElementBox extends DocComponent(P @action onHideDocumentUntilPressClick = (e: React.MouseEvent) => { e.stopPropagation(); - this.Document.hideTillShownButton = !this.Document.hideTillShownButton; - if (!this.Document.hideTillShownButton) { + this.originalLayout.hideTillShownButton = !this.originalLayout.hideTillShownButton; + if (!this.originalLayout.hideTillShownButton) { if (this.indexInPres >= this.currentIndex && this.targetDoc) { this.targetDoc.opacity = 1; } @@ -81,13 +91,13 @@ export class PresElementBox extends DocComponent(P @action onHideDocumentAfterPresentedClick = (e: React.MouseEvent) => { e.stopPropagation(); - this.Document.hideAfterButton = !this.Document.hideAfterButton; - if (!this.Document.hideAfterButton) { + this.originalLayout.hideAfterButton = !this.originalLayout.hideAfterButton; + if (!this.originalLayout.hideAfterButton) { if (this.indexInPres <= this.currentIndex && this.targetDoc) { this.targetDoc.opacity = 1; } } else { - if (this.Document.fadeButton) this.Document.fadeButton = false; + if (this.originalLayout.fadeButton) this.originalLayout.fadeButton = false; if (this.presentationDoc.presStatus && this.indexInPres < this.currentIndex && this.targetDoc) { this.targetDoc.opacity = 0; } @@ -102,13 +112,13 @@ export class PresElementBox extends DocComponent(P @action onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => { e.stopPropagation(); - this.Document.fadeButton = !this.Document.fadeButton; - if (!this.Document.fadeButton) { + this.originalLayout.fadeButton = !this.originalLayout.fadeButton; + if (!this.originalLayout.fadeButton) { if (this.indexInPres <= this.currentIndex && this.targetDoc) { this.targetDoc.opacity = 1; } } else { - this.Document.hideAfterButton = false; + this.originalLayout.hideAfterButton = false; if (this.presentationDoc.presStatus && (this.indexInPres < this.currentIndex) && this.targetDoc) { this.targetDoc.opacity = 0.5; } @@ -121,11 +131,11 @@ export class PresElementBox extends DocComponent(P @action onNavigateDocumentClick = (e: React.MouseEvent) => { e.stopPropagation(); - this.Document.navButton = !this.Document.navButton; - if (this.Document.navButton) { - this.Document.showButton = false; + this.originalLayout.navButton = !this.originalLayout.navButton; + if (this.originalLayout.navButton) { + this.originalLayout.showButton = false; if (this.currentIndex === this.indexInPres) { - this.props.focus(this.props.Document); + this.props.focus(this.originalLayout); } } } @@ -137,13 +147,13 @@ export class PresElementBox extends DocComponent(P onZoomDocumentClick = (e: React.MouseEvent) => { e.stopPropagation(); - this.Document.showButton = !this.Document.showButton; - if (!this.Document.showButton) { - this.props.Document.viewScale = 1; + this.originalLayout.showButton = !this.originalLayout.showButton; + if (!this.originalLayout.showButton) { + this.originalLayout.viewScale = 1; } else { - this.Document.navButton = false; + this.originalLayout.navButton = false; if (this.currentIndex === this.indexInPres) { - this.props.focus(this.props.Document); + this.props.focus(this.originalLayout); } } } @@ -157,7 +167,7 @@ export class PresElementBox extends DocComponent(P * presentation element. */ renderEmbeddedInline = () => { - if (!this.Document.embedOpen || !this.targetDoc) { + if (!this.originalLayout.embedOpen || !this.targetDoc) { return (null); } @@ -170,7 +180,8 @@ export class PresElementBox extends DocComponent(P width: propDocWidth === 0 ? "auto" : propDocWidth * scale(), }}> (P const treecontainer = this.props.ContainingCollectionDoc?._viewType === CollectionViewType.Tree; const className = "presElementBox-item" + (this.currentIndex === this.indexInPres ? " presElementBox-selected" : ""); const pbi = "presElementBox-interaction"; - return ( + return !this.originalLayout ? (null) : (
{ this.props.focus(this.props.Document); e.stopPropagation(); }}> + onClick={e => { this.props.focus(this.originalLayout); e.stopPropagation(); }}> {treecontainer ? (null) : <> - {`${this.indexInPres + 1}. ${this.Document.title}`} + {`${this.indexInPres + 1}. ${this.targetDoc?.title}`} - +
} - - - - - - - + + + + + + +
{this.renderEmbeddedInline()} diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index 5f78636a9..0624d6698 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -445,8 +445,8 @@ export namespace Doc { // between the two. If so, the layoutDoc is expanded into a new document that inherits the properties // of the original layout while allowing for individual layout properties to be overridden in the expanded layout. // - export function expandTemplateLayout(templateLayoutDoc: Doc, dataDoc?: Doc) { - if (!WillExpandTemplateLayout(templateLayoutDoc, dataDoc) || !dataDoc) return templateLayoutDoc; + export function expandTemplateLayout(templateLayoutDoc: Doc, targetDoc?: Doc) { + if (!WillExpandTemplateLayout(templateLayoutDoc, targetDoc) || !targetDoc) return templateLayoutDoc; const templateField = StrCast(templateLayoutDoc.isTemplateForField); // the field that the template renders // First it checks if an expanded layout already exists -- if so it will be stored on the dataDoc @@ -455,13 +455,15 @@ export namespace Doc { // saves it on the data doc indexed by the template layout's id. // const expandedLayoutFieldKey = templateField + "-layout[" + templateLayoutDoc[Id] + "]"; - const expandedTemplateLayout = dataDoc?.[expandedLayoutFieldKey]; + const expandedTemplateLayout = targetDoc?.[expandedLayoutFieldKey]; if (expandedTemplateLayout === undefined) { setTimeout(() => { - if (!dataDoc[expandedLayoutFieldKey]) { + if (!targetDoc[expandedLayoutFieldKey]) { const newLayoutDoc = Doc.MakeDelegate(templateLayoutDoc, undefined, "[" + templateLayoutDoc.title + "]"); - dataDoc[expandedLayoutFieldKey] = newLayoutDoc; - newLayoutDoc.resolvedDataDoc = dataDoc; + newLayoutDoc.expandedTemplate = targetDoc; + targetDoc[expandedLayoutFieldKey] = newLayoutDoc; + const dataDoc = Doc.GetProto(targetDoc); + newLayoutDoc.resolvedDataDoc = targetDoc; if (dataDoc[templateField] === undefined && templateLayoutDoc[templateField] instanceof List && Cast(templateLayoutDoc[templateField], listSpec(Doc), []).length) { dataDoc[templateField] = ComputedField.MakeFunction(`ObjectField.MakeCopy(templateLayoutDoc["${templateField}"] as List)`, { templateLayoutDoc: Doc.name }, { templateLayoutDoc: templateLayoutDoc }); } @@ -474,7 +476,7 @@ export namespace Doc { // if the childDoc is a template for a field, then this will return the expanded layout with its data doc. // otherwise, it just returns the childDoc export function GetLayoutDataDocPair(containerDoc: Doc, containerDataDoc: Opt, childDoc: Doc) { - const resolvedDataDoc = containerDataDoc === containerDoc || !containerDataDoc ? undefined : Doc.GetDataDoc(containerDataDoc); + const resolvedDataDoc = containerDataDoc === containerDoc || !containerDataDoc ? undefined : containerDataDoc; return { layout: Doc.expandTemplateLayout(childDoc, resolvedDataDoc), data: resolvedDataDoc }; } export function CreateDocumentExtensionForField(doc: Doc, fieldKey: string) { -- cgit v1.2.3-70-g09d2