From 223262242f7db021c8449e920645892cc5ed2820 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 17 Oct 2020 17:45:10 -0400 Subject: major rewrite of native width/height/aspect. Fixed scaling of text note sidebars. --- src/client/views/PropertiesView.tsx | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) (limited to 'src/client/views/PropertiesView.tsx') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 6bdb6e21f..39a4d293b 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -91,9 +91,9 @@ export class PropertiesView extends React.Component { docWidth = () => { if (this.selectedDoc) { const layoutDoc = this.selectedDoc; - const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); - if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.width - 20)); - return NumCast(layoutDoc._nativeWidth) ? Math.min(layoutDoc[WidthSym](), this.props.width - 20) : this.props.width - 20; + const aspect = Doc.NativeAspect(layoutDoc, undefined, !layoutDoc._fitWidth); + if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT * aspect, this.props.width - 20)); + return Doc.NativeWidth(layoutDoc) ? Math.min(layoutDoc[WidthSym](), this.props.width - 20) : this.props.width - 20; } else { return 0; } @@ -103,17 +103,13 @@ export class PropertiesView extends React.Component { docHeight = () => { if (this.selectedDoc && this.dataDoc) { const layoutDoc = this.selectedDoc; - return Math.max(70, Math.min(this.MAX_EMBED_HEIGHT, (() => { - const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); - if (aspect) return this.docWidth() * aspect; - return layoutDoc._fitWidth ? (!this.dataDoc._nativeHeight ? NumCast(this.props.height) : - Math.min(this.docWidth() * NumCast(layoutDoc.scrollHeight, NumCast(layoutDoc._nativeHeight)) / NumCast(layoutDoc._nativeWidth, - NumCast(this.props.height)))) : - NumCast(layoutDoc._height) ? NumCast(layoutDoc._height) : 50; - })())); - } else { - return 0; + return Math.max(70, Math.min(this.MAX_EMBED_HEIGHT, + Doc.NativeAspect(layoutDoc, undefined, true) ? this.docWidth() / Doc.NativeAspect(layoutDoc, undefined, true) : + layoutDoc._fitWidth ? (!Doc.NativeHeight(this.dataDoc) ? NumCast(this.props.height) : + Math.min(this.docWidth() * NumCast(layoutDoc.scrollHeight, Doc.NativeHeight(layoutDoc)) / Doc.NativeWidth(layoutDoc) || NumCast(this.props.height))) : + NumCast(layoutDoc._height) || 50)); } + return 0; } @computed get expandedField() { @@ -972,7 +968,7 @@ export class PropertiesView extends React.Component { {this.openContexts ?
{this.contexts}
: null} - {/*
+
this.openLayout = !this.openLayout)} style={{ backgroundColor: this.openLayout ? "black" : "" }}> @@ -982,7 +978,7 @@ export class PropertiesView extends React.Component {
{this.openLayout ?
{this.layoutPreview}
: null} -
*/} + ; } if (this.isPres) { -- cgit v1.2.3-70-g09d2 From e73cf54b9dfea74ff34d9d6227f209efdb1f23e4 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Wed, 21 Oct 2020 03:40:32 +0800 Subject: not possible to change pres document perspective + removing unessecary doc actions + progressivize --- src/client/views/PropertiesView.tsx | 6 ++-- src/client/views/collections/CollectionMenu.tsx | 9 ++--- .../collections/collectionFreeForm/MarqueeView.tsx | 2 +- src/client/views/nodes/PresBox.tsx | 40 +++++++++++++++------- .../views/presentationview/PresElementBox.scss | 6 ++-- 5 files changed, 39 insertions(+), 24 deletions(-) (limited to 'src/client/views/PropertiesView.tsx') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 39a4d293b..e93173c9e 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1010,7 +1010,7 @@ export class PropertiesView extends React.Component { {PresBox.Instance.transitionDropdown} : null} } - {!selectedItem || type === DocumentType.VID || type === DocumentType.AUDIO ? (null) :
+ {/* {!selectedItem || type === DocumentType.VID || type === DocumentType.AUDIO ? (null) :
this.openPresProgressivize = !this.openPresProgressivize)} style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}> @@ -1022,8 +1022,8 @@ export class PropertiesView extends React.Component { {this.openPresProgressivize ?
{PresBox.Instance.progressivizeDropdown}
: null} -
} - {!selectedItem || (type !== DocumentType.COL && type !== DocumentType.VID && type !== DocumentType.AUDIO) ? (null) :
+
} */} + {!selectedItem || (type !== DocumentType.COL && type !== DocumentType.AUDIO) ? (null) :
{ this.openSlideOptions = !this.openSlideOptions; })} style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}> diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 3f55cf103..34fb2bdee 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -344,7 +344,8 @@ export class CollectionViewBaseChrome extends React.Component + const isPres: boolean = (this.document && this.document.type === DocumentType.PRES); + return isPres ? (null) : (
drop document to apply or drag to create button
} placement="bottom">
-
; +
); } @computed get selectedDocumentView() { @@ -425,7 +426,7 @@ export class CollectionViewBaseChrome extends React.Component; const targetDoc = this.selectedDoc; {/* return (!targetDoc || (targetDoc._viewType !== CollectionViewType.Freeform && targetDoc.type !== DocumentType.IMG)) ? (null) :
{"Pin to presentation trail with current view"}
} placement="top"> */ } - return (targetDoc && (targetDoc._viewType === CollectionViewType.Freeform || targetDoc._viewType === CollectionViewType.Stacking || targetDoc.type === DocumentType.IMG || targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.COMPARISON)) ?
{"Pin to presentation trail with current view"}
} placement="top"> + return (targetDoc && targetDoc.type !== DocumentType.PRES && (targetDoc._viewType === CollectionViewType.Freeform || targetDoc._viewType === CollectionViewType.Stacking || targetDoc.type === DocumentType.IMG || targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.COMPARISON)) ?
{"Pin to presentation trail with current view"}
} placement="top">
} placement="top"> + return !targetDoc || targetDoc.type === DocumentType.PRES ? (null) : {"Tap or Drag to create an alias"}
} placement="top"> diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index f95c21972..42a601aa2 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -397,7 +397,7 @@ export class MarqueeView extends React.Component this._pathBoolean = false; srcContext.presPathView = false; } else { - undoBatch(() => { - runInAction(() => this._pathBoolean = !this._pathBoolean); - srcContext.presPathView = this._pathBoolean; - }) + runInAction(() => this._pathBoolean = !this._pathBoolean); + srcContext.presPathView = this._pathBoolean; } } @@ -562,8 +560,26 @@ export class PresBox extends ViewBoxBaseComponent * When the movement dropdown is changes */ @undoBatch - updateMovement = action((movement: any) => { - if (this._selectedArray) this._selectedArray.forEach((doc) => { + updateMovement = action((movement: any, all?: boolean) => { + if (all) { + this.childDocs.forEach((doc) => { + switch (movement) { + case PresMovement.Zoom: //Pan and zoom + doc.presMovement = PresMovement.Zoom; + break; + case PresMovement.Pan: //Pan + doc.presMovement = PresMovement.Pan; + break; + case PresMovement.Jump: //Jump Cut + doc.presJump = true; + doc.presMovement = PresMovement.Jump; + break; + case PresMovement.None: default: + doc.presMovement = PresMovement.None; + break; + } + }) + } else if (this._selectedArray) this._selectedArray.forEach((doc) => { switch (movement) { case PresMovement.Zoom: //Pan and zoom doc.presMovement = PresMovement.Zoom; @@ -1008,6 +1024,7 @@ export class PresBox extends ViewBoxBaseComponent applyTo = (array: Doc[]) => { const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; + this.updateMovement(activeItem.presMovement, true); array.forEach((doc) => { const curDoc = Cast(doc, Doc, null); const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); @@ -1016,9 +1033,6 @@ export class PresBox extends ViewBoxBaseComponent curDoc.presDuration = activeItem.presDuration; tagDoc.presEffect = targetDoc.presEffect; tagDoc.presEffectDirection = targetDoc.presEffectDirection; - tagDoc.presMovement = targetDoc.presMovement; - curDoc.presMovement = activeItem.presMovement; - this.updateMovement(activeItem.presMovement, curDoc, tagDoc); curDoc.presHideTillShownButton = activeItem.presHideTillShownButton; curDoc.presHideAfterButton = activeItem.presHideAfterButton; } @@ -1033,12 +1047,12 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-
+
activeItem.playAuto = !activeItem.playAuto}>Play automatically
activeItem.playAuto = !activeItem.playAuto}>Play on next
- {targetDoc.type === DocumentType.VID ?
activeItem.presVidFullScreen = !activeItem.presVidFullScreen}>Full screen
: (null)} - {targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.AUDIO ?
+ {/* {targetDoc.type === DocumentType.VID ?
activeItem.presVidFullScreen = !activeItem.presVidFullScreen}>Full screen
: (null)} */} + {targetDoc.type === DocumentType.AUDIO ?
Start time
onChange={action((e: React.ChangeEvent) => { activeItem.presStartTime = Number(e.target.value); })} />
: (null)} - {targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.AUDIO ?
+ {targetDoc.type === DocumentType.AUDIO ?
End time
Date: Sun, 25 Oct 2020 22:59:52 +0800 Subject: undo/redo for slider changes + updating options for pan / scroll pinned views --- src/client/views/PropertiesView.scss | 4 + src/client/views/PropertiesView.tsx | 12 ++- src/client/views/nodes/PresBox.tsx | 141 ++++++++++++++++++++++++----------- 3 files changed, 110 insertions(+), 47 deletions(-) (limited to 'src/client/views/PropertiesView.tsx') diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index 9fdc8bc47..ed3a82236 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -686,6 +686,10 @@ font-weight: 500; display: inline-flex; + .propertiesView-selectedCount { + + } + .propertiesView-selectedList { border-left: solid 1px darkgrey; margin-left: 10px; diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index e93173c9e..65594b634 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -27,6 +27,7 @@ import { PresBox } from "./nodes/PresBox"; import { PropertiesButtons } from "./PropertiesButtons"; import { PropertiesDocContextSelector } from "./PropertiesDocContextSelector"; import "./PropertiesView.scss"; +import { CollectionViewType } from "./collections/CollectionView"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -984,6 +985,9 @@ export class PropertiesView extends React.Component { if (this.isPres) { const selectedItem: boolean = PresBox.Instance?._selectedArray.length > 0; const type = PresBox.Instance.activeItem?.type; + const viewType = PresBox.Instance.activeItem?._viewType; + const pannable: boolean = (type === DocumentType.COL && viewType === CollectionViewType.Freeform) || type === DocumentType.IMG; + const scrollable: boolean = type === DocumentType.PDF || type === DocumentType.WEB || type === DocumentType.RTF || viewType === CollectionViewType.Stacking; return
Presentation @@ -991,7 +995,7 @@ export class PropertiesView extends React.Component {
{this.editableTitle}
- {PresBox.Instance?._selectedArray.length} selected +
{PresBox.Instance?._selectedArray.length} selected
{PresBox.Instance?.listOfSelected}
@@ -1023,12 +1027,12 @@ export class PropertiesView extends React.Component { {PresBox.Instance.progressivizeDropdown}
: null}
} */} - {!selectedItem || (type !== DocumentType.COL && type !== DocumentType.AUDIO) ? (null) :
+ {!selectedItem || (!scrollable && !pannable) ? (null) :
{ this.openSlideOptions = !this.openSlideOptions; })} style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}> -     {PresBox.Instance.stringType} options -
+     {scrollable ? "Scroll options" : "Pan options"} +
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 90a0b750c..628392b2f 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -19,7 +19,7 @@ import { CurrentUserUtils } from "../../util/CurrentUserUtils"; import { DocumentManager } from "../../util/DocumentManager"; import { Scripting } from "../../util/Scripting"; import { SelectionManager } from "../../util/SelectionManager"; -import { undoBatch } from "../../util/UndoManager"; +import { undoBatch, UndoManager } from "../../util/UndoManager"; import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionView, CollectionViewType } from "../collections/CollectionView"; import { TabDocView } from "../collections/TabDocView"; @@ -85,6 +85,14 @@ export class PresBox extends ViewBoxBaseComponent @observable private openEffectDropdown: boolean = false; @observable private presentTools: boolean = false; @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); } + @computed get tagDocs() { + const tagDocs: Doc[] = []; + for (const doc of this.childDocs) { + const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); + tagDocs.push(tagDoc) + } + return tagDocs; + } @computed get itemIndex() { return NumCast(this.rootDoc._itemIndex); } @computed get activeItem() { return Cast(this.childDocs[NumCast(this.rootDoc._itemIndex)], Doc, null); } @computed get targetDoc() { return Cast(this.activeItem?.presentationTargetDoc, Doc, null); } @@ -267,7 +275,7 @@ export class PresBox extends ViewBoxBaseComponent setTimeout(() => bestTarget._viewTransition = undefined, activeItem.presTransition ? NumCast(activeItem.presTransition) + 10 : 1010); } }); - } else { + } else if (presTargetDoc) { presTargetDoc && runInAction(() => { if (activeItem.presMovement === PresMovement.Jump) presTargetDoc.focusSpeed = 0; else presTargetDoc.focusSpeed = activeItem.presTransition ? activeItem.presTransition : 500; @@ -294,7 +302,7 @@ export class PresBox extends ViewBoxBaseComponent navigateToElement = async (curDoc: Doc) => { const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; - const srcContext = await DocCastAsync(targetDoc.context); + const srcContext = await DocCastAsync(targetDoc?.context); const presCollection = Cast(this.layoutDoc.presCollection, Doc, null); const collectionDocView = presCollection ? DocumentManager.Instance.getDocumentView(presCollection) : undefined; this.turnOffEdit(); @@ -319,8 +327,8 @@ export class PresBox extends ViewBoxBaseComponent self._eleArray.splice(0, self._eleArray.length, ...eleViewCache); }); const openInTab = () => { - collectionDocView ? collectionDocView.props.addDocTab(activeItem, "") : this.props.addDocTab(activeItem, ":left"); - this.layoutDoc.presCollection = activeItem; + collectionDocView ? collectionDocView.props.addDocTab(targetDoc, "") : this.props.addDocTab(targetDoc, ":left"); + this.layoutDoc.presCollection = targetDoc; // this still needs some fixing setTimeout(resetSelection, 500); }; @@ -368,9 +376,6 @@ export class PresBox extends ViewBoxBaseComponent // If website and has presWebsite data associated then on click it should // go back to that specific website // TODO: Add progressivize for navigating web (storing websites for given frames) - if (targetDoc.presWebsiteData) { - targetDoc.data = targetDoc.presWebsiteData; - } } /** @@ -418,7 +423,6 @@ export class PresBox extends ViewBoxBaseComponent } } - /** * For 'Hide Before' and 'Hide After' buttons making sure that * they are hidden each time the presentation is updated. @@ -429,14 +433,18 @@ export class PresBox extends ViewBoxBaseComponent const curDoc = Cast(doc, Doc, null); const tagDoc = Cast(curDoc.presentationTargetDoc!, Doc, null); if (tagDoc) tagDoc.opacity = 1; - if (curDoc.presHideBefore) { + const itemIndexes: number[] = this.getAllIndexes(this.tagDocs, tagDoc); + const curInd: number = itemIndexes.indexOf(index); + if (itemIndexes.length > 1 && curDoc.presHideBefore && curInd !== 0) { } + else if (curDoc.presHideBefore) { if (index > this.itemIndex) { tagDoc.opacity = 0; } else if (!curDoc.presHideAfter) { tagDoc.opacity = 1; } } - if (curDoc.presHideAfter) { + if (itemIndexes.length > 1 && curDoc.presHideAfter && curInd !== (itemIndexes.length - 1)) { } + else if (curDoc.presHideAfter) { if (index < this.itemIndex) { tagDoc.opacity = 0; } else if (!curDoc.presHideBefore) { @@ -641,8 +649,9 @@ export class PresBox extends ViewBoxBaseComponent const list = this._selectedArray.map((doc: Doc, index: any) => { const curDoc = Cast(doc, Doc, null); const tagDoc = Cast(curDoc.presentationTargetDoc!, Doc, null); - if (tagDoc) return
{index + 1}. {curDoc.title}
; - if (curDoc) return
{index + 1}. {curDoc.title}
; + if (curDoc && curDoc === this.activeItem) return
{index + 1}. {curDoc.title}
+ else if (tagDoc) return
{index + 1}. {curDoc.title}
; + else if (curDoc) return
{index + 1}. {curDoc.title}
; }); return list; } @@ -788,12 +797,12 @@ export class PresBox extends ViewBoxBaseComponent } } - getAllIndexes = (arr: Doc[], val: Doc): number => { + getAllIndexes = (arr: Doc[], val: Doc): number[] => { var indexes = [], i; for (i = 0; i < arr.length; i++) if (arr[i] === val) indexes.push(i); - return indexes.length; + return indexes; } // Adds the index in the pres path graphically @@ -811,7 +820,7 @@ export class PresBox extends ViewBoxBaseComponent // Case A: Document is contained within the collection if (this.rootDoc.presCollection === srcContext) { if (docs.includes(tagDoc)) { - const prevOccurances: number = this.getAllIndexes(docs, tagDoc); + const prevOccurances: number = this.getAllIndexes(docs, tagDoc).length; docs.push(tagDoc); order.push(
}); } + _batch: UndoManager.Batch | undefined = undefined; + + @computed get transitionDropdown() { const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; @@ -1010,11 +1022,6 @@ export class PresBox extends ViewBoxBaseComponent
Transition Speed
console.log('onInput')} - onDrag={() => console.log('onDrag')} - onDragEnd={() => console.log('onDragEnd')} - onBlur={() => console.log('onBlur')} - onCompositionEnd={() => console.log('onCompEnd')} type="number" value={transitionSpeed} onChange={action((e) => this.setTransitionTime(e.target.value))} /> s
@@ -1027,7 +1034,15 @@ export class PresBox extends ViewBoxBaseComponent
- ) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} /> + { this._batch = UndoManager.StartBatch("presTransition"); }} + onPointerUp={() => { if (this._batch) this._batch.end(); }} + onChange={(e: React.ChangeEvent) => { + e.stopPropagation(); + this.setTransitionTime(e.target.value); + }} />
Fast
Medium
@@ -1057,7 +1072,13 @@ export class PresBox extends ViewBoxBaseComponent
- ) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} /> + { this._batch = UndoManager.StartBatch("presDuration"); }} + onPointerUp={() => { if (this._batch) this._batch.end(); }} + onChange={(e: React.ChangeEvent) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} + />
Short
Medium
@@ -1168,13 +1189,45 @@ export class PresBox extends ViewBoxBaseComponent onChange={action((e: React.ChangeEvent) => { const val = e.target.value; activeItem.presEndTime = Number(val); })} />
: (null)} - {targetDoc.type === DocumentType.COL ? 'Presentation Pin View' : (null)} -
-
+
{activeItem.presPinView ? "Turn off pin with view" : "Pin with current view"}
}>
{ activeItem.presPinView = !activeItem.presPinView; targetDoc.presPinView = activeItem.presPinView; if (activeItem.presPinView) { + if (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.WEB || targetDoc._viewType === CollectionViewType.Stacking) { + const scroll = targetDoc._scrollTop; + activeItem.presPinView = true; + activeItem.presPinViewScroll = scroll; + } else if (targetDoc.type === DocumentType.VID) { + activeItem.presPinTimecode = targetDoc._currentTimecode; + } else if ((targetDoc.type === DocumentType.COL && targetDoc._viewType === CollectionViewType.Freeform) || targetDoc.type === DocumentType.IMG) { + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeItem.presPinView = true; + activeItem.presPinViewX = x; + activeItem.presPinViewY = y; + activeItem.presPinViewScale = scale; + } else if (targetDoc.type === DocumentType.COMPARISON) { + const width = targetDoc._clipWidth; + activeItem.presPinClipWidth = width; + activeItem.presPinView = true; + } + } + }}>{presPinWithViewIcon}
 + {activeItem.presPinView ?
{"Update the pinned view with the view of the selected document"}
}>
{ + if (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF) { + const scroll = targetDoc._scrollTop; + activeItem.presPinViewScroll = scroll; + } else if (targetDoc.type === DocumentType.VID) { + activeItem.presPinTimecode = targetDoc._currentTimecode; + } else if (targetDoc.type === DocumentType.COMPARISON) { + const clipWidth = targetDoc._clipWidth; + activeItem.presPinClipWidth = clipWidth; + } else { const x = targetDoc._panX; const y = targetDoc._panY; const scale = targetDoc._viewScale; @@ -1182,18 +1235,9 @@ export class PresBox extends ViewBoxBaseComponent activeItem.presPinViewY = y; activeItem.presPinViewScale = scale; } - }}>{presPinWithViewIcon}
- {activeItem.presPinView ?
{ - const x = targetDoc._panX; - const y = targetDoc._panY; - const scale = targetDoc._viewScale; - activeItem.presPinViewX = x; - activeItem.presPinViewY = y; - activeItem.presPinViewScale = scale; - }}>Update
: (null)} + }}>Update
: (null)}
-
+ {this.panable ?
Pan X
@@ -1221,7 +1265,18 @@ export class PresBox extends ViewBoxBaseComponent onChange={action((e: React.ChangeEvent) => { const val = e.target.value; activeItem.presPinViewScale = Number(val); })} />
-
+
: (null)} + {this.scrollable ?
+
+
Scroll
+
+ ) => { const val = e.target.value; activeItem.presPinViewScroll = Number(val); })} /> +
+
+
: (null)} {/*
Store original website
*/} @@ -1958,11 +2013,11 @@ export class PresBox extends ViewBoxBaseComponent @computed get playButtons() { // Case 1: There are still other frames and should go through all frames before going to next slide return (
-
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
 +
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
-
+
{ this.back(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
{this.layoutDoc.presStatus === PresStatus.Autoplay ? "Pause" : "Autoplay"}
}>
 -
+
{ this.next(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
250 ? "inline-flex" : "none" }}> Slide {this.itemIndex + 1} / {this.childDocs.length} @@ -1998,9 +2053,9 @@ export class PresBox extends ViewBoxBaseComponent
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
-
+
{ this.back(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
{this.layoutDoc.presStatus === PresStatus.Autoplay ? "Pause" : "Autoplay"}
}>
 -
+
{ this.next(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
Slide {this.itemIndex + 1} / {this.childDocs.length} -- cgit v1.2.3-70-g09d2 From 10935eb271443bd390d6b27b616bfcfef4ad01b2 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 25 Oct 2020 11:03:39 -0400 Subject: fixed updating pres.box instance and selectedArray to trigger mobx updates properluy --- src/client/views/PropertiesView.tsx | 6 +-- src/client/views/nodes/PresBox.tsx | 45 ++++++++++++---------- .../views/presentationview/PresElementBox.tsx | 12 +++--- 3 files changed, 34 insertions(+), 29 deletions(-) (limited to 'src/client/views/PropertiesView.tsx') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index e93173c9e..36c4648cf 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -46,7 +46,7 @@ export class PropertiesView extends React.Component { @computed get selectedDoc() { return SelectionManager.SelectedSchemaDoc() || this.selectedDocumentView?.rootDoc; } @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) return SelectionManager.SelectedDocuments()[0]; - if (PresBox.Instance && PresBox.Instance._selectedArray) return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); + if (PresBox.Instance?._selectedArray) return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); return undefined; } @computed get isPres(): boolean { @@ -982,7 +982,7 @@ export class PropertiesView extends React.Component {
; } if (this.isPres) { - const selectedItem: boolean = PresBox.Instance?._selectedArray.length > 0; + const selectedItem: boolean = PresBox.Instance?._selectedArray.size > 0; const type = PresBox.Instance.activeItem?.type; return
@@ -991,7 +991,7 @@ export class PropertiesView extends React.Component {
{this.editableTitle}
- {PresBox.Instance?._selectedArray.length} selected + {PresBox.Instance?._selectedArray.size} selected
{PresBox.Instance?.listOfSelected}
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index e46e68e85..0f686c7bc 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -1,7 +1,7 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Tooltip } from "@material-ui/core"; -import { action, computed, observable, runInAction } from "mobx"; +import { action, computed, observable, runInAction, ObservableMap } from "mobx"; import { observer } from "mobx-react"; import { ColorState, SketchPicker } from "react-color"; import { Doc, DocCastAsync, DocListCast, DocListCastAsync } from "../../../fields/Doc"; @@ -63,14 +63,14 @@ const PresBoxDocument = makeInterface(documentSchema); export class PresBox extends ViewBoxBaseComponent(PresBoxDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); } - public static Instance: PresBox; + @observable public static Instance: PresBox; @observable _isChildActive = false; @observable _moveOnFromAudio: boolean = true; @observable _presTimer!: NodeJS.Timeout; @observable _presKeyEventsActive: boolean = false; - @observable _selectedArray: Doc[] = []; + @observable _selectedArray: ObservableMap = new ObservableMap(); @observable _eleArray: HTMLElement[] = []; @observable _dragArray: HTMLElement[] = []; @observable _pathBoolean: boolean = false; @@ -97,7 +97,7 @@ export class PresBox extends ViewBoxBaseComponent @computed get presElement() { return Cast(Doc.UserDoc().presElement, Doc, null); } constructor(props: any) { super(props); - if (Doc.UserDoc().activePresentation = this.rootDoc) PresBox.Instance = this; + if (Doc.UserDoc().activePresentation = this.rootDoc) runInAction(() => PresBox.Instance = this); if (!this.presElement) { // create exactly one presElmentBox template to use by any and all presentations. Doc.UserDoc().presElement = new PrefetchProxy(Docs.Create.PresElementBoxDocument({ title: "pres element template", backgroundColor: "transparent", _xMargin: 0, isTemplateDoc: true, isTemplateForField: "data" @@ -149,6 +149,7 @@ export class PresBox extends ViewBoxBaseComponent !pres?.includes(this.rootDoc) && Doc.AddDocToList(Doc.UserDoc().myPresentations as Doc, "data", this.rootDoc)); } + @action updateCurrentPresentation = () => { Doc.UserDoc().activePresentation = this.rootDoc; document.addEventListener("keydown", this.keyEvents, true); @@ -260,7 +261,8 @@ export class PresBox extends ViewBoxBaseComponent if (presTargetDoc?.lastFrame !== undefined) { presTargetDoc._currentFrame = 0; } - this._selectedArray.splice(0, this._selectedArray.length, this.childDocs[index]); //Update selected array + this._selectedArray.clear(); + this.childDocs[index] && this._selectedArray.set(this.childDocs[index], undefined); //Update selected array //Handles movement to element if (this.layoutDoc._viewType === "stacking") this.navigateToElement(this.childDocs[index]); this.onHideDocument(); //Handles hide after/before @@ -297,7 +299,7 @@ export class PresBox extends ViewBoxBaseComponent const docToJump = curDoc; const willZoom = false; const presStatus = this.rootDoc.presStatus; - const selViewCache = Array.from(this._selectedArray); + const selViewCache = Array.from(this._selectedArray.keys()); const dragViewCache = Array.from(this._dragArray); const eleViewCache = Array.from(this._eleArray); const self = this; @@ -305,7 +307,8 @@ export class PresBox extends ViewBoxBaseComponent const presDocView = DocumentManager.Instance.getDocumentView(self.rootDoc); if (presDocView) SelectionManager.SelectDoc(presDocView, false); self.rootDoc.presStatus = presStatus; - self._selectedArray.splice(0, self._selectedArray.length, ...selViewCache); + self._selectedArray.clear(); + selViewCache.forEach(doc => self._selectedArray.set(doc, undefined)); self._dragArray.splice(0, self._dragArray.length, ...dragViewCache); self._eleArray.splice(0, self._eleArray.length, ...eleViewCache); }); @@ -621,14 +624,14 @@ export class PresBox extends ViewBoxBaseComponent */ @action sortArray = (): Doc[] => { - return this.childDocs.filter(doc => this._selectedArray.includes(doc)); + return this.childDocs.filter(doc => this._selectedArray.has(doc)); } /** * Method to get the list of selected items in the order in which they have been selected */ @computed get listOfSelected() { - const list = this._selectedArray.map((doc: Doc, index: any) => { + const list = Array.from(this._selectedArray.keys()).map((doc: Doc, index: any) => { const curDoc = Cast(doc, Doc, null); const tagDoc = Cast(curDoc.presentationTargetDoc!, Doc, null); if (tagDoc) return
{index + 1}. {curDoc.title}
; @@ -654,8 +657,8 @@ export class PresBox extends ViewBoxBaseComponent //Command click @action multiSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement) => { - if (!this._selectedArray.includes(doc)) { - this._selectedArray.push(doc); + if (!this._selectedArray.has(doc)) { + this._selectedArray.set(doc, undefined); this._eleArray.push(ref); this._dragArray.push(drag); } @@ -665,11 +668,11 @@ export class PresBox extends ViewBoxBaseComponent //Shift click @action shiftSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement) => { - this._selectedArray.length = 0; + this._selectedArray.clear(); // const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); if (this.activeItem) { for (let i = Math.min(this.itemIndex, this.childDocs.indexOf(doc)); i <= Math.max(this.itemIndex, this.childDocs.indexOf(doc)); i++) { - this._selectedArray.push(this.childDocs[i]); + this._selectedArray.set(this.childDocs[i], undefined); this._eleArray.push(ref); this._dragArray.push(drag); } @@ -680,7 +683,8 @@ export class PresBox extends ViewBoxBaseComponent //regular click @action regularSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement, focus: boolean) => { - this._selectedArray.splice(0, this._selectedArray.length, doc); + this._selectedArray.clear(); + this._selectedArray.set(doc, undefined); this._eleArray.splice(0, this._eleArray.length, ref); this._dragArray.splice(0, this._dragArray.length, drag); focus && this.selectElement(doc); @@ -704,10 +708,10 @@ export class PresBox extends ViewBoxBaseComponent case "Backspace": if (this.layoutDoc.presStatus === "edit") { undoBatch(action(() => { - for (const doc of this._selectedArray) { + for (const doc of Array.from(this._selectedArray.keys())) { this.removeDocument(doc); } - this._selectedArray.length = 0; + this._selectedArray.clear(); this._eleArray.length = 0; this._dragArray.length = 0; }))(); @@ -716,7 +720,7 @@ export class PresBox extends ViewBoxBaseComponent break; case "Escape": if (CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) { this.updateMinimize(); } - else if (this.layoutDoc.presStatus === "edit") { this._selectedArray.length = this._eleArray.length = this._dragArray.length = 0; } + else if (this.layoutDoc.presStatus === "edit") { this._selectedArray.clear(); this._eleArray.length = this._dragArray.length = 0; } else this.layoutDoc.presStatus = "edit"; if (this._presTimer) clearTimeout(this._presTimer); handled = true; @@ -725,7 +729,7 @@ export class PresBox extends ViewBoxBaseComponent case "Right": case "ArrowRight": if (e.shiftKey) { // TODO: update to work properly this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) + 1; - this._selectedArray.push(this.childDocs[this.rootDoc._itemIndex]); + this._selectedArray.set(this.childDocs[this.rootDoc._itemIndex], undefined); } else { this.next(); if (this._presTimer) clearTimeout(this._presTimer); @@ -736,7 +740,7 @@ export class PresBox extends ViewBoxBaseComponent case "Left": case "ArrowLeft": if (e.shiftKey) { // TODO: update to work properly this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) - 1; - this._selectedArray.push(this.childDocs[this.rootDoc._itemIndex]); + this._selectedArray.set(this.childDocs[this.rootDoc._itemIndex], undefined); } else { this.back(); if (this._presTimer) clearTimeout(this._presTimer); @@ -750,7 +754,8 @@ export class PresBox extends ViewBoxBaseComponent break; case "a": if ((e.metaKey || e.altKey) && this.layoutDoc.presStatus === "edit") { - this._selectedArray.splice(0, this._selectedArray.length, ...this.childDocs); + this._selectedArray.clear(); + this.childDocs.forEach(doc => this._selectedArray.set(doc, undefined)); handled = true; } default: diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 0dc8a2148..2d7a768cc 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -141,8 +141,8 @@ export class PresElementBox extends ViewBoxBaseComponent { @@ -171,7 +171,7 @@ export class PresElementBox extends ViewBoxBaseComponent= 1) { const doc = document.createElement('div'); doc.className = "presItem-multiDrag"; - doc.innerText = "Move " + PresBox.Instance._selectedArray.length + " slides"; + doc.innerText = "Move " + PresBox.Instance._selectedArray.size + " slides"; doc.style.position = 'absolute'; doc.style.top = (e.clientY) + 'px'; doc.style.left = (e.clientX - 50) + 'px'; @@ -226,8 +226,8 @@ export class PresElementBox extends ViewBoxBaseComponent { this.props.removeDocument?.(this.rootDoc); - if (PresBox.Instance._selectedArray.includes(this.rootDoc)) { - PresBox.Instance._selectedArray.splice(PresBox.Instance._selectedArray.indexOf(this.rootDoc), 1); + if (PresBox.Instance._selectedArray.has(this.rootDoc)) { + PresBox.Instance._selectedArray.delete(this.rootDoc); } e.stopPropagation(); }); @@ -275,7 +275,7 @@ export class PresElementBox extends ViewBoxBaseComponent= 300; const miniView: boolean = this.toolbarWidth <= 100; -- cgit v1.2.3-70-g09d2 From 57d7db6b5dc20b22a450076965b938cf7dcd4bf2 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Mon, 26 Oct 2020 01:44:58 +0800 Subject: Pres element selection + dragging items directly into presentation --- src/client/views/PropertiesView.tsx | 2 +- src/client/views/nodes/PresBox.tsx | 72 +++++++++++++++++-------------------- 2 files changed, 34 insertions(+), 40 deletions(-) (limited to 'src/client/views/PropertiesView.tsx') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 0d4b5992b..4dea0ddaa 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -47,7 +47,7 @@ export class PropertiesView extends React.Component { @computed get selectedDoc() { return SelectionManager.SelectedSchemaDoc() || this.selectedDocumentView?.rootDoc; } @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) return SelectionManager.SelectedDocuments()[0]; - if (PresBox.Instance?._selectedArray) return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); + if (PresBox.Instance?._selectedArray.size) return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); return undefined; } @computed get isPres(): boolean { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 22dd4ce65..67a3fce64 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -124,8 +124,7 @@ export class PresBox extends ViewBoxBaseComponent } @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) return SelectionManager.SelectedDocuments()[0]; - if (this._selectedArray) return DocumentManager.Instance.getDocumentView(this.rootDoc); - return undefined; + if (this._selectedArray.size) return DocumentManager.Instance.getDocumentView(this.rootDoc); } @computed get isPres(): boolean { document.removeEventListener("keydown", PresBox.keyEventsWrapper, true); @@ -173,10 +172,6 @@ export class PresBox extends ViewBoxBaseComponent document.removeEventListener("keydown", PresBox.keyEventsWrapper, true); document.addEventListener("keydown", PresBox.keyEventsWrapper, true); PresBox.Instance = this; - console.log("PresBox.Instance: " + PresBox.Instance) - console.log("Active item title: " + this.activeItem.title) - console.log("ChildDocs length: " + this.childDocs.length) - console.log("rootDoc.title: " + this.rootDoc.title) } /** @@ -521,6 +516,7 @@ export class PresBox extends ViewBoxBaseComponent @action toggleExpandMode = () => { runInAction(() => this._expandBoolean = !this._expandBoolean); + this.rootDoc.expandBoolean = this._expandBoolean; this.childDocs.forEach((doc) => { doc.presExpandInlineButton = this._expandBoolean; }); @@ -609,23 +605,28 @@ export class PresBox extends ViewBoxBaseComponent addDocumentFilter = (doc: Doc | Doc[]) => { const docs = doc instanceof Doc ? [doc] : doc; docs.forEach((doc, i) => { - console.log(doc); - console.log(doc.title); if (doc.type === DocumentType.LABEL) { const audio = Cast(doc.annotationOn, Doc, null); if (audio) { - audio.aliasOf instanceof Doc; audio.presStartTime = NumCast(doc.audioStart); audio.presEndTime = NumCast(doc.audioEnd); audio.presDuration = NumCast(doc.audioEnd) - NumCast(doc.audioStart); TabDocView.PinDoc(audio, false, true); - setTimeout(() => this.removeDocument(doc), 1); + setTimeout(() => this.removeDocument(doc), 0); return false; } } else { - doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf); - !this.childDocs.includes(doc) && (doc.presMovement = PresMovement.Zoom); - if (this._expandBoolean) doc.presExpandInlineButton = true; + if (!doc.aliasOf) { + const original = Doc.MakeAlias(doc); + TabDocView.PinDoc(original); + setTimeout(() => this.removeDocument(doc), 0); + return false; + } else { + doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf); + doc.presMovement = PresMovement.Zoom; + doc.title = doc.title + " - Slide"; + if (this._expandBoolean) doc.presExpandInlineButton = true; + } } }); return true; @@ -669,7 +670,6 @@ export class PresBox extends ViewBoxBaseComponent @action selectElement = (doc: Doc) => { const context = Cast(doc.context, Doc, null); - console.log(context.type); this.gotoDocument(this.childDocs.indexOf(doc)); if (doc.presPinView || doc.presentationTargetDoc === this.layoutDoc.presCollection) setTimeout(() => this.updateCurrentPresentation(context), 0); else this.updateCurrentPresentation(context); @@ -754,7 +754,6 @@ export class PresBox extends ViewBoxBaseComponent case "Right": case "ArrowRight": if (this.itemIndex >= this.childDocs.length - 1) return; if (e.shiftKey) { // TODO: update to work properly - // console.log("Down: " + this.rootDoc._itemIndex, this.itemIndex, this.childDocs.length) this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) + 1; this._selectedArray.set(this.childDocs[this.rootDoc._itemIndex], undefined); } else { @@ -767,7 +766,6 @@ export class PresBox extends ViewBoxBaseComponent case "Left": case "ArrowLeft": if (this.itemIndex === 0) return; if (e.shiftKey) { // TODO: update to work properly - // console.log("Up: " + this.rootDoc._itemIndex, this.itemIndex, this.childDocs.length) this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) - 1; this._selectedArray.set(this.childDocs[this.rootDoc._itemIndex], undefined); } else { @@ -913,7 +911,7 @@ export class PresBox extends ViewBoxBaseComponent if (change) timeInMS += change; if (timeInMS < 100) timeInMS = 100; if (timeInMS > 10000) timeInMS = 10000; - this._selectedArray?.forEach((doc) => doc.presTransition = timeInMS); + Array.from(this._selectedArray.keys()).forEach((doc) => doc.presTransition = timeInMS); } // Converts seconds to ms and updates presDuration @@ -922,7 +920,7 @@ export class PresBox extends ViewBoxBaseComponent if (change) timeInMS += change; if (timeInMS < 100) timeInMS = 100; if (timeInMS > 20000) timeInMS = 20000; - this._selectedArray?.forEach((doc) => doc.presDuration = timeInMS); + Array.from(this._selectedArray.keys()).forEach((doc) => doc.presDuration = timeInMS); } /** @@ -930,7 +928,7 @@ export class PresBox extends ViewBoxBaseComponent */ @undoBatch updateMovement = action((movement: any, all?: boolean) => { - const array: any[] = all ? this.childDocs : this._selectedArray; + const array: any[] = all ? this.childDocs : Array.from(this._selectedArray.keys()); array.forEach((doc) => { switch (movement) { case PresMovement.Zoom: //Pan and zoom @@ -954,21 +952,21 @@ export class PresBox extends ViewBoxBaseComponent @action updateHideBefore = (activeItem: Doc) => { activeItem.presHideBefore = !activeItem.presHideBefore; - this._selectedArray?.forEach((doc) => doc.presHideBefore = activeItem.presHideBefore); + Array.from(this._selectedArray.keys()).forEach((doc) => doc.presHideBefore = activeItem.presHideBefore); } @undoBatch @action updateHideAfter = (activeItem: Doc) => { activeItem.presHideAfter = !activeItem.presHideAfter; - this._selectedArray?.forEach((doc) => doc.presHideAfter = activeItem.presHideAfter); + Array.from(this._selectedArray.keys()).forEach((doc) => doc.presHideAfter = activeItem.presHideAfter); } @undoBatch @action updateOpenDoc = (activeItem: Doc) => { activeItem.openDocument = !activeItem.openDocument; - this._selectedArray.forEach((doc) => { + Array.from(this._selectedArray.keys()).forEach((doc) => { doc.openDocument = activeItem.openDocument; }); } @@ -976,7 +974,7 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch @action updateEffect = (effect: any, all?: boolean) => { - const array: any[] = all ? this.childDocs : this._selectedArray; + const array: any[] = all ? this.childDocs : Array.from(this._selectedArray.keys()); array.forEach((doc) => { const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); switch (effect) { @@ -1046,8 +1044,8 @@ export class PresBox extends ViewBoxBaseComponent { this._batch = UndoManager.StartBatch("presTransition"); }} - onPointerUp={() => { if (this._batch) this._batch.end(); }} + onPointerDown={() => this._batch = UndoManager.StartBatch("presTransition")} + onPointerUp={() => this._batch?.end()} onChange={(e: React.ChangeEvent) => { e.stopPropagation(); this.setTransitionTime(e.target.value); @@ -1197,7 +1195,7 @@ export class PresBox extends ViewBoxBaseComponent
: (null)} {this.panable || this.scrollable || this.targetDoc.type === DocumentType.COMPARISON ? 'Pinned view' : (null)}
-
{activeItem.presPinView ? "Turn off pin with view" : "Pin with current view"}
}>
{activeItem.presPinView ? "Turn off pin with view" : "Turn on pin with view"}
}>
{ activeItem.presPinView = !activeItem.presPinView; targetDoc.presPinView = activeItem.presPinView; @@ -1867,7 +1865,7 @@ export class PresBox extends ViewBoxBaseComponent
*/}
{"View paths"}
}> -
1 ? 1 : 0.3, color: this._pathBoolean ? '#5B9FDD' : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}> +
1 ? 1 : 0.3, color: this._pathBoolean ? PresColors.DarkBlue : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}>
@@ -1876,7 +1874,7 @@ export class PresBox extends ViewBoxBaseComponent
{this._expandBoolean ? "Minimize all" : "Expand all"}
}>
{/* */} @@ -1884,13 +1882,13 @@ export class PresBox extends ViewBoxBaseComponent
{presKeyEvents ? "Keys are active" : "Keys are not active - click anywhere on the presentation trail to activate keys"}
}> -
- +
+
{propTitle}
}>
- 0 ? '#5B9FDD' : 'white' }} /> + 0 ? PresColors.DarkBlue : 'white' }} />
@@ -1917,15 +1915,15 @@ export class PresBox extends ViewBoxBaseComponent } -
0 ? 1 : 0.3 }}> +
-
(this.childDocs.length > 0) && (this.layoutDoc.presStatus = "manual")}> +
(this.childDocs.length) && (this.layoutDoc.presStatus = "manual"))}>
200 ? "inline-flex" : "none" }}>  Present
{(mode === CollectionViewType.Carousel3D || isMini) ? (null) :
{ - if (this.childDocs.length > 0) this.presentTools = !this.presentTools; + if (this.childDocs.length) this.presentTools = !this.presentTools; }))}> {this.presentDropdown} @@ -2046,10 +2044,6 @@ export class PresBox extends ViewBoxBaseComponent render() { // calling this method for keyEvents this.isPres; - // console.log("ActivePres Title: " + Cast(Doc.UserDoc().activePresentation, Doc, null).title); - // for (const doc of this._selectedArray) { - // console.log(doc.title); - // } // needed to ensure that the childDocs are loaded for looking up fields this.childDocs.slice(); const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; @@ -2057,7 +2051,7 @@ export class PresBox extends ViewBoxBaseComponent return CurrentUserUtils.OverlayDocs.includes(this.rootDoc) ?
-
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
 +
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
{ this.back(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
{this.layoutDoc.presStatus === PresStatus.Autoplay ? "Pause" : "Autoplay"}
}>
 -- cgit v1.2.3-70-g09d2 From 2b580e4d8acfa1ce8ddb7a323391ccfb90885117 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 28 Oct 2020 14:48:04 -0400 Subject: fixed dark scheme mode for menu, properties view, and minimap button. --- src/client/views/ContextMenu.scss | 4 --- src/client/views/MainView.scss | 39 +++++++++++++++++++++++++++- src/client/views/MainView.tsx | 9 ++++--- src/client/views/PropertiesView.scss | 8 ++---- src/client/views/PropertiesView.tsx | 16 ++++++------ src/client/views/collections/TabDocView.scss | 1 - src/client/views/collections/TabDocView.tsx | 3 ++- src/client/views/nodes/ColorBox.tsx | 4 +-- 8 files changed, 57 insertions(+), 27 deletions(-) (limited to 'src/client/views/PropertiesView.tsx') diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index 7467bc043..b514de5f2 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -43,7 +43,6 @@ .contextMenu-item { // width: 11vw; //10vw height: 25px; //2vh - background: whitesmoke; display: flex; //comment out to allow search icon to be inline with search text justify-content: left; align-items: center; @@ -58,7 +57,6 @@ // padding: 10px 0px 10px 0px; white-space: nowrap; font-size: 13px; - color: grey; letter-spacing: 2px; text-transform: uppercase; padding-right: 30px; @@ -75,7 +73,6 @@ .contextMenu-description { // width: 11vw; //10vw - background: whitesmoke; display: flex; //comment out to allow search icon to be inline with search text justify-content: left; -webkit-touch-callout: none; @@ -89,7 +86,6 @@ // padding: 10px 0px 10px 0px; white-space: nowrap; font-size: 10px; - color: grey; letter-spacing: 1px; text-transform: uppercase; padding-right: 30px; diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index d571a0428..b49990433 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -153,7 +153,7 @@ cursor: auto; } -.mainView-innerContent { +.mainView-innerContent, .mainView-innerContent-dark { display: contents; flex-direction: row; position: relative; @@ -174,6 +174,43 @@ right: 0; position: absolute; z-index: 2; + background-color: rgb(159, 159, 159); + .editable-title { + background-color: lightgrey; + } + } + +} +.mainView-innerContent-dark +{ + .propertiesView { + background-color: #252525; + input { + background-color: dimgrey; + } + .propertiesView-sharingTable + { + background-color: dimgrey; + } + .editable-title { + background-color: dimgrey; + } + .propertiesView-field { + background-color: dimgrey; + } + } + .mainView-propertiesDragger, + .mainView-libraryHandle { + background: #353535; + } +} +.mainView-container-dark { + .contextMenu-cont { + background: dimgrey; + color: white; + input::placeholder { + color:white; + } } } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index b3d198bd1..3a3dbc68f 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -232,6 +232,7 @@ export class MainView extends React.Component { if (this.darkScheme) { switch (doc?.type) { case DocumentType.PRESELEMENT: return "dimgrey"; + case DocumentType.PRES: return "#3e3e3e"; case DocumentType.FONTICON: return "black"; case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d"; case DocumentType.LINK: @@ -414,18 +415,18 @@ export class MainView extends React.Component { @computed get mainInnerContent() { return <> {this.menuPanel} -
+
{this.flyout} -
+ < div className="mainView-libraryHandle" style={{ display: !this._flyoutWidth ? "none" : undefined, }} onPointerDown={this.onFlyoutPointerDown} >
{this.dockingContent}
- +
- {this.propertiesWidth() < 10 ? (null) : } + {this.propertiesWidth() < 10 ? (null) : }
; } diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index ce2a87733..1365725cb 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -1,6 +1,4 @@ .propertiesView { - - background-color: rgb(205, 205, 205); height: 100%; font-family: "Noto Sans"; cursor: auto; @@ -9,7 +7,6 @@ overflow-y: auto; .propertiesView-title { - background-color: rgb(159, 159, 159); text-align: center; padding-top: 12px; padding-bottom: 12px; @@ -335,7 +332,6 @@ } } } - .propertiesView-fields { //border-bottom: 1px solid black; //padding: 8.5px; @@ -390,7 +386,7 @@ } } - .field { + .propertiesView-field { display: flex; font-size: 7px; background-color: #e8e8e8; @@ -400,7 +396,7 @@ padding-left: 3px; } - .uneditable-field { + .propertiesView-uneditable-field { display: flex; overflow-y: visible; margin-bottom: 2px; diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 4dea0ddaa..2a13ab937 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -5,7 +5,7 @@ import { intersection } from "lodash"; import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { ColorState, SketchPicker } from "react-color"; -import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, WidthSym } from "../../fields/Doc"; +import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, WidthSym, Opt } from "../../fields/Doc"; import { Id } from "../../fields/FieldSymbols"; import { InkField } from "../../fields/InkField"; import { ComputedField } from "../../fields/ScriptField"; @@ -36,6 +36,7 @@ const _global = (window /* browser */ || global /* node */) as any; interface PropertiesViewProps { width: number; height: number; + backgroundColor: (doc: Opt, renderDepth: number) => Opt; } @observer @@ -144,7 +145,7 @@ export class PropertiesView extends React.Component {
); } } - rows.push(
+ rows.push(
{ docs.forEach(doc => docvals.add(doc[key])); const contents = Array.from(docvals.keys()).length > 1 ? "-multiple" : docs[0][key]; if (key[0] === "#") { - rows.push(
+ rows.push(
{key}  
); } else if (contents !== undefined) { const value = Field.toString(contents as Field); if (noviceReqFields.includes(key) || key.indexOf("lastModified") !== -1) { - rows.push(
+ rows.push(
{key + ": "}
{value}
); @@ -200,7 +201,7 @@ export class PropertiesView extends React.Component { } } } - rows.push(
+ rows.push(
{ return !this.selectedDoc ? (null) : CollectionDockingView.AddSplit(doc, "right")} />; } - previewBackground = () => "lightgrey"; @computed get layoutPreview() { if (SelectionManager.SelectedDocuments().length > 1) { return "-- multiple selected --"; @@ -270,7 +270,7 @@ export class PropertiesView extends React.Component { renderDepth={1} rootSelected={returnFalse} treeViewDoc={undefined} - backgroundColor={this.previewBackground} + backgroundColor={this.props.backgroundColor} fitToBox={true} FreezeDimensions={true} dontCenter={true} @@ -856,7 +856,7 @@ export class PropertiesView extends React.Component { if (this.selectedDoc && !this.isPres) { return
diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss index edf556c9f..9acbc4f85 100644 --- a/src/client/views/collections/TabDocView.scss +++ b/src/client/views/collections/TabDocView.scss @@ -43,7 +43,6 @@ input.lm_title { right: 0; width: 45px; height: 45px; - background: white; transform: translate(20px, 20px) rotate(45deg); border-radius: 30px; padding: 2px; diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 82530c26d..38b9b399d 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -336,7 +336,8 @@ export class TabDocView extends React.Component {
{"toggle minimap"}
}> -
e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} > +
e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} + style={{ background: CollectionDockingView.Instance.props.backgroundColor?.(this._document, 0) }} >
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index fcc9e50f5..4fb350b55 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -69,11 +69,11 @@ export class ColorBox extends ViewBoxBaseComponent StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeWidth = Number(e.target.value)); }} /> -
{ActiveInkBezierApprox() ?? 2}
+ {/*
{ActiveInkBezierApprox() ?? 2}
) => { SetActiveBezierApprox(e.target.value); SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeBezier = e.target.value); - }} /> + }} /> */}

-- cgit v1.2.3-70-g09d2 From ad2aab77ec36f2865f543ba7ba77bbfa86f60dc9 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 30 Oct 2020 15:21:16 -0400 Subject: closing Layout section of PropertiesView for efficiency --- src/client/views/PropertiesView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/PropertiesView.tsx') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 2a13ab937..42f61f99a 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -62,7 +62,7 @@ export class PropertiesView extends React.Component { @observable openOptions: boolean = true; @observable openSharing: boolean = true; @observable openFields: boolean = true; - @observable openLayout: boolean = true; + @observable openLayout: boolean = false; @observable openContexts: boolean = true; @observable openAppearance: boolean = true; @observable openTransform: boolean = true; -- cgit v1.2.3-70-g09d2 From 6c6da53ef18ed6d28c507115571fcdb980ec260c Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Sun, 1 Nov 2020 18:04:08 +0800 Subject: pinWithView works with view paths + removed Pan options and Scroll options --- src/client/views/DocumentButtonBar.tsx | 6 ++- src/client/views/PropertiesView.tsx | 4 +- .../collectionFreeForm/CollectionFreeFormView.scss | 9 ++++- src/client/views/nodes/PresBox.tsx | 43 +++++++++++++++++----- .../views/presentationview/PresElementBox.tsx | 4 +- 5 files changed, 49 insertions(+), 17 deletions(-) (limited to 'src/client/views/PropertiesView.tsx') diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 3b22cf51c..fa0b9a238 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -201,13 +201,15 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV if (targetDoc) { TabDocView.PinDoc(targetDoc, false); const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1]; - if (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.WEB || targetDoc._viewType === CollectionViewType.Stacking) { + const scrollable: boolean = (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.RTF || targetDoc.type === DocumentType.WEB || targetDoc._viewType === CollectionViewType.Stacking); + const pannable: boolean = ((targetDoc.type === DocumentType.COL && targetDoc._viewType === CollectionViewType.Freeform) || targetDoc.type === DocumentType.IMG); + if (scrollable) { const scroll = targetDoc._scrollTop; activeDoc.presPinView = true; activeDoc.presPinViewScroll = scroll; } else if (targetDoc.type === DocumentType.VID) { activeDoc.presPinTimecode = targetDoc._currentTimecode; - } else if ((targetDoc.type === DocumentType.COL && targetDoc._viewType === CollectionViewType.Freeform) || targetDoc.type === DocumentType.IMG) { + } else if (pannable) { const x = targetDoc._panX; const y = targetDoc._panY; const scale = targetDoc._viewScale; diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 4dea0ddaa..9b77e2736 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1029,7 +1029,7 @@ export class PropertiesView extends React.Component { {PresBox.Instance.progressivizeDropdown}
: null}
} */} - {!selectedItem || (!scrollable && !pannable) ? (null) :
+ {/* {!selectedItem || (!scrollable && !pannable) ? (null) :
{ this.openSlideOptions = !this.openSlideOptions; })} style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}> @@ -1041,7 +1041,7 @@ export class PropertiesView extends React.Component { {this.openSlideOptions ?
{PresBox.Instance.optionsDropdown}
: null} -
} +
} */} {/*
{ this.openAddSlide = !this.openAddSlide; })} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 75cbc20ca..e92100c50 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -57,7 +57,7 @@ min-height: 15px; text-align: center; background-color: #69a6db; - border-radius: 5px; + border-radius: 10%; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-family: Roboto; font-weight: 500; @@ -65,6 +65,13 @@ } } +.pathOrder-presPinView { + position: absolute; + z-index: 190000; + border-style: dashed; + border-color: #69a5db; +} + .progressivizeButton { position: absolute; display: grid; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index f8f794a4b..d7f15166f 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -808,6 +808,8 @@ export class PresBox extends ViewBoxBaseComponent @computed get order() { const order: JSX.Element[] = []; const docs: Doc[] = []; + const presCollection = Cast(this.rootDoc.presCollection, Doc, null); + const dv = DocumentManager.Instance.getDocumentView(presCollection); this.childDocs.filter(doc => Cast(doc.presentationTargetDoc, Doc, null)).forEach((doc, index) => { const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); const srcContext = Cast(tagDoc.context, Doc, null); @@ -816,8 +818,9 @@ export class PresBox extends ViewBoxBaseComponent const edge = Math.max(width, height); const fontSize = edge * 0.8; const gap = 2; - // Case A: Document is contained within the collection - if (this.rootDoc.presCollection === srcContext) { + if (presCollection === srcContext) { + // Case A: Document is contained within the collection + console.log(`-------Case A: ${index}-------`); if (docs.includes(tagDoc)) { const prevOccurances: number = this.getAllIndexes(docs, tagDoc).length; docs.push(tagDoc); @@ -838,15 +841,33 @@ export class PresBox extends ViewBoxBaseComponent
{index + 1}
); } + } else if (doc.presPinView && presCollection === tagDoc && dv) { // Case B: Document is presPinView and is presCollection - } else if (doc.pinWithView && this.layoutDoc.presCollection === tagDoc) { + console.log(`-------Case B: ${index}-------`); + const scale: number = 1 / NumCast(doc.presPinViewScale); + const height: number = dv.props.PanelHeight() * scale; + const width: number = dv.props.PanelWidth() * scale; + const indWidth = width / 10; + const indHeight = Math.max(height / 10, 15); + const indEdge = Math.max(indWidth, indHeight); + const indFontSize = indEdge * 0.8; + const xLoc: number = NumCast(doc.presPinViewX) - (width / 2); + const yLoc: number = NumCast(doc.presPinViewY) - (height / 2); docs.push(tagDoc); order.push( -
-
{index + 1}
-
); - // Case C: Document is not contained within presCollection + <> +
this.selectElement(doc)} + > +
{index + 1}
+
+
+ ); } else { + // Case C: Document is not contained within presCollection + console.log(`-------Case C: ${index}-------`); docs.push(tagDoc); order.push(
@@ -875,9 +896,11 @@ export class PresBox extends ViewBoxBaseComponent const n1y = NumCast(tagDoc.y) + (NumCast(tagDoc._height) / 2); if (index = 0) pathPoints = n1x + "," + n1y; else pathPoints = pathPoints + " " + n1x + "," + n1y; - } else { - if (index = 0) pathPoints = 0 + "," + 0; - else pathPoints = pathPoints + " " + 0 + "," + 0; + } else if (doc.presPinView) { + const n1x = NumCast(doc.presPinViewX); + const n1y = NumCast(doc.presPinViewY); + if (index = 0) pathPoints = n1x + "," + n1y; + else pathPoints = pathPoints + " " + n1x + "," + n1y; } }); return ( = React.createRef(); -- cgit v1.2.3-70-g09d2