diff options
Diffstat (limited to 'src/client/views/nodes/trails/PresElementBox.tsx')
| -rw-r--r-- | src/client/views/nodes/trails/PresElementBox.tsx | 118 |
1 files changed, 67 insertions, 51 deletions
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index 28139eb14..306b98190 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -1,27 +1,30 @@ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ 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 { returnEmptyDoclist, 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, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils'; +import { emptyFunction } from '../../../../Utils'; import { Docs } from '../../../documents/Documents'; -import { CollectionViewType } from '../../../documents/DocumentTypes'; -import { DocumentManager } from '../../../util/DocumentManager'; +import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes'; import { DragManager } from '../../../util/DragManager'; -import { SettingsManager } from '../../../util/SettingsManager'; +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 { DocumentView } from '../../nodes/DocumentView'; -import { FieldView, FieldViewProps } from '../../nodes/FieldView'; -import { StyleProp } from '../../StyleProvider'; +import { PinDocView } from '../../PinFuncs'; +import { StyleProp } from '../../StyleProp'; +import { DocumentView } from '../DocumentView'; +import { FieldView, FieldViewProps } from '../FieldView'; import { PresBox } from './PresBox'; import './PresElementBox.scss'; import { PresMovement } from './PresEnums'; @@ -71,7 +74,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { // computes index of this presentation slide in the presBox list @computed get indexInPres() { - return this.presBoxView?.SlideIndex(this.slideDoc); + return this.presBoxView?.SlideIndex(this.slideDoc) ?? 0; } @computed get selectedArray() { @@ -86,7 +89,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { 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)), + ({ expand, height }) => { + this.layoutDoc._height = height + (expand ? this.expandViewHeight : 0); + }, { fireImmediately: true } ); } @@ -94,12 +99,14 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { this._heightDisposer?.(); } - presExpandDocumentClick = () => (this.slideDoc.presentation_expandInlineButton = !this.slideDoc.presentation_expandInlineButton); + 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<FieldViewProps>, property: string): any => { - return property === StyleProp.Opacity ? 1 : this._props.styleProvider?.(doc, props, property); - }; + // prettier-ignore + styleProvider = ( doc: Doc | undefined, props: Opt<FieldViewProps>, property: string ): any => + (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. @@ -113,7 +120,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { PanelHeight={this.embedHeight} isContentActive={this._props.isContentActive} styleProvider={this.styleProvider} - hideLinkButton={true} + hideLinkButton ScreenToLocalTransform={Transform.Identity} renderDepth={this._props.renderDepth + 1} containerViewPath={returnEmptyDoclist} @@ -150,7 +157,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { ref={this._titleRef} editing={undefined} contents={doc.title} - overflow={'ellipsis'} + overflow="ellipsis" GetValue={() => StrCast(doc.title)} SetValue={(value: string) => { doc.title = !value.trim().length ? '-untitled-' : value; @@ -177,10 +184,10 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { 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, e => { - e.stopPropagation(); - e.preventDefault(); - this.presBoxView?.modifierSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, e.shiftKey || e.ctrlKey || e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey); + 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); }); } @@ -209,7 +216,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { } else if (dragArray.length >= 1) { const doc = document.createElement('div'); doc.className = 'presItem-multiDrag'; - doc.innerText = 'Move ' + this.selectedArray?.size + ' slides'; + 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'; @@ -217,7 +224,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { } if (activeItem) { - runInAction(() => (this._dragging = true)); + runInAction(() => { + this._dragging = true; + }); DragManager.StartDocumentDrag( dragItem.map(ele => ele), dragData, @@ -225,7 +234,10 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { e.clientY, undefined, action(() => { - Array.from(classesToRestore).forEach(pair => (pair[0].className = pair[1])); + Array.from(classesToRestore).forEach(pair => { + // eslint-disable-next-line prefer-destructuring + pair[0].className = pair[1]; + }); this._dragging = false; }) ); @@ -234,7 +246,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { return false; }; - onPointerOver = (e: any) => { + onPointerOver = () => { document.removeEventListener('pointermove', this.onPointerMove); document.addEventListener('pointermove', this.onPointerMove); }; @@ -244,7 +256,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { 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 y = e.clientY - rect.top; // y position within the element. const height = slide.clientHeight; const halfLine = height / 2; if (y <= halfLine) { @@ -258,7 +270,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { document.removeEventListener('pointermove', this.onPointerMove); }; - onPointerLeave = (e: any) => { + onPointerLeave = () => { const slide = this._itemRef.current; if (slide) { slide.style.borderTop = '0px'; @@ -269,8 +281,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { @action toggleProperties = () => { - if (SettingsManager.Instance.propertiesWidth < 5) { - SettingsManager.Instance.propertiesWidth = 250; + if (SnappingManager.PropertiesWidth < 5) { + SnappingManager.SetPropertiesWidth(250); } }; @@ -323,7 +335,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { updateCapturedViewContents = undoable( action((presTargetDoc: Doc, activeItem: Doc) => { const target = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc; - PresBox.pinDocView(activeItem, { pinData: PresBox.pinDataTypes(target) }, target); + PinDocView(activeItem, { pinData: PresBox.pinDataTypes(target) }, target); }), 'updated captured view contents' ); @@ -340,7 +352,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { }; hideRecording = undoable( - action((e: React.MouseEvent, iconClick: boolean = false) => { + action((e: React.MouseEvent) => { e.stopPropagation(); this.removeAllRecordingInOverlay(); }), @@ -395,7 +407,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { lfg = (e: React.MouseEvent) => { e.stopPropagation(); // TODO: fix this bug - const { toggleChildrenRun } = this.slideDoc; + // const { toggleChildrenRun } = this.slideDoc; TreeView.ToggleChildrenRun.get(this.slideDoc)?.(); // call this.slideDoc.recurChildren() to get all the children @@ -404,17 +416,15 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { @computed get toolbarWidth(): number { - const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox); + const presBoxDocView = DocumentView.getDocumentView(this.presBox); const width = NumCast(this.presBox?._width); - return presBoxDocView ? presBoxDocView._props.PanelWidth() : width ? width : 300; + return presBoxDocView ? presBoxDocView._props.PanelWidth() : width || 300; } @computed get presButtons() { - const presBox = this.presBox; + const { presBox, targetDoc, slideDoc: activeItem } = this; const presBoxColor = StrCast(presBox?._backgroundColor); const presColorBool = presBoxColor ? presBoxColor !== Colors.WHITE && presBoxColor !== 'transparent' : false; - const targetDoc = this.targetDoc; - const activeItem = this.slideDoc; const hasChildren = BoolCast(this.slideDoc?.hasChildren); const items: JSX.Element[] = []; @@ -441,7 +451,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { ); 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, true) : this.startRecording(e, activeItem))} style={{ fontWeight: 700 }}> + <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> @@ -461,7 +471,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { }> <div className="slideButton" - onClick={() => (activeItem.presentation_groupWithUp = (NumCast(activeItem.presentation_groupWithUp) + 1) % 3)} + onClick={() => { + activeItem.presentation_groupWithUp = (NumCast(activeItem.presentation_groupWithUp) + 1) % 3; + }} style={{ zIndex: 1000 - this.indexInPres, fontWeight: 700, @@ -471,7 +483,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { 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()} /> + <FontAwesomeIcon icon="arrow-up" onPointerDown={e => e.stopPropagation()} /> </div> </div> </Tooltip> @@ -500,15 +512,15 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { this.lfg(e); }} style={{ fontWeight: 700 }}> - <FontAwesomeIcon icon={'circle-play'} onPointerDown={e => e.stopPropagation()} /> + <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 className="slideButton" onClick={this.removePresentationItem}> + <FontAwesomeIcon icon="trash" onPointerDown={e => e.stopPropagation()} /> </div> </Tooltip> ); @@ -516,18 +528,17 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { } @computed get mainItem() { - const isSelected: boolean = this.selectedArray?.has(this.slideDoc) ? true : false; + 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 presBox = this.presBox; //presBox const presBoxColor: string = StrCast(presBox?._backgroundColor); const presColorBool: boolean = presBoxColor ? presBoxColor !== Colors.WHITE && presBoxColor !== 'transparent' : false; - const activeItem: Doc = this.slideDoc; return ( <div className="presItem-container" - key={this.slideDoc[Id] + this.indexInPres} + key={activeItem[Id] + this.indexInPres} ref={this._itemRef} style={{ backgroundColor: presColorBool ? (isSelected ? 'rgba(250,250,250,0.3)' : 'transparent') : isSelected ? Colors.LIGHT_BLUE : 'transparent', @@ -537,9 +548,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { paddingTop: NumCast(this.layoutDoc._yPadding, this._props.yPadding), paddingBottom: NumCast(this.layoutDoc._yPadding, this._props.yPadding), }} - onDoubleClick={action(e => { + onDoubleClick={action(() => { this.toggleProperties(); - this.presBoxView?.regularSelect(this.slideDoc, this._itemRef.current!, this._dragRef.current!, false); + this.presBoxView?.regularSelect(activeItem, this._itemRef.current!, this._dragRef.current!, false); })} onPointerOver={this.onPointerOver} onPointerLeave={this.onPointerLeave} @@ -551,11 +562,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { ) : ( <div ref={this._dragRef} - className={`presItem-slide ${isCurrent ? 'active' : ''}${this.slideDoc.runProcess ? ' testingv2' : ''}`} + className={`presItem-slide ${isCurrent ? 'active' : ''}${activeItem.runProcess ? ' testingv2' : ''}`} style={{ display: 'infline-block', backgroundColor: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor), - //layout_boxShadow: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? '0 0 0px 1.5px' + presBoxColor : undefined) : undefined, + // 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 @@ -563,7 +574,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { style={{ display: 'inline-flex', pointerEvents: isSelected ? undefined : 'none', - width: `calc(100% ${this.slideDoc.presentation_expandInlineButton ? '- 50%' : ''} - ${this.presButtons.length * 22}px`, + width: `calc(100% ${activeItem.presentation_expandInlineButton ? '- 50%' : ''} - ${this.presButtons.length * 22}px`, cursor: isSelected ? 'text' : 'grab', }}> <div @@ -576,7 +587,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { } }} onClick={e => e.stopPropagation()}>{`${this.indexInPres + 1}. `}</div> - <EditableView ref={this._titleRef} oneLine={true} editing={!isSelected ? false : undefined} contents={activeItem.title} overflow={'ellipsis'} GetValue={() => StrCast(activeItem.title)} SetValue={this.onSetValue} /> + <EditableView ref={this._titleRef} oneLine editing={!isSelected ? false : undefined} contents={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> */} @@ -594,3 +605,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { 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' }, +}); |