aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts6
-rw-r--r--src/client/util/CurrentUserUtils.ts2
-rw-r--r--src/client/views/DocComponent.tsx8
-rw-r--r--src/client/views/InkingStroke.tsx24
-rw-r--r--src/client/views/PropertiesView.tsx2
-rw-r--r--src/client/views/collections/collectionSchema/SchemaRowBox.tsx14
-rw-r--r--src/client/views/nodes/ColorBox.tsx2
-rw-r--r--src/client/views/nodes/EquationBox.tsx10
-rw-r--r--src/client/views/nodes/LabelBox.tsx18
-rw-r--r--src/client/views/nodes/LinkAnchorBox.tsx20
-rw-r--r--src/client/views/nodes/RecordingBox/RecordingBox.tsx3
-rw-r--r--src/client/views/nodes/WebBox.tsx54
-rw-r--r--src/client/views/nodes/formattedText/DashFieldView.tsx2
-rw-r--r--src/client/views/nodes/importBox/ImportElementBox.tsx4
-rw-r--r--src/client/views/nodes/trails/PresBox.tsx4
-rw-r--r--src/client/views/nodes/trails/PresElementBox.tsx332
16 files changed, 242 insertions, 263 deletions
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<string>(["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<P extends DocComponentProps>() {
@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<P extends ViewBoxBaseProps>() {
@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<FieldViewProps>() {
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<FieldViewProps>() {
* 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<FieldViewProps>() {
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<FieldViewProps>() {
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<FieldViewProps>() {
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<FieldViewProps>() {
{clickableLine(this.onPointerDown, isInkMask)}
{isInkMask ? null : inkLine}
</svg>
- {!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 : (
<div
className="inkStroke-text"
style={{
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 8f37a0564..76ea9123d 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -71,7 +71,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
}
@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<FieldViewProps & SchemaRo
}
@computed get schemaDoc() {
- return this.props.DocumentView?.().props.docViewPath().lastElement()?.rootDoc;
+ return this.props.DocumentView?.().props.docViewPath().lastElement()?.Document;
}
@computed get rowIndex() {
- return this.schemaView?.rowIndex(this.rootDoc) ?? -1;
+ return this.schemaView?.rowIndex(this.Document) ?? -1;
}
componentDidMount(): void {
@@ -52,7 +52,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps & SchemaRo
select = (ctrlKey: boolean, shiftKey: boolean) => {
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<FieldViewProps & SchemaRo
onPointerEnter={this.onPointerEnter}
onPointerLeave={this.onPointerLeave}
ref={(row: HTMLDivElement | null) => {
- row && this.schemaView?.addRowRef?.(this.rootDoc, row);
+ row && this.schemaView?.addRowRef?.(this.Document, row);
this._ref = row;
}}>
<div
@@ -128,7 +128,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps & SchemaRo
emptyFunction,
undoable(e => {
e.stopPropagation();
- this.props.removeDocument?.(this.rootDoc);
+ this.props.removeDocument?.(this.Document);
}, 'Delete Row')
)
}
@@ -145,7 +145,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps & SchemaRo
emptyFunction,
undoable(e => {
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<FieldViewProps & SchemaRo
{this.schemaView?.columnKeys?.map((key, index) => (
<SchemaTableCell
key={key}
- Document={this.rootDoc}
+ Document={this.Document}
col={index}
fieldKey={key}
allowCRs={false} // to enter text with new lines, must use \n
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index 23ffd1080..4c7ea4002 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -51,7 +51,7 @@ export class ColorBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
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 (
<div
className={`colorBox-container${this.props.isContentActive() ? '-interactive' : ''}`}
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index d347c285b..cd263f82a 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -21,11 +21,11 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps>() {
_ref: React.RefObject<EquationEditor> = 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<FieldViewProps>() {
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<FieldViewProps>() {
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<FieldViewProps>() {
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()}>
<EquationEditor ref={this._ref} value={StrCast(this.dataDoc.text, 'x')} spaceBehavesLikeTab={true} onChange={this.onChange} autoCommands="pi theta sqrt sum prod alpha beta gamma rho" autoOperatorNames="sin cos tan" />
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<FieldViewProps & LabelBoxProp
}
getTitle() {
- return this.rootDoc.title_custom ? StrCast(this.rootDoc.title) : this.props.label ? this.props.label : typeof this.rootDoc[this.fieldKey] === 'string' ? StrCast(this.rootDoc[this.fieldKey]) : StrCast(this.rootDoc.title);
+ return this.dataDoc.title_custom ? StrCast(this.Document.title) : this.props.label ? this.props.label : typeof this.dataDoc[this.fieldKey] === 'string' ? StrCast(this.dataDoc[this.fieldKey]) : StrCast(this.Document.title);
}
protected createDropTarget = (ele: HTMLDivElement) => {
@@ -81,16 +81,16 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps & LabelBoxProp
@observable _mouseOver = false;
@computed get hoverColor() {
- return this._mouseOver ? StrCast(this.layoutDoc._hoverBackgroundColor) : this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+ return this._mouseOver ? StrCast(this.layoutDoc._hoverBackgroundColor) : this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor);
}
fitTextToBox = (r: any) => {
- 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<FieldViewProps & LabelBoxProp
fontFamily: StrCast(this.layoutDoc._text_fontFamily) || 'inherit',
letterSpacing: StrCast(this.layoutDoc.letterSpacing),
textTransform: StrCast(this.layoutDoc.textTransform) as any,
- paddingLeft: NumCast(this.rootDoc._xPadding),
- paddingRight: NumCast(this.rootDoc._xPadding),
- paddingTop: NumCast(this.rootDoc._yPadding),
- paddingBottom: NumCast(this.rootDoc._yPadding),
+ paddingLeft: NumCast(this.layoutDoc._xPadding),
+ paddingRight: NumCast(this.layoutDoc._xPadding),
+ paddingTop: NumCast(this.layoutDoc._yPadding),
+ paddingBottom: NumCast(this.layoutDoc._yPadding),
width: this.props.PanelWidth(),
height: this.props.PanelHeight(),
whiteSpace: typeof boxParams !== 'number' && boxParams.singleLine ? 'pre' : 'pre-wrap',
diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx
index fd7d13655..cf157c3a9 100644
--- a/src/client/views/nodes/LinkAnchorBox.tsx
+++ b/src/client/views/nodes/LinkAnchorBox.tsx
@@ -33,12 +33,12 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
@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<FieldViewProps>() {
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<FieldViewProps>() {
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<FieldViewProps>() {
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<FieldViewProps>() {
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<FieldViewProps>() {
render() {
return (
- <div className="recordingBox" ref={this._ref}>
+ <div className="recordingBox" style={{ width: '100%' }} ref={this._ref}>
{!this.result && (
<RecordingView
forceTrackScreen={BoolCast(this.layoutDoc[this.fieldKey + '_trackScreen'])}
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 5c46035be..1e6d92327 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -95,7 +95,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
return this.allAnnotations.filter(a => 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<ViewBoxAnnotatableProps
htmlString = await (await fetch(Utils.CorsProxy(this.webField!.href))).text();
}
this.layoutDoc.thumb = undefined;
- this.rootDoc.thumbLockout = true; // lock to prevent multiple thumb updates.
+ this.Document.thumbLockout = true; // lock to prevent multiple thumb updates.
CreateImage(this._webUrl.endsWith('/') ? this._webUrl.substring(0, this._webUrl.length - 1) : this._webUrl, this._iframe.contentDocument?.styleSheets ?? [], htmlString, nativeWidth, nativeHeight, scrollTop)
.then((data_url: any) => {
if (data_url.includes('<!DOCTYPE')) {
@@ -155,7 +155,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
Utils.convertDataUri(data_url, this.layoutDoc[Id] + '-icon' + new Date().getTime(), true, this.layoutDoc[Id] + '-icon').then(returnedfilename =>
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<ViewBoxAnnotatableProps
}
});
this._disposers.urlchange = reaction(
- () => 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<ViewBoxAnnotatableProps
@action
createTextAnnotation = (sel: Selection, selRange: Range | undefined) => {
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<ViewBoxAnnotatableProps
};
focus = (anchor: Doc, options: DocFocusOptions) => {
- 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<ViewBoxAnnotatableProps
@action
getView = (doc: Doc) => {
- if (Doc.AreProtosEqual(doc, this.rootDoc)) return new Promise<Opt<DocumentView>>(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<Opt<DocumentView>>(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<ViewBoxAnnotatableProps
const anchor =
visibleAnchor ??
Docs.Create.ConfigDocument({
- title: StrCast(this.rootDoc.title + ' ' + this.layoutDoc._layout_scrollTop),
+ title: StrCast(this.Document.title + ' ' + this.layoutDoc._layout_scrollTop),
y: NumCast(this.layoutDoc._layout_scrollTop),
- annotationOn: this.rootDoc,
+ annotationOn: this.Document,
});
- PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), scrollable: pinProps?.pinData ? true : false, pannable: true } }, this.rootDoc);
+ PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), scrollable: pinProps?.pinData ? true : false, pannable: true } }, this.Document);
anchor.text = ele?.textContent ?? '';
anchor.text_html = ele?.innerHTML ?? this._selectionText;
addAsAnnotation && this.addDocumentWrapper(anchor);
@@ -369,7 +369,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
else if (sel?.removeAllRanges) sel.removeAllRanges(); // Firefox
// bcz: NEED TO unrotate e.clientX and e.clientY
const word = getWordAtPoint(e.target, e.clientX, e.clientY);
- this._setPreviewCursor?.(e.clientX, e.clientY, false, true, this.rootDoc);
+ this._setPreviewCursor?.(e.clientX, e.clientY, false, true, this.Document);
MarqueeAnnotator.clearAnnotations(this._savedAnnotations);
if (!word && !(e.target as any)?.className?.includes('rangeslider') && !(e.target as any)?.onclick && !(e.target as any)?.parentNode?.onclick) {
@@ -401,14 +401,14 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
iframeDown = (e: PointerEvent) => {
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<ViewBoxAnnotatableProps
const initHeights = () => {
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<ViewBoxAnnotatableProps
};
forward = (checkAvailable?: boolean) => {
- 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<ViewBoxAnnotatableProps
const sel = this._url ? this._iframe?.contentDocument?.getSelection() : window.document.getSelection();
if (sel?.empty) sel.empty(); // Chrome
else if (sel?.removeAllRanges) sel.removeAllRanges(); // Firefox
- this._setPreviewCursor?.(x ?? 0, y ?? 0, false, !this._marqueeref.current?.isEmpty, this.rootDoc);
+ this._setPreviewCursor?.(x ?? 0, y ?? 0, false, !this._marqueeref.current?.isEmpty, this.Document);
if (x !== undefined && y !== undefined) {
ContextMenu.Instance.closeMenu();
ContextMenu.Instance.setIgnoreEvents(false);
@@ -788,7 +788,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
this._webPageHasBeenRendered = true;
})
);
- const field = this.rootDoc[this.props.fieldKey];
+ const field = this.dataDoc[this.props.fieldKey];
if (field instanceof HtmlField) {
return (
<span
@@ -891,7 +891,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
toggleSidebar = action((preview: boolean = false) => {
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<ViewBoxAnnotatableProps
pointerEvents: this.pointerEvents(), //
position: SnappingManager.GetIsDragging() ? 'absolute' : undefined,
}}>
- <div className="webBox-background" style={{ backgroundColor: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor) }} />
+ <div className="webBox-background" style={{ backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor) }} />
<div
className="webBox-container"
style={{
@@ -1111,7 +1111,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
<div style={{ position: 'absolute', height: '100%', width: '100%', pointerEvents: this.marqueeing ? 'all' : 'none' }}>
<MarqueeAnnotator
ref={this._marqueeref}
- Document={this.rootDoc}
+ Document={this.Document}
anchorMenuClick={this.anchorMenuClick}
scrollTop={NumCast(this.layoutDoc.layout_scrollTop)}
annotationLayerScrollTop={0}
diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index 0a64c8062..130ac40c8 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -108,7 +108,7 @@ export class DashFieldViewInternal extends React.Component<IDashFieldViewInterna
if (this.props.docId) {
DocServer.GetRefField(this.props.docId).then(action(dashDoc => 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<FieldViewProps>() {
<DocumentView
{...this.props} //
LayoutTemplateString={undefined}
- Document={this.rootDoc}
+ Document={this.Document}
isContentActive={returnFalse}
DataDoc={undefined}
addDocument={returnFalse}
@@ -33,6 +33,6 @@ export class ImportElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
);
}
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<FieldViewProps>() {
});
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<FieldViewProps>() {
}
};
+ 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<FieldViewProps>() {
public static LayoutString(fieldKey: string) {
return FieldView.LayoutString(PresElementBox, fieldKey);
}
- _heightDisposer: IReactionDisposer | undefined;
+ private _itemRef: React.RefObject<HTMLDivElement> = React.createRef();
+ private _dragRef: React.RefObject<HTMLDivElement> = React.createRef();
+ private _titleRef: React.RefObject<EditableView> = 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<FieldViewProps>() {
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<DocumentViewProps>, 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 : (
<div className="presItem-embedded" style={{ height: this.embedHeight(), width: '50%' }}>
<DocumentView
- Document={PresBox.targetRenderedDoc(this.rootDoc)}
+ Document={PresBox.targetRenderedDoc(this.slideDoc)}
DataDoc={undefined} //this.targetDoc[DataSym] !== this.targetDoc && this.targetDoc[DataSym]}
PanelWidth={this.embedWidth}
PanelHeight={this.embedHeight}
@@ -121,7 +127,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
pinToPres={returnFalse}
bringToFront={returnFalse}
/>
- {/* <div className="presItem-embeddedMask" /> */}
</div>
);
}
@@ -158,26 +163,22 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
@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<HTMLDivElement> = React.createRef();
- private _dragRef: React.RefObject<HTMLDivElement> = React.createRef();
- private _titleRef: React.RefObject<EditableView> = React.createRef();
-
@action
headerDown = (e: React.PointerEvent<HTMLDivElement>) => {
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<FieldViewProps>() {
*/
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<FieldViewProps>() {
};
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<FieldViewProps>() {
};
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<FieldViewProps>() {
// 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<Doc>) => {
- const casted = Cast(activeItem?.recording, Doc, null);
- return casted && 'layout_currentTimecode' in casted;
- };
+ static videoIsRecorded = (activeItem: Opt<Doc>) => '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<string>(['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<string>(['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<FieldViewProps>() {
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<FieldViewProps>() {
</Tooltip>
);
items.push(
- <Tooltip key="slash" title={<div className="dash-tooltip">{this.recordingIsInOverlay ? 'Hide Recording' : `${PresElementBox.videoIsRecorded(activeItem) ? 'Show' : 'Start'} recording`}</div>}>
- <div className="slideButton" onClick={e => (this.recordingIsInOverlay ? this.hideRecording(e, true) : this.startRecording(e, activeItem))} style={{ fontWeight: 700 }}>
- <FontAwesomeIcon icon={`video${this.recordingIsInOverlay ? '-slash' : ''}`} onPointerDown={e => e.stopPropagation()} />
+ <Tooltip key="slash" title={<div className="dash-tooltip">{this.videoRecordingIsInOverlay ? 'Hide Recording' : `${PresElementBox.videoIsRecorded(activeItem) ? 'Show' : 'Start'} recording`}</div>}>
+ <div className="slideButton" onClick={e => (this.videoRecordingIsInOverlay ? this.hideRecording(e, true) : this.startRecording(e, activeItem))} style={{ fontWeight: 700 }}>
+ <FontAwesomeIcon icon={`video${this.videoRecordingIsInOverlay ? '-slash' : ''}`} onPointerDown={e => e.stopPropagation()} />
</div>
</Tooltip>
);
@@ -498,14 +478,14 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
);
}
items.push(
- <Tooltip key="eye" title={<div className="dash-tooltip">{this.rootDoc.presentation_expandInlineButton ? 'Minimize' : 'Expand'}</div>}>
+ <Tooltip key="eye" title={<div className="dash-tooltip">{this.slideDoc.presentation_expandInlineButton ? 'Minimize' : 'Expand'}</div>}>
<div
className="slideButton"
onClick={e => {
e.stopPropagation();
this.presExpandDocumentClick();
}}>
- <FontAwesomeIcon icon={this.rootDoc.presentation_expandInlineButton ? 'eye-slash' : 'eye'} onPointerDown={e => e.stopPropagation()} />
+ <FontAwesomeIcon icon={this.slideDoc.presentation_expandInlineButton ? 'eye-slash' : 'eye'} onPointerDown={e => e.stopPropagation()} />
</div>
</Tooltip>
);
@@ -536,18 +516,18 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
@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 (
<div
className="presItem-container"
- key={this.rootDoc[Id] + this.indexInPres}
+ key={this.slideDoc[Id] + this.indexInPres}
ref={this._itemRef}
style={{
backgroundColor: presColorBool ? (isSelected ? 'rgba(250,250,250,0.3)' : 'transparent') : isSelected ? Colors.LIGHT_BLUE : 'transparent',
@@ -559,7 +539,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
}}
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<FieldViewProps>() {
) : (
<div
ref={this._dragRef}
- className={`presItem-slide ${isCurrent ? 'active' : ''}${this.rootDoc.runProcess ? ' testingv2' : ''}`}
+ className={`presItem-slide ${isCurrent ? 'active' : ''}${this.slideDoc.runProcess ? ' testingv2' : ''}`}
style={{
display: 'infline-block',
backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
@@ -583,7 +563,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
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',
}}>
<div
@@ -611,6 +591,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
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;
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 18:01:38 +0000