From 872dc82886f8111da1bdfd282ac2a78ec3bdc1f6 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 29 Nov 2023 11:55:44 -0500 Subject: cleaned up presElementBox and did more this.rootDoc => this.Document/layoutDoc --- src/client/documents/Documents.ts | 6 +- src/client/util/CurrentUserUtils.ts | 2 +- src/client/views/DocComponent.tsx | 8 - src/client/views/InkingStroke.tsx | 24 +- src/client/views/PropertiesView.tsx | 2 +- .../collections/collectionSchema/SchemaRowBox.tsx | 14 +- src/client/views/nodes/ColorBox.tsx | 2 +- src/client/views/nodes/EquationBox.tsx | 10 +- src/client/views/nodes/LabelBox.tsx | 18 +- src/client/views/nodes/LinkAnchorBox.tsx | 20 +- .../views/nodes/RecordingBox/RecordingBox.tsx | 3 +- src/client/views/nodes/WebBox.tsx | 54 ++-- .../views/nodes/formattedText/DashFieldView.tsx | 2 +- .../views/nodes/importBox/ImportElementBox.tsx | 4 +- src/client/views/nodes/trails/PresBox.tsx | 4 + src/client/views/nodes/trails/PresElementBox.tsx | 332 ++++++++++----------- 16 files changed, 242 insertions(+), 263 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 4def19384..9107bd6ab 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -168,8 +168,10 @@ type DTYPEt = DTypeInfo | string; export class DocumentOptions { // coordinate and dimensions depending on view x?: NUMt = new NumInfo('x coordinate of document in a freeform view', false); - y?: NUMt = new NumInfo('y coordinage of document in a freeform view', false); + y?: NUMt = new NumInfo('y coordinate of document in a freeform view', false); z?: NUMt = new NumInfo('whether document is in overlay (1) or not (0)', false, false, [1, 0]); + overlayX?: NUMt = new NumInfo('x coordinate of document in a overlay view', false); + overlayY?: NUMt = new NumInfo('y coordinate of document in a overlay view', false); _dimMagnitude?: NUMt = new NumInfo("magnitude of collectionMulti{row,col} element's width or height", false); _dimUnit?: DIMt = new DimInfo("units of collectionMulti{row,col} element's width or height - 'px' or '*' for pixels or relative units"); latitude?: NUMt = new NumInfo('latitude coordinate for map views', false); @@ -198,6 +200,7 @@ export class DocumentOptions { author_date?: DATEt = new DateInfo('date the document was created', true); annotationOn?: DOCt = new DocInfo('document annotated by this document', false); embedContainer?: DOCt = new DocInfo('document that displays (contains) this discument', false); + rootDocument?: DOCt = new DocInfo('document that supplies the information needed for a rendering template (eg, pres slide for PresElement)'); color?: STRt = new StrInfo('foreground color data doc', false); hidden?: BOOLt = new BoolInfo('whether the document is not rendered by its collection', false); backgroundColor?: STRt = new StrInfo('background color for data doc', false); @@ -272,6 +275,7 @@ export class DocumentOptions { icon_label?: STRt = new StrInfo('label to use for a fontIcon doc (otherwise, the title is used)', false); mediaState?: STRt = new StrInfo(`status of audio/video media document: ${media_state.PendingRecording}, ${media_state.Recording}, ${media_state.Paused}, ${media_state.Playing}`, false); recording?: BOOLt = new BoolInfo('whether WebCam is recording or not'); + slides?: DOCt = new DocInfo('presentation slide associated with video recording (bcz: should be renamed!!)'); autoPlayAnchors?: BOOLt = new BoolInfo('whether to play audio/video when an anchor is clicked in a stackedTimeline.'); dontPlayLinkOnSelect?: BOOLt = new BoolInfo('whether an audio/video should start playing when a link is followed to it.'); openFactoryLocation?: string; // an OpenWhere value to place the factory created document diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 2f2ac2a71..80ec1e7bb 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -274,7 +274,7 @@ export class CurrentUserUtils { {key: "Map", creator: opts => Docs.Create.MapDocument([], opts), opts: { _width: 800, _height: 600, _layout_fitWidth: true, }}, {key: "Screengrab", creator: Docs.Create.ScreenshotDocument, opts: { _width: 400, _height: 200 }}, {key: "WebCam", creator: opts => Docs.Create.WebCamDocument("", opts), opts: { _width: 400, _height: 200, recording:true, isSystem: true, cloneFieldFilter: new List(["isSystem"]) }}, - {key: "Button", creator: Docs.Create.ButtonDocument, opts: { _width: 150, _height: 50, _xPadding: 10, _yPadding: 10}, scripts: {onClick: FollowLinkScript()?.script.originalScript ?? ""}}, + {key: "Button", creator: Docs.Create.ButtonDocument, opts: { _width: 150, _height: 50, _xPadding: 10, _yPadding: 10, waitForDoubleClickToClick: 'never'}, scripts: {onClick: FollowLinkScript()?.script.originalScript ?? ""}}, {key: "Script", creator: opts => Docs.Create.ScriptingDocument(null, opts), opts: { _width: 200, _height: 250, }}, {key: "DataViz", creator: opts => Docs.Create.DataVizDocument("/users/rz/Downloads/addresses.csv", opts), opts: { _width: 300, _height: 300 }}, {key: "Header", creator: headerTemplate, opts: { _width: 300, _height: 70, _headerPointerEvents: "all", _headerHeight: 12, _headerFontSize: 9, _layout_autoHeight: true, treeView_HideUnrendered: true}}, diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 61b7a3bff..397ac47ab 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -26,10 +26,6 @@ export function DocComponent

() { @computed get Document() { return this.props.Document; } - // This is the "The Document" -- it encapsulates, data, layout, and any templates - @computed get rootDoc() { - return this.props.Document; - } // This is the rendering data of a document -- it may be "The Document", or it may be some template document that holds the rendering info @computed get layoutDoc() { return this.props.LayoutTemplateString ? this.props.Document : Doc.Layout(this.props.Document, this.props.LayoutTemplate?.()); @@ -63,10 +59,6 @@ export function ViewBoxBaseComponent

() { @computed get Document() { return this.props.Document; } - // This is the "The Document" -- it encapsulates, data, layout, and any templates - @computed get rootDoc() { - return Cast(this.props.Document.rootDocument, Doc, null) || this.props.Document; - } // This is the rendering data of a document -- it may be "The Document", or it may be some template document that holds the rendering info @computed get layoutDoc() { return Doc.Layout(this.props.Document); diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index cf565abc8..e081961e5 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -82,24 +82,24 @@ export class InkingStroke extends ViewBoxBaseComponent() { getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { const subAnchor = this._subContentView?.getAnchor?.(addAsAnnotation); - if (subAnchor !== this.rootDoc && subAnchor) return subAnchor; + if (subAnchor !== this.Document && subAnchor) return subAnchor; - if (!addAsAnnotation && !pinProps) return this.rootDoc; + if (!addAsAnnotation && !pinProps) return this.Document; const anchor = Docs.Create.ConfigDocument({ - title: 'Ink anchor:' + this.rootDoc.title, + title: 'Ink anchor:' + this.Document.title, // set presentation timing for restoring shape presentation_duration: 1100, presentation_transition: 1000, - annotationOn: this.rootDoc, + annotationOn: this.Document, }); if (anchor) { anchor.backgroundColor = 'transparent'; // /* addAsAnnotation &&*/ this.addDocument(anchor); - PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), inkable: true } }, this.rootDoc); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), inkable: true } }, this.Document); return anchor; } - return this.rootDoc; + return this.Document; }; /** @@ -245,8 +245,8 @@ export class InkingStroke extends ViewBoxBaseComponent() { * factor for converting between ink and screen space. */ inkScaledData = () => { - const inkData = Cast(this.rootDoc[this.fieldKey], InkField)?.inkData ?? []; - const inkStrokeWidth = NumCast(this.rootDoc.stroke_width, 1); + const inkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? []; + const inkStrokeWidth = NumCast(this.layoutDoc.stroke_width, 1); const inkTop = Math.min(...inkData.map(p => p.Y)) - inkStrokeWidth / 2; const inkBottom = Math.max(...inkData.map(p => p.Y)) + inkStrokeWidth / 2; const inkLeft = Math.min(...inkData.map(p => p.X)) - inkStrokeWidth / 2; @@ -362,7 +362,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { setSubContentView = (doc: DocComponentView) => (this._subContentView = doc); @computed get fillColor() { const isInkMask = BoolCast(this.layoutDoc.stroke_isInkMask); - return isInkMask ? DashColor(StrCast(this.layoutDoc.fillColor, 'transparent')).blacken(0).rgb().toString() : this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.FillColor) ?? 'transparent'; + return isInkMask ? DashColor(StrCast(this.layoutDoc.fillColor, 'transparent')).blacken(0).rgb().toString() : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.FillColor) ?? 'transparent'; } @computed get strokeColor() { const { inkData } = this.inkScaledData(); @@ -387,7 +387,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { this.layoutDoc._height = Math.round(NumCast(this.layoutDoc._height)); }); } - const highlight = !this.controlUndo && this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Highlighting); + const highlight = !this.controlUndo && this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Highlighting); const highlightIndex = highlight?.highlightIndex; const highlightColor = !this.props.isSelected() && !isInkMask && highlight?.highlightIndex ? highlight?.highlightColor : undefined; const color = StrCast(this.layoutDoc.stroke_outlineColor, !closed && fillColor && fillColor !== 'transparent' ? StrCast(this.layoutDoc.color, 'transparent') : 'transparent'); @@ -457,7 +457,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { onContextMenu: () => { const cm = ContextMenu.Instance; !Doc.noviceMode && cm?.addItem({ description: 'Recognize Writing', event: this.analyzeStrokes, icon: 'paint-brush' }); - cm?.addItem({ description: 'Toggle Mask', event: () => InkingStroke.toggleMask(this.rootDoc), icon: 'paint-brush' }); + cm?.addItem({ description: 'Toggle Mask', event: () => InkingStroke.toggleMask(this.dataDoc), icon: 'paint-brush' }); cm?.addItem({ description: 'Edit Points', event: action(() => (InkStrokeProperties.Instance._controlButton = !InkStrokeProperties.Instance._controlButton)), icon: 'paint-brush' }); }, }; @@ -474,7 +474,7 @@ export class InkingStroke extends ViewBoxBaseComponent() { {clickableLine(this.onPointerDown, isInkMask)} {isInkMask ? null : inkLine} - {!closed || (!RTFCast(this.rootDoc.text)?.Text && (!this.props.isSelected() || Doc.UserDoc().activeInkHideTextLabels)) ? null : ( + {!closed || (!RTFCast(this.dataDoc.text)?.Text && (!this.props.isSelected() || Doc.UserDoc().activeInkHideTextLabels)) ? null : (

{ } @computed get selectedDocumentView() { if (SelectionManager.Views().length) return SelectionManager.Views()[0]; - if (PresBox.Instance?.selectedArray.size) return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); + if (PresBox.Instance?.selectedArray.size) return DocumentManager.Instance.getDocumentView(PresBox.Instance.Document); return undefined; } @computed get isPres(): boolean { diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx index 7346c4f12..03697b40a 100644 --- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx +++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx @@ -38,11 +38,11 @@ export class SchemaRowBox extends ViewBoxBaseComponent { if (!this.schemaView) return; const lastSelected = Array.from(this.schemaView._selectedDocs).lastElement(); - if (shiftKey && lastSelected) this.schemaView.selectRows(this.rootDoc, lastSelected); + if (shiftKey && lastSelected) this.schemaView.selectRows(this.Document, lastSelected); else { this.props.select?.(ctrlKey); } @@ -107,7 +107,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent { - row && this.schemaView?.addRowRef?.(this.rootDoc, row); + row && this.schemaView?.addRowRef?.(this.Document, row); this._ref = row; }}>
{ e.stopPropagation(); - this.props.removeDocument?.(this.rootDoc); + this.props.removeDocument?.(this.Document); }, 'Delete Row') ) } @@ -145,7 +145,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent { e.stopPropagation(); - this.props.addDocTab(this.rootDoc, OpenWhere.addRight); + this.props.addDocTab(this.Document, OpenWhere.addRight); }, 'Open schema Doc preview') ) } @@ -155,7 +155,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent ( () { } render() { - const scaling = Math.min(this.layoutDoc.layout_fitWidth ? 10000 : this.props.PanelHeight() / NumCast(this.rootDoc._height), this.props.PanelWidth() / NumCast(this.rootDoc._width)); + const scaling = Math.min(this.layoutDoc.layout_fitWidth ? 10000 : this.props.PanelHeight() / NumCast(this.Document._height), this.props.PanelWidth() / NumCast(this.Document._width)); return (
() { _ref: React.RefObject = React.createRef(); componentDidMount() { this.props.setContentView?.(this); - if (EquationBox.SelectOnLoad === this.rootDoc[Id] && (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(this.props.docViewPath()))) { + if (EquationBox.SelectOnLoad === this.Document[Id] && (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(this.props.docViewPath()))) { this.props.select(false); this._ref.current!.mathField.focus(); - this.rootDoc.text === 'x' && this._ref.current!.mathField.select(); + this.dataDoc.text === 'x' && this._ref.current!.mathField.select(); EquationBox.SelectOnLoad = ''; } reaction( @@ -66,7 +66,7 @@ export class EquationBox extends ViewBoxBaseComponent() { e.stopPropagation(); } if (e.key === 'Tab') { - const graph = Docs.Create.FunctionPlotDocument([this.rootDoc], { + const graph = Docs.Create.FunctionPlotDocument([this.Document], { x: NumCast(this.layoutDoc.x) + NumCast(this.layoutDoc._width), y: NumCast(this.layoutDoc.y), _width: 400, @@ -76,7 +76,7 @@ export class EquationBox extends ViewBoxBaseComponent() { this.props.addDocument?.(graph); e.stopPropagation(); } - if (e.key === 'Backspace' && !this.dataDoc.text) this.props.removeDocument?.(this.rootDoc); + if (e.key === 'Backspace' && !this.dataDoc.text) this.props.removeDocument?.(this.Document); }; @undoBatch onChange = (str: string) => (this.dataDoc.text = str); @@ -111,7 +111,7 @@ export class EquationBox extends ViewBoxBaseComponent() { width: 'fit-content', // `${100 / scale}%`, height: `${100 / scale}%`, pointerEvents: !this.props.isSelected() ? 'none' : undefined, - fontSize: StrCast(this.rootDoc._text_fontSize), + fontSize: StrCast(this.layoutDoc._text_fontSize), }} onKeyDown={e => e.stopPropagation()}> diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx index 4439be0cd..0d7b2b0a4 100644 --- a/src/client/views/nodes/LabelBox.tsx +++ b/src/client/views/nodes/LabelBox.tsx @@ -37,7 +37,7 @@ export class LabelBox extends ViewBoxBaseComponent { @@ -81,16 +81,16 @@ export class LabelBox extends ViewBoxBaseComponent { - const singleLine = BoolCast(this.rootDoc._singleLine, true); + const singleLine = BoolCast(this.layoutDoc._singleLine, true); const params = { rotateText: null, fontSizeFactor: 1, - minimumFontSize: NumCast(this.rootDoc._label_minFontSize, 8), - maximumFontSize: NumCast(this.rootDoc._label_maxFontSize, 1000), + minimumFontSize: NumCast(this.layoutDoc._label_minFontSize, 8), + maximumFontSize: NumCast(this.layoutDoc._label_maxFontSize, 1000), limitingDimension: 'both', horizontalAlign: 'center', verticalAlign: 'center', @@ -137,10 +137,10 @@ export class LabelBox extends ViewBoxBaseComponent() { } @computed get linkSource() { - return this.props.docViewPath()[this.props.docViewPath().length - 2].rootDoc; // this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.LinkSource); + return this.props.docViewPath()[this.props.docViewPath().length - 2].Document; // this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.LinkSource); } onPointerDown = (e: React.PointerEvent) => { setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, (e, doubleTap) => { - if (doubleTap) LinkFollower.FollowLink(this.rootDoc, this.linkSource, false); + if (doubleTap) LinkFollower.FollowLink(this.Document, this.linkSource, false); else this.props.select(false); }); }; @@ -49,15 +49,15 @@ export class LinkAnchorBox extends ViewBoxBaseComponent() { const pt = Utils.getNearestPointInPerimeter(bounds.left, bounds.top, bounds.width, bounds.height, e.clientX, e.clientY); const separation = Math.sqrt((pt[0] - e.clientX) * (pt[0] - e.clientX) + (pt[1] - e.clientY) * (pt[1] - e.clientY)); if (separation > 100) { - const dragData = new DragManager.DocumentDragData([this.rootDoc]); + const dragData = new DragManager.DocumentDragData([this.Document]); dragData.dropAction = 'embed'; dragData.dropPropertiesToRemove = ['link_anchor_1_x', 'link_anchor_1_y', 'link_anchor_2_x', 'link_anchor_2_y', 'onClick']; DragManager.StartDocumentDrag([this._ref.current!], dragData, pt[0], pt[1]); return true; } else { - this.rootDoc[this.fieldKey + '_x'] = ((pt[0] - bounds.left) / bounds.width) * 100; - this.rootDoc[this.fieldKey + '_y'] = ((pt[1] - bounds.top) / bounds.height) * 100; - this.rootDoc.link_autoMoveAnchors = false; + this.layoutDoc[this.fieldKey + '_x'] = ((pt[0] - bounds.left) / bounds.width) * 100; + this.layoutDoc[this.fieldKey + '_y'] = ((pt[1] - bounds.top) / bounds.height) * 100; + this.layoutDoc.link_autoMoveAnchors = false; } } return false; @@ -68,8 +68,8 @@ export class LinkAnchorBox extends ViewBoxBaseComponent() { render() { TraceMobx(); const small = this.props.PanelWidth() <= 1; // this happens when rendered in a treeView - const x = NumCast(this.rootDoc[this.fieldKey + '_x'], 100); - const y = NumCast(this.rootDoc[this.fieldKey + '_y'], 100); + const x = NumCast(this.layoutDoc[this.fieldKey + '_x'], 100); + const y = NumCast(this.layoutDoc[this.fieldKey + '_y'], 100); const background = this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.BackgroundColor + ':anchor'); const anchor = this.fieldKey === 'link_anchor_1' ? 'link_anchor_2' : 'link_anchor_1'; const anchorScale = !this.dataDoc[this.fieldKey + '_useSmallAnchor'] && (x === 0 || x === 100 || y === 0 || y === 100) ? 1 : 0.25; @@ -88,7 +88,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent() { LinkDocPreview.SetLinkInfo({ docProps: this.props, linkSrc: this.linkSource, - linkDoc: this.rootDoc, + linkDoc: this.Document, showHeader: true, location: [e.clientX, e.clientY + 20], noPreview: false, @@ -97,7 +97,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent() { onPointerDown={this.onPointerDown} onContextMenu={this.specificContextMenu} style={{ - border: selView && this.rootDoc[selView] === this.rootDoc[this.fieldKey] ? `solid ${globalCssVariables.MEDIUM_GRAY} 2px` : undefined, + border: selView && this.dataDoc[selView] === this.dataDoc[this.fieldKey] ? `solid ${globalCssVariables.MEDIUM_GRAY} 2px` : undefined, background, left: `calc(${x}% - ${small ? 2.5 : 7.5}px)`, top: `calc(${y}% - ${small ? 2.5 : 7.5}px)`, diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx index 3838ce4ee..f01642236 100644 --- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx @@ -13,7 +13,6 @@ import { DocumentType } from '../../../documents/DocumentTypes'; import { DocumentManager } from '../../../util/DocumentManager'; import { DragManager } from '../../../util/DragManager'; import { ScriptingGlobals } from '../../../util/ScriptingGlobals'; -import { SelectionManager } from '../../../util/SelectionManager'; import { Presentation } from '../../../util/TrackMovements'; import { undoBatch } from '../../../util/UndoManager'; import { CollectionFreeFormView } from '../../collections/collectionFreeForm/CollectionFreeFormView'; @@ -193,7 +192,7 @@ export class RecordingBox extends ViewBoxBaseComponent() { render() { return ( -
+
{!this.result && ( a.text_inlineAnnotations); } @computed get webField() { - return Cast(this.rootDoc[this.props.fieldKey], WebField)?.url; + return Cast(this.Document[this.props.fieldKey], WebField)?.url; } constructor(props: any) { @@ -145,7 +145,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { if (data_url.includes(' setTimeout( action(() => { - this.rootDoc.thumbLockout = false; + this.Document.thumbLockout = false; this.layoutDoc.thumb = new ImageField(returnedfilename); this.layoutDoc.thumbScrollTop = scrollTop; this.layoutDoc.thumbNativeWidth = nativeWidth; @@ -185,11 +185,11 @@ export class WebBox extends ViewBoxAnnotatableComponent WebCast(this.rootDoc.data), + () => WebCast(this.dataDoc.data), url => this.submitURL(false, false) ); this._disposers.titling = reaction( - () => StrCast(this.rootDoc.title), + () => StrCast(this.Document.title), url => { url.startsWith('www') && this.setData('http://' + url); url.startsWith('http') && this.setData(url); @@ -251,7 +251,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { if (this._mainCont.current && selRange) { - if (this.rootDoc[this.props.fieldKey] instanceof HtmlField) this._mainCont.current.style.transform = `rotate(${NumCast(this.props.DocumentView!().screenToLocalTransform().RotateDeg)}deg)`; + if (this.dataDoc[this.props.fieldKey] instanceof HtmlField) this._mainCont.current.style.transform = `rotate(${NumCast(this.props.DocumentView!().screenToLocalTransform().RotateDeg)}deg)`; const clientRects = selRange.getClientRects(); for (let i = 0; i < clientRects.length; i++) { const rect = clientRects.item(i); @@ -281,7 +281,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { - if (anchor !== this.rootDoc && this._outerRef.current) { + if (anchor !== this.Document && this._outerRef.current) { const windowHeight = this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1); const scrollTo = Utils.scrollIntoView(NumCast(anchor.y), NumCast(anchor._height), NumCast(this.layoutDoc._layout_scrollTop), windowHeight, windowHeight * 0.1, Math.max(NumCast(anchor.y) + NumCast(anchor._height), this._scrollHeight)); if (scrollTo !== undefined) { @@ -298,8 +298,8 @@ export class WebBox extends ViewBoxAnnotatableComponent { - if (Doc.AreProtosEqual(doc, this.rootDoc)) return new Promise>(res => res(this.props.DocumentView?.())); - if (this.rootDoc.layout_fieldKey === 'layout_icon') this.props.DocumentView?.().iconify(); + if (Doc.AreProtosEqual(doc, this.Document)) return new Promise>(res => res(this.props.DocumentView?.())); + if (this.Document.layout_fieldKey === 'layout_icon') this.props.DocumentView?.().iconify(); const webUrl = WebCast(doc.config_data)?.url; if (this._url && webUrl && webUrl.href !== this._url) this.setData(webUrl.href); if (this._sidebarRef?.current?.makeDocUnfiltered(doc) && !this.SidebarShown) this.toggleSidebar(false); @@ -326,11 +326,11 @@ export class WebBox extends ViewBoxAnnotatableComponent { this.props.select(false); const locpt = { - x: (e.clientX / NumCast(this.rootDoc.nativeWidth)) * this.props.PanelWidth(), - y: ((e.clientY - NumCast(this.rootDoc.layout_scrollTop))/ NumCast(this.rootDoc.nativeHeight)) * this.props.PanelHeight() }; // prettier-ignore + x: (e.clientX / NumCast(this.Document.nativeWidth)) * this.props.PanelWidth(), + y: ((e.clientY - NumCast(this.layoutDoc.layout_scrollTop))/ NumCast(this.Document.nativeHeight)) * this.props.PanelHeight() }; // prettier-ignore const scrclick = this.props.DocumentView?.().props.ScreenToLocalTransform().inverse().transformPoint(locpt.x, locpt.y)!; const scrcent = this.props .DocumentView?.() .props.ScreenToLocalTransform() .inverse() - .transformPoint(NumCast(this.rootDoc.width) / 2, NumCast(this.rootDoc.height) / 2)!; + .transformPoint(NumCast(this.Document.width) / 2, NumCast(this.Document.height) / 2)!; const theclickoff = Utils.rotPt(scrclick[0] - scrcent[0], scrclick[1] - scrcent[1], -this.props.ScreenToLocalTransform().Rotate); const theclick = [theclickoff.x + scrcent[0], theclickoff.y + scrcent[1]]; MarqueeAnnotator.clearAnnotations(this._savedAnnotations); @@ -488,15 +488,15 @@ export class WebBox extends ViewBoxAnnotatableComponent { this._scrollHeight = Math.max(this._scrollHeight, iframeContent.body.scrollHeight || 0); if (this._scrollHeight) { - this.rootDoc.nativeHeight = Math.min(NumCast(this.rootDoc.nativeHeight), this._scrollHeight); + this.Document.nativeHeight = Math.min(NumCast(this.Document.nativeHeight), this._scrollHeight); this.layoutDoc.height = Math.min(NumCast(this.layoutDoc._height), (NumCast(this.layoutDoc._width) * NumCast(this.rootDoc.nativeHeight)) / NumCast(this.rootDoc.nativeWidth)); } }; const swidth = Math.max(NumCast(this.layoutDoc.nativeWidth), iframeContent.body.scrollWidth || 0); if (swidth) { - const aspectResize = swidth / NumCast(this.rootDoc.nativeWidth); - this.rootDoc.nativeWidth = swidth; - this.rootDoc.nativeHeight = NumCast(this.rootDoc.nativeHeight) * aspectResize; + const aspectResize = swidth / NumCast(this.Document.nativeWidth); + this.Document.nativeWidth = swidth; + this.Document.nativeHeight = NumCast(this.Document.nativeHeight) * aspectResize; this.layoutDoc.height = NumCast(this.layoutDoc._height) * aspectResize; } initHeights(); @@ -586,8 +586,8 @@ export class WebBox extends ViewBoxAnnotatableComponent { - const future = Cast(this.rootDoc[this.fieldKey + '_future'], listSpec('string'), []); - const history = Cast(this.rootDoc[this.fieldKey + '_history'], listSpec('string'), []); + const future = Cast(this.dataDoc[this.fieldKey + '_future'], listSpec('string'), []); + const history = Cast(this.dataDoc[this.fieldKey + '_history'], listSpec('string'), []); if (checkAvailable) return future.length; runInAction(() => { if (future.length) { @@ -760,7 +760,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { var nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']); if (!nativeWidth) { - const defaultNativeWidth = NumCast(this.rootDoc.nativeWidth, this.rootDoc[this.fieldKey] instanceof WebField ? 850 : NumCast(this.Document._width)); + const defaultNativeWidth = NumCast(this.Document.nativeWidth, this.dataDoc[this.fieldKey] instanceof WebField ? 850 : NumCast(this.Document._width)); Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(this.dataDoc) || defaultNativeWidth); Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(this.dataDoc) || (NumCast(this.Document._height) / NumCast(this.Document._width)) * defaultNativeWidth); nativeWidth = NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth']); @@ -1096,7 +1096,7 @@ export class WebBox extends ViewBoxAnnotatableComponent -
+
dashDoc instanceof Doc && (this._dashDoc = dashDoc))); } else { - this._dashDoc = this.props.tbox.rootDoc; + this._dashDoc = this.props.tbox.Document; } } componentWillUnmount() { diff --git a/src/client/views/nodes/importBox/ImportElementBox.tsx b/src/client/views/nodes/importBox/ImportElementBox.tsx index 58f0b29e4..170626cd2 100644 --- a/src/client/views/nodes/importBox/ImportElementBox.tsx +++ b/src/client/views/nodes/importBox/ImportElementBox.tsx @@ -22,7 +22,7 @@ export class ImportElementBox extends ViewBoxBaseComponent() { () { ); } render() { - return !(this.rootDoc instanceof Doc) ? null : this.mainItem; + return !(this.Document instanceof Doc) ? null : this.mainItem; } } diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index bb0ed0943..71c585c38 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -36,6 +36,7 @@ import { FieldView, FieldViewProps } from '../FieldView'; import { ScriptingBox } from '../ScriptingBox'; import './PresBox.scss'; import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums'; +import _ = require('lodash'); const { Howl } = require('howler'); export interface pinDataTypes { @@ -1075,6 +1076,7 @@ export class PresBox extends ViewBoxBaseComponent() { }); return true; }; + childLayoutTemplate = () => Docs.Create.PresElementBoxDocument(); removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.Document, this.fieldKey, doc); getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65); // listBox padding-left and pres-box-cont minHeight @@ -2549,6 +2551,8 @@ export class PresBox extends ViewBoxBaseComponent() { } }; + SlideIndex = (slideDoc: Doc) => DocListCast(this.dataDoc[this.presFieldKey]).indexOf(slideDoc); + RemFromMap = (treeViewDoc: Doc, index: number[]) => { if (!treeViewDoc.presentation_targetDoc) return this.childDocs; // if treeViewDoc is not a pres elements, then it's a sub-bullet of a progressivized slide which isn't added to the linearized list of pres elements since it's not really a pres element. if (!this._unmounting && this.isTree) { diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index f5faeb611..6a8edee0d 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -34,37 +34,53 @@ export class PresElementBox extends ViewBoxBaseComponent() { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresElementBox, fieldKey); } - _heightDisposer: IReactionDisposer | undefined; + private _itemRef: React.RefObject = React.createRef(); + private _dragRef: React.RefObject = React.createRef(); + private _titleRef: React.RefObject = React.createRef(); + private _heightDisposer: IReactionDisposer | undefined; + readonly expandViewHeight = 100; + readonly collapsedHeight = 35; @observable _dragging = false; - // Idea: this boolean will determine whether to automatically show the video when this preselement is selected. - // @observable static showVideo: boolean = false; - @computed get indexInPres() { - return DocListCast(this.presBox?.[StrCast(this.presBox.presFieldKey, 'data')]).indexOf(this.rootDoc); - } // the index field is where this document is in the presBox display list (since this value is different for each presentation element, the value can't be stored on the layout template which is used by all display elements) - @computed get expandViewHeight() { - return 100; - } - @computed get collapsedHeight() { - return 35; - } // the collapsed height changes depending on the state of the presBox. We could store this on the presentation element template if it's used by only one presentation - but if it's shared by multiple, then this value must be looked up - @computed get selectedArray() { - return this.presBoxView?.selectedArray; - } + + // the presentation view that renders this slide @computed get presBoxView() { return this.props.DocumentView?.()?.props.docViewPath().lastElement()?.ComponentView as PresBox; } + + // the presentation view document that renders this slide @computed get presBox() { - return this.props.DocumentView?.().props.docViewPath().lastElement()?.Document; + return this.presBoxView?.Document; } + + // Since this node is being rendered with a template, this method retrieves + // the actual slide being rendered from the auto-generated rendering template + @computed get slideDoc() { + return Cast(this.Document.rootDocument, Doc, null) || this.props.Document; + } + + // this is the document in the workspaces that is targeted by the slide @computed get targetDoc() { - return Cast(this.rootDoc.presentation_targetDoc, Doc, null) || this.rootDoc; + return Cast(this.slideDoc.presentation_targetDoc, Doc, null) || this.slideDoc; + } + + // computes index of this presentation slide in the presBox list + @computed get indexInPres() { + return this.presBoxView?.SlideIndex(this.slideDoc); + } + + @computed get selectedArray() { + return this.presBoxView?.selectedArray; + } + + @computed get videoRecordingIsInOverlay() { + return Doc.MyOverlayDocs.some(doc => doc.slides === this.slideDoc); } componentDidMount() { this.layoutDoc.layout_hideLinkButton = true; this._heightDisposer = reaction( - () => ({ expand: this.rootDoc.presentation_expandInlineButton, height: this.collapsedHeight }), + () => ({ expand: this.slideDoc.presentation_expandInlineButton, height: this.collapsedHeight }), ({ expand, height }) => (this.layoutDoc._height = height + (expand ? this.expandViewHeight : 0)), { fireImmediately: true } ); @@ -73,31 +89,21 @@ export class PresElementBox extends ViewBoxBaseComponent() { this._heightDisposer?.(); } - /** - * Returns a local transformed coordinate array for given coordinates. - */ - ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord]; - - @action - presExpandDocumentClick = () => (this.rootDoc.presentation_expandInlineButton = !this.rootDoc.presentation_expandInlineButton); - - embedHeight = (): number => this.collapsedHeight + this.expandViewHeight; - // embedWidth = () => this.props.PanelWidth(); - // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); - embedWidth = (): number => this.props.PanelWidth() / 2; + presExpandDocumentClick = () => (this.slideDoc.presentation_expandInlineButton = !this.slideDoc.presentation_expandInlineButton); + embedHeight = () => this.collapsedHeight + this.expandViewHeight; + embedWidth = () => this.props.PanelWidth() / 2; styleProvider = (doc: Doc | undefined, props: Opt, property: string): any => { - if (property === StyleProp.Opacity) return 1; - return this.props.styleProvider?.(doc, props, property); + return property === StyleProp.Opacity ? 1 : this.props.styleProvider?.(doc, props, property); }; /** * The function that is responsible for rendering a preview or not for this * presentation element. */ @computed get renderEmbeddedInline() { - return !this.rootDoc.presentation_expandInlineButton || !this.targetDoc ? null : ( + return !this.slideDoc.presentation_expandInlineButton || !this.targetDoc ? null : (
() { pinToPres={returnFalse} bringToFront={returnFalse} /> - {/*
*/}
); } @@ -158,26 +163,22 @@ export class PresElementBox extends ViewBoxBaseComponent() { @computed get transition() { let transitionInS: number; - if (this.rootDoc.presentation_transition) transitionInS = NumCast(this.rootDoc.presentation_transition) / 1000; + if (this.slideDoc.presentation_transition) transitionInS = NumCast(this.slideDoc.presentation_transition) / 1000; else transitionInS = 0.5; - return this.rootDoc.presentation_movement === PresMovement.Jump || this.rootDoc.presentation_movement === PresMovement.None ? null : 'M: ' + transitionInS + 's'; + return this.slideDoc.presentation_movement === PresMovement.Jump || this.slideDoc.presentation_movement === PresMovement.None ? null : 'M: ' + transitionInS + 's'; } - private _itemRef: React.RefObject = React.createRef(); - private _dragRef: React.RefObject = React.createRef(); - private _titleRef: React.RefObject = React.createRef(); - @action headerDown = (e: React.PointerEvent) => { const element = e.target as any; e.stopPropagation(); e.preventDefault(); if (element && !(e.ctrlKey || e.metaKey || e.button === 2)) { - this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true, false); + this.presBoxView?.regularSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, true, false); setupMoveUpEvents(this, e, this.startDrag, emptyFunction, e => { e.stopPropagation(); e.preventDefault(); - this.presBoxView?.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, e.shiftKey || e.ctrlKey || e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey); + this.presBoxView?.modifierSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, e.shiftKey || e.ctrlKey || e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey); this.presBoxView?.activeItem && this.showRecording(this.presBoxView?.activeItem); }); } @@ -188,10 +189,10 @@ export class PresElementBox extends ViewBoxBaseComponent() { */ startDrag = (e: PointerEvent) => { const miniView: boolean = this.toolbarWidth <= 100; - const activeItem = this.rootDoc; + const activeItem = this.slideDoc; const dragArray = this.presBoxView?._dragArray ?? []; const dragData = new DragManager.DocumentDragData(this.presBoxView?.sortArray() ?? []); - if (!dragData.draggedDocuments.length) dragData.draggedDocuments.push(this.rootDoc); + if (!dragData.draggedDocuments.length) dragData.draggedDocuments.push(this.slideDoc); dragData.treeViewDoc = this.presBox?._type_collection === CollectionViewType.Tree ? this.presBox : undefined; // this.props.DocumentView?.()?.props.treeViewDoc; dragData.moveDocument = this.props.moveDocument; const dragItem: HTMLElement[] = []; @@ -237,7 +238,7 @@ export class PresElementBox extends ViewBoxBaseComponent() { }; onPointerMove = (e: PointerEvent) => { - const slide = this._itemRef.current!; + const slide = this._itemRef.current; const dragIsPresItem = DragManager.docsBeingDragged.some(d => d.presentation_targetDoc); if (slide && dragIsPresItem) { const rect = slide.getBoundingClientRect(); @@ -256,35 +257,42 @@ export class PresElementBox extends ViewBoxBaseComponent() { }; onPointerLeave = (e: any) => { - this._itemRef.current!.style.borderTop = '0px'; - this._itemRef.current!.style.borderBottom = '0px'; + const slide = this._itemRef.current; + if (slide) { + slide.style.borderTop = '0px'; + slide.style.borderBottom = '0px'; + } document.removeEventListener('pointermove', this.onPointerMove); }; @action toggleProperties = () => { if (SettingsManager.propertiesWidth < 5) { - action(() => (SettingsManager.propertiesWidth = 250)); + SettingsManager.propertiesWidth = 250; } }; - removePresentationItem = undoable((e: React.MouseEvent) => { - e.stopPropagation(); - if (this.presBox && this.indexInPres < (this.presBoxView?.itemIndex || 0)) { - runInAction(() => (this.presBox!.itemIndex = (this.presBoxView?.itemIndex || 0) - 1)); - } - this.props.removeDocument?.(this.rootDoc); - this.presBoxView?.removeFromSelectedArray(this.rootDoc); - this.removeAllRecordingInOverlay(); - }, 'Remove doc from pres trail'); - - // set the value/title of the individual pres element - @undoBatch - @action - onSetValue = (value: string) => { - this.rootDoc.title = !value.trim().length ? '-untitled-' : value; - return true; - }; + removePresentationItem = undoable( + action((e: React.MouseEvent) => { + e.stopPropagation(); + if (this.presBox && this.indexInPres < (this.presBoxView?.itemIndex || 0)) { + this.presBox.itemIndex = (this.presBoxView?.itemIndex || 0) - 1; + } + this.props.removeDocument?.(this.slideDoc); + this.presBoxView?.removeFromSelectedArray(this.slideDoc); + this.removeAllRecordingInOverlay(); + }), + 'Remove doc from pres trail' + ); + + // set title of the individual pres slide + onSetValue = undoable( + action((value: string) => { + this.slideDoc.title = !value.trim().length ? '-untitled-' : value; + return true; + }), + 'set title of pres element' + ); /** * Method called for updating the view of the currently selected document @@ -305,128 +313,100 @@ export class PresElementBox extends ViewBoxBaseComponent() { // activeItem.config_pinLayout = true; }; - //wait i dont think i have to do anything here since by default it'll revert to the previously saved if I don't save - //so basically, don't have an onClick for this, just let it do nada for now - @undoBatch - @action - revertToPreviouslySaved = (presTargetDoc: Doc, activeItem: Doc) => { - const target = DocCast(activeItem.annotationOn) ?? activeItem; - PresBox.reversePin(activeItem, target); - }; - /** * Method called for updating the view of the currently selected document * * @param presTargetDoc * @param activeItem */ - @undoBatch - @action - updateCapturedViewContents = (presTargetDoc: Doc, activeItem: Doc) => { - const target = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc; - PresBox.pinDocView(activeItem, { pinData: PresBox.pinDataTypes(target) }, target); - }; - - @computed get recordingIsInOverlay() { - return Doc.MyOverlayDocs.some(doc => doc.slides === this.rootDoc); - } + updateCapturedViewContents = undoable( + action((presTargetDoc: Doc, activeItem: Doc) => { + const target = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc; + PresBox.pinDocView(activeItem, { pinData: PresBox.pinDataTypes(target) }, target); + }), + 'updated captured view contents' + ); // a previously recorded video will have timecode defined - static videoIsRecorded = (activeItem: Opt) => { - const casted = Cast(activeItem?.recording, Doc, null); - return casted && 'layout_currentTimecode' in casted; - }; + static videoIsRecorded = (activeItem: Opt) => 'layout_currentTimecode' in (DocCast(activeItem?.recording) ?? {}); - removeAllRecordingInOverlay = () => { - Doc.MyOverlayDocs.filter(doc => doc.slides === this.rootDoc).forEach(Doc.RemFromMyOverlay); - }; + removeAllRecordingInOverlay = () => Doc.MyOverlayDocs.filter(doc => doc.slides === this.slideDoc).forEach(Doc.RemFromMyOverlay); + /// remove all videos that have been recorded from overlay (leave videso that are being recorded to avoid losing data) static removeEveryExistingRecordingInOverlay = () => { - // Remove every recording that already exists in overlay view - Doc.MyOverlayDocs.forEach(doc => { - if (doc.slides !== null) { - // if it's a recording video, don't remove from overlay (user can lose data) - if (PresElementBox.videoIsRecorded(DocCast(doc.slides))) { - Doc.RemFromMyOverlay(doc); - } - } - }); - }; - - @undoBatch - @action - hideRecording = (e: React.MouseEvent, iconClick: boolean = false) => { - e.stopPropagation(); - this.removeAllRecordingInOverlay(); - // if (iconClick) PresElementBox.showVideo = false; - }; - - @undoBatch - @action - showRecording = (activeItem: Doc, iconClick: boolean = false) => { - // remove the overlays on switch *IF* not opened from the specific icon - if (!iconClick) PresElementBox.removeEveryExistingRecordingInOverlay(); - - if (activeItem.recording) { - Doc.AddToMyOverlay(DocCast(activeItem.recording)); - } + Doc.MyOverlayDocs.filter(doc => doc.slides !== null && PresElementBox.videoIsRecorded(DocCast(doc.slides))) // + .forEach(Doc.RemFromMyOverlay); }; - @undoBatch - @action - startRecording = (e: React.MouseEvent, activeItem: Doc) => { - e.stopPropagation(); - if (PresElementBox.videoIsRecorded(activeItem)) { - // if we already have an existing recording - this.showRecording(activeItem, true); - // // if we already have an existing recording - // Doc.AddToMyOverlay(Cast(activeItem.recording, Doc, null)); - } else { - // Remove every recording that already exists in overlay view - // this is a design decision to clear to focus in on the recoding mode - PresElementBox.removeEveryExistingRecordingInOverlay(); - - // if we dont have any recording - const recording = Docs.Create.WebCamDocument('', { - _width: 384, - _height: 216, - layout_hideDocumentButtonBar: true, - layout_hideDecorationTitle: true, - layout_hideOpenButton: true, - // hideDeleteButton: true, - cloneFieldFilter: new List(['isSystem']), - }); - - // attach the recording to the slide, and attach the slide to the recording - recording.slides = activeItem; - activeItem.recording = recording; - - // make recording box appear in the bottom right corner of the screen - recording.overlayX = window.innerWidth - NumCast(recording._width) - 20; - recording.overlayY = window.innerHeight - NumCast(recording._height) - 20; - Doc.AddToMyOverlay(recording); - } - }; + hideRecording = undoable( + action((e: React.MouseEvent, iconClick: boolean = false) => { + e.stopPropagation(); + this.removeAllRecordingInOverlay(); + }), + 'hide video recording' + ); + + showRecording = undoable( + action((activeItem: Doc, iconClick: boolean = false) => { + // remove the overlays on switch *IF* not opened from the specific icon + if (!iconClick) PresElementBox.removeEveryExistingRecordingInOverlay(); + + activeItem.recording && Doc.AddToMyOverlay(DocCast(activeItem.recording)); + }), + 'show video recording' + ); + + startRecording = undoable( + action((e: React.MouseEvent, activeItem: Doc) => { + e.stopPropagation(); + if (PresElementBox.videoIsRecorded(activeItem)) { + // if we already have an existing recording + this.showRecording(activeItem, true); + // // if we already have an existing recording + // Doc.AddToMyOverlay(Cast(activeItem.recording, Doc, null)); + } else { + // we dont have any recording + // Remove every recording that already exists in overlay view + // this is a design decision to clear to focus in on the recoding mode + PresElementBox.removeEveryExistingRecordingInOverlay(); + + // create and add a recording to the slide + // make recording box appear in the bottom right corner of the screen + Doc.AddToMyOverlay( + (activeItem.recording = Docs.Create.WebCamDocument('', { + _width: 384, + _height: 216, + overlayX: window.innerWidth - 384 - 20, + overlayY: window.innerHeight - 216 - 20, + layout_hideDocumentButtonBar: true, + layout_hideDecorationTitle: true, + layout_hideOpenButton: true, + cloneFieldFilter: new List(['isSystem']), + slides: activeItem, // attach the slide to the recording + })) + ); + } + }), + 'start video recording' + ); @undoBatch @action lfg = (e: React.MouseEvent) => { e.stopPropagation(); // TODO: fix this bug - const { toggleChildrenRun } = this.rootDoc; - TreeView.ToggleChildrenRun.get(this.rootDoc)?.(); + const { toggleChildrenRun } = this.slideDoc; + TreeView.ToggleChildrenRun.get(this.slideDoc)?.(); - // call this.rootDoc.recurChildren() to get all the children + // call this.slideDoc.recurChildren() to get all the children // if (iconClick) PresElementBox.showVideo = false; }; @computed get toolbarWidth(): number { const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox); - let width: number = NumCast(this.presBox?._width); - if (presBoxDocView) width = presBoxDocView.props.PanelWidth(); - if (width === 0) width = 300; - return width; + const width = NumCast(this.presBox?._width); + return presBoxDocView ? presBoxDocView.props.PanelWidth() : width ? width : 300; } @computed get presButtons() { @@ -434,8 +414,8 @@ export class PresElementBox extends ViewBoxBaseComponent() { const presBoxColor = StrCast(presBox?._backgroundColor); const presColorBool = presBoxColor ? presBoxColor !== Colors.WHITE && presBoxColor !== 'transparent' : false; const targetDoc = this.targetDoc; - const activeItem = this.rootDoc; - const hasChildren = BoolCast(this.rootDoc?.hasChildren); + const activeItem = this.slideDoc; + const hasChildren = BoolCast(this.slideDoc?.hasChildren); const items: JSX.Element[] = []; @@ -460,9 +440,9 @@ export class PresElementBox extends ViewBoxBaseComponent() { ); items.push( - {this.recordingIsInOverlay ? 'Hide Recording' : `${PresElementBox.videoIsRecorded(activeItem) ? 'Show' : 'Start'} recording`}
}> -
(this.recordingIsInOverlay ? this.hideRecording(e, true) : this.startRecording(e, activeItem))} style={{ fontWeight: 700 }}> - e.stopPropagation()} /> + {this.videoRecordingIsInOverlay ? 'Hide Recording' : `${PresElementBox.videoIsRecorded(activeItem) ? 'Show' : 'Start'} recording`}
}> +
(this.videoRecordingIsInOverlay ? this.hideRecording(e, true) : this.startRecording(e, activeItem))} style={{ fontWeight: 700 }}> + e.stopPropagation()} />
); @@ -498,14 +478,14 @@ export class PresElementBox extends ViewBoxBaseComponent() { ); } items.push( - {this.rootDoc.presentation_expandInlineButton ? 'Minimize' : 'Expand'}
}> + {this.slideDoc.presentation_expandInlineButton ? 'Minimize' : 'Expand'}
}>
{ e.stopPropagation(); this.presExpandDocumentClick(); }}> - e.stopPropagation()} /> + e.stopPropagation()} />
); @@ -536,18 +516,18 @@ export class PresElementBox extends ViewBoxBaseComponent() { } @computed get mainItem() { - const isSelected: boolean = this.selectedArray?.has(this.rootDoc) ? true : false; + const isSelected: boolean = this.selectedArray?.has(this.slideDoc) ? true : false; const isCurrent: boolean = this.presBox?._itemIndex === this.indexInPres; const miniView: boolean = this.toolbarWidth <= 110; const presBox = this.presBox; //presBox const presBoxColor: string = StrCast(presBox?._backgroundColor); const presColorBool: boolean = presBoxColor ? presBoxColor !== Colors.WHITE && presBoxColor !== 'transparent' : false; - const activeItem: Doc = this.rootDoc; + const activeItem: Doc = this.slideDoc; return (
() { }} onDoubleClick={action(e => { this.toggleProperties(); - this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false); + this.presBoxView?.regularSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, false); })} onPointerOver={this.onPointerOver} onPointerLeave={this.onPointerLeave} @@ -571,7 +551,7 @@ export class PresElementBox extends ViewBoxBaseComponent() { ) : (
() { style={{ display: 'inline-flex', pointerEvents: isSelected ? undefined : 'none', - width: `calc(100% ${this.rootDoc.presentation_expandInlineButton ? '- 50%' : ''} - ${this.presButtons.length * 22}px`, + width: `calc(100% ${this.slideDoc.presentation_expandInlineButton ? '- 50%' : ''} - ${this.presButtons.length * 22}px`, cursor: isSelected ? 'text' : 'grab', }}>
() { } render() { - return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? null : this.mainItem; + return !(this.slideDoc instanceof Doc) || this.targetDoc instanceof Promise ? null : this.mainItem; } } -- cgit v1.2.3-70-g09d2