diff options
| -rw-r--r-- | src/client/views/collections/CollectionStackingView.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/collections/TabDocView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 30 | ||||
| -rw-r--r-- | src/client/views/nodes/PresBox.scss | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/PresBox.tsx | 60 | ||||
| -rw-r--r-- | src/client/views/presentationview/PresElementBox.scss | 286 | ||||
| -rw-r--r-- | src/client/views/presentationview/PresElementBox.tsx | 166 |
7 files changed, 264 insertions, 285 deletions
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 72ce041e1..3607b97d0 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -295,12 +295,16 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument, if (docs) { newDocs.map((doc, i) => { if (i === 0) { + if (doc.presentationTargetDoc) doc.dragging = false; //glr: so it only applies to items in presentation + DragManager.docsBeingDragged = []; if (targInd === -1) targInd = docs.length; else targInd = docs.indexOf(this.filteredChildren[targInd]); const srcInd = docs.indexOf(doc); docs.splice(srcInd, 1); docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); } else if (i < (newDocs.length / 2)) { //glr: for some reason dragged documents are duplicated + if (doc.presentationTargetDoc) doc.dragging = false; + DragManager.docsBeingDragged = []; if (targInd === -1) targInd = docs.length; else targInd = docs.indexOf(newDocs[0]) + 1; const srcInd = docs.indexOf(doc); diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 8c1a003b9..70eb5b895 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -123,7 +123,7 @@ export class TabDocView extends React.Component<TabDocViewProps> { @undoBatch @action public static PinDoc(doc: Doc, unpin = false, audioRange?: boolean) { - if (unpin) console.log('remove unpin'); + if (unpin) console.log('TODO: Remove UNPIN from this location'); //add this new doc to props.Document const curPres = CurrentUserUtils.ActivePresentation; if (curPres) { diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index d6f8ce19c..5a8ce4e14 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -65,7 +65,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF w: Cast(doc["w-indexed"], listSpec("number"), [NumCast(doc._width)]).reduce((p, w, i) => (i <= timecode && w !== undefined) || p === undefined ? w : p, undefined as any as number), x: Cast(doc["x-indexed"], listSpec("number"), [NumCast(doc.x)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number), y: Cast(doc["y-indexed"], listSpec("number"), [NumCast(doc.y)]).reduce((p, y, i) => (i <= timecode && y !== undefined) || p === undefined ? y : p, undefined as any as number), - scroll: Cast(doc["scroll-indexed"], listSpec("number"), [NumCast(doc._scrollY, 0)]).reduce((p, s, i) => (i <= timecode && s !== undefined) || p === undefined ? s : p, undefined as any as number), + scroll: Cast(doc["scroll-indexed"], listSpec("number"), [NumCast(doc._scrollTop, 0)]).reduce((p, s, i) => (i <= timecode && s !== undefined) || p === undefined ? s : p, undefined as any as number), opacity: Cast(doc["opacity-indexed"], listSpec("number"), [NumCast(doc.opacity, 1)]).reduce((p, o, i) => i <= timecode || p === undefined ? o : p, undefined as any as number), }); } @@ -97,24 +97,24 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF d["text-color"] = "grey"; } else { d["text-color"] = "black"; } } else if (d.appearFrame === 0) { - d["text-color"] = "black"; } } - public static updateScrollframe(doc: Doc, time: number) { - const timecode = Math.round(time); - const scrollIndexed = Cast(doc['scroll-indexed'], listSpec("number"), null); - scrollIndexed?.length <= timecode + 1 && scrollIndexed.push(undefined as any as number); - setTimeout(() => doc.dataTransition = "inherit", 1010); - } + // public static updateScrollframe(doc: Doc, time: number) { + // console.log('update scroll frame'); + // const timecode = Math.round(time); + // const scrollIndexed = Cast(doc['scroll-indexed'], listSpec("number"), null); + // scrollIndexed?.length <= timecode + 1 && scrollIndexed.push(undefined as any as number); + // setTimeout(() => doc.dataTransition = "inherit", 1010); + // } - public static setupScroll(doc: Doc, timecode: number) { - const scrollList = new List<number>(); - scrollList[timecode] = NumCast(doc._scrollY); - doc["scroll-indexed"] = scrollList; - doc.activeFrame = ComputedField.MakeFunction("self._currentFrame"); - doc._scrollY = ComputedField.MakeInterpolated("scroll", "activeFrame"); - } + // public static setupScroll(doc: Doc, timecode: number) { + // const scrollList = new List<number>(); + // scrollList[timecode] = NumCast(doc._scrollTop); + // doc["scroll-indexed"] = scrollList; + // doc.activeFrame = ComputedField.MakeFunction("self._currentFrame"); + // doc._scrollTop = ComputedField.MakeInterpolated("scroll", "activeFrame"); + // } public static updateKeyframe(docs: Doc[], time: number, targetDoc?: Doc) { diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 7bc6c1dfd..ad2e7122f 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -22,7 +22,6 @@ $light-background: #ececec; position: relative; height: calc(100% - 67px); width: 100%; - margin-top: 3px; } .presBox-toolbar-dropdown { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index e79b2810b..8e2884968 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -118,7 +118,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> this.rootDoc._forceRenderEngine = "timeline"; this.rootDoc._replacedChrome = "replaced"; this.layoutDoc.presStatus = "edit"; - this.layoutDoc._gridGap = 5; + this.layoutDoc._gridGap = 0; + this.layoutDoc._yMargin = 0; this.turnOffEdit(true); DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(pres => !pres?.includes(this.rootDoc) && Doc.AddDocToList(Doc.UserDoc().myPresentations as Doc, "data", this.rootDoc)); @@ -151,7 +152,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> setTimeout(() => targetDoc._viewTransition = undefined, 1010); // targetDoc._currentFrame = curFrame + 1; this.nextKeyframe(targetDoc, activeItem); - // if (targetDoc.scrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(targetDoc, currentFrame); if (activeItem.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, targetDoc); else targetDoc.editing = true; // if (activeItem.zoomProgressivize) this.zoomProgressivizeNext(targetDoc); @@ -275,7 +275,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> // If openDocument is selected then it should open the document for the user if (activeItem.openDocument) { - collectionDocView ? collectionDocView.props.addDocTab(activeItem, "inPlace") : this.props.addDocTab(activeItem, "replace:right"); + collectionDocView ? collectionDocView.props.addDocTab(activeItem, "replace") : this.props.addDocTab(activeItem, "replace:left"); } else //docToJump stayed same meaning, it was not in the group or was the last element in the group if (activeItem.zoomProgressivize && this.rootDoc.presStatus !== 'edit') { @@ -524,7 +524,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined); this.rootDoc._viewType = viewType; - if (viewType === CollectionViewType.Stacking) this.layoutDoc._gridGap = 5; + if (viewType === CollectionViewType.Stacking) this.layoutDoc._gridGap = 0; }); /** @@ -1253,19 +1253,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> CollectionFreeFormDocumentView.setupScroll(tagDoc, 0); CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); } - CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame); + if (tagDoc.editScrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame); CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, tagDoc); tagDoc._currentFrame = Math.max(0, (currentFrame || 0) + 1); tagDoc.lastFrame = Math.max(NumCast(tagDoc._currentFrame), NumCast(tagDoc.lastFrame)); - // if (curDoc.zoomProgressivize) { - // const resize = document.getElementById('resizable'); - // if (resize) { - // resize.style.width = this.checkList(tagDoc, curDoc["viewfinder-width-indexed"]) + 'px'; - // resize.style.height = this.checkList(tagDoc, curDoc["viewfinder-height-indexed"]) + 'px'; - // resize.style.top = this.checkList(tagDoc, curDoc["viewfinder-top-indexed"]) + 'px'; - // resize.style.left = this.checkList(tagDoc, curDoc["viewfinder-left-indexed"]) + 'px'; - // } - // } } @undoBatch @@ -1279,15 +1270,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> } CollectionFreeFormDocumentView.gotoKeyframe(childDocs.slice()); tagDoc._currentFrame = Math.max(0, (currentFrame || 0) - 1); - // if (actItem.zoomProgressivize) { - // const resize = document.getElementById('resizable'); - // if (resize) { - // resize.style.width = this.checkList(tagDoc, actItem["viewfinder-width-indexed"]) + 'px'; - // resize.style.height = this.checkList(tagDoc, actItem["viewfinder-height-indexed"]) + 'px'; - // resize.style.top = this.checkList(tagDoc, actItem["viewfinder-top-indexed"]) + 'px'; - // resize.style.left = this.checkList(tagDoc, actItem["viewfinder-left-indexed"]) + 'px'; - // } - // } } /** @@ -1328,11 +1310,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> <div className={`presBox-ribbon ${this.progressivizeTools && this.layoutDoc.presStatus === "edit" ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> <div className="ribbon-box"> {this.stringType} selected - <div className="ribbon-doubleButton" style={{ borderTop: 'solid 1px darkgrey', display: (targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform') || targetDoc.type === DocumentType.IMG ? "inline-flex" : "none" }}> + <div className="ribbon-doubleButton" style={{ borderTop: 'solid 1px darkgrey', display: (targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform') || targetDoc.type === DocumentType.IMG || targetDoc.type === DocumentType.RTF ? "inline-flex" : "none" }}> <div className="ribbon-toggle" style={{ backgroundColor: activeItem.presProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeChild}>Contents</div> <div className="ribbon-toggle" style={{ opacity: activeItem.presProgressivize ? 1 : 0.4, backgroundColor: targetDoc.editProgressivize ? "#aedef8" : "" }} onClick={this.editProgressivize}>Edit</div> </div> - <div className="ribbon-doubleButton" style={{ display: activeItem.presProgressivize ? "inline-flex" : "none" }}> + {/* <div className="ribbon-doubleButton" style={{ display: activeItem.presProgressivize ? "inline-flex" : "none" }}> <div className="presBox-subheading">Active text color</div> <div className="ribbon-colorBox" style={{ backgroundColor: activeFontColor, height: 15, width: 15 }} onClick={action(() => { this.openActiveColorPicker = !this.openActiveColorPicker; })}> </div> @@ -1343,7 +1325,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> <div className="ribbon-colorBox" style={{ backgroundColor: viewedFontColor, height: 15, width: 15 }} onClick={action(() => this.openViewedColorPicker = !this.openViewedColorPicker)}> </div> </div> - {this.viewedColorPicker} + {this.viewedColorPicker} */} {/* <div className="ribbon-doubleButton" style={{ borderTop: 'solid 1px darkgrey', display: (targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform') || targetDoc.type === DocumentType.IMG ? "inline-flex" : "none" }}> <div className="ribbon-toggle" style={{ backgroundColor: activeItem.zoomProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeZoom}>Zoom</div> <div className="ribbon-toggle" style={{ opacity: activeItem.zoomProgressivize ? 1 : 0.4, backgroundColor: activeItem.editZoomProgressivize ? "#aedef8" : "" }} onClick={this.editZoomProgressivize}>Edit</div> @@ -1370,6 +1352,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> </div> <Tooltip title={<><div className="dash-tooltip">{"Last frame"}</div></>}><div className="ribbon-property">{NumCast(targetDoc.lastFrame)}</div></Tooltip> </div> + <div className="ribbon-frameList"> + <div className="frameList-header"> + + </div> + <div className="frameList-item"> + {this.frameList} + </div> + </div> <div className="ribbon-toggle" style={{ height: 20, backgroundColor: "#AEDDF8" }} onClick={() => console.log(" TODO: play frames")}>Play</div> </div> </div> @@ -1524,7 +1514,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> docs.forEach((doc, i) => CollectionFreeFormDocumentView.setupKeyframes([doc], i, true)); targetDoc.lastFrame = targetDoc.lastFrame ? NumCast(targetDoc.lastFrame) : docs.length - 1; } else { - targetDoc.editProgressivize = false; + // targetDoc.editProgressivize = false; activeItem.presProgressivize = false; targetDoc.presProgressivize = false; targetDoc._currentFrame = 0; @@ -1682,6 +1672,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> </Tooltip> <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.expandBoolean ? "Minimize all" : "Expand all"}</div></>}> <div className={`toolbar-button ${this.rootDoc.expandBoolean ? "active" : ""}`} onClick={this.toggleExpandMode}> + {/* <FontAwesomeIcon icon={this.rootDoc.expandBoolean ? "eye-slash" : "eye"} /> */} <FontAwesomeIcon icon={"eye"} /> </div> </Tooltip> @@ -1732,6 +1723,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> ); } + @computed get frameList() { + const activeItem: Doc = this.activeItem; + const targetDoc: Doc = this.targetDoc; + const frameList: number[] = []; + frameList.length = NumCast(targetDoc.lastFrame); + const frameItems = frameList.map((value) => { + <div className="frameItem"> + + </div> + }) + return <div> + {frameItems} + </div>; + } + @computed get playButtonFrames() { const targetDoc: Doc = this.targetDoc; return ( diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 4642caeb2..f1bdb7737 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -1,12 +1,14 @@ $light-blue: #AEDDF8; $dark-blue: #5B9FDD; $light-background: #ececec; +$slide-background: #d5dce2; +$slide-hover: #98b7da; +$slide-active: #5B9FDD; -.presElementBox-item { +.presItem-container { cursor: grab; display: grid; - grid-template-columns: max-content max-content max-content max-content; - background-color: #d5dce2; + grid-template-columns: 20px auto; font-family: Roboto; letter-spacing: normal; position: relative; @@ -14,200 +16,132 @@ $light-background: #ececec; width: 100%; height: 100%; font-weight: 400; - border-radius: 6px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; - transition: all .3s; - padding: 0px; - padding-bottom: 3px; - - .presElementBox-highlight { - position: absolute; - transform: translate(-100px, -4px); - z-index: -1; - width: calc(100% + 200px); - height: calc(100% + 8px); - background-color: $light-blue; - } - - .presElementBox-highlightTop { - position: absolute; - transform: translate(-100px, -4px); - z-index: -1; - width: calc(100% + 200px); - height: calc(50% + 4px); - } - - .presElementBox-highlightBottom { - position: absolute; - transform: translate(-100px, 0px); - z-index: -1; - top: 50%; - width: calc(100% + 200px); - height: calc(50% + 4px); - } + align-items: center; - .documentView-node { - position: absolute; - z-index: 1; + .presItem-number { + margin-top: 7px; + font-size: 12px; + font-weight: 700; + text-align: center; + justify-self: center; + align-self: flex-start; + position: relative; + display: inline-block; + overflow: hidden; } -} - -.presElementBox-item-above { - border-top: black 2px solid; -} - -.presElementBox-item-below { - border-bottom: black 2px solid; -} -.presElementBox-item:hover { - transition: all .1s; - background: #98b7da; - border-radius: 6px; -} -.presElementBox-active { - color: black; - border-radius: 6px; - border: solid 2px $dark-blue; } -.presElementBox-buttons { +.presItem-slide { + position: relative; + background-color: #d5dce2; + border-radius: 5px; + height: calc(100% - 7px); + width: calc(100% - 5px); display: grid; - grid-template-rows: 15px; - top: 15px; - left: -20; - position: absolute; - width: 100%; - height: auto; - - .presElementBox-interaction { - display: none; + grid-template-rows: 23px auto; + grid-template-columns: max-content max-content max-content max-content auto; + + .presItem-name { + z-index: 300; + align-self: center; + font-size: 13px; + font-family: Roboto; + font-weight: 500; + position: relative; + top: 1px; + padding-left: 10px; + padding-right: 10px; + letter-spacing: normal; + width: max-content; + text-overflow: ellipsis; + overflow: hidden; + white-space: pre; } - .presElementBox-interaction-selected { - color: grey; - background-color: rgba(0, 0, 0, 0); - float: left; - padding: 0px; - width: 20px; - height: 20px; + .presItem-time { + align-self: center; + position: relative; + top: 2px; + padding-right: 10px; + font-size: 10; + font-weight: 300; + font-family: Roboto; + z-index: 300; + letter-spacing: normal; + } + + .presItem-embedded { + overflow: hidden; + grid-column: 1/8; + position: relative; + display: flex; + width: auto; + justify-content: center; + margin: auto; + margin-bottom: 2px; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + } + + .presItem-embeddedMask { + width: 100%; + height: 100%; + position: absolute; + border-radius: 3px; + top: 0; + left: 0; + z-index: 1; + overflow: hidden; } -} - -.presElementBox-number { - font-size: 12px; - width: 20; - font-weight: 700; - text-align: right; - justify-content: center; - align-content: center; - left: -20; - position: absolute; - display: inline-block; - overflow: hidden; -} - -.presElementBox-name { - z-index: 300; - align-self: center; - font-size: 13px; - font-family: Roboto; - font-weight: 500; - position: relative; - top: 1px; - padding-left: 10px; - padding-right: 10px; - letter-spacing: normal; - width: max-content; - text-overflow: ellipsis; - overflow: hidden; - white-space: pre; -} -.presElementBox-time { - align-self: center; - position: relative; - top: 2px; - padding-right: 10px; - font-size: 10; - font-weight: 300; - font-family: Roboto; - z-index: 300; - letter-spacing: normal; -} -.presElementBox-embedded { - grid-column: 1/8; - position: relative; - display: flex; - width: auto; - justify-content: center; - margin: auto; + .presItem-slideButtons { + display: flex; + grid-column: 7; + width: 60px; + justify-self: right; + justify-content: flex-end; + + .slideButton { + cursor: pointer; + position: relative; + border-radius: 100%; + z-index: 300; + width: 15px; + height: 15px; + display: flex; + font-size: 10px; + 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.15); + } + } } -.presElementBox-embeddedMask { - width: 100%; - height: 100%; - position: absolute; - border-radius: 3px; - top: 0; - left: 0; - z-index: 1; - overflow: hidden; +.presItem-slide.active { + box-shadow: 0 0 0px 1.5px $dark-blue; } -.presElementBox-closeIcon { - cursor: pointer; - position: absolute; - border-radius: 100%; - z-index: 300; - right: 3px; - top: 3px; - width: 20px; - height: 20px; - display: flex; - font-size: 75%; - background-color: black; - color: white; - justify-content: center; - align-items: center; -} +// .presItem-slide:hover { +// background: $slide-hover; +// } -.presElementBox-expand { - cursor: pointer; - position: absolute; - border-radius: 100%; - z-index: 300; - right: 26px; - top: 3px; - width: 20px; - height: 20px; - display: flex; - font-size: 75%; - background-color: black; - color: white; - justify-content: center; - align-items: center; -} -.presElementBox-expand-selected { - cursor: pointer; - position: absolute; - border-radius: 100%; - right: 3px; - bottom: 3px; - width: 20px; - height: 20px; - z-index: 300; - display: flex; - background-color: black; - color: white; - justify-content: center; - align-items: center; -}
\ No newline at end of file diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index aa44c13d1..9052967e5 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -71,17 +71,17 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton; } - embedHeight = () => 100; + embedHeight = (): number => 97; // embedWidth = () => this.props.PanelWidth(); // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); - embedWidth = () => this.props.PanelWidth() - 20; + embedWidth = (): number => this.props.PanelWidth() - 30; /** * The function that is responsible for rendering a preview or not for this * presentation element. */ @computed get renderEmbeddedInline() { return !this.rootDoc.presExpandInlineButton || !this.targetDoc ? (null) : - <div className="presElementBox-embedded" style={{ height: this.embedHeight(), width: this.embedWidth() }}> + <div className="presItem-embedded" style={{ height: this.embedHeight(), width: this.embedWidth() }}> <ContentFittingDocumentView Document={this.targetDoc} DataDoc={this.targetDoc[DataSym] !== this.targetDoc && this.targetDoc[DataSym]} @@ -110,7 +110,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc ContainingCollectionDoc={undefined} ContentScaling={returnOne} /> - <div className="presElementBox-embeddedMask" /> + <div className="presItem-embeddedMask" /> </div>; } @@ -157,9 +157,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc headerUp = (e: React.PointerEvent<HTMLDivElement>) => { e.stopPropagation(); e.preventDefault(); - DragManager.docsBeingDragged = []; - this._highlightTopRef.current!.style.borderBottom = "0px"; - this._highlightBottomRef.current!.style.borderBottom = "0px"; + } + + stopDrag = (e: PointerEvent) => { + const activeItem = this.rootDoc; + activeItem.dragging = false; + e.stopPropagation(); + e.preventDefault(); } startDrag = (e: PointerEvent, down: number[], delta: number[]) => { @@ -167,10 +171,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc)); const dragItem: HTMLElement[] = []; PresBox.Instance._dragArray.map(ele => { - const drag = ele; - drag.style.backgroundColor = "#d5dce2"; - drag.style.borderRadius = '5px'; - dragItem.push(drag); + const doc = ele; + doc.className = "presItem-slide" + dragItem.push(doc); }); if (activeItem) { DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY); @@ -180,27 +183,33 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc return false; } - private _highlightTopRef: React.RefObject<HTMLDivElement> = React.createRef(); - private _highlightBottomRef: React.RefObject<HTMLDivElement> = React.createRef(); - - - onPointerTop = (e: React.PointerEvent<HTMLDivElement>) => { - if (DragManager.docsBeingDragged.length > 1) { - this._highlightTopRef.current!.style.borderTop = "solid 2px #5B9FDD"; - } + onPointerOver = (e: any) => { + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); } - onPointerBottom = (e: React.PointerEvent<HTMLDivElement>) => { + onPointerMove = (e: PointerEvent) => { + const slide = this._itemRef.current!; + const rect = slide?.getBoundingClientRect(); + let y = e.clientY - rect.top; //y position within the element. + let height = slide.clientHeight; + let halfLine = height / 2; if (DragManager.docsBeingDragged.length > 1) { - this._highlightBottomRef.current!.style.borderBottom = "solid 2px #5B9FDD"; + if (y <= halfLine) { + slide.style.borderTop = "solid 2px #5B9FDD"; + slide.style.borderBottom = "0px"; + } else if (y > halfLine) { + slide.style.borderTop = "0px"; + slide.style.borderBottom = "solid 2px #5B9FDD"; + } } + document.removeEventListener("pointermove", this.onPointerMove); } - onPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => { - if (DragManager.docsBeingDragged.length > 1) { - this._highlightBottomRef.current!.style.borderBottom = "0px"; - this._highlightTopRef.current!.style.borderTop = "0px"; - } + onPointerLeave = (e: any) => { + this._itemRef.current!.style.borderTop = "0px"; + this._itemRef.current!.style.borderBottom = "0px"; + document.removeEventListener("pointermove", this.onPointerMove); } @action @@ -225,12 +234,25 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc return true; } - render() { - const className = "presElementBox-item" + (PresBox.Instance._selectedArray.includes(this.rootDoc) ? " presElementBox-active" : ""); - return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : ( - <div className={className} key={this.props.Document[Id] + this.indexInPres} + @action + clearArrays = () => { + PresBox.Instance._eleArray = []; + PresBox.Instance._eleArray.push(this._itemRef.current!); + PresBox.Instance._dragArray = []; + PresBox.Instance._dragArray.push(this._dragRef.current!); + } + + @computed get mainItem() { + const isSelected: boolean = PresBox.Instance._selectedArray.includes(this.rootDoc); + const isDragging: boolean = BoolCast(this.rootDoc.dragging); + const toolbarWidth: number = PresBox.Instance.toolbarWidth; + const showMore: boolean = PresBox.Instance.toolbarWidth >= 300; + const targetDoc: Doc = Cast(this.rootDoc.presentationTargetDoc, Doc, null); + const activeItem: Doc = this.rootDoc; + return ( + <div className={`presItem-container`} key={this.props.Document[Id] + this.indexInPres} ref={this._itemRef} - style={{ outlineWidth: Doc.IsBrushed(this.targetDoc) ? `1px` : "0px", }} + style={{ backgroundColor: isSelected ? "#AEDDF8" : "rgba(0,0,0,0)", opacity: isDragging ? 0.3 : 1 }} onClick={e => { e.stopPropagation(); e.preventDefault(); @@ -243,30 +265,25 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc // Regular click } else { this.props.focus(this.rootDoc); - PresBox.Instance._eleArray = []; - PresBox.Instance._eleArray.push(this._itemRef.current!); - PresBox.Instance._dragArray = []; - PresBox.Instance._dragArray.push(this._dragRef.current!); + this.clearArrays(); } }} onDoubleClick={e => { - console.log('double click to open'); this.toggleProperties(); this.props.focus(this.rootDoc); - PresBox.Instance._eleArray = []; - PresBox.Instance._eleArray.push(this._itemRef.current!); - PresBox.Instance._dragArray = []; - PresBox.Instance._dragArray.push(this._dragRef.current!); + this.clearArrays(); }} + onPointerOver={this.onPointerOver} + onPointerLeave={this.onPointerLeave} onPointerDown={this.headerDown} onPointerUp={this.headerUp} > - <> - <div className="presElementBox-number"> - {`${this.indexInPres + 1}.`} - </div> - <div ref={this._dragRef} className="presElementBox-name" style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}> - <EditableView + <div className="presItem-number"> + {`${this.indexInPres + 1}.`} + </div> + <div ref={this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}> + <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85 }}> + {isSelected ? <EditableView ref={this._titleRef} contents={this.rootDoc.title} GetValue={() => StrCast(this.rootDoc.title)} @@ -274,25 +291,44 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc this.onSetValue(value); return true; })} - /> + /> : + this.rootDoc.title + } </div> - <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.transition}</div></Tooltip> - <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</div></Tooltip> - <Tooltip title={<><div className="dash-tooltip">{"Presentation pin view"}</div></>}><div className="presElementBox-time" style={{ fontWeight: 700, display: this.rootDoc.presPinView && PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>V</div></Tooltip> - <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div - className="presElementBox-closeIcon" - onClick={this.removeItem}> - <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} /> - </div></Tooltip> - <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"presElementBox-expand" + (this.rootDoc.presExpandInlineButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}> - <FontAwesomeIcon icon={(this.rootDoc.presExpandInlineButton ? "angle-up" : "angle-down")} onPointerDown={e => e.stopPropagation()} /> - </div></Tooltip> - </> - <div ref={this._highlightTopRef} onPointerOver={this.onPointerTop} onPointerLeave={this.onPointerLeave} className="presElementBox-highlightTop" style={{ zIndex: 299, backgroundColor: "rgba(0,0,0,0)" }} /> - <div ref={this._highlightBottomRef} onPointerOver={this.onPointerBottom} onPointerLeave={this.onPointerLeave} className="presElementBox-highlightBottom" style={{ zIndex: 299, backgroundColor: "rgba(0,0,0,0)" }} /> - <div className="presElementBox-highlight" style={{ backgroundColor: PresBox.Instance._selectedArray.includes(this.rootDoc) ? "#AEDDF8" : "rgba(0,0,0,0)" }} /> - {this.renderEmbeddedInline} - </div> - ); + <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip> + <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip> + <div className={"presItem-slideButtons"}> + <Tooltip title={<><div className="dash-tooltip">{"Update view"}</div></>}> + <div className="slideButton" + onClick={e => { + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeItem.presPinViewX = x; + activeItem.presPinViewY = y; + activeItem.presPinViewScale = scale; + }} + style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</div> + </Tooltip> + <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"slideButton"} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}> + <FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? "eye-slash" : "eye"} onPointerDown={e => e.stopPropagation()} /> + </div></Tooltip> + <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div + className={"slideButton"} + onClick={this.removeItem}> + <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} /> + </div></Tooltip> + </div> + {this.renderEmbeddedInline} + </div> + </div>); + } + + render() { + let item = null; + if (!(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise) item = null; + else item = this.mainItem; + + return item; } }
\ No newline at end of file |