From 2a313f28fcb8675223708b0657de7517a3281095 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 17 Apr 2024 12:27:21 -0400 Subject: restoring eslint - updates not complete yet --- src/client/views/nodes/trails/PresBox.tsx | 176 ++++++++++++++---------------- 1 file changed, 82 insertions(+), 94 deletions(-) (limited to 'src/client/views/nodes/trails/PresBox.tsx') diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 91fdb90fc..518bf66cd 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -3,7 +3,8 @@ import { Tooltip } from '@mui/material'; import { action, computed, IReactionDisposer, makeObservable, observable, ObservableSet, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Doc, DocListCast, Field, FieldResult, NumListCast, Opt, StrListCast } from '../../../../fields/Doc'; +import { lightOrDark, returnFalse, returnOne, setupMoveUpEvents, StopEvent } from '../../../../ClientUtils'; +import { Doc, DocListCast, Field, FieldType, FieldResult, NumListCast, Opt, StrListCast } from '../../../../fields/Doc'; import { Animation, DocData, TransitionTimer } from '../../../../fields/DocSymbols'; import { Copy, Id } from '../../../../fields/FieldSymbols'; import { InkField } from '../../../../fields/InkField'; @@ -13,23 +14,23 @@ import { listSpec } from '../../../../fields/Schema'; import { ComputedField, ScriptField } from '../../../../fields/ScriptField'; import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types'; import { AudioField } from '../../../../fields/URLField'; -import { emptyFunction, emptyPath, lightOrDark, returnFalse, returnOne, setupMoveUpEvents, StopEvent, stringHash } from '../../../../Utils'; +import { emptyFunction, emptyPath, stringHash } from '../../../../Utils'; import { DocServer } from '../../../DocServer'; import { Docs } from '../../../documents/Documents'; import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes'; import { DocumentManager } from '../../../util/DocumentManager'; -import { dropActionType } from '../../../util/DragManager'; +import { dropActionType } from '../../../util/DropActionTypes'; import { ScriptingGlobals } from '../../../util/ScriptingGlobals'; import { SelectionManager } from '../../../util/SelectionManager'; import { SerializationHelper } from '../../../util/SerializationHelper'; -import { SettingsManager } from '../../../util/SettingsManager'; +import { SnappingManager } from '../../../util/SnappingManager'; import { undoBatch, UndoManager } from '../../../util/UndoManager'; import { CollectionDockingView } from '../../collections/CollectionDockingView'; -import { CollectionFreeFormView, MarqueeViewBounds } from '../../collections/collectionFreeForm'; +import { CollectionFreeFormView } from '../../collections/collectionFreeForm'; import { CollectionStackedTimeline } from '../../collections/CollectionStackedTimeline'; import { CollectionView } from '../../collections/CollectionView'; import { TreeView } from '../../collections/TreeView'; -import { ViewBoxBaseComponent } from '../../DocComponent'; +import { pinDataTypes, PinProps, ViewBoxBaseComponent } from '../../DocComponent'; import { Colors } from '../../global/globalEnums'; import { LightboxView } from '../../LightboxView'; import { DocumentView, OpenWhere, OpenWhereMod } from '../DocumentView'; @@ -37,32 +38,6 @@ import { FieldView, FieldViewProps, FocusViewOptions } from '../FieldView'; import { ScriptingBox } from '../ScriptingBox'; import './PresBox.scss'; import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums'; -export interface pinDataTypes { - scrollable?: boolean; - dataviz?: number[]; - pannable?: boolean; - type_collection?: boolean; - inkable?: boolean; - filters?: boolean; - pivot?: boolean; - temporal?: boolean; - clippable?: boolean; - datarange?: boolean; - dataview?: boolean; - poslayoutview?: boolean; - dataannos?: boolean; - map?: boolean; -} -export interface PinProps { - audioRange?: boolean; - activeFrame?: number; - currentFrame?: number; - hidePresBox?: boolean; - pinViewport?: MarqueeViewBounds; // pin a specific viewport on a freeform view (use MarqueeView.CurViewBounds to compute if no region has been selected) - pinDocLayout?: boolean; // pin layout info (width/height/x/y) - pinAudioPlay?: boolean; // pin audio annotation - pinData?: pinDataTypes; -} @observer export class PresBox extends ViewBoxBaseComponent() { @@ -443,7 +418,7 @@ export class PresBox extends ViewBoxBaseComponent() { else { const bestTargetData = bestTarget[DocData]; const current = bestTargetData[fkey]; - const hash = bestTargetData[fkey] ? stringHash(Field.toString(bestTargetData[fkey] as Field)) : undefined; + const hash = bestTargetData[fkey] ? stringHash(Field.toString(bestTargetData[fkey] as FieldType)) : undefined; if (hash) bestTargetData[fkey + '_' + hash] = current instanceof ObjectField ? current[Copy]() : current; bestTargetData[fkey] = activeItem.config_data instanceof ObjectField ? activeItem.config_data[Copy]() : activeItem.config_data; } @@ -623,7 +598,8 @@ export class PresBox extends ViewBoxBaseComponent() { /// reserved fields on the pinDoc so that those values can be restored to the /// target doc when navigating to it. @action - static pinDocView(pinDoc: Doc, pinProps: PinProps, targetDoc: Doc) { + static pinDocView(pinDocIn: Doc, pinProps: PinProps, targetDoc: Doc) { + const pinDoc = pinDocIn; pinDoc.presentation = true; pinDoc.config = ''; if (pinProps.pinDocLayout) { @@ -1479,7 +1455,7 @@ export class PresBox extends ViewBoxBaseComponent() { max={max} value={value} readOnly={true} - style={{ marginLeft: hmargin, marginRight: hmargin, width: `calc(100% - ${2 * (hmargin ?? 0)}px)`, background: SettingsManager.userColor, color: SettingsManager.userVariantColor }} + style={{ marginLeft: hmargin, marginRight: hmargin, width: `calc(100% - ${2 * (hmargin ?? 0)}px)`, background: SnappingManager.userColor, color: SnappingManager.userVariantColor }} className={`toolbar-slider ${active ? '' : 'none'}`} onPointerDown={e => { PresBox._sliderBatch = UndoManager.StartBatch('pres slider'); @@ -1521,7 +1497,7 @@ export class PresBox extends ViewBoxBaseComponent() { Hide before presented}>
this.updateHideBefore(activeItem)}> Hide before
@@ -1529,7 +1505,7 @@ export class PresBox extends ViewBoxBaseComponent() { {'Hide while presented'}}>
this.updateHide(activeItem)}> Hide
@@ -1538,7 +1514,7 @@ export class PresBox extends ViewBoxBaseComponent() { {'Hide after presented'}}>
this.updateHideAfter(activeItem)}> Hide after
@@ -1548,9 +1524,9 @@ export class PresBox extends ViewBoxBaseComponent() {
this.updateOpenDoc(activeItem)}> Lightbox @@ -1559,7 +1535,7 @@ export class PresBox extends ViewBoxBaseComponent() { Transition movement style
}>
this.updateEaseFunc(activeItem)}> {`${StrCast(activeItem.presEaseFunc, 'ease')}`}
@@ -1569,10 +1545,10 @@ export class PresBox extends ViewBoxBaseComponent() { <>
Slide Duration
-
- e.stopPropagation()} onChange={e => this.updateDurationTime(e.target.value)} /> s +
+ e.stopPropagation()} onChange={e => this.updateDurationTime(e.target.value)} /> s
-
+
this.updateDurationTime(String(duration), 1000)}>
@@ -1611,7 +1587,7 @@ export class PresBox extends ViewBoxBaseComponent() {
Progressivize Collection
{ activeItem.presentation_indexed = activeItem.presentation_indexed === undefined ? 0 : undefined; @@ -1634,7 +1610,7 @@ export class PresBox extends ViewBoxBaseComponent() {
Progressivize First Bullet
(activeItem.presentation_indexedStart = activeItem.presentation_indexedStart ? 0 : 1)} checked={!NumCast(activeItem.presentation_indexedStart)} @@ -1644,7 +1620,7 @@ export class PresBox extends ViewBoxBaseComponent() {
Expand Current Bullet
(activeItem.presBulletExpand = !activeItem.presBulletExpand)} checked={BoolCast(activeItem.presBulletExpand)} @@ -1660,16 +1636,16 @@ export class PresBox extends ViewBoxBaseComponent() { this._openBulletEffectDropdown = !this._openBulletEffectDropdown; })} style={{ - color: SettingsManager.userColor, - background: SettingsManager.userVariantColor, + color: SnappingManager.userColor, + background: SnappingManager.userVariantColor, borderBottomLeftRadius: this._openBulletEffectDropdown ? 0 : 5, - border: this._openBulletEffectDropdown ? `solid 2px ${SettingsManager.userVariantColor}` : `solid 1px ${SettingsManager.userColor}`, + border: this._openBulletEffectDropdown ? `solid 2px ${SnappingManager.userVariantColor}` : `solid 1px ${SnappingManager.userColor}`, }}> {effect?.toString()}
e.stopPropagation()}> {Object.values(PresEffect) .filter(v => isNaN(Number(v))) @@ -1698,7 +1674,7 @@ export class PresBox extends ViewBoxBaseComponent() {
); const presDirection = (direction: PresEffectDirection, icon: string, gridColumn: number, gridRow: number, opts: object) => { - const color = activeItem.presentation_effectDirection === direction || (direction === PresEffectDirection.Center && !activeItem.presentation_effectDirection) ? SettingsManager.userVariantColor : SettingsManager.userColor; + const color = activeItem.presentation_effectDirection === direction || (direction === PresEffectDirection.Center && !activeItem.presentation_effectDirection) ? SnappingManager.userVariantColor : SnappingManager.userColor; return ( {direction}
}>
() { this._openMovementDropdown = !this._openMovementDropdown; })} style={{ - color: SettingsManager.userColor, - background: SettingsManager.userVariantColor, + color: SnappingManager.userColor, + background: SnappingManager.userVariantColor, borderBottomLeftRadius: this._openMovementDropdown ? 0 : 5, - border: this._openMovementDropdown ? `solid 2px ${SettingsManager.userVariantColor}` : `solid 1px ${SettingsManager.userColor}`, + border: this._openMovementDropdown ? `solid 2px ${SnappingManager.userVariantColor}` : `solid 1px ${SnappingManager.userColor}`, }}> {this.movementName(activeItem)} @@ -1745,8 +1721,8 @@ export class PresBox extends ViewBoxBaseComponent() { id={'presBoxMovementDropdown'} onPointerDown={StopEvent} style={{ - color: SettingsManager.userColor, - background: SettingsManager.userBackgroundColor, + color: SnappingManager.userColor, + background: SnappingManager.userBackgroundColor, display: this._openMovementDropdown ? 'grid' : 'none', }}> {presMovement(PresMovement.None)} @@ -1758,10 +1734,10 @@ export class PresBox extends ViewBoxBaseComponent() {
Zoom (% screen filled)
-
- this.updateZoom(e.target.value)} />% +
+ this.updateZoom(e.target.value)} />%
-
+
this.updateZoom(String(zoom), 0.1)}>
@@ -1773,10 +1749,10 @@ export class PresBox extends ViewBoxBaseComponent() { {PresBox.inputter('0', '1', '100', zoom, activeItem.presentation_movement === PresMovement.Zoom, this.updateZoom)}
Transition Time
-
+
e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> s
-
+
this.updateTransitionTime(String(transitionSpeed), 1000)}>
@@ -1798,7 +1774,7 @@ export class PresBox extends ViewBoxBaseComponent() {
Play Audio Annotation
(activeItem.presPlayAudio = !BoolCast(activeItem.presPlayAudio))} checked={BoolCast(activeItem.presPlayAudio)} @@ -1808,7 +1784,7 @@ export class PresBox extends ViewBoxBaseComponent() {
Zoom Text Selections
(activeItem.presentation_zoomText = !BoolCast(activeItem.presentation_zoomText))} checked={BoolCast(activeItem.presentation_zoomText)} @@ -1821,10 +1797,10 @@ export class PresBox extends ViewBoxBaseComponent() { this._openEffectDropdown = !this._openEffectDropdown; })} style={{ - color: SettingsManager.userColor, - background: SettingsManager.userVariantColor, + color: SnappingManager.userColor, + background: SnappingManager.userVariantColor, borderBottomLeftRadius: this._openEffectDropdown ? 0 : 5, - border: this._openEffectDropdown ? `solid 2px ${SettingsManager.userVariantColor}` : `solid 1px ${SettingsManager.userColor}`, + border: this._openEffectDropdown ? `solid 2px ${SettingsSnappingManagerManager.userVariantColor}` : `solid 1px ${SnappingManager.userColor}`, }}> {effect?.toString()} @@ -1832,8 +1808,8 @@ export class PresBox extends ViewBoxBaseComponent() { className="presBox-dropdownOptions" id={'presBoxMovementDropdown'} style={{ - color: SettingsManager.userColor, - background: SettingsManager.userBackgroundColor, + color: SnappingManager.userColor, + background: SnappingManager.userBackgroundColor, display: this._openEffectDropdown ? 'grid' : 'none', }} onPointerDown={e => e.stopPropagation()}> @@ -1844,7 +1820,7 @@ export class PresBox extends ViewBoxBaseComponent() {
Effect direction
-
+
{StrCast(this.activeItem.presentation_effectDirection)}
@@ -1882,7 +1858,7 @@ export class PresBox extends ViewBoxBaseComponent() {
Start time (s)
-
+
() {
Duration (s)
-
+
{Math.round((config_clipEnd - NumCast(activeItem.config_clipStart)) * 10) / 10}
@@ -1906,7 +1882,7 @@ export class PresBox extends ViewBoxBaseComponent() {
End time (s)
-
+
e.stopPropagation()} @@ -1926,14 +1902,14 @@ export class PresBox extends ViewBoxBaseComponent() { min={clipStart} max={clipEnd} value={config_clipEnd} - style={{ gridColumn: 1, gridRow: 1, background: SettingsManager.userColor, color: SettingsManager.userVariantColor }} + style={{ gridColumn: 1, gridRow: 1, background: SnappingManager.userColor, color: SnappingManager.userVariantColor }} className={`toolbar-slider ${'end'}`} id="toolbar-slider" onPointerDown={e => { this._batch = UndoManager.StartBatch('config_clipEnd'); const endBlock = document.getElementById('endTime'); if (endBlock) { - endBlock.style.backgroundColor = SettingsManager.userVariantColor; + endBlock.style.backgroundColor = SnappingManager.userVariantColor; } e.stopPropagation(); }} @@ -1941,7 +1917,7 @@ export class PresBox extends ViewBoxBaseComponent() { this._batch?.end(); const endBlock = document.getElementById('endTime'); if (endBlock) { - endBlock.style.backgroundColor = SettingsManager.userBackgroundColor; + endBlock.style.backgroundColor = SnappingManager.userBackgroundColor; } }} onChange={(e: React.ChangeEvent) => { @@ -1962,7 +1938,7 @@ export class PresBox extends ViewBoxBaseComponent() { this._batch = UndoManager.StartBatch('config_clipStart'); const startBlock = document.getElementById('startTime'); if (startBlock) { - startBlock.style.backgroundColor = SettingsManager.userVariantColor; + startBlock.style.backgroundColor = SnappingManager.userVariantColor; } e.stopPropagation(); }} @@ -1970,7 +1946,7 @@ export class PresBox extends ViewBoxBaseComponent() { this._batch?.end(); const startBlock = document.getElementById('startTime'); if (startBlock) { - startBlock.style.backgroundColor = SettingsManager.userBackgroundColor; + startBlock.style.backgroundColor = SnappingManager.userBackgroundColor; } }} onChange={(e: React.ChangeEvent) => { @@ -1993,7 +1969,7 @@ export class PresBox extends ViewBoxBaseComponent() { (activeItem.presentation_mediaStart = 'manual')} checked={activeItem.presentation_mediaStart === 'manual'} /> @@ -2002,7 +1978,7 @@ export class PresBox extends ViewBoxBaseComponent() {
(activeItem.presentation_mediaStart = 'auto')} checked={activeItem.presentation_mediaStart === 'auto'} @@ -2016,7 +1992,7 @@ export class PresBox extends ViewBoxBaseComponent() { (activeItem.presentation_mediaStop = 'manual')} checked={activeItem.presentation_mediaStop === 'manual'} /> @@ -2026,7 +2002,7 @@ export class PresBox extends ViewBoxBaseComponent() { (activeItem.presentation_mediaStop = 'auto')} checked={activeItem.presentation_mediaStop === 'auto'} /> @@ -2270,15 +2246,15 @@ export class PresBox extends ViewBoxBaseComponent() { } @action - toggleProperties = () => (SettingsManager.Instance.propertiesWidth = SettingsManager.Instance.propertiesWidth > 0 ? 0 : 250); + toggleProperties = () => (SnappingManager.Instance.propertiesWidth = SnappingManager.Instance.propertiesWidth > 0 ? 0 : 250); @computed get toolbar() { - const propIcon = SettingsManager.Instance.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left'; - const propTitle = SettingsManager.Instance.propertiesWidth > 0 ? 'Close Presentation Panel' : 'Open Presentation Panel'; + const propIcon = SnappingManager.Instance.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left'; + const propTitle = SnappingManager.Instance.propertiesWidth > 0 ? 'Close Presentation Panel' : 'Open Presentation Panel'; const mode = StrCast(this.Document._type_collection) as CollectionViewType; const isMini: boolean = this.toolbarWidth <= 100; - const activeColor = SettingsManager.userVariantColor; - const inactiveColor = lightOrDark(SettingsManager.userBackgroundColor) === Colors.WHITE ? Colors.WHITE : SettingsManager.userBackgroundColor; + const activeColor = SnappingManager.userVariantColor; + const inactiveColor = lightOrDark(SnappingManager.userBackgroundColor) === Colors.WHITE ? Colors.WHITE : SnappingManager.userBackgroundColor; return mode === CollectionViewType.Carousel3D || Doc.IsInMyOverlay(this.Document) ? null : (
{/*
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}> @@ -2303,7 +2279,7 @@ export class PresBox extends ViewBoxBaseComponent() { {propTitle}
}>
- 0 ? activeColor : inactiveColor }} /> + 0 ? activeColor : inactiveColor }} />
@@ -2378,12 +2354,24 @@ export class PresBox extends ViewBoxBaseComponent() { // Case 1: There are still other frames and should go through all frames before going to next slide return (
- {'Loop'}
}> + Loop
}>
setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => (this.layoutDoc.presLoop = !this.layoutDoc.presLoop), false, false)}> - + onPointerDown={e => + setupMoveUpEvents( + this, + e, + returnFalse, + emptyFunction, + () => { + this.layoutDoc.presLoop = !this.layoutDoc.presLoop; + }, + false, + false + ) + }> +
@@ -2617,12 +2605,12 @@ export class PresBox extends ViewBoxBaseComponent() { childXPadding={Doc.IsComicStyle(this.Document) ? 20 : undefined} filterAddDocument={this.addDocumentFilter} removeDocument={returnFalse} - dontRegisterView={true} + dontRegisterView focus={this.focusElement} ScreenToLocalTransform={this.getTransform} AddToMap={this.AddToMap} RemFromMap={this.RemFromMap} - hierarchyIndex={emptyPath as any as number[]} + hierarchyIndex={emptyPath} /> ) : null}
-- cgit v1.2.3-70-g09d2