aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-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
10 files changed, 216 insertions, 233 deletions
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 2026-03-05 00:50:10 +0000