From 175d3fca55bd1838203d67884bb5206597e68b60 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 20 Nov 2020 19:23:02 -0500 Subject: added a preliminary Layer mechanism. changed documentDecrations to not go out of the mainDocument area. changed parentActive to work "recursively" through stacks of background documents. --- src/client/views/nodes/VideoBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index bc69a3954..8ce76a347 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -393,7 +393,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent
-- cgit v1.2.3-70-g09d2 From 534a4e81e84adbd46b629731ac3ca7d3ea41a670 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Sun, 29 Nov 2020 11:15:30 +0800 Subject: temporal media updates for pres. trails --- deploy/index.html | 4 +- src/client/views/MainView.tsx | 8 +- src/client/views/PropertiesView.tsx | 8 +- src/client/views/nodes/AudioBox.tsx | 22 +- src/client/views/nodes/PresBox.scss | 83 +++- src/client/views/nodes/PresBox.tsx | 323 +++++++++----- src/client/views/nodes/VideoBox.tsx | 51 ++- .../views/presentationview/PresElementBox.scss | 41 +- .../views/presentationview/PresElementBox.tsx | 3 +- .../views/presentationview/PresProperties.tsx | 492 +++++++++++++++++++++ 10 files changed, 901 insertions(+), 134 deletions(-) create mode 100644 src/client/views/presentationview/PresProperties.tsx (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/deploy/index.html b/deploy/index.html index af67ac301..beb7dd205 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -14,8 +14,8 @@ justify-content: center; background-color: #AEDDF8; z-index: 10; - width: 100%; - height: 100%; + width: 100vw; + height: 100vh; } .dash-loader-container { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 03d2e33df..b1e008dad 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -87,11 +87,11 @@ export class MainView extends React.Component { componentDidMount() { document.getElementById("root")?.addEventListener("scroll", e => ((ele) => ele.scrollLeft = ele.scrollTop = 0)(document.getElementById("root")!)); const ele = document.getElementById("loader"); + if (ele) { - setTimeout(() => { - // remove from DOM - ele.outerHTML = ''; - }, 0); + // remove from DOM + setTimeout(() => { ele.style.opacity = "0"; }, 0); + setTimeout(() => ele.outerHTML = '', 10000); } new InkStrokeProperties(); this._sidebarContent.proto = undefined; diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 97bca110b..c656a020e 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1007,7 +1007,7 @@ export class PropertiesView extends React.Component {
{ this.openPresTransitions = !this.openPresTransitions; })} style={{ backgroundColor: this.openPresTransitions ? "black" : "" }}> -     Transitions +     Transitions
@@ -1029,17 +1029,17 @@ export class PropertiesView extends React.Component { {PresBox.Instance.progressivizeDropdown}
: null}
} */} - {!selectedItem ? (null) :
+ {!selectedItem || (type !== DocumentType.VID && type !== DocumentType.AUDIO) ? (null) :
{ this.openSlideOptions = !this.openSlideOptions; })} style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}> -     {scrollable ? "Scroll options" : "Pan options"} +     {type === DocumentType.AUDIO ? "Audio Options" : "Video Options"}
{this.openSlideOptions ?
- {PresBox.Instance.optionsDropdown} + {PresBox.Instance.mediaOptionsDropdown}
: null}
} {/*
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 1bdba7f9e..2527a2db1 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -48,9 +48,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent AudioBox._scrubTime, (time) => this.layoutDoc.playOnSelect && this.playFromTime(AudioBox._scrubTime)); - this._disposers._audioStart = reaction( + this._disposers.audioStart = reaction( () => this.Document._audioStart, (audioStart) => { if (audioStart !== undefined) { @@ -165,6 +165,20 @@ export class AudioBox extends ViewBoxAnnotatableComponent this.Document._audioStop, + (audioStop) => { + if (audioStop !== undefined) { + if (this.props.renderDepth !== -1 && !LinkDocPreview.TargetDoc && !FormattedTextBoxComment.linkDoc) { + const delay = this._audioRef.current ? 0 : 250; // wait for mainCont and try again to play + setTimeout(() => this._audioRef.current && this.pause(), delay); + setTimeout(() => { this.Document._audioStop = undefined; }, 10 + delay); + } + } + }, + { fireImmediately: true } + ); } playLink = (doc: Doc) => { diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 56b3b0593..6579dbf41 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -127,6 +127,17 @@ $light-background: #ececec; opacity: 0.8; } +.presBox-radioButtons { + background-color: rgba(0, 0, 0, 0.1); + + .checkbox-container { + margin-left: 10px; + display: inline-flex; + height: 20px; + align-items: center; + } +} + .presBox-ribbon { position: relative; display: inline; @@ -209,6 +220,42 @@ $light-background: #ececec; } @media screen and (-webkit-min-device-pixel-ratio:0) { + + .multiThumb-slider { + display: grid; + background-color: $light-background; + height: 10px; + border-radius: 10px; + overflow: hidden; + + .toolbar-slider { + margin-top: 0px; + background: none; + -webkit-appearance: none; + pointer-events: none; + } + + .toolbar-slider.start::-webkit-slider-thumb { + width: 10px; + pointer-events: auto; + -webkit-appearance: none; + height: 10px; + cursor: ew-resize; + background: $dark-blue; + box-shadow: -100vw 0 0 100vw $light-background; + } + + .toolbar-slider.end::-webkit-slider-thumb { + width: 10px; + pointer-events: auto; + -webkit-appearance: none; + height: 10px; + cursor: ew-resize; + background: $dark-blue; + box-shadow: -100vw 0 0 100vw $light-blue; + } + } + .toolbar-slider { margin-top: 5px; position: relative; @@ -219,7 +266,7 @@ $light-background: #ececec; height: 10px; border-radius: 10px; -webkit-appearance: none; - background-color: #ececec; + background-color: $light-background; } .toolbar-slider:focus { @@ -234,14 +281,44 @@ $light-background: #ececec; .toolbar-slider::-webkit-slider-thumb { width: 10px; + pointer-events: auto; -webkit-appearance: none; height: 10px; cursor: ew-resize; - background: #5b9ddd; - box-shadow: -100vw 0 0 100vw #aedef8; + background: $dark-blue; + box-shadow: -100vw 0 0 100vw $light-blue; + } + + .presBox-checkbox { + -webkit-appearance: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + margin: 0; + margin-right: 3px; + border-radius: 100%; + height: 15px; + width: 15px; + cursor: pointer; + background: $light-background; + } + + .presBox-checkbox:focus { + outline: none; + } + + .presBox-checkbox:hover { + background: #c0c0c0; + } + + .presBox-checkbox:checked { + background: $light-blue; } } + + .slider-headers { position: relative; display: grid; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 1405016ae..9fb07040d 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -24,7 +24,6 @@ import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionView, CollectionViewType } from "../collections/CollectionView"; import { TabDocView } from "../collections/TabDocView"; import { ViewBoxBaseComponent } from "../DocComponent"; -import { AudioBox } from "./AudioBox"; import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; import { FieldView, FieldViewProps } from './FieldView'; import "./PresBox.scss"; @@ -193,6 +192,10 @@ export class PresBox extends ViewBoxBaseComponent nextAudioVideo = (targetDoc: Doc, activeItem: Doc) => { if (targetDoc.type === DocumentType.AUDIO) { targetDoc._audioStart = NumCast(activeItem.presStartTime); + + } else if (targetDoc.type === DocumentType.VID) { + targetDoc._currentTimecode = NumCast(activeItem.presStartTime); + setTimeout(() => targetDoc._videoStart = true, 0); } // if (targetDoc.type === DocumentType.VID) { VideoBox.Instance.Play() }; activeItem.playNow = false; @@ -214,7 +217,6 @@ export class PresBox extends ViewBoxBaseComponent // If next slide is audio / video 'Play automatically' then the next slide should be played if (activeNext && (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) && activeNext.playAuto) { if (targetNext.type === DocumentType.AUDIO) targetNext._audioStart = NumCast(activeNext.presStartTime); - // if (targetNext.type === DocumentType.VID) { VideoBox.Instance.Play() }; } else if (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) { activeNext.playNow = true; console.log('play next after it is navigated to'); } } @@ -1071,6 +1073,7 @@ export class PresBox extends ViewBoxBaseComponent @computed get transitionDropdown() { const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; + const type: DocumentType = targetDoc.type; const isPresCollection: boolean = (targetDoc === this.layoutDoc.presCollection); const isPinWithView: boolean = BoolCast(activeItem.presPinView); if (activeItem && targetDoc) { @@ -1137,7 +1140,7 @@ export class PresBox extends ViewBoxBaseComponent {isPresCollection ? (null) :
{"Hide after presented"}
}>
this.updateHideAfter(activeItem)}>Hide after
}
{"Open document in a new tab"}
}>
this.updateOpenDoc(activeItem)}>Open
-
+ {(type === DocumentType.AUDIO || type === DocumentType.VID) ? (null) :
Slide Duration
-
+
} } }); } - @computed get optionsDropdown() { + + @computed get presPinViewOptionsDropdown() { const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; const presPinWithViewIcon = ; + return ( + <> + {this.panable || this.scrollable || this.targetDoc.type === DocumentType.COMPARISON ? 'Pinned view' : (null)} +
+
{activeItem.presPinView ? "Turn off pin with view" : "Turn on pin with 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; + activeItem.presPinViewX = x; + activeItem.presPinViewY = y; + activeItem.presPinViewScale = scale; + } + }}>Update
 : (null)} +
+ + ); + } + + @computed get panOptionsDropdown() { + const activeItem: Doc = this.activeItem; + const targetDoc: Doc = this.targetDoc; + return ( + <> + {this.panable ?
+
+
Pan X
+
+ ) => { const val = e.target.value; activeItem.presPinViewX = Number(val); })} /> +
+
+
+
Pan Y
+
+ ) => { const val = e.target.value; activeItem.presPinViewY = Number(val); })} /> +
+
+
+
Scale
+
+ ) => { const val = e.target.value; activeItem.presPinViewScale = Number(val); })} /> +
+
+
: (null)} + + ); + } + + @computed get scrollOptionsDropdown() { + const activeItem: Doc = this.activeItem; + const targetDoc: Doc = this.targetDoc; + return ( + <> + {this.scrollable ?
+
+
Scroll
+
+ ) => { const val = e.target.value; activeItem.presPinViewScroll = Number(val); })} /> +
+
+
: (null)} + + ); + } + + @computed get mediaOptionsDropdown() { + const activeItem: Doc = this.activeItem; + const targetDoc: Doc = this.targetDoc; if (activeItem && targetDoc) { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> -
+
+
Start playing:
+
+
+ activeItem.mediaPlay = "manual"} + checked={activeItem.mediaPlay === "manual"} + /> +
Start manually
+
+
+ activeItem.mediaPlay = "auto"} + checked={activeItem.mediaPlay === "auto"} + /> +
Play with slide
+
+
+ activeItem.mediaPlay = "onClick"} + checked={activeItem.mediaPlay === "onClick"} + /> +
Play on click
+
+
+
Stop playing:
+
+
+ activeItem.mediaStop = "manual"} + checked={activeItem.mediaStop === "manual"} + /> +
Stop manually
+
+
+ activeItem.mediaStop = "afterCurrent"} + checked={activeItem.mediaStop === "afterCurrent"} + /> +
After current slide
+
+
+ activeItem.mediaStop = "afterSlide"} + checked={activeItem.mediaStop === "afterSlide"} + /> +
After slide + {activeItem.mediaStop !== "afterSlide" ? + (null) + : +
{ e.stopPropagation(); this.openMovementDropdown = !this.openMovementDropdown; })} style={{ borderBottomLeftRadius: this.openMovementDropdown ? 0 : 5, border: this.openMovementDropdown ? `solid 2px ${PresColor.DarkBlue}` : 'solid 1px black' }}> + {this.setMovementName(activeItem.presMovement, activeItem)} + +
e.stopPropagation()} style={{ display: this.openMovementDropdown ? "grid" : "none" }}> +
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.None)}>None
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Zoom)}>Pan {"&"} Zoom
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Pan)}>Pan
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Jump)}>Jump cut
+
+
} +
+
+
+
Range:
+
+ this._batch = UndoManager.StartBatch("presEndTime")} + onPointerUp={() => this._batch?.end()} + onChange={(e: React.ChangeEvent) => { + e.stopPropagation(); + activeItem.presEndTime = Number(e.target.value); + }} /> + this._batch = UndoManager.StartBatch("presEndTime")} + onPointerUp={() => this._batch?.end()} + onChange={(e: React.ChangeEvent) => { + e.stopPropagation(); + activeItem.presStartTime = Number(e.target.value); + }} /> +
+
+
0 s
+
+
{Math.round(NumCast(activeItem.duration))} s
+
+
+ {/*
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.AUDIO ?
Start time
@@ -1267,98 +1483,7 @@ export class PresBox extends ViewBoxBaseComponent onChange={action((e: React.ChangeEvent) => { const val = e.target.value; activeItem.presEndTime = Number(val); })} />
: (null)} - {this.panable || this.scrollable || this.targetDoc.type === DocumentType.COMPARISON ? 'Pinned view' : (null)} -
-
{activeItem.presPinView ? "Turn off pin with view" : "Turn on pin with 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; - activeItem.presPinViewX = x; - activeItem.presPinViewY = y; - activeItem.presPinViewScale = scale; - } - }}>Update
 : (null)} -
- {this.panable ?
-
-
Pan X
-
- ) => { const val = e.target.value; activeItem.presPinViewX = Number(val); })} /> -
-
-
-
Pan Y
-
- ) => { const val = e.target.value; activeItem.presPinViewY = Number(val); })} /> -
-
-
-
Scale
-
- ) => { 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
-
*/} -
+
*/}
); diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 8ce76a347..998ca839d 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -21,6 +21,8 @@ import { documentSchema } from "../../../fields/documentSchemas"; import { Networking } from "../../Network"; import { SnappingManager } from "../../util/SnappingManager"; import { SelectionManager } from "../../util/SelectionManager"; +import { LinkDocPreview } from "./LinkDocPreview"; +import { FormattedTextBoxComment } from "./formattedText/FormattedTextBoxComment"; const path = require('path'); export const timeSchema = createSchema({ @@ -32,8 +34,9 @@ const VideoDocument = makeInterface(documentSchema, timeSchema); @observer export class VideoBox extends ViewBoxAnnotatableComponent(VideoDocument) { static _youtubeIframeCounter: number = 0; - private _reactionDisposer?: IReactionDisposer; - private _youtubeReactionDisposer?: IReactionDisposer; + // private _reactionDisposer?: IReactionDisposer; + // private _youtubeReactionDisposer?: IReactionDisposer; + private _disposers: { [name: string]: IReactionDisposer } = {}; private _youtubePlayer: YT.Player | undefined = undefined; private _videoRef: HTMLVideoElement | null = null; private _youtubeIframeId: number = -1; @@ -181,7 +184,32 @@ export class VideoBox extends ViewBoxAnnotatableComponent this.Document._videoStart, + (videoStart) => { + if (videoStart !== undefined) { + if (this.props.renderDepth !== -1 && !LinkDocPreview.TargetDoc && !FormattedTextBoxComment.linkDoc) { + const delay = this.player ? 0 : 250; // wait for mainCont and try again to play + setTimeout(() => this.player && this.Play(), delay); + setTimeout(() => { this.Document._videoStart = undefined; }, 10 + delay); + } + } + }, + { fireImmediately: true } + ); + this._disposers.videoStop = reaction( + () => this.Document._videoStop, + (videoStop) => { + if (videoStop !== undefined) { + if (this.props.renderDepth !== -1 && !LinkDocPreview.TargetDoc && !FormattedTextBoxComment.linkDoc) { + const delay = this.player ? 0 : 250; // wait for mainCont and try again to play + setTimeout(() => this.player && this.Pause(), delay); + setTimeout(() => { this.Document._videoStop = undefined; }, 10 + delay); + } + } + }, + { fireImmediately: true } + ); if (this.youtubeVideoId) { const youtubeaspect = 400 / 315; const nativeWidth = Doc.NativeWidth(this.layoutDoc); @@ -196,8 +224,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent this._fullScreen = vref.webkitDisplayingFullscreen); - this._reactionDisposer?.(); - this._reactionDisposer = reaction(() => (this.layoutDoc._currentTimecode || 0), + this._disposers.reactionDisposer?.(); + this._disposers.reactionDisposer = reaction(() => (this.layoutDoc._currentTimecode || 0), time => !this._playing && (vref.currentTime = time), { fireImmediately: true }); } } @@ -293,10 +322,10 @@ export class VideoBox extends ViewBoxAnnotatableComponent { - this._reactionDisposer?.(); - this._youtubeReactionDisposer?.(); - this._reactionDisposer = reaction(() => this.layoutDoc._currentTimecode, () => !this._playing && this.Seek((this.layoutDoc._currentTimecode || 0))); - this._youtubeReactionDisposer = reaction( + this._disposers.reactionDisposer?.(); + this._disposers.youtubeReactionDisposer?.(); + this._disposers.reactionDisposer = reaction(() => this.layoutDoc._currentTimecode, () => !this._playing && this.Seek((this.layoutDoc._currentTimecode || 0))); + this._disposers.youtubeReactionDisposer = reaction( () => !this.props.Document.isAnnotating && Doc.GetSelectedTool() === InkTool.None && this.props.isSelected(true) && !SnappingManager.GetIsDragging() && !DocumentDecorations.Instance.Interacting, (interactive) => iframe.style.pointerEvents = interactive ? "all" : "none", { fireImmediately: true }); }; diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index ed1aa9a1e..e1eeefc30 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -122,12 +122,6 @@ $slide-active: #5B9FDD; } - .presItem-slideButtons { - display: none; - } -} - -.presItem-slide:hover { .presItem-slideButtons { display: flex; grid-column: 7; @@ -162,6 +156,41 @@ $slide-active: #5B9FDD; } } +// .presItem-slide:hover { + // .presItem-slideButtons { + // display: flex; + // grid-column: 7; + // grid-row: 1/3; + // width: max-content; + // justify-self: right; + // justify-content: flex-end; + + // .slideButton { + // cursor: pointer; + // position: relative; + // border-radius: 100px; + // z-index: 300; + // width: 18px; + // height: 18px; + // display: flex; + // font-size: 12px; + // justify-self: center; + // align-self: center; + // background-color: rgba(0, 0, 0, 0.5); + // color: white; + // justify-content: center; + // align-items: center; + // transition: 0.2s; + // margin-right: 3px; + // } + + // .slideButton:hover { + // background-color: rgba(0, 0, 0, 1); + // transform: scale(1.2); + // } + // } + // } + .presItem-slide.active { box-shadow: 0 0 0px 1.5px $dark-blue; } diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 463249ab8..9ec39b792 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -348,6 +348,7 @@ export class PresElementBox extends ViewBoxBaseComponent activeItem.groupWithUp = !activeItem.groupWithUp} style={{ + zIndex: 1000 - this.indexInPres, fontWeight: 700, backgroundColor: activeItem.groupWithUp ? presColorBool ? presBoxColor : PresColor.DarkBlue : undefined, height: activeItem.groupWithUp ? 53 : 18, @@ -367,7 +368,7 @@ export class PresElementBox extends ViewBoxBaseComponent e.stopPropagation()} /> -
{activeItem.presPinView ? (<>View of {targetDoc.title}) : targetDoc.title}
+
{activeItem.presPinView ? (<>View of {targetDoc.title}) : targetDoc.title}
{this.renderEmbeddedInline} } ); diff --git a/src/client/views/presentationview/PresProperties.tsx b/src/client/views/presentationview/PresProperties.tsx new file mode 100644 index 000000000..edad41861 --- /dev/null +++ b/src/client/views/presentationview/PresProperties.tsx @@ -0,0 +1,492 @@ +import React from "react"; +import { action, computed, observable, reaction } from "mobx"; +import { Doc } from "../../../fields/Doc"; +import { BoolCast, Cast, NumCast } from "../../../fields/Types"; +import { undoBatch, UndoManager } from "../../util/UndoManager"; +import { PresBox, PresColor, PresEffect, PresMovement } from "../nodes/PresBox"; +import { DocumentType } from "../../documents/DocumentTypes"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { CollectionViewType } from "../collections/CollectionView"; +import { Tooltip } from "@material-ui/core"; + + +export class PresProperties { + + @observable public static Instance: PresProperties; + + @computed get pres(): PresBox { return PresBox.Instance; } + + @computed get activeItem() { return Cast(this.pres.childDocs[NumCast(PresBox.Instance.rootDoc._itemIndex)], Doc, null); } + @computed get targetDoc() { return Cast(this.pres.activeItem?.presentationTargetDoc, Doc, null); } + + @computed get scrollable(): boolean { + if (this.targetDoc.type === DocumentType.PDF || this.targetDoc.type === DocumentType.WEB || this.targetDoc.type === DocumentType.RTF || this.targetDoc._viewType === CollectionViewType.Stacking) return true; + else return false; + } + @computed get panable(): boolean { + if ((this.targetDoc.type === DocumentType.COL && this.targetDoc._viewType === CollectionViewType.Freeform) || this.targetDoc.type === DocumentType.IMG) return true; + else return false; + } + + + @observable private openMovementDropdown: boolean = false; + @observable private openEffectDropdown: boolean = false; + + _batch: UndoManager.Batch | undefined = undefined; + + + @computed get effectDirection(): string { + let effect = ''; + switch (this.targetDoc.presEffectDirection) { + case 'left': effect = "Enter from left"; break; + case 'right': effect = "Enter from right"; break; + case 'top': effect = "Enter from top"; break; + case 'bottom': effect = "Enter from bottom"; break; + default: effect = "Enter from center"; break; + } + return effect; + } + + @undoBatch + @action + updateHideBefore = (activeItem: Doc) => { + activeItem.presHideBefore = !activeItem.presHideBefore; + Array.from(this.pres._selectedArray.keys()).forEach((doc) => doc.presHideBefore = activeItem.presHideBefore); + } + + @undoBatch + @action + updateHideAfter = (activeItem: Doc) => { + activeItem.presHideAfter = !activeItem.presHideAfter; + Array.from(this.pres._selectedArray.keys()).forEach((doc) => doc.presHideAfter = activeItem.presHideAfter); + } + + @undoBatch + @action + updateOpenDoc = (activeItem: Doc) => { + activeItem.openDocument = !activeItem.openDocument; + Array.from(this.pres._selectedArray.keys()).forEach((doc) => { + doc.openDocument = activeItem.openDocument; + }); + } + + /** + * When the movement dropdown is changes + */ + @undoBatch + updateMovement = action((movement: any, all?: boolean) => { + const array: any[] = all ? this.pres.childDocs : Array.from(this.pres._selectedArray.keys()); + array.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; + } + }); + }); + + @undoBatch + @action + updateEffect = (effect: any, all?: boolean) => { + const array: any[] = all ? this.pres.childDocs : Array.from(this.pres._selectedArray.keys()); + array.forEach((doc) => { + const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); + switch (effect) { + case PresEffect.Bounce: + tagDoc.presEffect = PresEffect.Bounce; + break; + case PresEffect.Fade: + tagDoc.presEffect = PresEffect.Fade; + break; + case PresEffect.Flip: + tagDoc.presEffect = PresEffect.Flip; + break; + case PresEffect.Roll: + tagDoc.presEffect = PresEffect.Roll; + break; + case PresEffect.Rotate: + tagDoc.presEffect = PresEffect.Rotate; + break; + case PresEffect.None: default: + tagDoc.presEffect = PresEffect.None; + break; + } + }); + } + + @undoBatch + @action + updateEffectDirection = (effect: any, all?: boolean) => { + const array: any[] = all ? this.pres.childDocs : Array.from(this.pres._selectedArray.keys()); + array.forEach((doc) => { + const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); + switch (effect) { + case PresEffect.Left: + tagDoc.presEffectDirection = PresEffect.Left; + break; + case PresEffect.Right: + tagDoc.presEffectDirection = PresEffect.Right; + break; + case PresEffect.Top: + tagDoc.presEffectDirection = PresEffect.Top; + break; + case PresEffect.Bottom: + tagDoc.presEffectDirection = PresEffect.Bottom; + break; + case PresEffect.Center: default: + tagDoc.presEffectDirection = PresEffect.Center; + break; + } + }); + } + + // Converts seconds to ms and updates presTransition + setTransitionTime = (number: String, change?: number) => { + let timeInMS = Number(number) * 1000; + if (change) timeInMS += change; + if (timeInMS < 100) timeInMS = 100; + if (timeInMS > 10000) timeInMS = 10000; + Array.from(PresBox.Instance._selectedArray.keys()).forEach((doc) => doc.presTransition = timeInMS); + } + + // Converts seconds to ms and updates presDuration + setDurationTime = (number: String, change?: number) => { + let timeInMS = Number(number) * 1000; + if (change) timeInMS += change; + if (timeInMS < 100) timeInMS = 100; + if (timeInMS > 20000) timeInMS = 20000; + Array.from(PresBox.Instance._selectedArray.keys()).forEach((doc) => doc.presDuration = timeInMS); + } + + setMovementName = action((movement: any, activeItem: Doc): string => { + let output: string = 'none'; + switch (movement) { + case PresMovement.Zoom: output = 'Pan & Zoom'; break; //Pan and zoom + case PresMovement.Pan: output = 'Pan'; break; //Pan + case PresMovement.Jump: output = 'Jump cut'; break; //Jump Cut + case PresMovement.None: output = 'No Movement'; break; //None + default: output = 'Zoom'; activeItem.presMovement = 'zoom'; break; //default set as zoom + } + return output; + }); + + @computed get transitionDropdown() { + const activeItem: Doc = this.activeItem; + const targetDoc: Doc = this.targetDoc; + const isPresCollection: boolean = (targetDoc === this.pres.layoutDoc.presCollection); + const isPinWithView: boolean = BoolCast(activeItem.presPinView); + if (activeItem && targetDoc) { + const transitionSpeed = activeItem.presTransition ? NumCast(activeItem.presTransition) / 1000 : 0.5; + let duration = activeItem.presDuration ? NumCast(activeItem.presDuration) / 1000 : 2; + if (activeItem.type === DocumentType.AUDIO) duration = NumCast(activeItem.duration); + const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; + activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom'; + return ( +
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this.openMovementDropdown = false; this.openEffectDropdown = false; })}> +
+ Movement + {isPresCollection || (isPresCollection && isPinWithView) ? +
+ {this.scrollable ? "Scroll to pinned view" : !isPinWithView ? "No movement" : "Pan & Zoom to pinned view"} +
+ : +
{ e.stopPropagation(); this.openMovementDropdown = !this.openMovementDropdown; })} style={{ borderBottomLeftRadius: this.openMovementDropdown ? 0 : 5, border: this.openMovementDropdown ? `solid 2px ${PresColor.DarkBlue}` : 'solid 1px black' }}> + {this.setMovementName(activeItem.presMovement, activeItem)} + +
e.stopPropagation()} style={{ display: this.openMovementDropdown ? "grid" : "none" }}> +
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.None)}>None
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Zoom)}>Pan {"&"} Zoom
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Pan)}>Pan
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Jump)}>Jump cut
+
+
+ } +
+
Transition Speed
+
+ this.setTransitionTime(e.target.value))} /> s +
+
+
this.setTransitionTime(String(transitionSpeed), 1000))}> + +
+
this.setTransitionTime(String(transitionSpeed), -1000))}> + +
+
+
+ this._batch = UndoManager.StartBatch("presTransition")} + onPointerUp={() => this._batch?.end()} + onChange={(e: React.ChangeEvent) => { + e.stopPropagation(); + this.setTransitionTime(e.target.value); + }} /> +
+
Fast
+
Medium
+
Slow
+
+
+
+ Visibility {"&"} Duration +
+ {isPresCollection ? (null) :
{"Hide before presented"}
}>
this.updateHideBefore(activeItem)}>Hide before
} + {isPresCollection ? (null) :
{"Hide after presented"}
}>
this.updateHideAfter(activeItem)}>Hide after
} +
{"Open document in a new tab"}
}>
this.updateOpenDoc(activeItem)}>Open
 +
+
+
Slide Duration
+
+ this.setDurationTime(e.target.value))} /> s +
+
+
this.setDurationTime(String(duration), 1000))}> + +
+
this.setDurationTime(String(duration), -1000))}> + +
+
+
+ { 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
+
Long
+
+
+ {isPresCollection ? (null) :
+ Effects +
{ e.stopPropagation(); this.openEffectDropdown = !this.openEffectDropdown; })} style={{ borderBottomLeftRadius: this.openEffectDropdown ? 0 : 5, border: this.openEffectDropdown ? `solid 2px ${PresColor.DarkBlue}` : 'solid 1px black' }}> + {effect} + +
e.stopPropagation()}> +
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.None)}>None
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Fade)}>Fade In
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Flip)}>Flip
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Rotate)}>Rotate
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Bounce)}>Bounce
+
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Roll)}>Roll
+
+
+
+
Effect direction
+
+ {this.effectDirection} +
+
+
+
{"Enter from left"}
}>
this.updateEffectDirection(PresEffect.Left)}>
 +
{"Enter from right"}
}>
this.updateEffectDirection(PresEffect.Right)}>
 +
{"Enter from top"}
}>
this.updateEffectDirection(PresEffect.Top)}>
 +
{"Enter from bottom"}
}>
this.updateEffectDirection(PresEffect.Bottom)}>
 +
{"Enter from center"}
}>
this.updateEffectDirection(PresEffect.Center)}>
 +
+
} +
+
this.applyTo(this.pres.childDocs)}> + Apply to all +
+
+
+ ); + } + } + + @undoBatch + @action + applyTo = (array: Doc[]) => { + const activeItem: Doc = this.activeItem; + const targetDoc: Doc = this.targetDoc; + this.updateMovement(activeItem.presMovement, true); + this.updateEffect(targetDoc.presEffect, true); + this.updateEffectDirection(targetDoc.presEffectDirection, true); + array.forEach((doc) => { + const curDoc = Cast(doc, Doc, null); + const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); + if (tagDoc && targetDoc) { + curDoc.presTransition = activeItem.presTransition; + curDoc.presDuration = activeItem.presDuration; + curDoc.presHideBefore = activeItem.presHideBefore; + curDoc.presHideAfter = activeItem.presHideAfter; + } + }); + } + + @computed get mediaOptionsDropdown() { + const activeItem: Doc = this.activeItem; + const targetDoc: Doc = this.targetDoc; + if (activeItem && targetDoc) { + return ( +
+
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.AUDIO ?
+
Start time
+
+ ) => { activeItem.presStartTime = Number(e.target.value); })} /> +
+
: (null)} + {targetDoc.type === DocumentType.AUDIO ?
+
End time
+
+ ) => { const val = e.target.value; activeItem.presEndTime = Number(val); })} /> +
+
: (null)} +
+
+
+ ); + } + } + + @computed get presPinViewOptionsDropdown() { + const activeItem: Doc = this.activeItem; + const targetDoc: Doc = this.targetDoc; + const presPinWithViewIcon = ; + return ( + <> + {this.panable || this.scrollable || this.targetDoc.type === DocumentType.COMPARISON ? 'Pinned view' : (null)} +
+
{activeItem.presPinView ? "Turn off pin with view" : "Turn on pin with 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; + activeItem.presPinViewX = x; + activeItem.presPinViewY = y; + activeItem.presPinViewScale = scale; + } + }}>Update
 : (null)} +
+ + ); + } + + @computed get panOptionsDropdown() { + const activeItem: Doc = this.activeItem; + const targetDoc: Doc = this.targetDoc; + return ( + <> + {this.panable ?
+
+
Pan X
+
+ ) => { const val = e.target.value; activeItem.presPinViewX = Number(val); })} /> +
+
+
+
Pan Y
+
+ ) => { const val = e.target.value; activeItem.presPinViewY = Number(val); })} /> +
+
+
+
Scale
+
+ ) => { const val = e.target.value; activeItem.presPinViewScale = Number(val); })} /> +
+
+
: (null)} + + ); + } + + @computed get scrollOptionsDropdown() { + const activeItem: Doc = this.activeItem; + const targetDoc: Doc = this.targetDoc; + return ( + <> + {this.scrollable ?
+
+
Scroll
+
+ ) => { const val = e.target.value; activeItem.presPinViewScroll = Number(val); })} /> +
+
+
: (null)} + + ); + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 81ee0bf99da264b76f26a21d57259d478cac07f3 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 10 Dec 2020 11:58:25 -0500 Subject: fixed filterBox/TreeView to support checkboxes again. Simplified {DocumentView/CollectionView/FieldView}props --- src/client/documents/Documents.ts | 2 +- src/client/views/PreviewCursor.tsx | 5 +- .../views/collections/CollectionCarousel3DView.tsx | 4 +- .../views/collections/CollectionCarouselView.tsx | 4 +- .../collections/CollectionMasonryViewFieldRow.tsx | 2 +- .../views/collections/CollectionPileView.tsx | 6 +- .../views/collections/CollectionSchemaCells.tsx | 2 +- .../views/collections/CollectionSchemaHeaders.tsx | 3 - .../views/collections/CollectionSchemaView.tsx | 2 +- .../views/collections/CollectionStackingView.tsx | 12 ++-- .../CollectionStackingViewFieldColumn.tsx | 14 ++-- src/client/views/collections/CollectionSubView.tsx | 42 ++---------- .../views/collections/CollectionTimeView.tsx | 2 +- .../views/collections/CollectionTreeView.tsx | 20 +++--- src/client/views/collections/CollectionView.tsx | 75 ++++++++++------------ src/client/views/collections/SchemaTable.tsx | 8 +-- src/client/views/collections/TabDocView.tsx | 2 +- src/client/views/collections/TreeView.scss | 4 ++ src/client/views/collections/TreeView.tsx | 24 +++---- .../CollectionFreeFormRemoteCursors.tsx | 8 +-- .../collectionFreeForm/CollectionFreeFormView.tsx | 24 +++---- .../collections/collectionFreeForm/MarqueeView.tsx | 28 ++++---- .../CollectionMulticolumnView.tsx | 6 +- .../CollectionMultirowView.tsx | 6 +- src/client/views/nodes/DocumentView.tsx | 71 ++++++++++---------- src/client/views/nodes/FieldView.tsx | 61 +++--------------- src/client/views/nodes/FilterBox.tsx | 8 +-- src/client/views/nodes/LinkBox.tsx | 4 +- src/client/views/nodes/PresBox.tsx | 4 +- src/client/views/nodes/VideoBox.tsx | 1 - 30 files changed, 189 insertions(+), 265 deletions(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index ae0cd8b92..8a5f0fb5e 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1136,7 +1136,7 @@ export namespace DocUtils { newDoc.x = x; newDoc.y = y; if (newDoc.type === DocumentType.RTF) FormattedTextBox.SelectOnLoad = newDoc[Id]; - docAdder(newDoc); + docAdder?.(newDoc); } }), icon: "eye" diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index d756227f6..ac61dd1d8 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -11,6 +11,7 @@ import { Transform } from "../util/Transform"; import { undoBatch, UndoManager } from '../util/UndoManager'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; import "./PreviewCursor.scss"; +import { returnFalse } from '../../Utils'; @observer export class PreviewCursor extends React.Component<{}> { @@ -145,13 +146,13 @@ export class PreviewCursor extends React.Component<{}> { onKeyPress: (e: KeyboardEvent) => void, addLiveText: (doc: Doc) => void, getTransform: () => Transform, - addDocument: (doc: Doc | Doc[]) => boolean, + addDocument: undefined | ((doc: Doc | Doc[]) => boolean), nudge: undefined | ((nudgeX: number, nudgeY: number) => boolean)) { this._clickPoint = [x, y]; this._onKeyPress = onKeyPress; this._addLiveTextDoc = addLiveText; this._getTransform = getTransform; - this._addDocument = addDocument; + this._addDocument = addDocument || returnFalse; this._nudge = nudge; this.Visible = true; } diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 4e30709a6..67f73d44a 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -46,8 +46,8 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume onDoubleClick={this.onChildDoubleClick} onClick={onChildClick} renderDepth={this.props.renderDepth + 1} - LayoutTemplate={this.props.ChildLayoutTemplate} - LayoutTemplateString={this.props.ChildLayoutString} + LayoutTemplate={this.props.childLayoutTemplate} + LayoutTemplateString={this.props.childLayoutString} Document={childPair.layout} DataDoc={childPair.data} PanelWidth={this.panelWidth} diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 16ccdc6f4..8b7a46e2f 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -53,8 +53,8 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) onDoubleClick={this.onContentDoubleClick} onClick={this.onContentClick} renderDepth={this.props.renderDepth + 1} - LayoutTemplate={this.props.ChildLayoutTemplate} - LayoutTemplateString={this.props.ChildLayoutString} + LayoutTemplate={this.props.childLayoutTemplate} + LayoutTemplateString={this.props.childLayoutString} Document={curDoc.layout} DataDoc={curDoc.data} PanelHeight={this.panelHeight} diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx index b35644c6b..ff69c7d05 100644 --- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx +++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx @@ -146,7 +146,7 @@ export class CollectionMasonryViewFieldRow extends React.Component { diff --git a/src/client/views/collections/CollectionPileView.tsx b/src/client/views/collections/CollectionPileView.tsx index 2636b98e5..f054e7b7f 100644 --- a/src/client/views/collections/CollectionPileView.tsx +++ b/src/client/views/collections/CollectionPileView.tsx @@ -36,11 +36,11 @@ export class CollectionPileView extends CollectionSubView(doc => doc) { { (doc instanceof Doc ? [doc] : doc).map((d) => DocUtils.iconify(d)); - return this.props.addDocument(doc); + return this.props.addDocument?.(doc) || false; })} moveDocument={undoBatch((doc: Doc | Doc[], targetCollection: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => { (doc instanceof Doc ? [doc] : doc).map(undoBatch((d) => Doc.deiconifyView(d))); - return this.props.moveDocument(doc, targetCollection, addDoc); + return this.props.moveDocument?.(doc, targetCollection, addDoc) || false; })} /> ; } @@ -91,7 +91,7 @@ export class CollectionPileView extends CollectionSubView(doc => doc) { const doc = this.childDocs[0]; doc.x = e.clientX; doc.y = e.clientY; - this.props.addDocTab(doc, "inParent") && this.props.removeDocument(doc); + this.props.addDocTab(doc, "inParent") && (this.props.removeDocument?.(doc) || false); dist = 0; } } diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 0b3dfe1e4..904b4c761 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -44,7 +44,7 @@ export interface CellProps { renderDepth: number; addDocTab: (document: Doc, where: string) => boolean; pinToPres: (document: Doc) => void; - moveDocument: (document: Doc | Doc[], targetCollection: Doc | undefined, + moveDocument?: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; isFocused: boolean; changeFocusedCellByIndex: (row: number, col: number) => void; diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index b408fd680..f50da0134 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -461,9 +461,6 @@ export class KeysDropdown extends React.Component { } } - - get ignoreFields() { return ["_docFilters", "_docRangeFilters"]; } - @computed get scriptField() { const scriptText = "setDocFilter(containingTreeView, heading, this.title, checked)"; const script = ScriptField.MakeScript(scriptText, { this: Doc.name, heading: "string", checked: "string", containingTreeView: Doc.name }); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 8ae70ce20..e22b8effe 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -484,7 +484,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { const cm = ContextMenu.Instance; const options = cm.findByDescription("Options..."); const optionItems: ContextMenuProps[] = options && "subitems" in options ? options.subitems : []; - optionItems.push({ description: "remove", event: () => this._previewDoc && this.props.removeDocument(this._previewDoc), icon: "trash" }); + optionItems.push({ description: "remove", event: () => this._previewDoc && this.props.removeDocument?.(this._previewDoc), icon: "trash" }); !options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "compass" }); cm.displayMenu(e.clientX, e.clientY); (e.nativeEvent as any).SchemaHandled = true; // not sure why this is needed, but if you right-click quickly on a cell, the Document/Collection contextMenu handlers still fire without this. diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 0e4029764..83ac138f5 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -152,7 +152,7 @@ export class CollectionStackingView extends CollectionSubView boolean): boolean => { - return this.props.removeDocument(doc) && addDocument(doc); + return this.props.removeDocument?.(doc) && addDocument?.(doc) ? true : false; } createRef = (ele: HTMLDivElement | null) => { this._masonryGridRef = ele; @@ -193,9 +193,9 @@ export class CollectionStackingView extends CollectionSubView { FormattedTextBox.SelectOnLoad = doc[Id]; - return this.props.parent.props.addDocument(doc); - }, this.props.parent.props.addDocument, x, y, true); + return this.props.parent.props.addDocument?.(doc) || false; + }, this.props.parent.props.addDocument || returnFalse, x, y, true); Array.from(Object.keys(Doc.GetProto(dataDoc))).filter(fieldKey => dataDoc[fieldKey] instanceof RichTextField || dataDoc[fieldKey] instanceof ImageField || typeof (dataDoc[fieldKey]) === "string").map(fieldKey => docItems.push({ @@ -249,7 +249,7 @@ export class CollectionStackingViewFieldColumn extends React.Component boolean; - removeDocument: (document: Doc | Doc[]) => boolean; - moveDocument: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; - PanelWidth: () => number; - PanelHeight: () => number; - VisibleHeight?: () => number; - setPreviewCursor?: (func: (x: number, y: number, drag: boolean) => void) => void; - rootSelected: (outsideReaction?: boolean) => boolean; - fieldKey: string; - NativeWidth?: () => number; - NativeHeight?: () => number; -} export interface SubCollectionViewProps extends CollectionViewProps { CollectionView: Opt; - children?: never | (() => JSX.Element[]) | React.ReactNode; - ChildLayoutTemplate?: () => Doc; - childOpacity?: () => number; - childIgnoreNativeSize?: boolean; - ChildLayoutString?: string; - childClickScript?: ScriptField; - childDoubleClickScript?: ScriptField; - freezeChildDimensions?: boolean; // used by TimeView to coerce documents to treat their width height as their native width/height - overrideDocuments?: Doc[]; // used to override the documents shown by the sub collection to an explicit list (see LinkBox) - ignoreFields?: string[]; // used in TreeView to ignore specified fields (see LinkBox) - parentActive: (outsideReaction: boolean) => boolean; - isAnnotationOverlay?: boolean; - annotationsKey: string; - layoutEngine?: () => string; } export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: X) { @@ -112,11 +84,11 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: return Cast(this.dataField, listSpec(Doc)); } docFilters = () => { - return this.props.ignoreFields?.includes("_docFilters") ? [] : + return this.props.ignoreFilters ? [] : [...this.props.docFilters(), ...Cast(this.props.Document._docFilters, listSpec("string"), [])]; } docRangeFilters = () => { - return this.props.ignoreFields?.includes("_docRangeFilters") ? [] : + return this.props.ignoreFilters ? [] : [...this.props.docRangeFilters(), ...Cast(this.props.Document._docRangeFilters, listSpec("string"), [])]; } searchFilterDocs = () => { @@ -220,7 +192,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: } } - addDocument = (doc: Doc | Doc[]) => this.props.addDocument(doc); + addDocument = (doc: Doc | Doc[]) => this.props.addDocument?.(doc) || false; @action protected onInternalDrop(e: Event, de: DragManager.DropEvent): boolean { @@ -329,7 +301,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: DocServer.GetRefField(docid).then(f => { if (f instanceof Doc) { if (options.x || options.y) { f.x = options.x; f.y = options.y; } // should be in CollectionFreeFormView - (f instanceof Doc) && this.props.addDocument(f); + (f instanceof Doc) && this.addDocument(f); } }); } else { @@ -343,7 +315,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: const modHtml = srcUrl ? html.replace(reg, srcUrl) : html; const htmlDoc = Docs.Create.HtmlDocument(modHtml, { ...options, title: "-web page-", _width: 300, _height: 300 }); Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc).text = text; - this.props.addDocument(htmlDoc); + this.addDocument(htmlDoc); if (srcWeb) { const iframe = SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")?.[0]; const focusNode = (iframe?.contentDocument?.getSelection()?.focusNode as any); @@ -503,7 +475,7 @@ import { Docs, DocumentOptions, DocUtils } from "../../documents/Documents"; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; import { DocumentType } from "../../documents/DocumentTypes"; import { FormattedTextBox, GoogleRef } from "../nodes/formattedText/FormattedTextBox"; -import { CollectionView, CollectionViewType } from "./CollectionView"; +import { CollectionView, CollectionViewType, CollectionViewProps } from "./CollectionView"; import { SelectionManager } from "../../util/SelectionManager"; import { OverlayView } from "../OverlayView"; import { setTimeout } from "timers"; diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx index c2d682361..e4a3c384c 100644 --- a/src/client/views/collections/CollectionTimeView.tsx +++ b/src/client/views/collections/CollectionTimeView.tsx @@ -85,7 +85,7 @@ export class CollectionTimeView extends CollectionSubView(doc => doc) { @computed get contents() { return
- +
; } diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 681584cc5..265f5a323 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -6,10 +6,11 @@ import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { Document } from '../../../fields/Schema'; import { ScriptField } from '../../../fields/ScriptField'; -import { BoolCast, NumCast, ScriptCast, StrCast, Cast } from '../../../fields/Types'; +import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; -import { emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, Utils } from '../../../Utils'; +import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, Utils } from '../../../Utils'; import { DocUtils } from '../../documents/Documents'; +import { DocumentManager } from '../../util/DocumentManager'; import { DragManager, dropActionType } from "../../util/DragManager"; import { SelectionManager } from '../../util/SelectionManager'; import { SnappingManager } from '../../util/SnappingManager'; @@ -17,20 +18,17 @@ import { undoBatch, UndoManager } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { EditableView } from "../EditableView"; -import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView'; +import { DocumentView } from '../nodes/DocumentView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; -import { RichTextMenu } from '../nodes/formattedText/RichTextMenu'; import { CollectionSubView } from "./CollectionSubView"; import "./CollectionTreeView.scss"; import { TreeView } from "./TreeView"; import React = require("react"); -import { DocumentManager } from '../../util/DocumentManager'; -import { FormattedTextBoxComment } from '../nodes/formattedText/FormattedTextBoxComment'; -import { DocumentView } from '../nodes/DocumentView'; export type collectionTreeViewProps = { treeViewHideTitle?: boolean; treeViewHideHeaderFields?: boolean; + treeViewSkipFields?: string[]; // prevents specific fields from being displayed (see LinkBox) onCheckedClick?: () => ScriptField; onChildClick?: () => ScriptField; }; @@ -92,7 +90,7 @@ export class CollectionTreeView extends CollectionSubView doAddDoc(doc)); } else if (relativeTo === undefined) { - this.props.addDocument(doc); + this.props.addDocument?.(doc); } else { doAddDoc(doc); (doc instanceof Doc ? [doc] : doc).forEach(d => d.context = this.props.Document); @@ -195,18 +193,18 @@ export class CollectionTreeView extends CollectionSubView this.props.active(outsideReaction) || this._isChildActive; @computed get treeChildren() { TraceMobx(); - return this.props.overrideDocuments ? this.props.overrideDocuments : this.childDocs; + return this.props.childDocuments || this.childDocs; } @computed get treeViewElements() { TraceMobx(); const dropAction = StrCast(this.doc.childDropAction) as dropActionType; const addDoc = (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => this.addDoc(doc, relativeTo, before); - const moveDoc = (d: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => this.props.moveDocument(d, target, addDoc); + const moveDoc = (d: Doc | Doc[], target: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => this.props.moveDocument?.(d, target, addDoc) || false; return TreeView.GetChildElements(this.treeChildren, this, this.doc, this.props.DataDoc, this.props.fieldKey, this.props.ContainingCollectionDoc, undefined, addDoc, this.remove, moveDoc, dropAction, this.props.addDocTab, this.props.pinToPres, this.props.styleProvider, this.props.ScreenToLocalTransform, this.outerXf, this.active, this.props.PanelWidth, this.props.ChromeHeight, this.props.renderDepth, () => this.props.treeViewHideHeaderFields || BoolCast(this.doc.treeViewHideHeaderFields), BoolCast(this.doc.treeViewPreventOpen), [], this.props.onCheckedClick, - this.onChildClick, this.props.ignoreFields, true, this.whenActiveChanged, this.props.dontRegisterView || Cast(this.props.Document.dontRegisterChildViews, "boolean", null)); + this.onChildClick, this.props.treeViewSkipFields, true, this.whenActiveChanged, this.props.dontRegisterView || Cast(this.props.Document.dontRegisterChildViews, "boolean", null)); } @computed get titleBar() { const hideTitle = this.props.treeViewHideTitle || this.doc.treeViewHideTitle; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 8f402c427..af03e4ceb 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -10,7 +10,7 @@ import { List } from '../../../fields/List'; import { ObjectField } from '../../../fields/ObjectField'; import { BoolCast, Cast, ScriptCast, StrCast } from '../../../fields/Types'; import { ImageField } from '../../../fields/URLField'; -import { distributeAcls, GetEffectiveAcl, SharingPermissions, TraceMobx, normalizeEmail, denormalizeEmail } from '../../../fields/util'; +import { denormalizeEmail, distributeAcls, GetEffectiveAcl, SharingPermissions, TraceMobx } from '../../../fields/util'; import { returnFalse, Utils } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; @@ -38,10 +38,7 @@ import { SubCollectionViewProps } from './CollectionSubView'; import { CollectionTimeView } from './CollectionTimeView'; import { CollectionTreeView } from "./CollectionTreeView"; import './CollectionView.scss'; -import { listSpec } from '../../../fields/Schema'; -const higflyout = require("@hig/flyout"); -export const { anchorPoints } = higflyout; -export const Flyout = higflyout.default; +import { ScriptField } from '../../../fields/ScriptField'; export const COLLECTION_BORDER_WIDTH = 2; const path = require('path'); @@ -64,28 +61,29 @@ export enum CollectionViewType { Grid = "grid", Pile = "pileup" } -export interface CollectionViewCustomProps { +export interface CollectionViewProps extends FieldViewProps { + isAnnotationOverlay?: boolean; // is the collection an annotation overlay (eg an overlay on an image/video/etc) + annotationsKey: string; // which data field on the collection stores the collection of annotation documents + ignoreFilters?: boolean; + layoutEngine?: () => string; + parentActive: (outsideReaction: boolean) => boolean; filterAddDocument?: (doc: Doc | Doc[]) => boolean; // allows a document that renders a Collection view to filter or modify any documents added to the collection (see PresBox for an example) + VisibleHeight?: () => number; + setPreviewCursor?: (func: (x: number, y: number, drag: boolean) => void) => void; + + // property overrides for child documents + childDocuments?: Doc[]; // used to override the documents shown by the sub collection to an explicit list (see LinkBox) childOpacity?: () => number; - hideFilter?: true; + childLayoutTemplate?: () => (Doc | undefined);// specify a layout Doc template to use for children of the collection + childLayoutString?: string; + children?: never | (() => JSX.Element[]) | React.ReactNode; + childFreezeDimensions?: boolean; // used by TimeView to coerce documents to treat their width height as their native width/height childIgnoreNativeSize?: boolean; + childClickScript?: ScriptField; + childDoubleClickScript?: ScriptField; } - -export interface CollectionRenderProps { - addDocument: (document: Doc | Doc[]) => boolean; - removeDocument: (document: Doc | Doc[]) => boolean; - moveDocument: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; - active: () => boolean; - parentActive: (outsideReaction: boolean) => boolean; - whenActiveChanged: (isActive: boolean) => void; - PanelWidth: () => number; - PanelHeight: () => number; - ChildLayoutTemplate?: () => Doc;// specify a layout Doc template to use for children of the collection - ChildLayoutString?: string;// specify a layout string to use for children of the collection -} - @observer -export class CollectionView extends Touchable { +export class CollectionView extends Touchable { public static LayoutString(fieldStr: string) { return FieldView.LayoutString(CollectionView, fieldStr); } _isChildActive = false; //TODO should this be observable? @@ -97,22 +95,13 @@ export class CollectionView extends Touchable([ - [AclPrivate, SharingPermissions.None], - [AclReadonly, SharingPermissions.View], - [AclAddonly, SharingPermissions.Add], - [AclEdit, SharingPermissions.Edit], - [AclAdmin, SharingPermissions.Admin] - ]); - get collectionViewType(): CollectionViewType | undefined { const viewField = StrCast(this.props.Document._viewType); if (CollectionView._safeMode) { - if (viewField === CollectionViewType.Freeform || viewField === CollectionViewType.Schema) { - return CollectionViewType.Tree; - } - if (viewField === CollectionViewType.Invalid) { - return CollectionViewType.Freeform; + switch (viewField) { + case CollectionViewType.Freeform: + case CollectionViewType.Schema: return CollectionViewType.Tree; + case CollectionViewType.Invalid: return CollectionViewType.Freeform; } } return viewField as any as CollectionViewType; @@ -136,7 +125,6 @@ export class CollectionView extends Touchable Doc.AreProtosEqual(doc, this.props.Document))) return false; const targetDataDoc = this.props.Document[DataSym]; const docList = DocListCast(targetDataDoc[this.props.fieldKey]); @@ -253,9 +241,8 @@ export class CollectionView extends Touchable this.props.renderDepth ? this.props.ScreenToLocalTransform() : this.props.ScreenToLocalTransform().scale(this.props.PanelWidth() / this.bodyPanelWidth()); - private SubView = (type: CollectionViewType, renderProps: CollectionRenderProps) => { + private SubView = (type: CollectionViewType, props: SubCollectionViewProps) => { TraceMobx(); - const props: SubCollectionViewProps = { ...this.props, ...renderProps, ScreenToLocalTransform: this.screenToLocalTransform, CollectionView: this, annotationsKey: "" }; switch (type) { case CollectionViewType.Schema: return (); case CollectionViewType.Docking: return (); @@ -273,7 +260,7 @@ export class CollectionView extends Touchable); case CollectionViewType.Grid: return (); case CollectionViewType.Freeform: - default: { this.props.Document._freeformLayoutEngine = undefined; return (); } + default: { this.props.Document._freeformLayoutEngine = undefined; return (); } } } @@ -386,7 +373,8 @@ export class CollectionView extends Touchable; fieldKey: string; renderDepth: number; - deleteDocument: (document: Doc | Doc[]) => boolean; - addDocument: (document: Doc | Doc[]) => boolean; - moveDocument: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; + deleteDocument?: (document: Doc | Doc[]) => boolean; + addDocument?: (document: Doc | Doc[]) => boolean; + moveDocument?: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; ScreenToLocalTransform: () => Transform; active: (outsideReaction: boolean | undefined) => boolean; onDrop: (e: React.DragEvent, options: DocumentOptions, completed?: (() => void) | undefined) => void; @@ -376,7 +376,7 @@ export class SchemaTable extends React.Component { @undoBatch createRow = action(() => { - this.props.addDocument(Docs.Create.TextDocument("", { title: "", _width: 100, _height: 30 })); + this.props.addDocument?.(Docs.Create.TextDocument("", { title: "", _width: 100, _height: 30 })); this._focusedCell = { row: this.childDocs.length, col: this._focusedCell.col }; }); diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index e1fd47592..3c1aaae47 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -339,7 +339,7 @@ export class TabDocView extends React.Component { ContainingCollectionView={undefined} ContainingCollectionDoc={undefined} parentActive={returnFalse} - ChildLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid having to set stuff like this. + childLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid having to set stuff like this. noOverlay={true} // don't render overlay Docs since they won't scale active={returnTrue} select={emptyFunction} diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss index 84b5af7be..0a97166f0 100644 --- a/src/client/views/collections/TreeView.scss +++ b/src/client/views/collections/TreeView.scss @@ -17,6 +17,10 @@ left: -10px; position: absolute; } + .treeView-checkIcon { + left: -10px; + position: absolute; + } &:hover { .treeView-expandIcon { display: unset; diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 675ba60c0..be8a27ab0 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -49,7 +49,7 @@ export interface TreeViewProps { outdentDocument?: () => void; ScreenToLocalTransform: () => Transform; dontRegisterView?: boolean; - backgroundColor?: (doc: Opt, props: Opt, property: string, layerProvider?: (doc: Doc, assign?: boolean) => boolean) => string | undefined; + backgroundColor?: (doc: Opt, props: DocumentViewProps, property: string) => string | undefined; outerXf: () => { translateX: number, translateY: number }; treeView: CollectionTreeView; parentKey: string; @@ -59,7 +59,7 @@ export interface TreeViewProps { renderedIds: string[]; // list of document ids rendered used to avoid unending expansion of items in a cycle onCheckedClick?: () => ScriptField; onChildClick?: () => ScriptField; - ignoreFields?: string[]; + skipFields?: string[]; firstLevel: boolean; whenActiveChanged: (isActive: boolean) => void; } @@ -311,7 +311,7 @@ export class TreeView extends React.Component { doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); for (const key of Object.keys(ids).slice().sort()) { - if (this.props.ignoreFields?.includes(key) || key === "title" || key === "treeViewOpen") continue; + if (this.props.skipFields?.includes(key) || key === "title" || key === "treeViewOpen") continue; const contents = doc[key]; let contentElement: (JSX.Element | null)[] | JSX.Element = []; @@ -327,7 +327,7 @@ export class TreeView extends React.Component { this.props.treeView, doc, undefined, key, this.props.containingCollection, this.props.prevSibling, addDoc, remDoc, this.move, this.props.dropAction, this.props.addDocTab, this.props.pinToPres, this.props.backgroundColor, this.props.ScreenToLocalTransform, this.props.outerXf, this.props.active, this.props.panelWidth, this.props.ChromeHeight, this.props.renderDepth, this.props.treeViewHideHeaderFields, this.props.treeViewPreventOpen, - [...this.props.renderedIds, doc[Id]], this.props.onCheckedClick, this.props.onChildClick, this.props.ignoreFields, false, this.props.whenActiveChanged, this.props.dontRegisterView); + [...this.props.renderedIds, doc[Id]], this.props.onCheckedClick, this.props.onChildClick, this.props.skipFields, false, this.props.whenActiveChanged, this.props.dontRegisterView); } else { contentElement = { this.dataDoc, expandKey, this.props.containingCollection, this.props.prevSibling, addDoc, remDoc, this.move, StrCast(this.doc.childDropAction, this.props.dropAction) as dropActionType, this.props.addDocTab, this.props.pinToPres, this.props.backgroundColor, this.props.ScreenToLocalTransform, this.props.outerXf, this.props.active, this.props.panelWidth, this.props.ChromeHeight, this.props.renderDepth, this.props.treeViewHideHeaderFields, this.props.treeViewPreventOpen, - [...this.props.renderedIds, this.doc[Id]], this.props.onCheckedClick, this.props.onChildClick, this.props.ignoreFields, false, this.props.whenActiveChanged, this.props.dontRegisterView)} + [...this.props.renderedIds, this.doc[Id]], this.props.onCheckedClick, this.props.onChildClick, this.props.skipFields, false, this.props.whenActiveChanged, this.props.dontRegisterView)} ; } else if (this.treeViewExpandedView === "fields") { return
    @@ -449,14 +449,14 @@ export class TreeView extends React.Component { !(this.doc.text as RichTextField)?.Text ? (null) : :
    -
    - +
    - + {this.onCheckedClick ? (null) : }
    }
    ; @@ -710,7 +710,7 @@ export class TreeView extends React.Component { dropAction: dropActionType, addDocTab: (doc: Doc, where: string) => boolean, pinToPres: (document: Doc) => void, - backgroundColor: undefined | ((document: Opt, props: Opt, property: string, layerProvider?: (doc: Doc, assign?: boolean) => boolean) => string | undefined), + styleProvider: undefined | ((document: Opt, props: DocumentViewProps, property: string) => string | undefined), screenToLocalXf: () => Transform, outerXf: () => { translateX: number, translateY: number }, active: (outsideReaction?: boolean) => boolean, @@ -722,7 +722,7 @@ export class TreeView extends React.Component { renderedIds: string[], onCheckedClick: undefined | (() => ScriptField), onChildClick: undefined | (() => ScriptField), - ignoreFields: string[] | undefined, + skipFields: string[] | undefined, firstLevel: boolean, whenActiveChanged: (isActive: boolean) => void, dontRegisterView: boolean | undefined) { @@ -783,7 +783,7 @@ export class TreeView extends React.Component { renderDepth={renderDepth} removeDoc={StrCast(containingCollection.freezeChildren).includes("remove") ? undefined : remove} addDocument={addDocument} - backgroundColor={backgroundColor} + backgroundColor={styleProvider} panelWidth={rowWidth} panelHeight={rowHeight} ChromeHeight={ChromeHeight} @@ -799,7 +799,7 @@ export class TreeView extends React.Component { treeViewHideHeaderFields={treeViewHideHeaderFields} treeViewPreventOpen={treeViewPreventOpen} renderedIds={renderedIds} - ignoreFields={ignoreFields} + skipFields={skipFields} firstLevel={firstLevel} whenActiveChanged={whenActiveChanged} />; }); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx index 548ad78a5..9f6938e67 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormRemoteCursors.tsx @@ -1,16 +1,16 @@ +import { computed } from "mobx"; import { observer } from "mobx-react"; import * as mobxUtils from 'mobx-utils'; import CursorField from "../../../../fields/CursorField"; +import { FieldResult } from "../../../../fields/Doc"; +import { List } from "../../../../fields/List"; import { listSpec } from "../../../../fields/Schema"; import { Cast } from "../../../../fields/Types"; import { CurrentUserUtils } from "../../../util/CurrentUserUtils"; -import { CollectionViewProps } from "../CollectionSubView"; +import { CollectionViewProps } from "../CollectionView"; import "./CollectionFreeFormView.scss"; import React = require("react"); import v5 = require("uuid/v5"); -import { computed } from "mobx"; -import { FieldResult } from "../../../../fields/Doc"; -import { List } from "../../../../fields/List"; @observer export class CollectionFreeFormRemoteCursors extends React.Component { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 136600164..0f466fc16 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -158,11 +158,11 @@ export class CollectionFreeFormView extends CollectionSubView { let retVal = false; if (newBox instanceof Doc) { - retVal = this.props.addDocument(newBox); + retVal = this.props.addDocument?.(newBox) || false; retVal && this.bringToFront(newBox); retVal && this.updateCluster(newBox); } else { - retVal = this.props.addDocument(newBox); + retVal = this.props.addDocument?.(newBox) || false; // bcz: deal with clusters } if (retVal) { @@ -270,7 +270,7 @@ export class CollectionFreeFormView extends CollectionSubView, props: Opt, property: string) => { + getClusterColor = (doc: Opt, props: DocumentViewProps, property: string) => { let clusterColor = this.props.styleProvider?.(doc, props, property); // bcz: check 'props' used to be renderDepth + 1 if (property !== "backgroundColor") return clusterColor; const cluster = NumCast(doc?.cluster); @@ -510,7 +510,7 @@ export class CollectionFreeFormView extends CollectionSubView this.props.removeDocument(d)); + sel.forEach(d => this.props.removeDocument?.(d)); e.stopPropagation(); break; case GestureUtils.Gestures.StartBracket: @@ -999,9 +999,9 @@ export class CollectionFreeFormView extends CollectionSubView { const pt = this.getTransform().transformPoint(NumCast(doc.x), NumCast(doc.y)); doc.x = pt[0]; doc.y = pt[1]; }); - return this.props.addDocument(doc); + return this.props.addDocument?.(doc) || false; } } if (where === "inPlace" && this.layoutDoc.isInPlaceContainer) { @@ -1172,8 +1172,8 @@ export class CollectionFreeFormView extends CollectionSubView, bounds: this.childDataProvider(entry[1].pair.layout, entry[1].replica) })); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index a963b9158..39df606f7 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -8,7 +8,7 @@ import { RichTextField } from "../../../../fields/RichTextField"; import { SchemaHeaderField } from "../../../../fields/SchemaHeaderField"; import { Cast, FieldValue, NumCast, StrCast } from "../../../../fields/Types"; import { GetEffectiveAcl } from "../../../../fields/util"; -import { Utils, intersectRect } from "../../../../Utils"; +import { Utils, intersectRect, returnFalse } from "../../../../Utils"; import { CognitiveServices } from "../../../cognitive_services/CognitiveServices"; import { Docs, DocumentOptions, DocUtils } from "../../../documents/Documents"; import { DocumentType } from "../../../documents/DocumentTypes"; @@ -93,7 +93,7 @@ export class MarqueeView extends React.Component { const indent = line.search(/\S|$/); const newBox = Docs.Create.TextDocument(line, { _width: 200, _height: 35, x: x + indent / 3 * 10, y: ypos, title: line }); - this.props.addDocument(newBox); + this.props.addDocument?.(newBox); ypos += 40 * this.Transform.Scale; }); })(); @@ -143,11 +143,11 @@ export class MarqueeView extends React.Component SelectionManager.SelectDoc(DocumentManager.Instance.getDocumentView(slide)!, false)); e.stopPropagation(); } else if (!e.ctrlKey && !e.metaKey && SelectionManager.SelectedDocuments().length < 2) { - FormattedTextBox.SelectOnLoadChar = FormattedTextBox.DefaultLayout && !this.props.ChildLayoutString ? e.key : ""; + FormattedTextBox.SelectOnLoadChar = FormattedTextBox.DefaultLayout && !this.props.childLayoutString ? e.key : ""; FormattedTextBox.LiveTextUndo = UndoManager.StartBatch("live text batch"); this.props.addLiveTextDocument(CurrentUserUtils.GetNewTextDoc("-typed text-", x, y, 200, 100, this.props.xMargin === 0)); e.stopPropagation(); @@ -191,7 +191,7 @@ export class MarqueeView extends React.Component c).map(c => new SchemaHeaderField(c, "#f1efeb"))], docList, { x: x, y: y, title: "droppedTable", _width: 300, _height: 100 }); - this.props.addDocument(newCol); + this.props.addDocument?.(newCol); } } @@ -333,7 +333,7 @@ export class MarqueeView extends React.Component { const selected = this.marqueeSelect(false); SelectionManager.DeselectAll(); - selected.forEach(doc => this.props.removeDocument(doc)); + selected.forEach(doc => this.props.removeDocument?.(doc)); this.cleanupInteractions(false); MarqueeOptionsMenu.Instance.fadeOut(true); @@ -363,9 +363,9 @@ export class MarqueeView extends React.Component { const selected = this.marqueeSelect(false); SelectionManager.DeselectAll(); - selected.forEach(d => this.props.removeDocument(d)); + selected.forEach(d => this.props.removeDocument?.(d)); const newCollection = DocUtils.pileup(selected, this.Bounds.left + this.Bounds.width / 2, this.Bounds.top + this.Bounds.height / 2); - this.props.addDocument(newCollection!); + this.props.addDocument?.(newCollection!); this.props.selectDocuments([newCollection!]); MarqueeOptionsMenu.Instance.fadeOut(true); this.hideMarquee(); @@ -424,10 +424,10 @@ export class MarqueeView extends React.Component r.category === "line"); const text = lines.map((l: any) => l.recognizedText).join("\r\n"); - this.props.addDocument(Docs.Create.TextDocument(text, { _width: this.Bounds.width, _height: this.Bounds.height, x: this.Bounds.left + this.Bounds.width, y: this.Bounds.top, title: text })); + this.props.addDocument?.(Docs.Create.TextDocument(text, { _width: this.Bounds.width, _height: this.Bounds.height, x: this.Bounds.left + this.Bounds.width, y: this.Bounds.top, title: text })); }); } } @@ -503,7 +503,7 @@ export class MarqueeView extends React.Component { const selected = this.marqueeSelect(false).map(d => { - this.props.removeDocument(d); + this.props.removeDocument?.(d); d.x = NumCast(d.x) - this.Bounds.left; d.y = NumCast(d.y) - this.Bounds.top; return d; @@ -524,7 +524,7 @@ export class MarqueeView extends React.Component { const newCollection = this.getCollection([], undefined, ["background"]); - this.props.addDocument(newCollection); + this.props.addDocument?.(newCollection); MarqueeOptionsMenu.Instance.fadeOut(true); this.hideMarquee(); setTimeout(() => this.props.selectDocuments([newCollection])); diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index 7ce269c92..586c5d1df 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -217,9 +217,9 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu Document={layout} DataDoc={layout.resolvedDataDoc as Doc} styleProvider={this.props.styleProvider} - LayoutTemplate={this.props.ChildLayoutTemplate} - LayoutTemplateString={this.props.ChildLayoutString} - FreezeDimensions={this.props.freezeChildDimensions} + LayoutTemplate={this.props.childLayoutTemplate} + LayoutTemplateString={this.props.childLayoutString} + FreezeDimensions={this.props.childFreezeDimensions} renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index 7700ea128..87c56de6f 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -217,9 +217,9 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) Document={layout} DataDoc={layout.resolvedDataDoc as Doc} styleProvider={this.props.styleProvider} - LayoutTemplate={this.props.ChildLayoutTemplate} - LayoutTemplateString={this.props.ChildLayoutString} - FreezeDimensions={this.props.freezeChildDimensions} + LayoutTemplate={this.props.childLayoutTemplate} + LayoutTemplateString={this.props.childLayoutString} + FreezeDimensions={this.props.childFreezeDimensions} renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 5ed49185b..dc048843f 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -45,57 +45,60 @@ import React = require("react"); export type DocAfterFocusFunc = (notFocused: boolean) => boolean; export type DocFocusFunc = (doc: Doc, willZoom?: boolean, scale?: number, afterFocus?: DocAfterFocusFunc, dontCenter?: boolean, focused?: boolean) => void; -export interface DocumentViewProps { +export interface DocumentViewSharedProps { ContainingCollectionView: Opt; ContainingCollectionDoc: Opt; - docFilters: () => string[]; + Document: Doc; + DataDoc?: Doc; contentsActive?: (setActive: () => boolean) => void; + onClick?: () => ScriptField; + dropAction?: dropActionType; + backgroundHalo?: (doc: Doc) => boolean; + docFilters: () => string[]; docRangeFilters: () => string[]; searchFilterDocs: () => Doc[]; - FreezeDimensions?: boolean; + rootSelected: (outsideReaction?: boolean) => boolean; // whether the root of a template has been selected + renderDepth: number; + addDocTab: (doc: Doc, where: string) => boolean; + addDocument?: (doc: Doc | Doc[]) => boolean; + removeDocument?: (doc: Doc | Doc[]) => boolean; + moveDocument?: (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; + pinToPres: (document: Doc) => void; + layerProvider?: (doc: Doc, assign?: boolean) => boolean; + styleProvider?: (doc: Opt, props: DocumentViewProps, property: string) => any; + ScreenToLocalTransform: () => Transform; + bringToFront: (doc: Doc, sendToBack?: boolean) => void; + parentActive: (outsideReaction: boolean) => boolean; + whenActiveChanged: (isActive: boolean) => void; + LayoutTemplateString?: string; + dontRegisterView?: boolean; + focus: DocFocusFunc; + ignoreAutoHeight?: boolean; + PanelWidth: () => number; + PanelHeight: () => number; NativeWidth?: () => number; NativeHeight?: () => number; - Document: Doc; - DataDoc?: Doc; - layerProvider?: (doc: Doc, assign?: boolean) => boolean; + ContentScaling: () => number; + ChromeHeight?: () => number; + pointerEvents?: string; +} +export interface DocumentViewProps extends DocumentViewSharedProps { + // properties specific to DocumentViews but not to FieldView + FreezeDimensions?: boolean; + fitToBox?: boolean; + treeViewDoc?: Doc; + dragDivName?: string; + contentsPointerEvents?: string; getView?: (view: DocumentView) => any; - LayoutTemplateString?: string; LayoutTemplate?: () => Opt; - fitToBox?: boolean; - ignoreAutoHeight?: boolean; contextMenuItems?: () => { script: ScriptField, label: string }[]; - rootSelected: (outsideReaction?: boolean) => boolean; // whether the root of a template has been selected - onClick?: () => ScriptField; onDoubleClick?: () => ScriptField; onPointerDown?: () => ScriptField; onPointerUp?: () => ScriptField; - treeViewDoc?: Doc; - dropAction?: dropActionType; - dragDivName?: string; nudge?: (x: number, y: number) => void; - addDocument?: (doc: Doc | Doc[]) => boolean; - removeDocument?: (doc: Doc | Doc[]) => boolean; - moveDocument?: (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; - ScreenToLocalTransform: () => Transform; setupDragLines?: (snapToDraggedDoc: boolean) => void; - renderDepth: number; - ContentScaling: () => number; - PanelWidth: () => number; - PanelHeight: () => number; - pointerEvents?: string; - contentsPointerEvents?: string; - focus: DocFocusFunc; - parentActive: (outsideReaction: boolean) => boolean; - whenActiveChanged: (isActive: boolean) => void; - bringToFront: (doc: Doc, sendToBack?: boolean) => void; - addDocTab: (doc: Doc, where: string) => boolean; - pinToPres: (document: Doc) => void; - backgroundHalo?: (doc: Doc) => boolean; - styleProvider?: (doc: Opt, props: DocumentViewProps, property: string) => any; forceHideLinkButton?: () => boolean; opacity?: () => number | undefined; - ChromeHeight?: () => number; - dontRegisterView?: boolean; layoutKey?: string; radialMenu?: String[]; display?: string; diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 5cd752fdb..1d58893ae 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -2,70 +2,29 @@ import React = require("react"); import { computed } from "mobx"; import { observer } from "mobx-react"; import { DateField } from "../../../fields/DateField"; -import { Doc, FieldResult, Opt, Field } from "../../../fields/Doc"; +import { Doc, Field, FieldResult, Opt } from "../../../fields/Doc"; import { List } from "../../../fields/List"; -import { ScriptField } from "../../../fields/ScriptField"; -import { AudioField, VideoField, WebField } from "../../../fields/URLField"; -import { Transform } from "../../util/Transform"; -import { CollectionView } from "../collections/CollectionView"; -import { AudioBox } from "./AudioBox"; +import { VideoField, WebField } from "../../../fields/URLField"; +import { DocumentViewSharedProps } from "./DocumentView"; import { VideoBox } from "./VideoBox"; -import { dropActionType } from "../../util/DragManager"; -import { DocAfterFocusFunc, DocFocusFunc, DocumentViewProps } from "./DocumentView"; // // these properties get assigned through the render() method of the DocumentView when it creates this node. // However, that only happens because the properties are "defined" in the markup for the field view. // See the LayoutString method on each field view : ImageBox, FormattedTextBox, etc. // -export interface FieldViewProps { +export interface FieldViewProps extends DocumentViewSharedProps { + // FieldView specific props that are not part of DocumentView props fieldKey: string; fitToBox?: boolean; - ContainingCollectionView: Opt; - ContainingCollectionDoc: Opt; - Document: Doc; - DataDoc?: Doc; - layerProvider?: (doc: Doc, assign?: boolean) => boolean; - contentsActive?: (setActive: () => boolean) => void; - onClick?: () => ScriptField; - dropAction: dropActionType; - backgroundHalo?: () => boolean; - docFilters: () => string[]; - docRangeFilters: () => string[]; - searchFilterDocs: () => Doc[]; - isSelected: (outsideReaction?: boolean) => boolean; - select: (isCtrlPressed: boolean) => void; - rootSelected: (outsideReaction?: boolean) => boolean; - renderDepth: number; - addDocument?: (document: Doc | Doc[]) => boolean; - addDocTab: (document: Doc, where: string) => boolean; - pinToPres: (document: Doc) => void; - removeDocument?: (document: Doc | Doc[]) => boolean; - moveDocument?: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; - styleProvider?: (document: Opt, props: Opt, property: string) => any; - ScreenToLocalTransform: () => Transform; - bringToFront: (doc: Doc, sendToBack?: boolean) => void; - parentActive: (outsideReaction: boolean) => boolean; + overflow?: boolean; // bcz: would like to think this can be avoided -- need to look at further active: (outsideReaction?: boolean) => boolean; - whenActiveChanged: (isActive: boolean) => void; - LayoutTemplateString?: string; - dontRegisterView?: boolean; - focus: DocFocusFunc; - presMultiSelect?: (doc: Doc) => void; //added for selecting multiple documents in a presentation - ignoreAutoHeight?: boolean; - PanelWidth: () => number; - PanelHeight: () => number; - PanelPosition?: string; - overflow?: boolean; - NativeHeight?: () => number; - NativeWidth?: () => number; - setVideoBox?: (player: VideoBox) => void; - ContentScaling: () => number; - ChromeHeight?: () => number; - childLayoutTemplate?: () => Opt; + select: (isCtrlPressed: boolean) => void; + isSelected: (outsideReaction?: boolean) => boolean; + // properties intended to be used from within layout strings (otherwise use the function equivalents that work more efficiently with React) - fontSize?: number; pointerEvents?: string; + fontSize?: number; height?: number; width?: number; background?: string; diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx index 0161f51fd..b90bf9eb1 100644 --- a/src/client/views/nodes/FilterBox.tsx +++ b/src/client/views/nodes/FilterBox.tsx @@ -9,7 +9,7 @@ import { RichTextField } from "../../../fields/RichTextField"; import { listSpec, makeInterface } from "../../../fields/Schema"; import { ComputedField, ScriptField } from "../../../fields/ScriptField"; import { Cast } from "../../../fields/Types"; -import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnZero } from "../../../Utils"; +import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnZero, returnTrue } from "../../../Utils"; import { Docs } from "../../documents/Documents"; import { DocumentType } from "../../documents/DocumentTypes"; import { CollectionDockingView } from "../collections/CollectionDockingView"; @@ -153,7 +153,6 @@ export class FilterBox extends ViewBoxBaseComponent "rgba(105, 105, 105, 0.432)"; - get ignoreFields() { return ["_docFilters", "_docRangeFilters"]; } // this makes the tree view collection ignore these filters (otherwise, the filters would filter themselves) @computed get scriptField() { const scriptText = "setDocFilter(this?.target, heading, this.title, checked)"; const script = ScriptField.MakeScript(scriptText, { this: Doc.name, heading: "string", checked: "string", containingTreeView: Doc.name }); @@ -181,7 +180,6 @@ export class FilterBox extends ViewBoxBaseComponent
    (
    {mode !== CollectionViewType.Invalid ? removeDocument={returnFalse} dontRegisterView={true} focus={this.selectElement} - ScreenToLocalTransform={this.getTransform} /> + ScreenToLocalTransform={this.getTransform} + /> : (null) }
    diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 998ca839d..f64d80731 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -183,7 +183,6 @@ export class VideoBox extends ViewBoxAnnotatableComponent this.Document._videoStart, (videoStart) => { -- cgit v1.2.3-70-g09d2 From 30338491c7b3cbba852931c76774f6bfd44d4060 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 10 Dec 2020 12:54:41 -0500 Subject: removed annotationsKey prop in favor of reusing fieldKey. Fixed web pages to allow dash annotations again. --- src/client/views/MainView.tsx | 1 - src/client/views/TemplateMenu.tsx | 1 - src/client/views/collections/CollectionStackingView.tsx | 4 ++-- src/client/views/collections/CollectionSubView.tsx | 14 ++++++-------- src/client/views/collections/CollectionView.tsx | 5 +---- src/client/views/collections/TabDocView.tsx | 1 - .../collectionFreeForm/CollectionFreeFormView.tsx | 11 +++++------ .../views/collections/collectionFreeForm/MarqueeView.tsx | 2 +- src/client/views/nodes/FilterBox.tsx | 2 -- src/client/views/nodes/ImageBox.tsx | 2 +- src/client/views/nodes/LinkBox.tsx | 1 - src/client/views/nodes/PresBox.tsx | 1 - src/client/views/nodes/ScreenshotBox.tsx | 1 - src/client/views/nodes/VideoBox.tsx | 2 +- src/client/views/nodes/WebBox.scss | 4 +++- src/client/views/nodes/WebBox.tsx | 2 +- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 13 ++++++++----- src/client/views/pdf/PDFViewer.tsx | 4 ++-- src/client/views/search/SearchBox.tsx | 1 - 19 files changed, 31 insertions(+), 41 deletions(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 9b3d5c6ae..2705d2c34 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -456,7 +456,6 @@ export class MainView extends React.Component { DataDoc={undefined} fieldKey={"data"} dropAction={"alias"} - annotationsKey={""} parentActive={returnFalse} styleProvider={TabDocView.styleProvider} rootSelected={returnTrue} diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index 9c5c70c60..203274681 100644 --- a/src/client/views/TemplateMenu.tsx +++ b/src/client/views/TemplateMenu.tsx @@ -152,7 +152,6 @@ export class TemplateMenu extends React.Component { PanelWidth={this.return100} PanelHeight={this.return100} treeViewHideHeaderFields={true} - annotationsKey={""} dontRegisterView={true} fieldKey={"data"} moveDocument={returnFalse} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 83ac138f5..058536f69 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -352,8 +352,8 @@ export class CollectionStackingView extends CollectionSubView { if (this.layoutDoc._autoHeight && ref && this.refList.length && !SnappingManager.GetIsDragging()) { const height = Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), Math.max(...this.refList.map(r => NumCast(Doc.Layout(doc)._viewScale, 1) * Number(getComputedStyle(r).height.replace("px", ""))))); - if (this.props.annotationsKey) { - doc[this.props.annotationsKey + "-height"] = height; + if (this.props.isAnnotationOverlay) { + doc[this.props.fieldKey + "-height"] = height; } else { Doc.Layout(doc)._height = height * NumCast(Doc.Layout(doc)._viewScale, 1); } diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 592d6ab87..38e461e46 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -67,14 +67,14 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: // sets the dataDoc's data field to an empty list if the data field is undefined - prevents issues with addonly // setTimeout changes it outside of the @computed section setTimeout(() => { - if (!this.dataDoc[this.props.annotationsKey || this.props.fieldKey]) this.dataDoc[this.props.annotationsKey || this.props.fieldKey] = new List(); + if (!this.dataDoc[this.props.fieldKey]) this.dataDoc[this.props.fieldKey] = new List(); }, 1000); - return this.dataDoc[this.props.annotationsKey || this.props.fieldKey]; + return this.dataDoc[this.props.fieldKey]; } get childLayoutPairs(): { layout: Doc; data: Doc; }[] { const { Document, DataDoc } = this.props; - const validPairs = this.childDocs.map(doc => Doc.GetLayoutDataDocPair(Document, !this.props.annotationsKey ? DataDoc : undefined, doc)). + const validPairs = this.childDocs.map(doc => Doc.GetLayoutDataDocPair(Document, !this.props.isAnnotationOverlay ? DataDoc : undefined, doc)). filter(pair => { // filter out any documents that have a proto that we don't have permissions to (which we determine by not having any keys return pair.layout && (!pair.layout.proto || (pair.layout.proto instanceof Doc && GetEffectiveAcl(pair.layout.proto) !== AclPrivate));// Object.keys(pair.layout.proto).length)); }); @@ -84,12 +84,10 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: return Cast(this.dataField, listSpec(Doc)); } docFilters = () => { - return this.props.ignoreFilters ? [] : - [...this.props.docFilters(), ...Cast(this.props.Document._docFilters, listSpec("string"), [])]; + return [...this.props.docFilters(), ...Cast(this.props.Document._docFilters, listSpec("string"), [])]; } docRangeFilters = () => { - return this.props.ignoreFilters ? [] : - [...this.props.docRangeFilters(), ...Cast(this.props.Document._docRangeFilters, listSpec("string"), [])]; + return [...this.props.docRangeFilters(), ...Cast(this.props.Document._docRangeFilters, listSpec("string"), [])]; } searchFilterDocs = () => { return [...this.props.searchFilterDocs(), ...DocListCast(this.props.Document._searchFilterDocs)]; @@ -104,7 +102,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: // For example, if an image doc is rendered with a slide template, the template will try to render the data field as a collection. // Since the data field is actually an image, we set the list of documents to the singleton of root document's proto which will be an image. const rootDoc = Cast(this.props.Document.rootDocument, Doc, null); - rawdocs = rootDoc && !this.props.annotationsKey ? [Doc.GetProto(rootDoc)] : []; + rawdocs = rootDoc && !this.props.isAnnotationOverlay ? [Doc.GetProto(rootDoc)] : []; } const docs = rawdocs.filter(d => !(d instanceof Promise) && GetEffectiveAcl(Doc.GetProto(d)) !== AclPrivate).map(d => d as Doc); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index af03e4ceb..511fc723d 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -63,8 +63,6 @@ export enum CollectionViewType { } export interface CollectionViewProps extends FieldViewProps { isAnnotationOverlay?: boolean; // is the collection an annotation overlay (eg an overlay on an image/video/etc) - annotationsKey: string; // which data field on the collection stores the collection of annotation documents - ignoreFilters?: boolean; layoutEngine?: () => string; parentActive: (outsideReaction: boolean) => boolean; filterAddDocument?: (doc: Doc | Doc[]) => boolean; // allows a document that renders a Collection view to filter or modify any documents added to the collection (see PresBox for an example) @@ -72,11 +70,11 @@ export interface CollectionViewProps extends FieldViewProps { setPreviewCursor?: (func: (x: number, y: number, drag: boolean) => void) => void; // property overrides for child documents + children?: never | (() => JSX.Element[]) | React.ReactNode; childDocuments?: Doc[]; // used to override the documents shown by the sub collection to an explicit list (see LinkBox) childOpacity?: () => number; childLayoutTemplate?: () => (Doc | undefined);// specify a layout Doc template to use for children of the collection childLayoutString?: string; - children?: never | (() => JSX.Element[]) | React.ReactNode; childFreezeDimensions?: boolean; // used by TimeView to coerce documents to treat their width height as their native width/height childIgnoreNativeSize?: boolean; childClickScript?: ScriptField; @@ -387,7 +385,6 @@ export class CollectionView extends Touchable { childLayoutString: this.childLayoutString, ScreenToLocalTransform: this.screenToLocalTransform, CollectionView: this, - annotationsKey: "" }; const boxShadow = Doc.UserDoc().renderStyle === "comic" || this.props.Document.treeViewOutlineMode || this.collectionViewType === CollectionViewType.Linear ? undefined : this.props.styleProvider?.(this.props.Document, this.props, "boxShadow"); diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 3c1aaae47..fd50c6273 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -346,7 +346,6 @@ export class TabDocView extends React.Component { dropAction={undefined} isSelected={returnFalse} dontRegisterView={true} - annotationsKey={""} fieldKey={Doc.LayoutFieldKey(this._document!)} bringToFront={emptyFunction} rootSelected={returnTrue} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 0f466fc16..e09abd017 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -47,7 +47,6 @@ import { MarqueeOptionsMenu } from "./MarqueeOptionsMenu"; import { MarqueeView } from "./MarqueeView"; import React = require("react"); import { CurrentUserUtils } from "../../../util/CurrentUserUtils"; -import { isUndefined } from "lodash"; export const panZoomSchema = createSchema({ _panX: "number", @@ -950,7 +949,7 @@ export class CollectionFreeFormView extends CollectionSubView this.doLayoutComputation, (elements) => this._layoutElements = elements || [], { fireImmediately: true, name: "doLayout" }); - if (!this.props.annotationsKey) { + if (!this.props.isAnnotationOverlay) { this._boundsReaction = reaction(() => this.contentBounds, bounds => (!this.fitToContent && this._layoutElements?.length) && setTimeout(() => { const rbounds = Cast(this.Document._renderContentBounds, listSpec("number"), [0, 0, 0, 0]); @@ -1291,7 +1290,7 @@ export class CollectionFreeFormView extends CollectionSubView { - if (this.props.annotationsKey || this.props.Document.annotationOn || !ContextMenu.Instance) return; + if (this.props.isAnnotationOverlay || this.props.Document.annotationOn || !ContextMenu.Instance) return; const appearance = ContextMenu.Instance.findByDescription("Appearance..."); const appearanceItems = appearance && "subitems" in appearance ? appearance.subitems : []; @@ -1527,7 +1526,7 @@ export class CollectionFreeFormView extends CollectionSubView - {this.Document._freeformLOD && !this.props.active() && !this.props.isAnnotationOverlay && !this.props.annotationsKey && this.props.renderDepth > 0 ? + {this.Document._freeformLOD && !this.props.active() && !this.props.isAnnotationOverlay && this.props.renderDepth > 0 ? this.placeholder : this.marqueeView} {!this.props.noOverlay ? : (null)} diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 39df606f7..52310d628 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -634,7 +634,7 @@ export class MarqueeView extends React.Component e.preventDefault()} onScroll={(e) => e.currentTarget.scrollTop = e.currentTarget.scrollLeft = 0} onClick={this.onClick} onPointerDown={this.onPointerDown}> {this._visible ? this.marqueeDiv : null} diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx index b90bf9eb1..ffe1684d4 100644 --- a/src/client/views/nodes/FilterBox.tsx +++ b/src/client/views/nodes/FilterBox.tsx @@ -208,8 +208,6 @@ export class FilterBox extends ViewBoxBaseComponent( ChromeHeight={returnZero} childDocuments={[this.dataDoc]} treeViewSkipFields={Cast(this.props.Document.linkBoxExcludedKeys, listSpec("string"), null)} - annotationsKey={""} dontRegisterView={true} renderDepth={this.props.renderDepth + 1} CollectionView={undefined} diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index c2385cab8..da74edbe3 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -2412,7 +2412,6 @@ export class PresBox extends ViewBoxBaseComponent
    {mode !== CollectionViewType.Invalid ? Opt; // bcz: hack: notifies the text document when the container has made a link. allows the text doc to react and setup a hyeprlink for any selected text @@ -1606,7 +1607,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp sidebarContentScaling = () => this.props.ContentScaling() * NumCast(this.layoutDoc._viewScale, 1); @computed get sidebarCollection() { const fitToBox = this.props.Document._fitToBox; - const collectionProps = { + const collectionProps: SubCollectionViewProps & collectionFreeformViewProps = { ...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit, NativeWidth: returnZero, NativeHeight: returnZero, @@ -1616,8 +1617,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp yMargin: 0, chromeStatus: "enabled", scaleField: this.annotationKey + "-scale", - annotationsKey: this.annotationKey, isAnnotationOverlay: true, + fieldKey: this.annotationKey, fitToBox: fitToBox, focus: this.props.focus, isSelected: this.props.isSelected, @@ -1636,7 +1637,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp return !this.layoutDoc._showSidebar || this.sidebarWidthPercent === "0%" ? (null) :
    - {this.layoutDoc.sidebarViewType === CollectionViewType.Freeform ? : } + {this.layoutDoc.sidebarViewType === CollectionViewType.Freeform ? + : + }
    ; } diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 9b689eb6b..633a34c5e 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -736,7 +736,8 @@ export class PDFViewer extends ViewBoxAnnotatableComponent Date: Thu, 10 Dec 2020 14:18:53 -0500 Subject: more cleanup/organization of 'props' . removed VisibleHeight props and cleaned up PDF and other props --- src/client/util/CurrentUserUtils.ts | 1 - .../util/Import & Export/DirectoryImportBox.tsx | 1 - src/client/views/PropertiesView.tsx | 2 +- .../views/collections/CollectionSchemaView.tsx | 2 +- .../views/collections/CollectionStackingView.tsx | 21 +++-- .../views/collections/CollectionTimeView.tsx | 7 +- src/client/views/collections/CollectionView.tsx | 36 ++++---- src/client/views/collections/SchemaTable.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 16 ++-- .../collectionGrid/CollectionGridView.tsx | 2 +- .../CollectionMulticolumnView.tsx | 2 +- .../CollectionMultirowView.tsx | 2 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 2 +- .../views/nodes/ContentFittingDocumentView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 4 +- src/client/views/nodes/KeyValueBox.tsx | 1 - src/client/views/nodes/PDFBox.tsx | 96 +++++----------------- src/client/views/nodes/VideoBox.tsx | 11 +-- src/client/views/nodes/WebBox.tsx | 19 +---- .../views/nodes/formattedText/FormattedTextBox.tsx | 3 - src/client/views/pdf/PDFViewer.tsx | 50 +++-------- src/fields/documentSchemas.ts | 2 - 22 files changed, 84 insertions(+), 200 deletions(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 213bc3d88..676e7ce3e 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -801,7 +801,6 @@ export class CurrentUserUtils { } } - static setupUserDoc(doc: Doc) { if (doc.myUserDoc === undefined) { doc.treeViewOpen = true; diff --git a/src/client/util/Import & Export/DirectoryImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx index 7f01966b9..d9f010557 100644 --- a/src/client/util/Import & Export/DirectoryImportBox.tsx +++ b/src/client/util/Import & Export/DirectoryImportBox.tsx @@ -158,7 +158,6 @@ export class DirectoryImportBox extends React.Component { importContainer = Docs.Create.SchemaDocument(headers, docs, options); } runInAction(() => this.phase = 'External: uploading files to Google Photos...'); - importContainer._columnsStack = false; await GooglePhotos.Export.CollectionToAlbum({ collection: importContainer }); Doc.AddDocToList(Doc.GetProto(parent.props.Document), "data", importContainer); !this.persistent && this.props.removeDocument && this.props.removeDocument(doc); diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 08394cd97..233429f4d 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -272,7 +272,7 @@ export class PropertiesView extends React.Component { treeViewDoc={undefined} styleProvider={this.props.styleProvider} fitToBox={true} - FreezeDimensions={true} + freezeDimensions={true} dontCenter={"y"} NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} NativeHeight={layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined} diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index e22b8effe..c64048345 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -401,7 +401,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { Document={this.previewDocument} DataDoc={undefined} fitToBox={true} - FreezeDimensions={true} + freezeDimensions={true} dontCenter={"y"} focus={emptyFunction} renderDepth={this.props.renderDepth} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 058536f69..b1c5dec84 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -3,7 +3,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { CursorProperty } from "csstype"; import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; -import Switch from 'rc-switch'; import { DataSym, Doc, HeightSym, WidthSym } from "../../../fields/Doc"; import { collectionSchema, documentSchema } from "../../../fields/documentSchemas"; import { Id } from "../../../fields/FieldSymbols"; @@ -12,23 +11,23 @@ import { listSpec, makeInterface } from "../../../fields/Schema"; import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; -import { emptyFunction, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils, smoothScroll, returnVal } from "../../../Utils"; +import { emptyFunction, returnFalse, returnOne, returnVal, returnZero, setupMoveUpEvents, smoothScroll, Utils } from "../../../Utils"; +import { DocUtils } from "../../documents/Documents"; import { DragManager, dropActionType } from "../../util/DragManager"; +import { SnappingManager } from "../../util/SnappingManager"; import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import { EditableView } from "../EditableView"; +import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; +import { DocAfterFocusFunc } from "../nodes/DocumentView"; import { CollectionMasonryViewFieldRow } from "./CollectionMasonryViewFieldRow"; import "./CollectionStackingView.scss"; import { CollectionStackingViewFieldColumn } from "./CollectionStackingViewFieldColumn"; import { CollectionSubView } from "./CollectionSubView"; import { CollectionViewType } from "./CollectionView"; -import { SnappingManager } from "../../util/SnappingManager"; -import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; -import { DocUtils } from "../../documents/Documents"; -import { DocAfterFocusFunc } from "../nodes/DocumentView"; const _global = (window /* browser */ || global /* node */) as any; type StackingDocument = makeInterface<[typeof collectionSchema, typeof documentSchema]>; @@ -56,7 +55,7 @@ export class CollectionStackingView extends CollectionSubView doc) { @computed get contents() { return
    - +
    ; } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 511fc723d..dbbb3e991 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -66,7 +66,6 @@ export interface CollectionViewProps extends FieldViewProps { layoutEngine?: () => string; parentActive: (outsideReaction: boolean) => boolean; filterAddDocument?: (doc: Doc | Doc[]) => boolean; // allows a document that renders a Collection view to filter or modify any documents added to the collection (see PresBox for an example) - VisibleHeight?: () => number; setPreviewCursor?: (func: (x: number, y: number, drag: boolean) => void) => void; // property overrides for child documents @@ -242,28 +241,27 @@ export class CollectionView extends Touchable { private SubView = (type: CollectionViewType, props: SubCollectionViewProps) => { TraceMobx(); switch (type) { - case CollectionViewType.Schema: return (); - case CollectionViewType.Docking: return (); - case CollectionViewType.Tree: return (); - //case CollectionViewType.Staff: return (); - case CollectionViewType.Multicolumn: return (); - case CollectionViewType.Multirow: return (); - case CollectionViewType.Linear: { return (); } - case CollectionViewType.Pile: { return (); } - case CollectionViewType.Carousel: { return (); } - case CollectionViewType.Carousel3D: { return (); } - case CollectionViewType.Stacking: { this.props.Document._columnsStack = true; return (); } - case CollectionViewType.Masonry: { this.props.Document._columnsStack = false; return (); } - case CollectionViewType.Time: { return (); } - case CollectionViewType.Map: return (); - case CollectionViewType.Grid: return (); - case CollectionViewType.Freeform: - default: { this.props.Document._freeformLayoutEngine = undefined; return (); } + default: + case CollectionViewType.Freeform: return ; + case CollectionViewType.Schema: return ; + case CollectionViewType.Docking: return ; + case CollectionViewType.Tree: return ; + case CollectionViewType.Multicolumn: return ; + case CollectionViewType.Multirow: return ; + case CollectionViewType.Linear: return ; + case CollectionViewType.Pile: return ; + case CollectionViewType.Carousel: return ; + case CollectionViewType.Carousel3D: return ; + case CollectionViewType.Stacking: return ; + case CollectionViewType.Masonry: return ; + case CollectionViewType.Time: return ; + case CollectionViewType.Map: return ; + case CollectionViewType.Grid: return ; + //case CollectionViewType.Staff: return ; } } setupViewTypes(category: string, func: (viewType: CollectionViewType) => Doc, addExtras: boolean) { - const subItems: ContextMenuProps[] = []; subItems.push({ description: "Freeform", event: () => func(CollectionViewType.Freeform), icon: "signature" }); if (addExtras && CollectionView._safeMode) { diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index b532d3302..24a67faaf 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -571,7 +571,7 @@ export class SchemaTable extends React.Component { Document={this._showDoc} DataDoc={this._showDataDoc} fitToBox={true} - FreezeDimensions={true} + freezeDimensions={true} focus={emptyFunction} renderDepth={this.props.renderDepth} rootSelected={() => false} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index e09abd017..94de40bc8 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -918,7 +918,7 @@ export class CollectionFreeFormView extends CollectionSubView, bounds: this.childDataProvider(entry[1].pair.layout, entry[1].replica) })); diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index f3e385746..bef197bee 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -170,7 +170,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { PanelWidth={width} PanelHeight={height} ContentScaling={returnOne} - FreezeDimensions={true} + freezeDimensions={true} fitToBox={true} ScreenToLocalTransform={dxf} onClick={this.onChildClickHandler} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index 586c5d1df..d4913a5ed 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -219,7 +219,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu styleProvider={this.props.styleProvider} LayoutTemplate={this.props.childLayoutTemplate} LayoutTemplateString={this.props.childLayoutString} - FreezeDimensions={this.props.childFreezeDimensions} + freezeDimensions={this.props.childFreezeDimensions} renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index 87c56de6f..9039090d1 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -219,7 +219,7 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) styleProvider={this.props.styleProvider} LayoutTemplate={this.props.childLayoutTemplate} LayoutTemplateString={this.props.childLayoutString} - FreezeDimensions={this.props.childFreezeDimensions} + freezeDimensions={this.props.childFreezeDimensions} renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index b4b887617..d68184da6 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -52,7 +52,7 @@ export class CollectionFreeFormDocumentView extends DocComponent(Docu undefined); } @computed get topMost() { return this.props.renderDepth === 0; } - @computed get freezeDimensions() { return this.props.FreezeDimensions; } + @computed get freezeDimensions() { return this.props.freezeDimensions; } @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.dataDoc, this.freezeDimensions)); } @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.dataDoc, this.freezeDimensions)); } @computed get onClickHandler() { return this.props.onClick?.() ?? Cast(this.Document.onClick, ScriptField, Cast(this.layoutDoc.onClick, ScriptField, null)); } diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index 4ac932c24..8acf4081c 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -169,7 +169,6 @@ export class KeyValueBox extends React.Component { getTemplate = async () => { const parent = Docs.Create.StackingDocument([], { _width: 800, _height: 800, title: "Template" }); - parent._columnsStack = false; parent._columnWidth = 100; for (const row of this.rows.filter(row => row.isChecked)) { await this.createTemplateField(parent, row); diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 42b24f6f6..a2f3fb2d1 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -1,28 +1,27 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, observable, runInAction, reaction, IReactionDisposer, trace, untracked, computed } from 'mobx'; +import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; import { observer } from "mobx-react"; import * as Pdfjs from "pdfjs-dist"; import "pdfjs-dist/web/pdf_viewer.css"; -import { Opt, WidthSym, Doc, HeightSym } from "../../../fields/Doc"; +import { Doc, Opt, WidthSym } from "../../../fields/Doc"; +import { documentSchema } from '../../../fields/documentSchemas'; import { makeInterface } from "../../../fields/Schema"; -import { ScriptField } from '../../../fields/ScriptField'; -import { Cast, NumCast, StrCast } from "../../../fields/Types"; -import { PdfField, URLField } from "../../../fields/URLField"; +import { Cast, NumCast } from "../../../fields/Types"; +import { PdfField } from "../../../fields/URLField"; +import { TraceMobx } from '../../../fields/util'; import { Utils } from '../../../Utils'; +import { KeyCodes } from '../../util/KeyCodes'; import { undoBatch } from '../../util/UndoManager'; import { panZoomSchema } from '../collections/collectionFreeForm/CollectionFreeFormView'; +import { CollectionViewType } from '../collections/CollectionView'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { ViewBoxAnnotatableComponent } from "../DocComponent"; import { PDFViewer } from "../pdf/PDFViewer"; import { FieldView, FieldViewProps } from './FieldView'; import { pageSchema } from "./ImageBox"; -import { KeyCodes } from '../../util/KeyCodes'; import "./PDFBox.scss"; import React = require("react"); -import { documentSchema } from '../../../fields/documentSchemas'; -import { CollectionViewType } from '../collections/CollectionView'; -import { TraceMobx } from '../../../fields/util'; type PdfDocument = makeInterface<[typeof documentSchema, typeof panZoomSchema, typeof pageSchema]>; const PdfDocument = makeInterface(documentSchema, panZoomSchema, pageSchema); @@ -30,17 +29,11 @@ const PdfDocument = makeInterface(documentSchema, panZoomSchema, pageSchema); @observer export class PDFBox extends ViewBoxAnnotatableComponent(PdfDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PDFBox, fieldKey); } - private _keyValue: string = ""; - private _valueValue: string = ""; - private _scriptValue: string = ""; private _searchString: string = ""; private _initialScale: number = 0; // the initial scale of the PDF when first rendered which determines whether the document will be live on startup or not. Getting bigger after startup won't make it automatically be live. private _displayPdfLive = false; // has this box ever had its contents activated -- if so, stop drawing the overlay title private _pdfViewer: PDFViewer | undefined; private _searchRef = React.createRef(); - private _keyRef = React.createRef(); - private _valueRef = React.createRef(); - private _scriptRef = React.createRef(); private _selectReactionDisposer: IReactionDisposer | undefined; @observable private _searching: boolean = false; @@ -130,25 +123,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent { - const scriptText = this._scriptValue ? this._scriptValue : - this._keyValue && this._valueValue ? `this.${this._keyValue} === ${this._valueValue}` : "true"; - this.props.Document.filterScript = ScriptField.MakeFunction(scriptText); - } - - private resetFilters = () => { - this._keyValue = this._valueValue = this._scriptValue = ""; - this._keyRef.current && (this._keyRef.current.value = ""); - this._valueRef.current && (this._valueRef.current.value = ""); - this._scriptRef.current && (this._scriptRef.current.value = ""); - this.applyFilter(); - } - private newKeyChange = (e: React.ChangeEvent) => this._keyValue = e.currentTarget.value; - private newValueChange = (e: React.ChangeEvent) => this._valueValue = e.currentTarget.value; - private newScriptChange = (e: React.ChangeEvent) => this._scriptValue = e.currentTarget.value; - whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); setPdfViewer = (pdfViewer: PDFViewer) => { this._pdfViewer = pdfViewer; }; searchStringChanged = (e: React.ChangeEvent) => this._searchString = e.currentTarget.value; @@ -197,36 +171,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent this._pageControls = !this._pageControls)} /> {this._pageControls ? pageBtns : (null)}
    - {/*
    e.stopPropagation()}> - -
    -
    - Annotation View Settings -
    -
    - - -
    -
    - -
    -
    - - -
    -
    -
    */}
    ); } @@ -253,19 +197,19 @@ export class PDFBox extends ViewBoxAnnotatableComponent 600) ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}> -
    - 600) ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}> +
    + + startupLive={true} + /> {this.settingsPanel()}
    ; } diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 8d10768ff..90a5dee23 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -427,11 +427,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent + renderDepth={this.props.renderDepth + 1}> {this.contentFunc} diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 197ff20d5..47464d794 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -646,14 +646,6 @@ export class WebBox extends ViewBoxAnnotatableComponent this._marqueeX; marqueeY = () => this._marqueeY; marqueeing = () => this._marqueeing; - visibleHeight = () => { - if (this._mainCont.current) { - const boundingRect = this._mainCont.current.getBoundingClientRect(); - const scaling = (Doc.NativeWidth(this.Document) || 0) / boundingRect.width; - return Math.min(boundingRect.height * scaling, this.props.PanelHeight() * scaling); - } - return this.props.PanelHeight(); - } scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { const scaling = Number.isFinite(this.props.ContentScaling()) ? this.props.ContentScaling() || 1 : 1; @@ -697,13 +689,8 @@ export class WebBox extends ViewBoxAnnotatableComponent + renderDepth={this.props.renderDepth + 1}> diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 33515e475..bfbd7805d 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1620,8 +1620,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp isAnnotationOverlay: true, fieldKey: this.annotationKey, fitToBox: fitToBox, - focus: this.props.focus, - isSelected: this.props.isSelected, select: emptyFunction, active: this.annotationsActive, ContentScaling: this.sidebarContentScaling, @@ -1632,7 +1630,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp CollectionView: undefined, ScreenToLocalTransform: this.sidebarScreenToLocal, renderDepth: this.props.renderDepth + 1, - ContainingCollectionDoc: this.props.ContainingCollectionDoc, }; return !this.layoutDoc._showSidebar || this.sidebarWidthPercent === "0%" ? (null) :
    + renderDepth={this.props.renderDepth + 1}>
    ; } @@ -778,7 +751,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent this._marqueeX; marqueeY = () => this._marqueeY; marqueeing = () => this._marqueeing; - visibleHeight = () => this.props.PanelHeight() / this.props.ContentScaling(); contentZoom = () => this._zoomed; render() { TraceMobx(); diff --git a/src/fields/documentSchemas.ts b/src/fields/documentSchemas.ts index 979238767..67df56015 100644 --- a/src/fields/documentSchemas.ts +++ b/src/fields/documentSchemas.ts @@ -49,14 +49,12 @@ export const documentSchema = createSchema({ _showTitle: "string", // the fieldkey whose contents should be displayed at the top of the document _showTitleHover: "string", // the showTitle should be shown only on hover _showAudio: "boolean", // whether to show the audio record icon on documents - _freeformLayoutEngine: "string",// the string ID for the layout engine to use to layout freeform view documents _freeformLOD: "boolean", // whether to enable LOD switching for CollectionFreeFormViews _pivotField: "string", // specifies which field key should be used as the timeline/pivot axis _replacedChrome: "string", // what the default chrome is replaced with. Currently only supports the value of 'replaced' for PresBox's. _chromeStatus: "string", // determines the state of the collection chrome. values allowed are 'replaced', 'enabled', 'disabled', 'collapsed' _columnsFill: "boolean", // whether documents in a stacking view column should be sized to fill the column _columnsSort: "string", // how a document should be sorted "ascending", "descending", undefined (none) - _columnsStack: "boolean", // whether a stacking document stacks vertically (as opposed to masonry horizontal) _columnsHideIfEmpty: "boolean", // whether empty stacking view column headings should be hidden _columnHeaders: listSpec(SchemaHeaderField), // header descriptions for stacking/masonry _schemaHeaders: listSpec(SchemaHeaderField), // header descriptions for schema views -- cgit v1.2.3-70-g09d2 From 890dd1c3d8d6a00cf3111972c20f7b5b9cb09085 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 12 Dec 2020 22:52:26 -0500 Subject: made conentScaling a DocumentView-only prop --- src/client/views/MainView.tsx | 4 ---- src/client/views/StyleProvider.tsx | 12 ++++++++++-- src/client/views/TemplateMenu.tsx | 1 - src/client/views/collections/CollectionStackingView.tsx | 5 +++-- src/client/views/collections/TabDocView.tsx | 4 ++-- src/client/views/collections/TreeView.tsx | 9 +++++---- .../collectionFreeForm/CollectionFreeFormView.tsx | 7 ++++--- src/client/views/nodes/AudioBox.tsx | 3 ++- src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 3 ++- src/client/views/nodes/ColorBox.tsx | 2 +- src/client/views/nodes/ContentFittingDocumentView.tsx | 9 ++++----- src/client/views/nodes/DocumentView.tsx | 7 ++++--- src/client/views/nodes/ImageBox.tsx | 2 +- src/client/views/nodes/KeyValuePair.tsx | 1 - src/client/views/nodes/LinkAnchorBox.tsx | 2 +- src/client/views/nodes/PDFBox.tsx | 2 +- src/client/views/nodes/ScreenshotBox.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 2 +- src/client/views/nodes/WebBox.tsx | 10 ++++------ src/client/views/nodes/formattedText/FormattedTextBox.tsx | 8 ++++---- src/client/views/pdf/PDFViewer.tsx | 5 ++--- src/client/views/presentationview/PresElementBox.tsx | 2 +- 22 files changed, 53 insertions(+), 49 deletions(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index d55d43623..b8c7a1a73 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -465,7 +465,6 @@ export class MainView extends React.Component { removeDocument={this.remButtonDoc} onClick={undefined} ScreenToLocalTransform={this.buttonBarXf} - ContentScaling={returnOne} PanelWidth={this.flyoutWidthFunc} PanelHeight={this.getContentsHeight} renderDepth={0} @@ -529,7 +528,6 @@ export class MainView extends React.Component { styleProvider={DefaultStyleProvider} removeDocument={undefined} ScreenToLocalTransform={Transform.Identity} - ContentScaling={returnOne} PanelWidth={this.getPWidth} PanelHeight={this.getPHeight} renderDepth={0} @@ -568,7 +566,6 @@ export class MainView extends React.Component { focus={returnFalse} PanelWidth={() => 500} PanelHeight={() => 800} - ContentScaling={returnOne} docFilters={returnEmptyFilter} docRangeFilters={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} @@ -634,7 +631,6 @@ export class MainView extends React.Component { focus={returnFalse} PanelWidth={() => 500} PanelHeight={() => 800} - ContentScaling={returnOne} docFilters={returnEmptyFilter} docRangeFilters={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 6a534a979..128c3cb96 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -16,6 +16,7 @@ import React = require("react"); import Color = require('color'); import { listSpec } from '../../fields/Schema'; import { MainView } from './MainView'; +import { FieldViewProps } from './nodes/FieldView'; export enum StyleLayers { Background = "background" @@ -59,10 +60,17 @@ function toggleBackground(doc: Doc) { }), "toggleBackground"); } +export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentViewProps { + if (toBeDetermined.ContentScaling) { + return true; + } + return false; +} + // // a preliminary implementation of a dash style sheet for setting rendering properties of documents nested within a Tab // -export function DefaultStyleProvider(doc: Opt, props: Opt, property: string): any { +export function DefaultStyleProvider(doc: Opt, props: Opt, property: string): any { switch (property.split(":")[0]) { case StyleProp.DocContents: return undefined; case StyleProp.WidgetColor: return darkScheme() ? "lightgrey" : "dimgrey"; @@ -121,7 +129,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt { dropAction={undefined} active={returnTrue} parentActive={returnFalse} - ContentScaling={returnOne} bringToFront={emptyFunction} focus={emptyFunction} whenActiveChanged={emptyFunction} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index e8165f673..510e47b20 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -29,6 +29,7 @@ import { CollectionStackingViewFieldColumn } from "./CollectionStackingViewField import { CollectionSubView } from "./CollectionSubView"; import { CollectionViewType } from "./CollectionView"; import { StyleProp } from "../StyleProvider"; +import { FieldViewProps } from "../nodes/FieldView"; const _global = (window /* browser */ || global /* node */) as any; type StackingDocument = makeInterface<[typeof collectionSchema, typeof documentSchema]>; @@ -61,7 +62,7 @@ export class CollectionStackingView extends CollectionSubView Transform, width: () => number) { const dataDoc = (!doc.isTemplateDoc && !doc.isTemplateForField && !doc.PARAMS) ? undefined : this.props.DataDoc; const height = () => this.getDocHeight(doc); - const styleProvider = (doc: Doc | undefined, props: Opt, property: string) => { + const styleProvider = (doc: Doc | undefined, props: Opt, property: string) => { if (property === StyleProp.Opacity && doc) { if (this.props.childOpacity) { return this.props.childOpacity(); diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 8b5143013..fe929abc5 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -33,6 +33,7 @@ import { List } from '../../../fields/List'; import { DocumentType } from '../../documents/DocumentTypes'; import Color = require('color'); import { StyleProp, DefaultStyleProvider, DefaultLayerProvider, StyleLayers } from '../StyleProvider'; +import { FieldViewProps } from '../nodes/FieldView'; const _global = (window /* browser */ || global /* node */) as any; interface TabDocViewProps { @@ -352,7 +353,6 @@ export class TabDocView extends React.Component { addDocument={returnFalse} moveDocument={returnFalse} removeDocument={returnFalse} - ContentScaling={returnOne} PanelWidth={this.returnMiniSize} PanelHeight={this.returnMiniSize} ScreenToLocalTransform={this.ScreenToLocalTransform} @@ -389,7 +389,7 @@ export class TabDocView extends React.Component { active = () => this._isActive; - public static miniStyleProvider = (doc: Opt, props: Opt, property: string): any => { + public static miniStyleProvider = (doc: Opt, props: Opt, property: string): any => { if (doc) { switch (property.split(":")[0]) { default: return DefaultStyleProvider(doc, props, property); diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index 843bec6de..11ff4ca3b 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -29,7 +29,8 @@ import { CollectionTreeView } from './CollectionTreeView'; import { CollectionView, CollectionViewType } from './CollectionView'; import "./TreeView.scss"; import React = require("react"); -import { StyleProp } from '../StyleProvider'; +import { StyleProp, testDocProps } from '../StyleProvider'; +import { FieldViewProps } from '../nodes/FieldView'; export interface TreeViewProps { document: Doc; @@ -497,13 +498,13 @@ export class TreeView extends React.Component { e.preventDefault(); } } - titleStyleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { + titleStyleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { if (!doc || doc !== this.doc) return this.props?.treeView?.props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView switch (property.split(":")[0]) { case StyleProp.Opacity: return this.outlineMode ? undefined : 1; case StyleProp.BackgroundColor: return StrCast(doc._backgroundColor, StrCast(doc.backgroundColor)); - case StyleProp.DocContents: return !props?.treeViewDoc ? (null) : + case StyleProp.DocContents: return testDocProps(props) && !props?.treeViewDoc ? (null) :
    { case StyleProp.Decorations: return (null); } } - embeddedStyleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { + embeddedStyleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { if (property.startsWith(StyleProp.Decorations)) return (null); return this.props?.treeView?.props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index b8576681d..3f7eb24f8 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -49,6 +49,7 @@ import React = require("react"); import { CurrentUserUtils } from "../../../util/CurrentUserUtils"; import { StyleProp, StyleLayers } from "../../StyleProvider"; import { DocumentDecorations } from "../../DocumentDecorations"; +import { FieldViewProps } from "../../nodes/FieldView"; export const panZoomSchema = createSchema({ _panX: "number", @@ -116,7 +117,7 @@ export class CollectionFreeFormView extends CollectionSubView e.bounds && !e.bounds.z).map(e => e.bounds!), NumCast(this.layoutDoc._xPadding, 10), NumCast(this.layoutDoc._yPadding, 10)); } @computed get nativeWidth() { return this.fitToContent ? 0 : returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.Document)); } @computed get nativeHeight() { return this.fitToContent ? 0 : returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.Document)); } @@ -405,7 +406,7 @@ export class CollectionFreeFormView extends CollectionSubView, props: Opt, property: string) => { + getClusterColor = (doc: Opt, props: Opt, property: string) => { let styleProp = this.props.styleProvider?.(doc, props, property); // bcz: check 'props' used to be renderDepth + 1 if (property !== StyleProp.BackgroundColor) return styleProp; const cluster = NumCast(doc?.cluster); @@ -1277,7 +1278,7 @@ export class CollectionFreeFormView extends CollectionSubView { - Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); + Doc.toggleNativeDimensions(this.layoutDoc, 1, this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); } @undoBatch diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index b495cdd1b..7b721786f 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -539,7 +539,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent AudioBox.RangeScript; labelScript = () => AudioBox.LabelScript; - static audioStyleProvider = (doc: Doc | undefined, props: Opt, property: string) => { + static audioStyleProvider = (doc: Doc | undefined, props: Opt, property: string) => { if (property === StyleProp.BackgroundColor) return "transparent"; if (property === StyleProp.PointerEvents) return "none"; } @@ -554,6 +554,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined; @@ -59,7 +60,7 @@ export class CollectionFreeFormDocumentView extends DocComponent, property: string) => { + styleProvider = (doc: Doc | undefined, props: Opt, property: string) => { if (property === StyleProp.Opacity && doc === this.layoutDoc) return this.Opacity; // only change the opacity for this specific document, not its children return this.props.styleProvider?.(doc, props, property); } diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index 4fb350b55..52236a648 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -57,7 +57,7 @@ export class ColorBox extends ViewBoxBaseComponent e.button === 0 && !e.ctrlKey && e.stopPropagation()} onClick={e => { (e.nativeEvent as any).stuff = true; e.stopPropagation(); }} - style={{ transform: `scale(${this.props.ContentScaling()})`, width: `${100 / this.props.ContentScaling()}%`, height: `${100 / this.props.ContentScaling()}%` }} > + style={{ width: `${100}%`, height: `${100}%` }} > boolean; export type DocFocusFunc = (doc: Doc, willZoom?: boolean, scale?: number, afterFocus?: DocAfterFocusFunc, dontCenter?: boolean, focused?: boolean) => void; -export type StyleProviderFunc = (doc: Opt, props: Opt, property: string) => any; +export type StyleProviderFunc = (doc: Opt, props: Opt, property: string) => any; export interface DocumentViewSharedProps { renderDepth: number; Document: Doc; @@ -58,7 +59,6 @@ export interface DocumentViewSharedProps { PanelHeight: () => number; NativeWidth?: () => number; NativeHeight?: () => number; - ContentScaling: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal layerProvider?: (doc: Doc, assign?: boolean) => boolean; styleProvider?: StyleProviderFunc; focus: DocFocusFunc; @@ -93,6 +93,7 @@ export interface DocumentViewProps extends DocumentViewSharedProps { dragDivName?: string; contentPointerEvents?: string; radialMenu?: String[]; + ContentScaling: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal contentFittingScaling?: () => number;// scaling done outside the document view (eg in ContentFittingDocumentView) to fit contents into panel (needed for ScreenToLocal but not needed by DocumentView to scale its content) LayoutTemplate?: () => Opt; contextMenuItems?: () => { script: ScriptField, label: string }[]; @@ -972,7 +973,7 @@ export class DocumentView extends DocComponent(Docu hideLinkAnchor = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => flg && (doc.hidden = true), true) anchorPanelWidth = () => this.props.PanelWidth() || 1; anchorPanelHeight = () => this.props.PanelHeight() || 1; - anchorStyleProvider = (doc: Opt, props: Opt, property: string): any => { + anchorStyleProvider = (doc: Opt, props: Opt, property: string): any => { switch (property.split(":")[0]) { case StyleProp.BackgroundColor: return "transparent"; case StyleProp.HideLinkButton: return true; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 44df00709..374f964e3 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -67,7 +67,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent { this._dropDisposer?.(); diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx index aaf544c50..3c10cc5fe 100644 --- a/src/client/views/nodes/KeyValuePair.tsx +++ b/src/client/views/nodes/KeyValuePair.tsx @@ -76,7 +76,6 @@ export class KeyValuePair extends React.Component { PanelHeight: this.props.PanelHeight, addDocTab: returnFalse, pinToPres: returnZero, - ContentScaling: returnOne }; const contents = ; // let fieldKey = Object.keys(props.Document).indexOf(props.fieldKey) !== -1 ? props.fieldKey : "(" + props.fieldKey + ")"; diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx index abefc6561..d0048c67b 100644 --- a/src/client/views/nodes/LinkAnchorBox.tsx +++ b/src/client/views/nodes/LinkAnchorBox.tsx @@ -146,7 +146,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent {!this._editing && !this._forceOpen ? (null) : this._isOpen = true} onClose={action(() => this._isOpen = this._forceOpen = this._editing = false)}> diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index a2f3fb2d1..b34c7966b 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -183,7 +183,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index 713511a94..456de7ede 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -167,7 +167,7 @@ export class ScreenshotBox extends ViewBoxBaseComponent [this.content]; render() { return (
    + style={{ width: `${100}%`, height: `${100}%` }} >
    [this.youtubeVideoId ? this.youtubeContent : this.content]; render() { return (
    {view}
    @@ -648,14 +648,12 @@ export class WebBox extends ViewBoxAnnotatableComponent this._marqueeing; scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { - const scaling = Number.isFinite(this.props.ContentScaling()) ? this.props.ContentScaling() || 1 : 1; return (
    @@ -663,7 +661,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 0beea2bcd..feb5e63b2 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -581,7 +581,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp @undoBatch @action toggleNativeDimensions = () => { - Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); + Doc.toggleNativeDimensions(this.layoutDoc, 1, this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); } public static get DefaultLayout(): Doc | string | undefined { @@ -1609,7 +1609,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp />; } - sidebarContentScaling = () => this.props.ContentScaling() * NumCast(this.layoutDoc._viewScale, 1); + sidebarContentScaling = () => NumCast(this.layoutDoc._viewScale, 1); @computed get sidebarCollection() { const fitToBox = this.props.Document._fitToBox; const collectionProps: SubCollectionViewProps & collectionFreeformViewProps = { @@ -1647,13 +1647,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp @computed get sidebarWidthPercent() { return StrCast(this.layoutDoc._sidebarWidthPercent, "0%"); } sidebarWidth = () => Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100 * this.props.PanelWidth(); - sidebarScreenToLocal = () => this.props.ScreenToLocalTransform().translate(-(this.props.PanelWidth() - this.sidebarWidth()) / this.props.ContentScaling(), 0).scale(1 / NumCast(this.layoutDoc._viewScale, 1)); + sidebarScreenToLocal = () => this.props.ScreenToLocalTransform().translate(-(this.props.PanelWidth() - this.sidebarWidth()), 0).scale(1 / NumCast(this.layoutDoc._viewScale, 1)); @computed get sidebarColor() { return StrCast(this.layoutDoc.sidebarColor, StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], "#e4e4e4")); } render() { TraceMobx(); const selected = this.props.isSelected(); const active = this.active(); - const scale = this.props.hideOnLeave ? 1 : this.props.ContentScaling() * NumCast(this.layoutDoc._viewScale, 1); + const scale = this.props.hideOnLeave ? 1 : NumCast(this.layoutDoc._viewScale, 1); const rounded = StrCast(this.layoutDoc.borderRounding) === "100%" ? "-rounded" : ""; const interactive = (Doc.GetSelectedTool() === InkTool.None || SnappingManager.GetIsDragging()) && (this.layoutDoc.z || this.props.layerProvider?.(this.layoutDoc) !== false); if (!selected && FormattedTextBoxComment.textBox === this) setTimeout(() => FormattedTextBoxComment.Hide()); diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 6b7a93747..fc547c60f 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -370,7 +370,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { if (scrollToAnnotation) { - const offset = (this.props.PanelHeight() / this.props.ContentScaling()) / 2; + const offset = this.props.PanelHeight() / 2; this._mainCont.current && smoothScroll(500, this._mainCont.current, NumCast(scrollToAnnotation.y) - offset); Doc.linkFollowHighlight(scrollToAnnotation); } @@ -737,7 +737,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent; } - @computed get contentScaling() { return this.props.ContentScaling(); } + @computed get contentScaling() { return 1; } @computed get standinViews() { return <> {this._showCover ? this.getCoverImage() : (null)} @@ -758,7 +758,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent 600) ? Doc.NativeWidth(this.props.Document) : `${100 / this.contentScaling}%`, height: !this.props.Document._fitWidth && (window.screen.width > 600) ? Doc.NativeHeight(this.props.Document) : `${100 / this.contentScaling}%`, - transform: `scale(${this.props.ContentScaling()})` }} > {this.pdfViewerDiv} {this.annotationLayer} diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 3b6b0259d..8615ba81d 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -78,7 +78,7 @@ export class PresElementBox extends ViewBoxBaseComponent this.props.PanelWidth(); // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); embedWidth = (): number => this.props.PanelWidth() - 35; - styleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { + styleProvider = (doc: (Doc | undefined), props: Opt, property: string): any => { if (property === StyleProp.Opacity) return 1; return this.props.styleProvider?.(doc, props, property); } -- cgit v1.2.3-70-g09d2 From f9f0d6ca06e850e0ea68d7b7b701de46d9449169 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 13 Dec 2020 20:49:48 -0500 Subject: trying to fix PDFs for fitWidth and otherwise in ContentFitting and CollectionFreeFormDoc containers. --- src/client/views/collections/TabDocView.tsx | 2 -- .../views/nodes/CollectionFreeFormDocumentView.tsx | 17 +++++++++++------ .../views/nodes/ContentFittingDocumentView.tsx | 20 +++++++++++++++----- src/client/views/nodes/DocumentView.tsx | 7 ++++++- src/client/views/nodes/PDFBox.tsx | 3 +-- src/client/views/nodes/VideoBox.tsx | 7 +++++-- src/client/views/pdf/PDFViewer.tsx | 8 ++++---- 7 files changed, 42 insertions(+), 22 deletions(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 40e7bc7ce..65b793adb 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -373,7 +373,6 @@ export class TabDocView extends React.Component { @computed get layerProvider() { return this._document && DefaultLayerProvider(this._document); } @computed get docView() { TraceMobx(); - console.log("" + this._document?.title + " " + (!this._activated || !this._document || this._document._viewType === CollectionViewType.Docking)) return !this._activated || !this._document || this._document._viewType === CollectionViewType.Docking ? (null) : <> console.log(this._view = r))} renderDepth={0} @@ -411,7 +410,6 @@ export class TabDocView extends React.Component { } render() { - console.log("tab", this._document) return (
    { if (this._mainCont = ref) { diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index b148fad12..0e790d8db 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -58,6 +58,10 @@ export class CollectionFreeFormDocumentView extends DocComponent, property: string) => { if (property === StyleProp.Opacity && doc === this.layoutDoc) return this.Opacity; // only change the opacity for this specific document, not its children @@ -140,15 +144,12 @@ export class CollectionFreeFormDocumentView extends DocComponent (this.sizeProvider?.width || this.props.PanelWidth?.()); panelHeight = () => (this.sizeProvider?.height || this.props.PanelHeight?.()); - getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y); + screenToLocalTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y).scale(1 / this.Scaling()); focusDoc = (doc: Doc) => this.props.focus(doc, false); NativeWidth = () => this.nativeWidth; NativeHeight = () => this.nativeHeight; returnThis = () => this; - @computed get pointerEvents() { - if (this.props.pointerEvents === "none") return "none"; - return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (!this._contentView?.docView?.isSelected() ? ":selected" : "")); - } + Scaling = () => this.Document._fitWidth ? this.props.PanelWidth() / this.NativeWidth() : 1; render() { TraceMobx(); const backgroundColor = this.props.styleProvider?.(this.Document, this.props, StyleProp.BackgroundColor); @@ -159,12 +160,16 @@ export class CollectionFreeFormDocumentView extends DocComponent this.nativeWidth; + NativeHeight = () => this.nativeHeight; PanelWidth = () => this.panelWidth; PanelHeight = () => this.panelHeight; NativeScaling = () => this.nativeScaling; - screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(-this.centeringX, -this.centeringY).scale(1 / this.nativeScaling); + screenToLocalTransform = () => this.props.ScreenToLocalTransform().scale(1 / this.nativeScaling); render() { TraceMobx(); + if (this.props.Document.type === DocumentType.PDF) { + console.log("PanelHeight = " + this.panelHeight); + } return (
    {!this.props.Document || !this.props.PanelWidth() ? (null) : (
    0.001 ? `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(), width: Math.abs(this.Xshift) > 0.001 ? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth(), + height: Math.abs(this.YShift) > 0.001 ? this.props.Document._fitWidth ? `${this.panelHeight}px` : `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(), }}> this.docView = r)} LayoutTemplate={this.props.LayoutTemplate} PanelWidth={this.PanelWidth} PanelHeight={this.PanelHeight} + NativeWidth={this.NativeWidth} + NativeHeight={this.NativeHeight} ContentScaling={this.NativeScaling} ScreenToLocalTransform={this.screenToLocalTransform} focus={this.props.focus || emptyFunction} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ec730dbf6..147740ae3 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -902,8 +902,13 @@ export class DocumentView extends DocComponent(Docu @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive; parentActive = (outsideReaction: boolean) => this.props.layerProvider?.(this.layoutDoc) === false ? this.props.parentActive(outsideReaction) : false; screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin); + contentScaling = () => !this.props.Document._fitWidth ? this.props.PanelWidth() / (this.props.NativeWidth?.() || this.props.PanelWidth()) : this.LocalScaling; + @computed get contents() { TraceMobx(); + if (this.props.Document.type === DocumentType.PDF) { + console.log("Scaling = " + this.contentScaling()); + } return (
    (Docu NativeHeight={this.NativeHeight} PanelWidth={this.props.PanelWidth} PanelHeight={this.props.PanelHeight} - scaling={this.props.ContentScaling || returnOne} + scaling={this.contentScaling} layerProvider={this.props.layerProvider} styleProvider={this.props.styleProvider} LayoutTemplateString={this.props.LayoutTemplateString} diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 262e61c9b..ec9a75302 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -192,7 +192,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent; } - contentScaling = () => this.props.scaling?.() || 1; isChildActive = (outsideReaction?: boolean) => this._isChildActive; @computed get renderPdfView() { TraceMobx(); @@ -209,7 +208,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent {this.settingsPanel()}
    ; diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 893236857..b446dab22 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -23,6 +23,7 @@ import { SnappingManager } from "../../util/SnappingManager"; import { SelectionManager } from "../../util/SelectionManager"; import { LinkDocPreview } from "./LinkDocPreview"; import { FormattedTextBoxComment } from "./formattedText/FormattedTextBoxComment"; +import { Transform } from "../../util/Transform"; const path = require('path'); export const timeSchema = createSchema({ @@ -413,7 +414,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent this.contentScaling; contentFunc = () => [this.youtubeVideoId ? this.youtubeContent : this.content]; render() { return (
    void; isChildActive: (outsideReaction?: boolean) => boolean; setPdfViewer: (view: PDFViewer) => void; - ContentScaling: () => number; + ContentScaling?: () => number; } /** @@ -371,7 +371,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { if (scrollToAnnotation) { - const offset = (this.props.PanelHeight() / this.props.ContentScaling()) / 2; + const offset = (this.props.PanelHeight() / this.contentScaling) / 2; this._mainCont.current && smoothScroll(500, this._mainCont.current, NumCast(scrollToAnnotation.y) - offset); Doc.linkFollowHighlight(scrollToAnnotation); } @@ -738,7 +738,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent; } - @computed get contentScaling() { return this.props.ContentScaling(); } + @computed get contentScaling() { return this.props.ContentScaling?.() || 1; } @computed get standinViews() { return <> {this._showCover ? this.getCoverImage() : (null)} @@ -759,7 +759,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent 600) ? Doc.NativeWidth(this.props.Document) : `${100 / this.contentScaling}%`, height: !this.props.Document._fitWidth && (window.screen.width > 600) ? Doc.NativeHeight(this.props.Document) : `${100 / this.contentScaling}%`, - transform: `scale(${this.props.ContentScaling()})` + transform: `scale(${this.contentScaling})` }} > {this.pdfViewerDiv} {this.annotationLayer} -- cgit v1.2.3-70-g09d2 From 1cc523907d05be7975dabb1901b91b3485083616 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 13 Dec 2020 21:06:38 -0500 Subject: now working on video and web box's to fix their annotation registration with doc decorations. --- src/client/views/nodes/VideoBox.tsx | 5 +++-- src/client/views/nodes/WebBox.tsx | 7 +++++-- 2 files changed, 8 insertions(+), 4 deletions(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index b446dab22..06a305515 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -414,8 +414,9 @@ export class VideoBox extends ViewBoxAnnotatableComponent this.contentScaling; + screenToLocalTransform = () => this.props.ScreenToLocalTransform().scale(1 / this.scaling()); contentFunc = () => [this.youtubeVideoId ? this.youtubeContent : this.content]; render() { return (
    this._marqueeX; marqueeY = () => this._marqueeY; marqueeing = () => this._marqueeing; - scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); + @computed get contentScaling() { return this.props.scaling?.() || 1; } + scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)).scale(1 / this.contentScaling); + scaling = () => this.contentScaling; + screenToLocalTransform = () => this.props.ScreenToLocalTransform().scale(1 / this.scaling()) render() { return (
    -- cgit v1.2.3-70-g09d2 From 37d9d2cad93a08518cec6c95c8bc941dd5f5ddaa Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 14 Dec 2020 02:01:57 -0500 Subject: more changes to ContentScaling to get web/video/image boxes to work with annotation/DocDecorations in contentfitting and freeform views. --- src/client/views/GlobalKeyHandler.ts | 11 +- src/client/views/StyleProvider.tsx | 12 +- src/client/views/collections/TabDocView.tsx | 2 +- src/client/views/linking/LinkMenuItem.tsx | 2 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 3 - .../views/nodes/ContentFittingDocumentView.tsx | 4 +- src/client/views/nodes/DocumentView.tsx | 164 ++++++++------------- src/client/views/nodes/ImageBox.tsx | 33 +++-- src/client/views/nodes/ScreenshotBox.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 4 +- src/client/views/nodes/WebBox.tsx | 4 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- .../formattedText/FormattedTextBoxComment.tsx | 2 +- 13 files changed, 102 insertions(+), 143 deletions(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 283419b82..50a8e71f9 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -177,17 +177,10 @@ export class KeyManager { const preventDefault = true; switch (keyname) { + case "ƒ": case "f": const dv = SelectionManager.SelectedDocuments()?.[0]; - if (dv) { - const ex = dv.props.ScreenToLocalTransform().inverse().transformPoint(0, 0)[0]; - const ey = dv.props.ScreenToLocalTransform().inverse().transformPoint(0, 0)[1]; - DocumentView.FloatDoc(dv, ex, ey); - } - // case "n": - // let toggle = MainView.Instance.addMenuToggle.current!; - // toggle.checked = !toggle.checked; - // break; + dv && DocumentView.FloatDoc(dv); } return { diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 386e03f37..d22f34cd0 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -36,6 +36,7 @@ export enum StyleProp { PointerEvents = "pointerEvents", // pointer events for DocumentView -- inherits pointer events if not specified Decorations = "decorations", // additional decoration to display above a DocumentView -- currently only used to display a Lock for making things background HeaderMargin = "headerMargin", // margin at top of documentview, typically for displaying a title -- doc contents will start below that + ShowTitle = "showTitle", // whether to display a title on a Document } function darkScheme() { return BoolCast(CurrentUserUtils.ActiveDashboard?.darkScheme); } @@ -68,10 +69,16 @@ export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentVie // export function DefaultStyleProvider(doc: Opt, props: Opt, property: string): any { const docProps = testDocProps(props); + const selected = property.includes(":selected"); switch (property.split(":")[0]) { case StyleProp.DocContents: return undefined; case StyleProp.WidgetColor: return darkScheme() ? "lightgrey" : "dimgrey"; case StyleProp.Opacity: return Cast(doc?._opacity, "number", Cast(doc?.opacity, "number", null)); + case StyleProp.HideLinkButton: return props?.dontRegisterView || (!selected && (doc?.isLinkButton || doc?.hideLinkButton)); + case StyleProp.ShowTitle: return doc && !doc.presentationTargetDoc && StrCast(doc._showTitle, + !Doc.IsSystem(doc) && doc.type === DocumentType.RTF ? + (doc.author === Doc.CurrentUserEmail ? StrCast(Doc.UserDoc().showTitle) : "author;creationDate") : + undefined); case StyleProp.Color: const backColor = props?.styleProvider?.(doc, props, StyleProp.BackgroundColor) || "black"; const col = Color(backColor).rgb(); @@ -132,15 +139,16 @@ export function DefaultStyleProvider(doc: Opt, props: Opt 0 && + return doc && (isBackground || selected) && (props?.renderDepth || 0) > 0 && ((doc.type === DocumentType.COL && doc._viewType !== CollectionViewType.Pile) || [DocumentType.RTF, DocumentType.IMG, DocumentType.INK].includes(doc.type as DocumentType)) ?
    toggleBackground(doc)}> diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 65b793adb..1f00b3a02 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -374,7 +374,7 @@ export class TabDocView extends React.Component { @computed get docView() { TraceMobx(); return !this._activated || !this._document || this._document._viewType === CollectionViewType.Docking ? (null) : - <> console.log(this._view = r))} + <> this._view = r)} renderDepth={0} Document={this._document} DataDoc={!Doc.AreProtosEqual(this._document[DataSym], this._document) ? this._document[DataSym] : undefined} diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index b31c1fcc1..9ecf3d0fb 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -110,7 +110,7 @@ export class LinkMenuItem extends React.Component { onLinkButtonUp = (e: PointerEvent): void => { document.removeEventListener("pointermove", this.onLinkButtonMoved); document.removeEventListener("pointerup", this.onLinkButtonUp); - DocumentView.followLinkClick(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false, false); + DocumentView.followLinkClick(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false); e.stopPropagation(); } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 0e790d8db..bfdb7d98e 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -167,9 +167,6 @@ export class CollectionFreeFormDocumentView extends DocComponent this.docView = r)} - LayoutTemplate={this.props.LayoutTemplate} PanelWidth={this.PanelWidth} PanelHeight={this.PanelHeight} NativeWidth={this.NativeWidth} NativeHeight={this.NativeHeight} ContentScaling={this.NativeScaling} + contentFittingXf={returnTrue} ScreenToLocalTransform={this.screenToLocalTransform} focus={this.props.focus || emptyFunction} bringToFront={emptyFunction} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d847eff00..460e5c2c6 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -4,14 +4,13 @@ import { AclAdmin, AclEdit, AclPrivate, DataSym, Doc, DocListCast, Field, Opt, S import { Document } from '../../../fields/documentSchemas'; import { Id } from '../../../fields/FieldSymbols'; import { InkTool } from '../../../fields/InkField'; -import { RichTextField } from '../../../fields/RichTextField'; import { listSpec } from "../../../fields/Schema"; import { ScriptField } from '../../../fields/ScriptField'; import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types"; import { GetEffectiveAcl, TraceMobx } from '../../../fields/util'; import { MobileInterface } from '../../../mobile/MobileInterface'; import { GestureUtils } from '../../../pen-gestures/GestureUtils'; -import { emptyFunction, OmitKeys, returnFalse, returnOne, returnTrue, returnVal, Utils } from "../../../Utils"; +import { emptyFunction, OmitKeys, returnFalse, returnVal, Utils } from "../../../Utils"; import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils'; import { Docs, DocUtils } from "../../documents/Documents"; import { DocumentType } from '../../documents/DocumentTypes'; @@ -32,18 +31,18 @@ import { ContextMenuProps } from '../ContextMenuItem'; import { DocComponent } from "../DocComponent"; import { EditableView } from '../EditableView'; import { InkStrokeProperties } from '../InkStrokeProperties'; +import { StyleLayers, StyleProp, testDocProps } from "../StyleProvider"; +import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; import { DocumentContentsView } from "./DocumentContentsView"; import { DocumentLinksButton } from './DocumentLinksButton'; import "./DocumentView.scss"; +import { FieldViewProps } from "./FieldView"; import { LinkAnchorBox } from './LinkAnchorBox'; import { LinkDescriptionPopup } from './LinkDescriptionPopup'; import { PresBox } from './PresBox'; import { RadialMenu } from './RadialMenu'; import { TaskCompletionBox } from './TaskCompletedBox'; import React = require("react"); -import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; -import { StyleProp, StyleLayers, testDocProps } from "../StyleProvider"; -import { FieldViewProps } from "./FieldView"; export type DocAfterFocusFunc = (notFocused: boolean) => boolean; export type DocFocusFunc = (doc: Doc, willZoom?: boolean, scale?: number, afterFocus?: DocAfterFocusFunc, dontCenter?: boolean, focused?: boolean) => void; @@ -52,8 +51,8 @@ export interface DocumentViewSharedProps { renderDepth: number; Document: Doc; DataDoc?: Doc; - ContainingCollectionView: Opt; fitContentsToDoc?: boolean; // used by freeformview to fit its contents to its panel. corresponds to _fitToBox property on a Document + ContainingCollectionView: Opt; ContainingCollectionDoc: Opt; CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView; PanelWidth: () => number; @@ -76,6 +75,7 @@ export interface DocumentViewSharedProps { moveDocument?: (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; pinToPres: (document: Doc) => void; ScreenToLocalTransform: () => Transform; + contentFittingXf?: () => boolean; // bcz: need to figure out why this is needed in VideoBox/ImageBox/WebBox to turn off scaling... bringToFront: (doc: Doc, sendToBack?: boolean) => void; onClick?: () => ScriptField; dropAction?: dropActionType; @@ -124,14 +124,19 @@ export class DocumentView extends DocComponent(Docu public get displayName() { return "DocumentView(" + this.props.Document.title + ")"; } // this makes mobx trace() statements more descriptive public get ContentDiv() { return this._mainCont.current; } public get LayoutFieldKey() { return Doc.LayoutFieldKey(this.layoutDoc); } - @computed get ShowTitle() { - return StrCast(this.layoutDoc._showTitle, - !Doc.IsSystem(this.layoutDoc) && this.rootDoc.type === DocumentType.RTF && !this.rootDoc.presentationTargetDoc ? - (this.dataDoc.author === Doc.CurrentUserEmail ? StrCast(Doc.UserDoc().showTitle) : "author;creationDate") : - undefined); - } + @computed get ShowTitle() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.ShowTitle) as (Opt); } @computed get LocalScaling() { return this.props.ContentScaling?.() || 1; } @computed get topMost() { return this.props.renderDepth === 0; } + @computed get hidden() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Hidden); } + @computed get opacity() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Opacity); } + @computed get borderRounding() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow); } + @computed get hideLinkButton() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkButton + (this.isSelected() ? ":selected" : "")); } + @computed get widgetDecorations() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Decorations + (this.isSelected() ? ":selected" : "")); } + @computed get backgroundColor() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor); } + @computed get docContents() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.DocContents); } + @computed get headerMargin() { return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0; } + @computed get pointerEvents() { return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (this.isSelected() ? ":selected" : "")); } + @computed get finalLayoutKey() { return StrCast(this.props.Document.layoutKey, "layout"); } @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.dataDoc, this.props.freezeDimensions)); } @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.dataDoc, this.props.freezeDimensions)); } @computed get onClickHandler() { return this.props.onClick?.() ?? Cast(this.Document.onClick, ScriptField, Cast(this.layoutDoc.onClick, ScriptField, null)); } @@ -206,11 +211,7 @@ export class DocumentView extends DocComponent(Docu @action componentDidMount() { - this._mainCont.current && (this._dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, this.drop.bind(this), this.props.Document)); - this._mainCont.current && (this._gestureEventDisposer = GestureUtils.MakeGestureTarget(this._mainCont.current, this.onGesture.bind(this))); - this._mainCont.current && (this._multiTouchDisposer = InteractionUtils.MakeMultiTouchTarget(this._mainCont.current, this.onTouchStart.bind(this))); - // this._mainCont.current && (this.holdDisposer = InteractionUtils.MakeHoldTouchTarget(this._mainCont.current, this.handle1PointerHoldStart.bind(this))); - + this.componentDidUpdate(); if (!BoolCast(this.rootDoc.dontRegisterView, this.props.dontRegisterView)) { DocumentManager.Instance.AddView(this); } @@ -237,9 +238,7 @@ export class DocumentView extends DocComponent(Docu this._multiTouchDisposer?.(); this._holdDisposer?.(); Doc.UnBrushDoc(this.props.Document); - if (!this.props.dontRegisterView) { - DocumentManager.Instance.RemoveView(this); - } + !this.props.dontRegisterView && DocumentManager.Instance.RemoveView(this); } startDragging(x: number, y: number, dropAction: dropActionType) { @@ -257,13 +256,13 @@ export class DocumentView extends DocComponent(Docu } @undoBatch @action - public static FloatDoc(topDocView: DocumentView, x?: number, y?: number) { - const topDoc = topDocView.props.Document; - const container = topDocView.props.ContainingCollectionView; - if (container) { + public static FloatDoc(topDocView: DocumentView) { + const { Document: topDoc, ContainingCollectionView: container } = topDocView.props; + const screenXf = container?.screenToLocalTransform(); + if (screenXf) { SelectionManager.DeselectAll(); - if (topDoc.z && (x === undefined && y === undefined)) { - const spt = container.screenToLocalTransform().inverse().transformPoint(NumCast(topDoc.x), NumCast(topDoc.y)); + if (topDoc.z) { + const spt = screenXf.inverse().transformPoint(NumCast(topDoc.x), NumCast(topDoc.y)); topDoc.z = 0; topDoc.x = spt[0]; topDoc.y = spt[1]; @@ -271,7 +270,7 @@ export class DocumentView extends DocComponent(Docu topDocView.props.addDocTab(topDoc, "inParent"); } else { const spt = topDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - const fpt = container.screenToLocalTransform().transformPoint(x !== undefined ? x : spt[0], y !== undefined ? y : spt[1]); + const fpt = screenXf.transformPoint(spt[0], spt[1]); topDoc.z = 1; topDoc.x = fpt[0]; topDoc.y = fpt[1]; @@ -281,28 +280,18 @@ export class DocumentView extends DocComponent(Docu } onKeyDown = (e: React.KeyboardEvent) => { - if (this.rootDoc._singleLine && ((e.key === "Backspace" && this.dataDoc.text && !(this.dataDoc.text as RichTextField)?.Text) || ["Tab", "Enter"].includes(e.key))) { - return; - } - if (e.altKey && !(e.nativeEvent as any).StopPropagationForReal) { - (e.nativeEvent as any).StopPropagationForReal = true; // e.stopPropagation() doesn't seem to work... + if (e.altKey && !e.nativeEvent.cancelBubble) { e.stopPropagation(); e.preventDefault(); if (e.key === "†" || e.key === "t") { if (!StrCast(this.layoutDoc._showTitle)) this.layoutDoc._showTitle = "title"; if (!this._titleRef.current) setTimeout(() => this._titleRef.current?.setIsFocused(true), 0); else if (!this._titleRef.current.setIsFocused(true)) { // if focus didn't change, focus on interior text... - { - this._titleRef.current?.setIsFocused(false); - const any = (this._mainCont.current?.getElementsByClassName("ProseMirror")?.[0] as any); - any.keeplocation = true; - any?.focus(); - } + this._titleRef.current?.setIsFocused(false); + const any = (this._mainCont.current?.getElementsByClassName("ProseMirror")?.[0] as any); + any.keeplocation = true; + any?.focus(); } - } else if (e.key === "f") { - const ex = (e.nativeEvent.target! as any).getBoundingClientRect().left; - const ey = (e.nativeEvent.target! as any).getBoundingClientRect().top; - DocumentView.FloatDoc(this, ex, ey); } } } @@ -363,13 +352,12 @@ export class DocumentView extends DocComponent(Docu } else if (this.Document["onClick-rawScript"] && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes("ScriptingBox")) {// bcz: hack? don't edit a script if you're clicking on a scripting box itself this.props.addDocTab(DocUtils.makeCustomViewClicked(Doc.MakeAlias(this.props.Document), undefined, "onClick"), "add:right"); } else if (this.allLinks && this.Document.isLinkButton && !e.shiftKey && !e.ctrlKey) { - this.allLinks.length && DocumentView.followLinkClick(undefined, this.props.Document, this.props, e.shiftKey, e.altKey); + this.allLinks.length && DocumentView.followLinkClick(undefined, this.props.Document, this.props, e.altKey); } else { if ((this.layoutDoc.onDragStart || this.props.Document.rootDocument) && !(e.ctrlKey || e.button > 0)) { // onDragStart implies a button doc that we don't want to select when clicking. RootDocument & isTemplaetForField implies we're clicking on part of a template instance and we want to select the whole template, not the part stopPropagate = false; // don't stop propagation for field templates -- want the selection to propagate up to the root document of the template } else { this.select(e.ctrlKey || e.shiftKey); - //SelectionManager.SelectDoc(this, e.ctrlKey || e.shiftKey); } preventDefault = false; } @@ -385,7 +373,7 @@ export class DocumentView extends DocComponent(Docu focus: DocFocusFunc, addDocTab: (doc: Doc, where: string) => boolean, ContainingCollectionDoc?: Doc - }, shiftKey: boolean, altKey: boolean) => { + }, altKey: boolean) => { const batch = UndoManager.StartBatch("follow link click"); // open up target if it's not already in view ... const createViewFunc = (doc: Doc, followLoc: string, finished: Opt<() => void>) => { @@ -463,9 +451,8 @@ export class DocumentView extends DocComponent(Docu public iconify() { const layoutKey = Cast(this.props.Document.layoutKey, "string", null); - const collapse = layoutKey !== "layout_icon"; - if (collapse) { - this.switchViews(collapse, "icon"); + if (layoutKey !== "layout_icon") { + this.switchViews(true, "icon"); if (layoutKey && layoutKey !== "layout" && layoutKey !== "layout_icon") this.props.Document.deiconifyLayout = layoutKey.replace("layout_", ""); } else { const deiconifyLayout = Cast(this.props.Document.deiconifyLayout, "string", null); @@ -668,10 +655,9 @@ export class DocumentView extends DocComponent(Docu drop = async (e: Event, de: DragManager.DropEvent) => { if (this.props.LayoutTemplateString) return; if (this.props.Document === CurrentUserUtils.ActiveDashboard) { - if ((e.target as any)?.closest?.("*.lm_content")) { - alert("You can't perform this move most likely because you don't have permission to modify the destination."); - } - else alert("linking to document tabs not yet supported. Drop link on document content."); + alert((e.target as any)?.closest?.("*.lm_content") ? + "You can't perform this move most likely because you don't have permission to modify the destination." : + "linking to document tabs not yet supported. Drop link on document content."); return; } const makeLink = action((linkDoc: Doc) => { @@ -717,13 +703,11 @@ export class DocumentView extends DocComponent(Docu } @undoBatch - @action toggleNativeDimensions = () => { Doc.toggleNativeDimensions(this.layoutDoc, this.LocalScaling, this.props.PanelWidth(), this.props.PanelHeight()); } @undoBatch - @action toggleLockPosition = (): void => { this.Document.lockedPosition = this.Document.lockedPosition ? undefined : true; } @@ -741,7 +725,6 @@ export class DocumentView extends DocComponent(Docu this.Document.isLinkButton = true; } - @action onCopy = () => { const alias = Doc.MakeAlias(this.props.Document); @@ -876,34 +859,20 @@ export class DocumentView extends DocComponent(Docu }); } - // does Document set a layout prop - // does Document set a layout prop - setsLayoutProp = (prop: string) => this.props.Document[prop] !== this.props.Document["default" + prop[0].toUpperCase() + prop.slice(1)] && this.props.Document["default" + prop[0].toUpperCase() + prop.slice(1)]; - // get the a layout prop by first choosing the prop from Document, then falling back to the layout doc otherwise. - getLayoutPropStr = (prop: string) => StrCast(this.setsLayoutProp(prop) ? this.props.Document[prop] : this.layoutDoc[prop]); - getLayoutPropNum = (prop: string) => NumCast(this.setsLayoutProp(prop) ? this.props.Document[prop] : this.layoutDoc[prop]); - isSelected = (outsideReaction?: boolean) => SelectionManager.IsSelected(this, outsideReaction); select = (ctrlPressed: boolean) => { SelectionManager.SelectDoc(this, ctrlPressed); }; - - @computed get headerMargin() { - return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0; - } - - @computed get finalLayoutKey() { - return StrCast(this.props.Document.layoutKey, "layout"); - } rootSelected = (outsideReaction?: boolean) => { return this.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false; } + panelHeight = () => this.props.PanelHeight() - this.headerMargin; - @computed.struct get linkOffset() { return this.topMost ? [0, undefined, undefined, 10] : [-15, undefined, undefined, -20]; } - @observable contentsActive: () => boolean = returnFalse; - @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive; parentActive = (outsideReaction: boolean) => this.props.layerProvider?.(this.layoutDoc) === false ? this.props.parentActive(outsideReaction) : false; screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin); contentScaling = () => !this.props.Document._fitWidth ? this.props.PanelWidth() / (this.props.NativeWidth?.() || this.props.PanelWidth()) : this.LocalScaling; + @observable contentsActive: () => boolean = returnFalse; + @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive; + @computed get contents() { TraceMobx(); return (
    (Docu NativeHeight={this.NativeHeight} PanelWidth={this.props.PanelWidth} PanelHeight={this.props.PanelHeight} + contentFittingXf={this.props.contentFittingXf} scaling={this.contentScaling} layerProvider={this.props.layerProvider} styleProvider={this.props.styleProvider} @@ -952,8 +922,7 @@ export class DocumentView extends DocComponent(Docu onClick={this.onClickFunc} layoutKey={this.finalLayoutKey} /> {this.layoutDoc.hideAllLinks ? (null) : this.allAnchors} - {this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkButton) || (!this.isSelected() && (this.layoutDoc.isLinkButton || this.layoutDoc.hideLinkButton)) || this.props.dontRegisterView ? (null) : - } + {this.hideLinkButton ? (null) : }
    ); } @@ -971,7 +940,7 @@ export class DocumentView extends DocComponent(Docu makeLink = () => this._link; // pass the link placeholde to child views so they can react to make a specialized anchor. This is essentially a function call to the descendants since the value of the _link variable will immediately get set back to undefined. @undoBatch - hideLinkAnchor = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => flg && (doc.hidden = true), true) + hideLinkAnchor = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && (doc.hidden = true), true) anchorPanelWidth = () => this.props.PanelWidth() || 1; anchorPanelHeight = () => this.props.PanelHeight() || 1; anchorStyleProvider = (doc: Opt, props: Opt, property: string): any => { @@ -993,7 +962,7 @@ export class DocumentView extends DocComponent(Docu @computed get allLinks() { TraceMobx(); return LinkManager.Instance.getAllRelatedLinks(this.rootDoc); } @computed get allAnchors() { TraceMobx(); - if (this.props.LayoutTemplateString?.includes("LinkAnchorBox")) return null; + if (this.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) return null; if (this.layoutDoc.presBox || // presentationbox nodes this.rootDoc.type === DocumentType.LINK || this.props.dontRegisterView) {// view that are not registered @@ -1020,6 +989,7 @@ export class DocumentView extends DocComponent(Docu } @computed get innards() { TraceMobx(); + const showTitle = this.ShowTitle; const showTitleHover = StrCast(this.layoutDoc._showTitleHover); const showCaption = StrCast(this.layoutDoc._showCaption); const captionView = (!showCaption ? (null) : @@ -1036,7 +1006,7 @@ export class DocumentView extends DocComponent(Docu onClick={this.onClickFunc} layoutKey={this.finalLayoutKey} />
    ); - const titleView = (!this.ShowTitle ? (null) : + const titleView = (!showTitle ? (null) :
    (Docu pointerEvents: this.onClickHandler || this.Document.ignoreClick ? "none" : undefined, }}> field + ":" + (this.dataDoc || this.props.Document)[field]?.toString()).join(" ")} + contents={showTitle === "title" ? StrCast((this.dataDoc || this.props.Document).title) : showTitle.split(";").map(field => field + ":" + (this.dataDoc || this.props.Document)[field]?.toString()).join(" ")} display={"block"} fontSize={10} - GetValue={() => Field.toString((this.dataDoc || this.props.Document)[this.ShowTitle.split(";")[0]] as any as Field)} + GetValue={() => Field.toString((this.dataDoc || this.props.Document)[showTitle.split(";")[0]] as any as Field)} SetValue={undoBatch((value: string) => { - this.ShowTitle.includes("Date") ? true : (Doc.GetProto(this.dataDoc || this.props.Document)[this.ShowTitle] = value) ? true : true; + showTitle.includes("Date") ? true : (Doc.GetProto(this.dataDoc || this.props.Document)[showTitle] = value) ? true : true; })} />
    ); - return this.props.hideTitle || (!this.ShowTitle && !showCaption) ? + return this.props.hideTitle || (!showTitle && !showCaption) ? this.contents :
    {!this.headerMargin ? <> {this.contents} {titleView} : <> {titleView} {this.contents} } {captionView}
    ; } - @computed get pointerEvents() { - if (this.props.pointerEvents === "none") return "none"; - return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (this.isSelected() ? ":selected" : "")); - } @undoBatch @action setCustomView = (custom: boolean, layout: string): void => { Doc.setNativeView(this.props.Document); - if (custom) { - DocUtils.makeCustomViewClicked(this.props.Document, Docs.Create.StackingDocument, layout, undefined); - } + custom && DocUtils.makeCustomViewClicked(this.props.Document, Docs.Create.StackingDocument, layout, undefined); } switchViews = action((custom: boolean, view: string) => { @@ -1084,15 +1048,13 @@ export class DocumentView extends DocComponent(Docu @computed get renderDoc() { TraceMobx(); - if (!(this.props.Document instanceof Doc)) return (null); - if (GetEffectiveAcl(this.props.Document[DataSym]) === AclPrivate) return (null); - if (this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Hidden)) return null; - return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.DocContents) ?? + if (!(this.props.Document instanceof Doc) || GetEffectiveAcl(this.props.Document[DataSym]) === AclPrivate || this.hidden) return null; + return this.docContents ??
    (Docu }}> {this.innards} {this.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ?
    : (null)} - {this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Decorations + (this.isSelected() ? ":selected" : "")) || (null)} + {this.widgetDecorations ?? null}
    ; } render() { - const borderRounding = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow); const highlightIndex = this.props.LayoutTemplateString ? (Doc.IsHighlighted(this.props.Document) ? 6 : 0) : Doc.isBrushedHighlightedDegree(this.props.Document); // bcz: Argh!! need to identify a tree view doc better than a LayoutTemlatString const highlightColor = (CurrentUserUtils.ActiveDashboard?.darkScheme ? ["transparent", "#65350c", "#65350c", "yellow", "magenta", "cyan", "orange"] : @@ -1130,11 +1091,10 @@ export class DocumentView extends DocComponent(Docu })} style={{ pointerEvents: this.pointerEvents, - outline: highlighting && !borderRounding ? `${highlightColor} ${highlightStyle} ${highlightIndex}px` : "solid 0px", - border: highlighting && borderRounding && highlightStyle === "dashed" ? `${highlightStyle} ${highlightColor} ${highlightIndex}px` : undefined, - boxShadow: highlighting && borderRounding && highlightStyle !== "dashed" ? `0 0 0 ${highlightIndex}px ${highlightColor}` : - this.Document.isLinkButton && !this.props.dontRegisterView && !this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkButton) ? - StrCast(this.layoutDoc._linkButtonShadow, "lightblue 0em 0em 1em") : + outline: highlighting && !this.borderRounding ? `${highlightColor} ${highlightStyle} ${highlightIndex}px` : "solid 0px", + border: highlighting && this.borderRounding && highlightStyle === "dashed" ? `${highlightStyle} ${highlightColor} ${highlightIndex}px` : undefined, + boxShadow: highlighting && this.borderRounding && highlightStyle !== "dashed" ? `0 0 0 ${highlightIndex}px ${highlightColor}` : + this.Document.isLinkButton && !this.hideLinkButton ? StrCast(this.layoutDoc._linkButtonShadow, "lightblue 0em 0em 1em") : this.props.Document.isTemplateForField ? "black 0.2vw 0.2vw 0.8vw" : undefined, }} diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 374f964e3..5fba273fb 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -67,7 +67,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent { this._dropDisposer?.(); @@ -400,9 +400,10 @@ export class ImageBox extends ViewBoxAnnotatableComponent this.props.ScreenToLocalTransform().translate(0, -this.ycenter / this.contentScaling); - + scaling = () => this.contentScaling; + screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.ycenter).scale(1 / this.contentScaling); contentFunc = () => [this.content]; + render() { TraceMobx(); return (
    + whenActiveChanged={this.whenActiveChanged}> {this.contentFunc}
    ); diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index 456de7ede..4956b315d 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -177,7 +177,7 @@ export class ScreenshotBox extends ViewBoxBaseComponent this.contentScaling; screenToLocalTransform = () => this.props.ScreenToLocalTransform().scale(1 / this.scaling()); contentFunc = () => [this.youtubeVideoId ? this.youtubeContent : this.content]; @@ -434,7 +434,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent this._marqueeY; marqueeing = () => this._marqueeing; @computed get contentScaling() { return this.props.scaling?.() || 1; } - scrollXf = () => this.props.ScreenToLocalTransform().scale(1 / this.contentScaling).translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); + scrollXf = () => this.props.ScreenToLocalTransform().scale(this.props.contentFittingXf?.() ? 1 : 1 / this.contentScaling).translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); scaling = () => this.contentScaling; render() { return (
    @@ -700,7 +700,7 @@ export class WebBox extends ViewBoxAnnotatableComponent diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index c6036330d..584674a02 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1627,7 +1627,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp fitContentsToDoc: fitToBox, select: emptyFunction, active: this.annotationsActive, - ContentScaling: this.sidebarContentScaling, + scaling: this.sidebarContentScaling, whenActiveChanged: this.whenActiveChanged, removeDocument: this.removeDocument, moveDocument: this.moveDocument, diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index d517dba1e..a80314f74 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -117,7 +117,7 @@ export class FormattedTextBoxComment { textBox.props.addDocTab(linkDoc, e.ctrlKey ? "add" : "add:right"); } else { const target = LinkManager.getOppositeAnchor(linkDoc, textBox.dataDoc); - target && DocumentView.followLinkClick(linkDoc, textBox.dataDoc, textBox.props, e.shiftKey, e.altKey); + target && DocumentView.followLinkClick(linkDoc, textBox.dataDoc, textBox.props, e.altKey); } } } -- cgit v1.2.3-70-g09d2 From 8d9b38b64e61f2afb2b698004bcef7017d454078 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 14 Dec 2020 14:22:44 -0500 Subject: got rid of fitDocToPanel. made collectionFreeFormDocView always use a ContentFittingDocView. fixed up web box selections. --- src/client/util/DragManager.ts | 33 ++++++++------- src/client/views/PropertiesView.tsx | 1 - .../views/collections/CollectionSchemaView.tsx | 1 - .../views/collections/CollectionStackingView.tsx | 1 - src/client/views/collections/SchemaTable.tsx | 1 - src/client/views/collections/TreeView.tsx | 1 - .../collectionFreeForm/CollectionFreeFormView.tsx | 2 - .../collectionGrid/CollectionGridView.tsx | 1 - .../CollectionMulticolumnView.tsx | 1 - .../CollectionMultirowView.tsx | 1 - .../views/nodes/CollectionFreeFormDocumentView.tsx | 18 +++------ .../views/nodes/ContentFittingDocumentView.tsx | 2 +- src/client/views/nodes/DocHolderBox.tsx | 2 - src/client/views/nodes/DocumentContentsView.tsx | 1 - src/client/views/nodes/DocumentView.tsx | 7 +--- src/client/views/nodes/ImageBox.tsx | 18 ++++----- src/client/views/nodes/LinkDocPreview.tsx | 1 - src/client/views/nodes/VideoBox.tsx | 13 +++--- src/client/views/nodes/WebBox.scss | 1 + src/client/views/nodes/WebBox.tsx | 47 +++++++++++----------- .../views/nodes/formattedText/DashDocView.tsx | 1 - .../formattedText/FormattedTextBoxComment.tsx | 1 - .../views/nodes/formattedText/RichTextSchema.tsx | 1 - .../views/presentationview/PresElementBox.tsx | 1 - 24 files changed, 63 insertions(+), 94 deletions(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index e3019d288..db371416c 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -342,12 +342,11 @@ export namespace DragManager { dragLabel.style.zIndex = "100001"; dragLabel.style.fontSize = "10px"; dragLabel.style.position = "absolute"; - // dragLabel.innerText = "press 'a' to embed on drop"; // bcz: need to move this to a status bar + dragLabel.innerText = "press 'a' to embed on drop"; // bcz: need to move this to a status bar dragDiv.appendChild(dragLabel); DragManager.Root().appendChild(dragDiv); } dragDiv.hidden = false; - dragLabel.style.display = ""; const scaleXs: number[] = []; const scaleYs: number[] = []; const xs: number[] = []; @@ -416,13 +415,22 @@ export namespace DragManager { }); const hideSource = options?.hideSource ? true : false; - eles.forEach(ele => { - if (ele.parentElement && ele.parentElement?.className === dragData.dragDivName) { - ele.parentElement.hidden = hideSource; - } else { - ele.hidden = hideSource; - } - }); + const hideDragShowOriginalElements = (hide: boolean) => { + dragLabel.style.display = hide ? "" : "none"; + !hide && dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement)); + eles.forEach(ele => { + if (ele.parentElement?.className === dragData.dragDivName) { + ele.parentElement!.hidden = hide; + } else if (ele.parentElement?.parentElement?.className === dragData.dragDivName) { + ele.parentElement!.parentElement!.hidden = hide; + } else if (ele.parentElement?.parentElement?.parentElement?.className === dragData.dragDivName) { + ele.parentElement!.parentElement!.parentElement!.hidden = hide; + } else { + ele.hidden = hide; + } + }); + }; + hideDragShowOriginalElements(hideSource); SnappingManager.SetIsDragging(true); let lastX = downX; @@ -517,13 +525,8 @@ export namespace DragManager { ); }; - const hideDragShowOriginalElements = () => { - dragLabel.style.display = "none"; - dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement)); - eles.map(ele => ele.parentElement && ele.parentElement?.className === dragData.dragDivName ? (ele.hidden = ele.parentElement.hidden = false) : (ele.hidden = false)); - }; const endDrag = action(() => { - hideDragShowOriginalElements(); + hideDragShowOriginalElements(false); document.removeEventListener("pointermove", moveHandler, true); document.removeEventListener("pointerup", upHandler); SnappingManager.SetIsDragging(false); diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index fdc470103..46d3b201b 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -271,7 +271,6 @@ export class PropertiesView extends React.Component { renderDepth={1} rootSelected={returnFalse} styleProvider={DefaultStyleProvider} - fitDocToPanel={true} freezeDimensions={true} dontCenter={"y"} NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index b2aa0d6ea..81ee16f63 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -401,7 +401,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { { ref="overlay"> { PanelHeight={panelHeight} NativeWidth={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} NativeHeight={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined} - fitDocToPanel={!asText && this.isCollectionDoc !== undefined} fitContentsToDoc={true} hideTitle={asText} LayoutTemplateString={asText ? FormattedTextBox.LayoutString("text") : undefined} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 740fc0658..bda3757e3 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -998,7 +998,6 @@ export class CollectionFreeFormView extends CollectionSubView, bounds: this.childDataProvider(entry[1].pair.layout, entry[1].replica) diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 55467696d..093a4c770 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -168,7 +168,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { PanelWidth={width} PanelHeight={height} freezeDimensions={true} - fitDocToPanel={true} ScreenToLocalTransform={dxf} onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index e3c6ed3ea..fe1595644 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -223,7 +223,6 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - fitDocToPanel={false} rootSelected={this.rootSelected} dropAction={StrCast(this.props.Document.childDropAction) as dropActionType} onClick={this.onChildClickHandler} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index b634e2307..ca712b521 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -223,7 +223,6 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - fitDocToPanel={false} rootSelected={this.rootSelected} dropAction={StrCast(this.props.Document.childDropAction) as dropActionType} onClick={this.onChildClickHandler} diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index bfdb7d98e..667962889 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -7,8 +7,7 @@ import { listSpec } from "../../../fields/Schema"; import { ComputedField } from "../../../fields/ScriptField"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; -import { numberRange, returnVal } from "../../../Utils"; -import { DocumentType } from "../../documents/DocumentTypes"; +import { numberRange, returnVal, returnOne } from "../../../Utils"; import { Transform } from "../../util/Transform"; import { DocComponent } from "../DocComponent"; import { InkingStroke } from "../InkingStroke"; @@ -27,7 +26,6 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { highlight?: boolean; jitterRotation: number; dataTransition?: string; - fitDocToPanel?: boolean; replica: string; } @@ -58,10 +56,7 @@ export class CollectionFreeFormDocumentView extends DocComponent, property: string) => { if (property === StyleProp.Opacity && doc === this.layoutDoc) return this.Opacity; // only change the opacity for this specific document, not its children @@ -144,12 +139,11 @@ export class CollectionFreeFormDocumentView extends DocComponent (this.sizeProvider?.width || this.props.PanelWidth?.()); panelHeight = () => (this.sizeProvider?.height || this.props.PanelHeight?.()); - screenToLocalTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y).scale(1 / this.Scaling()); + screenToLocalTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y); focusDoc = (doc: Doc) => this.props.focus(doc, false); NativeWidth = () => this.nativeWidth; NativeHeight = () => this.nativeHeight; returnThis = () => this; - Scaling = () => this.Document._fitWidth ? this.props.PanelWidth() / this.NativeWidth() : 1; render() { TraceMobx(); const backgroundColor = this.props.styleProvider?.(this.Document, this.props, StyleProp.BackgroundColor); @@ -161,7 +155,7 @@ export class CollectionFreeFormDocumentView extends DocComponent
    } - {this.props.fitDocToPanel ? - this._contentView = r)} /> : - } + this._contentView = r)} />
    ; } } diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index 5111fa041..db9366390 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -31,6 +31,7 @@ export class ContentFittingDocumentView extends React.Component boolean) => boolean; pinToPres: (document: Doc) => void; ScreenToLocalTransform: () => Transform; - contentFittingXf?: () => boolean; // bcz: need to figure out why this is needed in VideoBox/ImageBox/WebBox to turn off scaling... bringToFront: (doc: Doc, sendToBack?: boolean) => void; onClick?: () => ScriptField; dropAction?: dropActionType; @@ -88,7 +87,6 @@ export interface DocumentViewProps extends DocumentViewSharedProps { // properties specific to DocumentViews but not to FieldView freezeDimensions?: boolean; hideTitle?: boolean; // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings - fitDocToPanel?: boolean; // makes the document view fit the panel available to it (if it has native dimensions, then only one dimension will be fit) treeViewDoc?: Doc; dragDivName?: string; contentPointerEvents?: string; // pointer events allowed for content of a document view. eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents @@ -868,12 +866,13 @@ export class DocumentView extends DocComponent(Docu panelHeight = () => this.props.PanelHeight() - this.headerMargin; parentActive = (outsideReaction: boolean) => this.props.layerProvider?.(this.layoutDoc) === false ? this.props.parentActive(outsideReaction) : false; screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin); - contentScaling = () => !this.props.Document._fitWidth ? this.props.PanelWidth() / (this.props.NativeWidth?.() || this.props.PanelWidth()) : this.LocalScaling; + contentScaling = () => this.LocalScaling; @observable contentsActive: () => boolean = returnFalse; @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive; @computed get contents() { + console.log(this.props.Document.title + " " + this.LocalScaling + " " + this.contentScaling()) TraceMobx(); return (
    (Docu NativeHeight={this.NativeHeight} PanelWidth={this.props.PanelWidth} PanelHeight={this.props.PanelHeight} - contentFittingXf={this.props.contentFittingXf} scaling={this.contentScaling} layerProvider={this.props.layerProvider} styleProvider={this.props.styleProvider} @@ -906,7 +904,6 @@ export class DocumentView extends DocComponent(Docu makeLink={this.makeLink} focus={this.props.focus} dontRegisterView={this.props.dontRegisterView} - fitDocToPanel={this.props.fitDocToPanel} addDocument={this.props.addDocument} removeDocument={this.props.removeDocument} moveDocument={this.props.moveDocument} diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 5fba273fb..403b12f0d 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -67,8 +67,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent { this._dropDisposer?.(); ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.props.Document)); @@ -264,7 +262,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent { const remoteUrl = this.dataDoc.googlePhotosUrl; return !remoteUrl ? (null) : ( window.open(remoteUrl)} @@ -289,7 +287,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent { const { dataDoc } = this; @@ -400,26 +398,24 @@ export class ImageBox extends ViewBoxAnnotatableComponent this.contentScaling; - screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.ycenter).scale(1 / this.contentScaling); + screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.ycenter); contentFunc = () => [this.content]; render() { TraceMobx(); return (
    { : this.contentScaling; - screenToLocalTransform = () => this.props.ScreenToLocalTransform().scale(1 / this.scaling()); + screenToLocalTransform = () => this.props.ScreenToLocalTransform(); contentFunc = () => [this.youtubeVideoId ? this.youtubeContent : this.content]; render() { return (
    {view}
    @@ -646,26 +650,23 @@ export class WebBox extends ViewBoxAnnotatableComponent this._marqueeX; marqueeY = () => this._marqueeY; marqueeing = () => this._marqueeing; - @computed get contentScaling() { return this.props.scaling?.() || 1; } - scrollXf = () => this.props.ScreenToLocalTransform().scale(this.props.contentFittingXf?.() ? 1 : 1 / this.contentScaling).translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); - scaling = () => this.contentScaling; + scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { + const inactiveLayer = this.props.layerProvider?.(this.layoutDoc) === false; + const scale = this.props.scaling?.() || 1; + console.log("Scale = " + scale); return (
    {this.content}
    { const target = this._outerRef.current; @@ -687,22 +688,22 @@ export class WebBox extends ViewBoxAnnotatableComponent
    + setPreviewCursor={this.setPreviewCursor} + select={emptyFunction} + active={this.active} + whenActiveChanged={this.whenActiveChanged}>
    diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx index 04e94391f..c15eb2dac 100644 --- a/src/client/views/nodes/formattedText/DashDocView.tsx +++ b/src/client/views/nodes/formattedText/DashDocView.tsx @@ -228,7 +228,6 @@ export class DashDocView extends React.Component { Date: Tue, 15 Dec 2020 00:28:55 -0500 Subject: fixed borderradius for videos & images to match highlight border radius --- src/client/views/.DS_Store | Bin 10244 -> 10244 bytes src/client/views/StyleProvider.tsx | 2 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 8 ++------ src/client/views/nodes/ImageBox.tsx | 5 ++++- src/client/views/nodes/VideoBox.scss | 1 + src/client/views/nodes/VideoBox.tsx | 5 ++++- 6 files changed, 12 insertions(+), 9 deletions(-) (limited to 'src/client/views/nodes/VideoBox.tsx') diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store index 14e9f6680..33e624ef4 100644 Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 74e4e9bee..f2569edbd 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -90,7 +90,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt 600 || col.alpha() < 0.25) return "black"; return "white"; case StyleProp.Hidden: return BoolCast(doc?._hidden, BoolCast(doc?.hidden)); - case StyleProp.BorderRounding: return !doc ? undefined : StrCast(doc._borderRounding, StrCast(doc.borderRounding)); + case StyleProp.BorderRounding: return StrCast(doc?._borderRounding, StrCast(doc?.borderRounding)); case StyleProp.HeaderMargin: return ([CollectionViewType.Stacking, CollectionViewType.Masonry].includes(doc?._viewType as any) || doc?.type === DocumentType.RTF) && doc?._showTitle && !doc?._showTitleHover ? 15 : 0; case StyleProp.BackgroundColor: { if (Doc.UserDoc().renderStyle === "comic") return "transparent"; diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 305e01c93..a06dd530b 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -136,9 +136,7 @@ export class CollectionFreeFormDocumentView extends DocComponent this; render() { TraceMobx(); - const backgroundColor = this.props.styleProvider?.(this.Document, this.props, StyleProp.BackgroundColor); - const borderRadius = this.props.styleProvider?.(this.Document, this.props, StyleProp.BorderRounding); - const boxShadow = this.props.styleProvider?.(this.Document, this.props, StyleProp.BoxShadow); + const backgroundColor = () => this.props.styleProvider?.(this.Document, this.props, StyleProp.BackgroundColor); const divProps: DocumentViewProps = { ...this.props, CollectionFreeFormDocumentView: this.returnThis, @@ -149,8 +147,6 @@ export class CollectionFreeFormDocumentView extends DocComponent + style={{ stroke: "black", fill: backgroundColor(), strokeWidth: 0.2 }} />
    } diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 403b12f0d..393ba07e6 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -26,6 +26,7 @@ import { FaceRectangles } from './FaceRectangles'; import { FieldView, FieldViewProps } from './FieldView'; import "./ImageBox.scss"; import React = require("react"); +import { StyleProp } from '../StyleProvider'; const path = require('path'); const { Howl } = require('howler'); @@ -403,12 +404,14 @@ export class ImageBox extends ViewBoxAnnotatableComponent this.props.ScreenToLocalTransform(); contentFunc = () => [this.youtubeVideoId ? this.youtubeContent : this.content]; render() { + const borderRad = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BorderRounding); + const borderRadius = borderRad?.includes("px") ? `${Number(borderRad.split("px")[0]) / (this.props.scaling?.() || 1)}px` : borderRad; return (