From 80a8e0a7e48ee84cb121b80d72d485bc10e9269b Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Thu, 1 Oct 2020 19:32:21 +0800 Subject: redesigned presItems --- .../views/presentationview/PresElementBox.tsx | 132 ++++++++++++--------- 1 file changed, 76 insertions(+), 56 deletions(-) (limited to 'src/client/views/presentationview/PresElementBox.tsx') diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index aa44c13d1..8d53c8cc6 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -74,7 +74,7 @@ export class PresElementBox extends ViewBoxBaseComponent 100; // embedWidth = () => this.props.PanelWidth(); // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); - embedWidth = () => this.props.PanelWidth() - 20; + embedWidth = () => this.props.PanelWidth() - 30; /** * The function that is responsible for rendering a preview or not for this * presentation element. @@ -155,11 +155,9 @@ export class PresElementBox extends ViewBoxBaseComponent) => { + const activeItem = this.rootDoc; e.stopPropagation(); e.preventDefault(); - DragManager.docsBeingDragged = []; - this._highlightTopRef.current!.style.borderBottom = "0px"; - this._highlightBottomRef.current!.style.borderBottom = "0px"; } startDrag = (e: PointerEvent, down: number[], delta: number[]) => { @@ -167,10 +165,9 @@ export class PresElementBox extends ViewBoxBaseComponent 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 +177,39 @@ export class PresElementBox extends ViewBoxBaseComponent = React.createRef(); - private _highlightBottomRef: React.RefObject = React.createRef(); - - - onPointerTop = (e: React.PointerEvent) => { - if (DragManager.docsBeingDragged.length > 1) { - this._highlightTopRef.current!.style.borderTop = "solid 2px #5B9FDD"; - } + onPointerOver = (e: any) => { + console.log('pointerOver'); + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); } - onPointerBottom = (e: React.PointerEvent) => { + onPointerMove = (e: PointerEvent) => { + console.log('pointerMove'); + 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; + console.log(y); + console.log(height); + console.log(halfLine); 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) => { - if (DragManager.docsBeingDragged.length > 1) { - this._highlightBottomRef.current!.style.borderBottom = "0px"; - this._highlightTopRef.current!.style.borderTop = "0px"; - } + onPointerLeave = (e: any) => { + console.log('pointerLeave'); + this._itemRef.current!.style.borderTop = "0px" + this._itemRef.current!.style.borderBottom = "0px" + document.removeEventListener("pointermove", this.onPointerMove); } @action @@ -225,12 +234,21 @@ export class PresElementBox extends ViewBoxBaseComponent { + 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); + return ( +
{ e.stopPropagation(); e.preventDefault(); @@ -243,29 +261,25 @@ export class PresElementBox extends ViewBoxBaseComponent { 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} > - <> -
- {`${this.indexInPres + 1}.`} -
-
+
+ {`${this.indexInPres + 1}.`} +
+
+
{ e.stopPropagation(); this.presExpandDocumentClick(); isSelected ? console.log('selected') : console.log('not selected'); }} style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
{"Presentation pin view"}
}>
300 ? "block" : "none" }}>V
 -
{"Remove from presentation"}
}>
- e.stopPropagation()} /> -
-
{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}
}>
{ e.stopPropagation(); this.presExpandDocumentClick(); }}> - e.stopPropagation()} /> -
- -
-
-
- {this.renderEmbeddedInline} -
- ); +
+
{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}
}>
{ e.stopPropagation(); this.presExpandDocumentClick(); }}> + e.stopPropagation()} /> +
+
{"Remove from presentation"}
}>
+ e.stopPropagation()} /> +
+
+ {this.renderEmbeddedInline} +
+
); + } + + 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 -- cgit v1.2.3-70-g09d2 From d6131dbdb72fe220af1857e8090b0ca67db8b22d Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Tue, 13 Oct 2020 17:37:14 +0800 Subject: updates before merge --- src/client/views/nodes/PresBox.scss | 1 - src/client/views/nodes/PresBox.tsx | 1 + .../views/presentationview/PresElementBox.scss | 21 ++++++++------------- .../views/presentationview/PresElementBox.tsx | 17 +++++++---------- 4 files changed, 16 insertions(+), 24 deletions(-) (limited to 'src/client/views/presentationview/PresElementBox.tsx') 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 2af00586b..1af1d5c90 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -119,6 +119,7 @@ export class PresBox extends ViewBoxBaseComponent this.rootDoc._replacedChrome = "replaced"; this.layoutDoc.presStatus = "edit"; this.layoutDoc._gridGap = 0; + this.layoutDoc._yMargin = 0; this.turnOffEdit(true); DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(async pres => { await Promise.all(pres!); diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index d757fc1de..0e1953e7c 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -25,13 +25,12 @@ $slide-active: #5B9FDD; align-items: center; .presItem-number { + margin-top: 7px; font-size: 12px; font-weight: 700; text-align: center; justify-self: center; - align-self: center; - /* padding-right: 3%; */ - /* width: 8%; */ + align-self: flex-start; position: relative; display: inline-block; overflow: hidden; @@ -44,7 +43,7 @@ $slide-active: #5B9FDD; position: relative; background-color: #d5dce2; border-radius: 5px; - height: calc(100% - 5px); + height: calc(100% - 8px); width: calc(100% - 5px); display: grid; grid-template-columns: max-content max-content max-content max-content auto; @@ -68,17 +67,12 @@ $slide-active: #5B9FDD; } .presItem-slide.active { - border: solid 2px $dark-blue; -} - -.presItem-slide:hover { - background: $slide-hover; + box-shadow: 0 0 0px 1.5px $dark-blue; } -.documentView-node { - position: absolute; - z-index: 1; -} +// .presItem-slide:hover { +// background: $slide-hover; +// } .presElementBox-time { align-self: center; @@ -135,6 +129,7 @@ $slide-active: #5B9FDD; justify-content: center; align-items: center; transition: 0.2s; + margin-right: 3px; } .slideButton:hover { diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 8d53c8cc6..97344d33d 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -178,21 +178,16 @@ export class PresElementBox extends ViewBoxBaseComponent { - console.log('pointerOver'); document.removeEventListener("pointermove", this.onPointerMove); document.addEventListener("pointermove", this.onPointerMove); } onPointerMove = (e: PointerEvent) => { - console.log('pointerMove'); 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; - console.log(y); - console.log(height); - console.log(halfLine); if (DragManager.docsBeingDragged.length > 1) { if (y <= halfLine) { slide.style.borderTop = "solid 2px #5B9FDD"; @@ -248,7 +243,7 @@ export class PresElementBox extends ViewBoxBaseComponent { e.stopPropagation(); e.preventDefault(); @@ -278,9 +273,9 @@ export class PresElementBox extends ViewBoxBaseComponent {`${this.indexInPres + 1}.`}
-
-
{ e.stopPropagation(); this.presExpandDocumentClick(); isSelected ? console.log('selected') : console.log('not selected'); }} style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}> - +
+ {isSelected ? StrCast(this.rootDoc.title)} @@ -288,7 +283,9 @@ export class PresElementBox extends ViewBoxBaseComponent + /> : + this.rootDoc.title + }
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
 -- cgit v1.2.3-70-g09d2 From 9aded8f992b83a53eeb31faa3af1aeea4a5f4617 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Tue, 13 Oct 2020 23:08:20 +0800 Subject: Pres redesign and minor changes --- src/client/views/nodes/PresBox.tsx | 10 +- .../views/presentationview/PresElementBox.scss | 134 +++++++++++---------- .../views/presentationview/PresElementBox.tsx | 12 +- 3 files changed, 82 insertions(+), 74 deletions(-) (limited to 'src/client/views/presentationview/PresElementBox.tsx') diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 1af1d5c90..f59d6f966 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -1312,7 +1312,7 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
{this.stringType} selected -
+
Contents
Edit
@@ -1501,18 +1501,18 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc: Doc = this.targetDoc; const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); if (!activeItem.presProgressivize) { - targetDoc.editing = false; + // targetDoc.editing = false; activeItem.presProgressivize = true; targetDoc.presProgressivize = true; targetDoc._currentFrame = 0; 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; - targetDoc.editing = true; + // targetDoc.editing = true; } } @@ -1785,7 +1785,7 @@ export class PresBox extends ViewBoxBaseComponent {this.topPanel} {this.toolbar} {this.newDocumentToolbarDropdown} -
+
{mode !== CollectionViewType.Invalid ? 100; + embedHeight = () => 97; // embedWidth = () => this.props.PanelWidth(); // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); embedWidth = () => this.props.PanelWidth() - 30; @@ -81,7 +81,7 @@ export class PresElementBox extends ViewBoxBaseComponent +
-
+
; } @@ -287,9 +287,9 @@ export class PresElementBox extends ViewBoxBaseComponent -
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
 -
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
 -
{"Presentation pin view"}
}>
300 ? "block" : "none" }}>V
 +
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
 +
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
 +
{"Presentation pin view"}
}>
300 ? "block" : "none" }}>V
{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}
}>
{ e.stopPropagation(); this.presExpandDocumentClick(); }}> e.stopPropagation()} /> -- cgit v1.2.3-70-g09d2 From 80ccba05db32ca09ac513f3ec370f3deef873ce7 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Wed, 14 Oct 2020 02:45:39 +0800 Subject: update view (as button), doc.dragging q? --- .../views/collections/CollectionStackingView.tsx | 4 +-- src/client/views/nodes/PresBox.tsx | 33 ++++++++++++++--- .../views/presentationview/PresElementBox.tsx | 42 ++++++++++++++++------ 3 files changed, 61 insertions(+), 18 deletions(-) (limited to 'src/client/views/presentationview/PresElementBox.tsx') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index d41e0528d..3607b97d0 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -295,7 +295,7 @@ export class CollectionStackingView extends CollectionSubView { if (i === 0) { - doc.dragging = false; + 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]); @@ -303,7 +303,7 @@ export class CollectionStackingView extends CollectionSubView srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); } else if (i < (newDocs.length / 2)) { //glr: for some reason dragged documents are duplicated - doc.dragging = false; + if (doc.presentationTargetDoc) doc.dragging = false; DragManager.docsBeingDragged = []; if (targInd === -1) targInd = docs.length; else targInd = docs.indexOf(newDocs[0]) + 1; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 1a16e6237..8e2884968 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -1250,10 +1250,10 @@ export class PresBox extends ViewBoxBaseComponent const currentFrame = Cast(tagDoc._currentFrame, "number", null); if (currentFrame === undefined) { tagDoc._currentFrame = 0; - // CollectionFreeFormDocumentView.setupScroll(tagDoc, 0); + CollectionFreeFormDocumentView.setupScroll(tagDoc, 0); CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); } - // if (tagDoc.editScrollProgressivize) 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)); @@ -1314,7 +1314,7 @@ export class PresBox extends ViewBoxBaseComponent
Contents
Edit
-
+ {/*
Active text color
{ this.openActiveColorPicker = !this.openActiveColorPicker; })}>
@@ -1325,7 +1325,7 @@ export class PresBox extends ViewBoxBaseComponent
this.openViewedColorPicker = !this.openViewedColorPicker)}>
- {this.viewedColorPicker} + {this.viewedColorPicker} */} {/*
Zoom
Edit
@@ -1352,6 +1352,14 @@ export class PresBox extends ViewBoxBaseComponent
{"Last frame"}
}>
{NumCast(targetDoc.lastFrame)}
+
+
+ +
+
+ {this.frameList} +
+
console.log(" TODO: play frames")}>Play
@@ -1454,7 +1462,7 @@ export class PresBox extends ViewBoxBaseComponent activeItem.scrollProgressivize = !activeItem.scrollProgressivize; const targetDoc: Doc = this.targetDoc; targetDoc.scrollProgressivize = !targetDoc.scrollProgressivize; - // CollectionFreeFormDocumentView.setupScroll(targetDoc, NumCast(targetDoc._currentFrame)); + CollectionFreeFormDocumentView.setupScroll(targetDoc, NumCast(targetDoc._currentFrame)); if (targetDoc.editScrollProgressivize) { targetDoc.editScrollProgressivize = false; targetDoc._currentFrame = 0; @@ -1715,6 +1723,21 @@ export class PresBox extends ViewBoxBaseComponent ); } + @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) => { +
+ +
+ }) + return
+ {frameItems} +
; + } + @computed get playButtonFrames() { const targetDoc: Doc = this.targetDoc; return ( diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index b1eac5832..367bc6533 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -71,10 +71,10 @@ export class PresElementBox extends ViewBoxBaseComponent 97; + embedHeight = (): number => 97; // embedWidth = () => this.props.PanelWidth(); // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); - embedWidth = () => this.props.PanelWidth() - 30; + embedWidth = (): number => this.props.PanelWidth() - 30; /** * The function that is responsible for rendering a preview or not for this * presentation element. @@ -155,7 +155,14 @@ export class PresElementBox extends ViewBoxBaseComponent) => { + e.stopPropagation(); + e.preventDefault(); + } + + stopDrag = (e: PointerEvent) => { + console.log('stop drag') const activeItem = this.rootDoc; + activeItem.dragging = false; e.stopPropagation(); e.preventDefault(); } @@ -184,7 +191,7 @@ export class PresElementBox extends ViewBoxBaseComponent { const slide = this._itemRef.current!; - const rect = slide!.getBoundingClientRect(); + const rect = slide?.getBoundingClientRect(); let y = e.clientY - rect.top; //y position within the element. let height = slide.clientHeight; let halfLine = height / 2; @@ -201,9 +208,8 @@ export class PresElementBox extends ViewBoxBaseComponent { - console.log('pointerLeave'); - this._itemRef.current!.style.borderTop = "0px" - this._itemRef.current!.style.borderBottom = "0px" + this._itemRef.current!.style.borderTop = "0px"; + this._itemRef.current!.style.borderBottom = "0px"; document.removeEventListener("pointermove", this.onPointerMove); } @@ -240,6 +246,10 @@ export class PresElementBox extends ViewBoxBaseComponent= 300; + const targetDoc: Doc = Cast(this.rootDoc.presentationTargetDoc, Doc, null); + const activeItem: Doc = this.rootDoc; return (
{ - console.log('double click to open'); this.toggleProperties(); this.props.focus(this.rootDoc); this.clearArrays(); @@ -274,7 +283,7 @@ export class PresElementBox extends ViewBoxBaseComponent
-
+
{isSelected ? -
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
 -
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
 -
{"Presentation pin view"}
}>
300 ? "block" : "none" }}>V
 +
{"Movement speed"}
}>
{this.transition}
 +
{"Duration"}
}>
{this.duration}
+
{"Update view"}
}> +
{ + 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
+
{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}
}>
{ e.stopPropagation(); this.presExpandDocumentClick(); }}> e.stopPropagation()} />
-- cgit v1.2.3-70-g09d2 From 6762d82992732eb14d7d2313d92cf0ae3a30f5a9 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Wed, 14 Oct 2020 02:52:32 +0800 Subject: remove console.log --- src/client/views/presentationview/PresElementBox.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src/client/views/presentationview/PresElementBox.tsx') diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 367bc6533..9052967e5 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -160,7 +160,6 @@ export class PresElementBox extends ViewBoxBaseComponent { - console.log('stop drag') const activeItem = this.rootDoc; activeItem.dragging = false; e.stopPropagation(); -- cgit v1.2.3-70-g09d2 From 94a08418663fbb327542f7be9e3909f383c8bc33 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Wed, 14 Oct 2020 11:48:16 +0800 Subject: Fixed bug showing up cannot read ... of rect... --- src/client/views/presentationview/PresElementBox.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'src/client/views/presentationview/PresElementBox.tsx') diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 9052967e5..adaabec8a 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -190,11 +190,11 @@ export class PresElementBox extends ViewBoxBaseComponent { 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) { + if (slide && DragManager.docsBeingDragged.length > 1) { + const rect = slide.getBoundingClientRect(); + let y = e.clientY - rect.top; //y position within the element. + let height = slide.clientHeight; + let halfLine = height / 2; if (y <= halfLine) { slide.style.borderTop = "solid 2px #5B9FDD"; slide.style.borderBottom = "0px"; -- cgit v1.2.3-70-g09d2 From 22b53b6070d777ee992e32e16cccebb0c104adf5 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Thu, 15 Oct 2020 13:26:04 +0800 Subject: pin with view on scrollable documents and some undo bug fixes --- src/client/views/collections/CollectionMenu.tsx | 41 ++++++++++++++-------- src/client/views/nodes/PresBox.tsx | 32 ++++++++++------- .../views/presentationview/PresElementBox.tsx | 28 ++++++++++----- 3 files changed, 64 insertions(+), 37 deletions(-) (limited to 'src/client/views/presentationview/PresElementBox.tsx') diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index bf6067978..d9924c299 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -394,28 +394,39 @@ export class CollectionViewBaseChrome extends React.Component; } + @undoBatch + @action + pinWithView = (targetDoc: Opt) => { + if (targetDoc) { + TabDocView.PinDoc(targetDoc, false); + const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1]; + if (targetDoc.type === DocumentType.PDF) { + const scroll = targetDoc._scrollTop; + activeDoc.presPinView = true; + activeDoc.presPinViewScroll = scroll; + } else { + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeDoc.presPinView = true; + activeDoc.presPinViewX = x; + activeDoc.presPinViewY = y; + activeDoc.presPinViewScale = scale; + } + } + } + @computed get pinWithViewButton() { const presPinWithViewIcon = ; const targetDoc = this.selectedDoc; - return (!targetDoc || (targetDoc._viewType !== CollectionViewType.Freeform && targetDoc.type !== DocumentType.IMG)) ? (null) :
{"Pin to presentation trail with current view"}
} placement="top"> + {/* return (!targetDoc || (targetDoc._viewType !== CollectionViewType.Freeform && targetDoc.type !== DocumentType.IMG)) ? (null) :
{"Pin to presentation trail with current view"}
} placement="top"> */ } + return (targetDoc && (targetDoc._viewType === CollectionViewType.Freeform || targetDoc.type === DocumentType.IMG || targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF)) ?
{"Pin to presentation trail with current view"}
} placement="top"> - ; + : (null); } diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index dd7eba0b2..36705ecba 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -299,10 +299,14 @@ export class PresBox extends ViewBoxBaseComponent // if targetDoc is not displayed but one of its aliases is, then we need to modify that alias, not the original target const bestTarget = DocumentManager.Instance.getFirstDocumentView(targetDoc)?.props.Document; bestTarget && runInAction(() => { - bestTarget._viewTransition = activeItem.presTransition ? `transform ${activeItem.presTransition}ms` : 'all 0.5s'; - bestTarget._panX = activeItem.presPinViewX; - bestTarget._panY = activeItem.presPinViewY; - bestTarget._viewScale = activeItem.presPinViewScale; + if (bestTarget.type === DocumentType.PDF) { + bestTarget._scrollY = activeItem.presPinViewScroll; + } else { + bestTarget._viewTransition = activeItem.presTransition ? `transform ${activeItem.presTransition}ms` : 'all 0.5s'; + bestTarget._panX = activeItem.presPinViewX; + bestTarget._panY = activeItem.presPinViewY; + bestTarget._viewScale = activeItem.presPinViewScale; + } }); //setTimeout(() => targetDoc._viewTransition = undefined, 1010); } @@ -451,6 +455,8 @@ export class PresBox extends ViewBoxBaseComponent srcContext.presPathView = this.pathBoolean; } } + + @undoBatch @action toggleExpandMode = () => { this.rootDoc.expandBoolean = !this.rootDoc.expandBoolean; this.childDocs.forEach((doc) => { @@ -890,9 +896,9 @@ export class PresBox extends ViewBoxBaseComponent
Visibility {"&"} Duration
-
{"Hide before presented"}
}>
activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton}>Hide before
 -
{"Hide after presented"}
}>
activeItem.presHideAfterButton = !activeItem.presHideAfterButton}>Hide after
 -
{"Open document in a new tab"}
}>
activeItem.openDocument = !activeItem.openDocument}>Open
 +
{"Hide before presented"}
}>
activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton)}>Hide before
 +
{"Hide after presented"}
}>
activeItem.presHideAfterButton = !activeItem.presHideAfterButton)}>Hide after
 +
{"Open document in a new tab"}
}>
activeItem.openDocument = !activeItem.openDocument)}>Open
Slide Duration
@@ -924,12 +930,12 @@ export class PresBox extends ViewBoxBaseComponent {effect}
e.stopPropagation()}> -
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'None'}>None
-
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Fade'}>Fade In
-
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Flip'}>Flip
-
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Rotate'}>Rotate
-
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Bounce'}>Bounce
-
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Roll'}>Roll
+
e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'None')}>None
+
e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Fade')}>Fade In
+
e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Flip')}>Flip
+
e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Rotate')}>Rotate
+
e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Bounce')}>Bounce
+
e.stopPropagation()} onClick={undoBatch(() => targetDoc.presEffect = 'Roll')}>Roll
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index adaabec8a..9a6e4313d 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -242,6 +242,23 @@ export class PresElementBox extends ViewBoxBaseComponent { + console.log(targetDoc.type); + if (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF) { + const scroll = targetDoc._scrollTop; + activeItem.presPinViewScroll = scroll; + } else { + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeItem.presPinViewX = x; + activeItem.presPinViewY = y; + activeItem.presPinViewScale = scale; + } + } + @computed get mainItem() { const isSelected: boolean = PresBox.Instance._selectedArray.includes(this.rootDoc); const isDragging: boolean = BoolCast(this.rootDoc.dragging); @@ -300,14 +317,7 @@ export class PresElementBox extends ViewBoxBaseComponent
{"Update view"}
}>
{ - const x = targetDoc._panX; - const y = targetDoc._panY; - const scale = targetDoc._viewScale; - activeItem.presPinViewX = x; - activeItem.presPinViewY = y; - activeItem.presPinViewScale = scale; - }} + onClick={() => this.pinWithView(targetDoc, activeItem)} style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V
{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}
}>
{ e.stopPropagation(); this.presExpandDocumentClick(); }}> @@ -321,7 +331,7 @@ export class PresElementBox extends ViewBoxBaseComponent {this.renderEmbeddedInline}
-
); +
); } render() { -- cgit v1.2.3-70-g09d2