diff options
Diffstat (limited to 'src/client/views/nodes/trails/PresElementBox.tsx')
| -rw-r--r-- | src/client/views/nodes/trails/PresElementBox.tsx | 628 |
1 files changed, 0 insertions, 628 deletions
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx deleted file mode 100644 index 7e0375275..000000000 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ /dev/null @@ -1,628 +0,0 @@ -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@mui/material'; -import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; -import { observer } from 'mobx-react'; -import * as React from 'react'; -import { returnFalse, returnTrue, setupMoveUpEvents } from '../../../../ClientUtils'; -import { Doc, DocListCast, Opt } from '../../../../fields/Doc'; -import { Id } from '../../../../fields/FieldSymbols'; -import { List } from '../../../../fields/List'; -import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types'; -import { emptyFunction } from '../../../../Utils'; -import { Docs } from '../../../documents/Documents'; -import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes'; -import { DragManager } from '../../../util/DragManager'; -import { SnappingManager } from '../../../util/SnappingManager'; -import { Transform } from '../../../util/Transform'; -import { undoable, undoBatch } from '../../../util/UndoManager'; -import { TreeView } from '../../collections/TreeView'; -import { ViewBoxBaseComponent } from '../../DocComponent'; -import { EditableView } from '../../EditableView'; -import { Colors } from '../../global/globalEnums'; -import { PinDocView } from '../../PinFuncs'; -import { StyleProp } from '../../StyleProp'; -import { returnEmptyDocViewList } from '../../StyleProvider'; -import { DocumentView } from '../DocumentView'; -import { FieldView, FieldViewProps } from '../FieldView'; -import { PresBox } from './PresBox'; -import './PresElementBox.scss'; -import { PresMovement } from './PresEnums'; -/** - * This class models the view a document added to presentation will have in the presentation. - * It involves some functionality for its buttons and options. - */ -@observer -export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { - public static LayoutString(fieldKey: string) { - return FieldView.LayoutString(PresElementBox, fieldKey); - } - 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; - - constructor(props: FieldViewProps) { - super(props); - makeObservable(this); - } - - @observable _dragging = false; - - // the presentation view that renders this slide - @computed get presBoxView() { - return this.DocumentView?.() - .containerViewPath?.() - .slice() - .reverse() - .find(dv => dv?.ComponentView instanceof PresBox)?.ComponentView as PresBox; - } - - // the presentation view document that renders this slide - @computed get presBox() { - 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 this.rootDoc; - } - - // this is the document in the workspaces that is targeted by the slide - @computed get targetDoc() { - 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) ?? 0; - } - - @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.slideDoc.presentation_expandInlineButton, height: this.collapsedHeight }), - ({ expand, height }) => { - this.layoutDoc._height = height + (expand ? this.expandViewHeight : 0); - }, - { fireImmediately: true } - ); - } - componentWillUnmount() { - this._heightDisposer?.(); - } - - presExpandDocumentClick = () => { - this.slideDoc.presentation_expandInlineButton = !this.slideDoc.presentation_expandInlineButton; - }; - embedHeight = () => this.collapsedHeight + this.expandViewHeight; - embedWidth = () => this._props.PanelWidth() / 2; - // prettier-ignore - styleProvider = ( doc: Doc | undefined, props: Opt<FieldViewProps>, property: string ) => - (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.slideDoc.presentation_expandInlineButton || !this.targetDoc ? null : ( - <div className="presItem-embedded" style={{ height: this.embedHeight(), width: '50%' }}> - <DocumentView - Document={PresBox.targetRenderedDoc(this.slideDoc)} - PanelWidth={this.embedWidth} - PanelHeight={this.embedHeight} - isContentActive={this._props.isContentActive} - styleProvider={this.styleProvider} - hideLinkButton - ScreenToLocalTransform={Transform.Identity} - renderDepth={this._props.renderDepth + 1} - containerViewPath={returnEmptyDocViewList} - childFilters={this._props.childFilters} - childFiltersByRanges={this._props.childFiltersByRanges} - searchFilterDocs={this._props.searchFilterDocs} - addDocument={returnFalse} - removeDocument={returnFalse} - fitContentsToBox={returnTrue} - moveDocument={this._props.moveDocument!} - focus={emptyFunction} - whenChildContentsActiveChanged={returnFalse} - addDocTab={returnFalse} - pinToPres={returnFalse} - /> - </div> - ); - } - - @computed get renderGroupSlides() { - const childDocs = DocListCast(this.targetDoc.data); - const groupSlides = childDocs.map((doc: Doc, ind: number) => ( - <div - key={doc[Id]} - className="presItem-groupSlide" - onClick={e => { - e.stopPropagation(); - e.preventDefault(); - this.presBoxView?.modifierSelect(doc, this._itemRef.current!, this._dragRef.current!, e.shiftKey || e.ctrlKey || e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey); - this.presExpandDocumentClick(); - }}> - <div className="presItem-groupNum">{`${ind + 1}.`}</div> - <div className="presItem-name"> - <EditableView - ref={this._titleRef} - editing={undefined} - contents={StrCast(doc.title)} - overflow="ellipsis" - GetValue={() => StrCast(doc.title)} - SetValue={(value: string) => { - doc.title = !value.trim().length ? '-untitled-' : value; - return true; - }} - /> - </div> - </div> - )); - return groupSlides; - } - - @computed get transition() { - let transitionInS: number; - if (this.slideDoc.presentation_transition) transitionInS = NumCast(this.slideDoc.presentation_transition) / 1000; - else transitionInS = 0.5; - return this.slideDoc.presentation_movement === PresMovement.Jump || this.slideDoc.presentation_movement === PresMovement.None ? null : 'M: ' + transitionInS + 's'; - } - - @action - headerDown = (e: React.PointerEvent<HTMLDivElement>) => { - const element = e.target as HTMLDivElement; - e.stopPropagation(); - e.preventDefault(); - if (element && !(e.ctrlKey || e.metaKey || e.button === 2)) { - this.presBoxView?.regularSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, true, false); - setupMoveUpEvents(this, e, this.startDrag, emptyFunction, clickEv => { - clickEv.stopPropagation(); - clickEv.preventDefault(); - this.presBoxView?.modifierSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, clickEv.shiftKey || clickEv.ctrlKey || clickEv.metaKey, clickEv.ctrlKey || clickEv.metaKey, clickEv.shiftKey); - this.presBoxView?.activeItem && this.showRecording(this.presBoxView?.activeItem); - }); - } - }; - - /** - * Function to drag and drop the pres element to a diferent location - */ - startDrag = (e: PointerEvent) => { - this.presBoxView?.regularSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, true, false); - const miniView: boolean = this.toolbarWidth <= 100; - 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.slideDoc); - dragData.treeViewDoc = this.presBox?._type_collection === CollectionViewType.Tree ? this.presBox : undefined; // this.DocumentView?.()?._props.treeViewDoc; - dragData.moveDocument = this._props.moveDocument; - const dragItem: HTMLElement[] = []; - const classesToRestore = new Map<HTMLElement, string>(); - if (dragArray.length === 1) { - const doc = this._itemRef.current || dragArray[0]; - if (doc) { - classesToRestore.set(doc, doc.className); - doc.className = miniView ? 'presItem-miniSlide' : 'presItem-slide'; - dragItem.push(doc); - } - } else if (dragArray.length >= 1) { - const doc = document.createElement('div'); - doc.className = 'presItem-multiDrag'; - doc.innerText = 'Move ' + (this.selectedArray?.size ?? 0) + ' slides'; - doc.style.position = 'absolute'; - doc.style.top = e.clientY + 'px'; - doc.style.left = e.clientX - 50 + 'px'; - dragItem.push(doc); - } - - if (activeItem) { - runInAction(() => { - this._dragging = true; - }); - DragManager.StartDocumentDrag( - dragItem.map(ele => ele), - dragData, - e.clientX, - e.clientY, - undefined, - action(() => { - Array.from(classesToRestore).forEach(pair => (pair[0].className = pair[1])); - this._dragging = false; - }) - ); - return true; - } - return false; - }; - - onPointerOver = () => { - document.removeEventListener('pointermove', this.onPointerMove); - document.addEventListener('pointermove', this.onPointerMove); - }; - - onPointerMove = (e: PointerEvent) => { - const slide = this._itemRef.current; - const dragIsPresItem = DragManager.docsBeingDragged.some(d => d.presentation_targetDoc); - if (slide && dragIsPresItem) { - const rect = slide.getBoundingClientRect(); - const y = e.clientY - rect.top; // y position within the element. - const height = slide.clientHeight; - const halfLine = height / 2; - if (y <= halfLine) { - slide.style.borderTop = `solid 2px ${Colors.MEDIUM_BLUE}`; - slide.style.borderBottom = '0px'; - } else if (y > halfLine) { - slide.style.borderTop = '0px'; - slide.style.borderBottom = `solid 2px ${Colors.MEDIUM_BLUE}`; - } - } - document.removeEventListener('pointermove', this.onPointerMove); - }; - - onPointerLeave = () => { - const slide = this._itemRef.current; - if (slide) { - slide.style.borderTop = '0px'; - slide.style.borderBottom = '0px'; - } - document.removeEventListener('pointermove', this.onPointerMove); - }; - - @action - toggleProperties = () => { - if (SnappingManager.PropertiesWidth < 5) { - SnappingManager.SetPropertiesWidth(250); - } - }; - - 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 - * - * @param targetDoc - * @param activeItem - */ - @undoBatch - updateCapturedContainerLayout = (presTargetDoc: Doc, activeItem: Doc) => { - const targetDoc = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc; - activeItem.config_x = NumCast(targetDoc.x); - activeItem.config_y = NumCast(targetDoc.y); - activeItem.config_rotation = NumCast(targetDoc.rotation); - activeItem.config_width = NumCast(targetDoc.width); - activeItem.config_height = NumCast(targetDoc.height); - activeItem.config_pinLayout = !activeItem.config_pinLayout; - // activeItem.config_pinLayout = true; - }; - - /** - * Method called for updating the view of the currently selected document - * - * @param presTargetDoc - * @param activeItem - */ - updateCapturedViewContents = undoable( - action((presTargetDoc: Doc, activeItem: Doc) => { - const target = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc; - PinDocView(activeItem, { pinData: PresBox.pinDataTypes(target) }, target); - }), - 'updated captured view contents' - ); - - // a previously recorded video will have timecode defined - static videoIsRecorded = (activeItem: Opt<Doc>) => 'layout_currentTimecode' in (DocCast(activeItem?.recording) ?? {}); - - 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 = () => { - Doc.MyOverlayDocs.filter(doc => doc.slides !== null && PresElementBox.videoIsRecorded(DocCast(doc.slides))) // - .forEach(Doc.RemFromMyOverlay); - }; - - hideRecording = undoable( - action((e: React.MouseEvent) => { - 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 - lfg = (e: React.MouseEvent) => { - e.stopPropagation(); - // TODO: fix this bug - // const { toggleChildrenRun } = this.slideDoc; - TreeView.ToggleChildrenRun.get(this.slideDoc)?.(); - - // call this.slideDoc.recurChildren() to get all the children - // if (iconClick) PresElementBox.showVideo = false; - }; - - @computed - get toolbarWidth(): number { - const presBoxDocView = DocumentView.getDocumentView(this.presBox); - const width = NumCast(this.presBox?._width); - return presBoxDocView ? presBoxDocView._props.PanelWidth() : width || 300; - } - - @computed get presButtons() { - const { presBox, targetDoc, slideDoc: activeItem } = this; - const presBoxColor = StrCast(presBox?._backgroundColor); - const presColorBool = presBoxColor ? presBoxColor !== Colors.WHITE && presBoxColor !== 'transparent' : false; - const hasChildren = BoolCast(this.slideDoc?.hasChildren); - - const items: JSX.Element[] = []; - - items.push( - <Tooltip key="slide" title={<div className="dash-tooltip">Update captured doc layout</div>}> - <div - className="slideButton" - onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this.updateCapturedContainerLayout(targetDoc, activeItem), true)} - style={{ opacity: activeItem.config_pinLayout ? 1 : 0.5, fontWeight: 700, display: 'flex' }}> - L - </div> - </Tooltip> - ); - items.push( - <Tooltip key="flex" title={<div className="dash-tooltip">Update captured doc content</div>}> - <div - className="slideButton" - onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this.updateCapturedViewContents(targetDoc, activeItem))} - style={{ opacity: activeItem.config_pinData || activeItem.config_pinView ? 1 : 0.5, fontWeight: 700, display: 'flex' }}> - C - </div> - </Tooltip> - ); - items.push( - <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) : this.startRecording(e, activeItem))} style={{ fontWeight: 700 }}> - <FontAwesomeIcon icon={`video${this.videoRecordingIsInOverlay ? '-slash' : ''}`} onPointerDown={e => e.stopPropagation()} /> - </div> - </Tooltip> - ); - if (this.indexInPres !== 0) { - items.push( - <Tooltip - key="arrow" - title={ - <div className="dash-tooltip"> - {!activeItem.presentation_groupWithUp - ? 'Not grouped with previous slide (click to group)' - : activeItem.presentation_groupWithUp === 1 - ? 'Run simultaneously with previous slide (click again to run after)' - : 'Run after previous slide (click to ungroup from previous)'} - </div> - }> - <div - className="slideButton" - onClick={() => { - activeItem.presentation_groupWithUp = (NumCast(activeItem.presentation_groupWithUp) + 1) % 3; - }} - style={{ - zIndex: 1000 - this.indexInPres, - fontWeight: 700, - backgroundColor: activeItem.presentation_groupWithUp ? (presColorBool ? presBoxColor : Colors.MEDIUM_BLUE) : undefined, - outline: NumCast(activeItem.presentation_groupWithUp) > 1 ? 'solid black 1px' : undefined, - height: activeItem.presentation_groupWithUp ? 53 : 18, - transform: activeItem.presentation_groupWithUp ? 'translate(0, -17px)' : undefined, - }}> - <div style={{ transform: activeItem.presentation_groupWithUp ? 'rotate(180deg) translate(0, -17.5px)' : 'rotate(0deg)' }}> - <FontAwesomeIcon icon="arrow-up" onPointerDown={e => e.stopPropagation()} /> - </div> - </div> - </Tooltip> - ); - } - items.push( - <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.slideDoc.presentation_expandInlineButton ? 'eye-slash' : 'eye'} onPointerDown={e => e.stopPropagation()} /> - </div> - </Tooltip> - ); - if (!Doc.noviceMode && hasChildren) { - // TODO: replace with if treeveiw, has childrenDocs - items.push( - <Tooltip key="children" title={<div className="dash-tooltip">Run child processes (tree only)</div>}> - <div - className="slideButton" - onClick={e => { - e.stopPropagation(); - this.lfg(e); - }} - style={{ fontWeight: 700 }}> - <FontAwesomeIcon icon="circle-play" onPointerDown={e => e.stopPropagation()} /> - </div> - </Tooltip> - ); - } - items.push( - <Tooltip key="trash" title={<div className="dash-tooltip">Remove from presentation</div>}> - <div className="slideButton" onClick={this.removePresentationItem}> - <FontAwesomeIcon icon="trash" onPointerDown={e => e.stopPropagation()} /> - </div> - </Tooltip> - ); - items.push( - <Tooltip key="customize-slide" title={<div className="dash-tooltip">Customize Slide</div>}> - <div - className={'slideButton'} - onClick={() => { - this.presBoxView?.regularSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, true, false); - PresBox.Instance.navigateToActiveItem(); - PresBox.Instance.openProperties(); - PresBox.Instance.slideToModify = this.Document; - }}> - <FontAwesomeIcon icon={'edit'} onPointerDown={e => e.stopPropagation()} /> - </div> - </Tooltip> - ); - return items; - } - - @computed get mainItem() { - const { presBox, slideDoc: activeItem } = this; - const isSelected: boolean = !!this.selectedArray?.has(activeItem); - const isCurrent: boolean = this.presBox?._itemIndex === this.indexInPres; - const miniView: boolean = this.toolbarWidth <= 110; - const presBoxColor: string = StrCast(presBox?._backgroundColor); - const presColorBool: boolean = presBoxColor ? presBoxColor !== Colors.WHITE && presBoxColor !== 'transparent' : false; - - return ( - <div - className="presItem-container" - key={activeItem[Id] + this.indexInPres} - ref={this._itemRef} - style={{ - backgroundColor: presColorBool ? (isSelected ? 'rgba(250,250,250,0.3)' : 'transparent') : isSelected ? Colors.LIGHT_BLUE : 'transparent', - opacity: this._dragging ? 0.3 : 1, - paddingLeft: NumCast(this.layoutDoc._xPadding, this._props.xPadding), - paddingRight: NumCast(this.layoutDoc._xPadding, this._props.xPadding), - paddingTop: NumCast(this.layoutDoc._yPadding, this._props.yPadding), - paddingBottom: NumCast(this.layoutDoc._yPadding, this._props.yPadding), - }} - onDoubleClick={action(() => { - this.toggleProperties(); - this.presBoxView?.regularSelect(activeItem, this._itemRef.current!, this._dragRef.current!, false); - })} - onPointerOver={this.onPointerOver} - onPointerLeave={this.onPointerLeave} - onPointerDown={this.headerDown}> - {miniView ? ( - <div className={`presItem-miniSlide ${isSelected ? 'active' : ''}`} ref={this._dragRef}> - {`${this.indexInPres + 1}.`} - </div> - ) : ( - <div - ref={this._dragRef} - className={`presItem-slide ${isCurrent ? 'active' : ''}${activeItem.runProcess ? ' testingv2' : ''}`} - style={{ - display: 'infline-block', - backgroundColor: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string, - // layout_boxShadow: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? '0 0 0px 1.5px' + presBoxColor : undefined) : undefined, - border: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? presBoxColor + ' solid 2.5px' : undefined) : undefined, - }}> - <div - className="presItem-name" - style={{ - display: 'inline-flex', - pointerEvents: isSelected ? undefined : 'none', - width: `calc(100% ${activeItem.presentation_expandInlineButton ? '- 50%' : ''} - ${this.presButtons.length * 22}px`, - cursor: isSelected ? 'text' : 'grab', - }}> - <div - className="presItem-number" - title="select without navigation" - onPointerDown={e => { - e.stopPropagation(); - if (this._itemRef.current && this._dragRef.current) { - this.presBoxView?.modifierSelect(activeItem, this._itemRef.current, this._dragRef.current, true, false, false); - } - }} - onClick={e => e.stopPropagation()}>{`${this.indexInPres + 1}. `}</div> - <EditableView ref={this._titleRef} oneLine editing={!isSelected ? false : undefined} contents={StrCast(activeItem.title)} overflow="ellipsis" GetValue={() => StrCast(activeItem.title)} SetValue={this.onSetValue} /> - </div> - {/* <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip> */} - {/* <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip> */} - <div className="presItem-slideButtons" style={{ position: 'absolute', right: 0 }}> - {...this.presButtons} - </div> - {this.renderEmbeddedInline} - </div> - )} - </div> - ); - } - - render() { - return !(this.slideDoc instanceof Doc) || this.targetDoc instanceof Promise ? null : this.mainItem; - } -} - -Docs.Prototypes.TemplateMap.set(DocumentType.PRESELEMENT, { - layout: { view: PresElementBox, dataField: 'data' }, - options: { acl: '', title: 'pres element template', _layout_fitWidth: true, _xMargin: 0, isTemplateDoc: true, isTemplateForField: 'data' }, -}); |