From 79166a51eae57e59cc63009e22310b416500de9e Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Fri, 7 Aug 2020 15:17:17 +0800 Subject: moving viewfinder --- .../collectionFreeForm/CollectionFreeFormView.tsx | 213 ++++++++++++++++++++- src/client/views/nodes/PresBox.tsx | 206 -------------------- 2 files changed, 212 insertions(+), 207 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 192335abb..034d32e0a 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1494,10 +1494,221 @@ interface CollectionFreeFormViewPannableContentsProps { @observer class CollectionFreeFormViewPannableContents extends React.Component{ + private _isDraggingTL = false; + private _isDraggingTR = false; + private _isDraggingBR = false; + private _isDraggingBL = false; + private _isDragging = false; + // private _drag = ""; + + // onPointerDown = (e: React.PointerEvent): void => { + // e.stopPropagation(); + // e.preventDefault(); + // if (e.button === 0) { + // this._drag = e.currentTarget.id; + // console.log(this._drag); + // } + // document.removeEventListener("pointermove", this.onPointerMove); + // document.addEventListener("pointermove", this.onPointerMove); + // document.removeEventListener("pointerup", this.onPointerUp); + // document.addEventListener("pointerup", this.onPointerUp); + // } + + + //Adds event listener so knows pointer is down and moving + onPointerMid = (e: React.PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isDragging = true; + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + + //Adds event listener so knows pointer is down and moving + onPointerBR = (e: React.PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isDraggingBR = true; + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + + //Adds event listener so knows pointer is down and moving + onPointerBL = (e: React.PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isDraggingBL = true; + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + + //Adds event listener so knows pointer is down and moving + onPointerTR = (e: React.PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isDraggingTR = true; + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + + //Adds event listener so knows pointer is down and moving + onPointerTL = (e: React.PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isDraggingTL = true; + document.removeEventListener("pointermove", this.onPointerMove); + document.addEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + document.addEventListener("pointerup", this.onPointerUp); + } + + //Removes all event listeners + onPointerUp = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + this._isDraggingTL = false; + this._isDraggingTR = false; + this._isDraggingBL = false; + this._isDraggingBR = false; + this._isDragging = false; + document.removeEventListener("pointermove", this.onPointerMove); + document.removeEventListener("pointerup", this.onPointerUp); + } + + //Adjusts the value in NodeStore + onPointerMove = (e: PointerEvent): void => { + const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + const tagDocView = DocumentManager.Instance.getDocumentView(targetDoc); + e.stopPropagation(); + e.preventDefault(); + const doc = document.getElementById('resizable'); + if (doc && tagDocView) { + + const scale = this.props.zoomScaling(); + + const scale2 = tagDocView.childScaling(); + const scale3 = tagDocView.props.ScreenToLocalTransform().Scale; + const scale1 = NumCast(targetDoc._viewScale); + // const scale = this.props.zoomScaling(); + console.log("_viewScale: " + scale1); + console.log("_StLT: " + scale3); + console.log("zoomScaling: " + scale3); + let height = doc.offsetHeight; + let width = doc.offsetWidth; + let top = doc.offsetTop; + let left = doc.offsetLeft; + // const newHeightB = height += (e.movementY * NumCast(targetDoc._viewScale)); + // const newHeightT = height -= (e.movementY * NumCast(targetDoc._viewScale)); + // const newWidthR = width += (e.movementX * NumCast(targetDoc._viewScale)); + // const newWidthL = width -= (e.movementX * NumCast(targetDoc._viewScale)); + // const newLeft = left += (e.movementX * NumCast(targetDoc._viewScale)); + // const newTop = top += (e.movementY * NumCast(targetDoc._viewScale)); + // switch (this._drag) { + // case "": break; + // case "resizer-br": + // doc.style.height = newHeightB + 'px'; + // doc.style.width = newWidthR + 'px'; + // break; + // case "resizer-bl": + // doc.style.height = newHeightB + 'px'; + // doc.style.width = newWidthL + 'px'; + // doc.style.left = newLeft + 'px'; + // break; + // case "resizer-tr": + // doc.style.width = newWidthR + 'px'; + // doc.style.height = newHeightT + 'px'; + // doc.style.top = newTop + 'px'; + // case "resizer-tl": + // doc.style.width = newWidthL + 'px'; + // doc.style.height = newHeightT + 'px'; + // doc.style.top = newTop + 'px'; + // doc.style.left = newLeft + 'px'; + // case "resizable": + // doc.style.top = newTop + 'px'; + // doc.style.left = newLeft + 'px'; + // } + //Bottom right + if (this._isDraggingBR) { + const newHeight = height += (e.movementY * scale); + doc.style.height = newHeight + 'px'; + const newWidth = width += (e.movementX * scale); + doc.style.width = newWidth + 'px'; + // Bottom left + } else if (this._isDraggingBL) { + const newHeight = height += (e.movementY * scale); + doc.style.height = newHeight + 'px'; + const newWidth = width -= (e.movementX * scale); + doc.style.width = newWidth + 'px'; + const newLeft = left += (e.movementX * scale); + doc.style.left = newLeft + 'px'; + // Top right + } else if (this._isDraggingTR) { + const newWidth = width += (e.movementX * scale); + doc.style.width = newWidth + 'px'; + const newHeight = height -= (e.movementY * scale); + doc.style.height = newHeight + 'px'; + const newTop = top += (e.movementY * scale); + doc.style.top = newTop + 'px'; + // Top left + } else if (this._isDraggingTL) { + const newWidth = width -= (e.movementX * scale); + doc.style.width = newWidth + 'px'; + const newHeight = height -= (e.movementY * scale); + doc.style.height = newHeight + 'px'; + const newTop = top += (e.movementY * scale); + doc.style.top = newTop + 'px'; + const newLeft = left += (e.movementX * scale); + doc.style.left = newLeft + 'px'; + } else if (this._isDragging) { + const newTop = top += (e.movementY * scale); + doc.style.top = newTop + 'px'; + const newLeft = left += (e.movementX * scale); + doc.style.left = newLeft + 'px'; + } + PresBox.Instance.updateList(targetDoc, targetDoc["viewfinder-width-indexed"], width); + PresBox.Instance.updateList(targetDoc, targetDoc["viewfinder-height-indexed"], height); + PresBox.Instance.updateList(targetDoc, targetDoc["viewfinder-top-indexed"], top); + PresBox.Instance.updateList(targetDoc, targetDoc["viewfinder-left-indexed"], left); + } + } + + // scale: NumCast(targetDoc._viewScale), + @computed get zoomProgressivizeContainer() { + const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + if (targetDoc) { + const vfLeft: number = PresBox.Instance.checkList(targetDoc, targetDoc["viewfinder-left-indexed"]); + const vfWidth: number = PresBox.Instance.checkList(targetDoc, targetDoc["viewfinder-width-indexed"]); + const vfTop: number = PresBox.Instance.checkList(targetDoc, targetDoc["viewfinder-top-indexed"]); + const vfHeight: number = PresBox.Instance.checkList(targetDoc, targetDoc["viewfinder-height-indexed"]); + return ( + <> + {!targetDoc.editZoomProgressivize ? (null) :
+
+
+
+
+
+
+
} + + ); + } + } + @computed get zoomProgressivize() { if (PresBox.Instance) return ( <> - {this.props.zoomProgressivize ? PresBox.Instance.zoomProgressivizeContainer : (null)} + {this.props.zoomProgressivize ? this.zoomProgressivizeContainer : (null)} ); } diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 230137584..f2ef42162 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -1291,188 +1291,6 @@ export class PresBox extends ViewBoxBaseComponent else doc.displayMovement = true; } - private _isDraggingTL = false; - private _isDraggingTR = false; - private _isDraggingBR = false; - private _isDraggingBL = false; - private _isDragging = false; - // private _drag = ""; - - // onPointerDown = (e: React.PointerEvent): void => { - // e.stopPropagation(); - // e.preventDefault(); - // if (e.button === 0) { - // this._drag = e.currentTarget.id; - // console.log(this._drag); - // } - // document.removeEventListener("pointermove", this.onPointerMove); - // document.addEventListener("pointermove", this.onPointerMove); - // document.removeEventListener("pointerup", this.onPointerUp); - // document.addEventListener("pointerup", this.onPointerUp); - // } - - - //Adds event listener so knows pointer is down and moving - onPointerMid = (e: React.PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - this._isDragging = true; - document.removeEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointerup", this.onPointerUp); - } - - //Adds event listener so knows pointer is down and moving - onPointerBR = (e: React.PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - this._isDraggingBR = true; - document.removeEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointerup", this.onPointerUp); - } - - //Adds event listener so knows pointer is down and moving - onPointerBL = (e: React.PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - this._isDraggingBL = true; - document.removeEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointerup", this.onPointerUp); - } - - //Adds event listener so knows pointer is down and moving - onPointerTR = (e: React.PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - this._isDraggingTR = true; - document.removeEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointerup", this.onPointerUp); - } - - //Adds event listener so knows pointer is down and moving - onPointerTL = (e: React.PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - this._isDraggingTL = true; - document.removeEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointerup", this.onPointerUp); - } - - //Removes all event listeners - onPointerUp = (e: PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - this._isDraggingTL = false; - this._isDraggingTR = false; - this._isDraggingBL = false; - this._isDraggingBR = false; - this._isDragging = false; - document.removeEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - } - - //Adjusts the value in NodeStore - onPointerMove = (e: PointerEvent): void => { - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); - const tagDocView = DocumentManager.Instance.getDocumentView(targetDoc); - e.stopPropagation(); - e.preventDefault(); - const doc = document.getElementById('resizable'); - if (doc && tagDocView) { - - const scale2 = tagDocView.childScaling(); - const scale3 = tagDocView.props.ScreenToLocalTransform().Scale; - const scale = NumCast(targetDoc._viewScale); - console.log("scale: " + NumCast(targetDoc._viewScale)); - let height = doc.offsetHeight; - let width = doc.offsetWidth; - let top = doc.offsetTop; - let left = doc.offsetLeft; - // const newHeightB = height += (e.movementY * NumCast(targetDoc._viewScale)); - // const newHeightT = height -= (e.movementY * NumCast(targetDoc._viewScale)); - // const newWidthR = width += (e.movementX * NumCast(targetDoc._viewScale)); - // const newWidthL = width -= (e.movementX * NumCast(targetDoc._viewScale)); - // const newLeft = left += (e.movementX * NumCast(targetDoc._viewScale)); - // const newTop = top += (e.movementY * NumCast(targetDoc._viewScale)); - // switch (this._drag) { - // case "": break; - // case "resizer-br": - // doc.style.height = newHeightB + 'px'; - // doc.style.width = newWidthR + 'px'; - // break; - // case "resizer-bl": - // doc.style.height = newHeightB + 'px'; - // doc.style.width = newWidthL + 'px'; - // doc.style.left = newLeft + 'px'; - // break; - // case "resizer-tr": - // doc.style.width = newWidthR + 'px'; - // doc.style.height = newHeightT + 'px'; - // doc.style.top = newTop + 'px'; - // case "resizer-tl": - // doc.style.width = newWidthL + 'px'; - // doc.style.height = newHeightT + 'px'; - // doc.style.top = newTop + 'px'; - // doc.style.left = newLeft + 'px'; - // case "resizable": - // doc.style.top = newTop + 'px'; - // doc.style.left = newLeft + 'px'; - // } - //Bottom right - if (this._isDraggingBR) { - const newHeight = height += (e.movementY * scale); - doc.style.height = newHeight + 'px'; - const newWidth = width += (e.movementX * scale); - doc.style.width = newWidth + 'px'; - // Bottom left - } else if (this._isDraggingBL) { - const newHeight = height += (e.movementY * scale); - doc.style.height = newHeight + 'px'; - const newWidth = width -= (e.movementX * scale); - doc.style.width = newWidth + 'px'; - const newLeft = left += (e.movementX * scale); - doc.style.left = newLeft + 'px'; - // Top right - } else if (this._isDraggingTR) { - const newWidth = width += (e.movementX * scale); - doc.style.width = newWidth + 'px'; - const newHeight = height -= (e.movementY * scale); - doc.style.height = newHeight + 'px'; - const newTop = top += (e.movementY * scale); - doc.style.top = newTop + 'px'; - // Top left - } else if (this._isDraggingTL) { - const newWidth = width -= (e.movementX * scale); - doc.style.width = newWidth + 'px'; - const newHeight = height -= (e.movementY * scale); - doc.style.height = newHeight + 'px'; - const newTop = top += (e.movementY * scale); - doc.style.top = newTop + 'px'; - const newLeft = left += (e.movementX * scale); - doc.style.left = newLeft + 'px'; - } else if (this._isDragging) { - const newTop = top += (e.movementY * scale); - doc.style.top = newTop + 'px'; - const newLeft = left += (e.movementX * scale); - doc.style.left = newLeft + 'px'; - } - this.updateList(targetDoc, targetDoc["viewfinder-width-indexed"], width); - this.updateList(targetDoc, targetDoc["viewfinder-height-indexed"], height); - this.updateList(targetDoc, targetDoc["viewfinder-top-indexed"], top); - this.updateList(targetDoc, targetDoc["viewfinder-left-indexed"], left); - } - } - @action checkList = (doc: Doc, list: any): number => { const x: List = list; @@ -1499,30 +1317,6 @@ export class PresBox extends ViewBoxBaseComponent } } - // scale: NumCast(targetDoc._viewScale), - @computed get zoomProgressivizeContainer() { - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); - if (targetDoc) { - const vfLeft: number = this.checkList(targetDoc, targetDoc["viewfinder-left-indexed"]); - const vfWidth: number = this.checkList(targetDoc, targetDoc["viewfinder-width-indexed"]); - const vfTop: number = this.checkList(targetDoc, targetDoc["viewfinder-top-indexed"]); - const vfHeight: number = this.checkList(targetDoc, targetDoc["viewfinder-height-indexed"]); - return ( - <> - {!targetDoc.editZoomProgressivize ? (null) :
-
-
-
-
-
-
-
} - - ); - } - } - @computed get progressivizeChildDocs() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); -- cgit v1.2.3-70-g09d2 From ca8566598d2ae9c85b1ea9418fced7261a7f11e2 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Sun, 9 Aug 2020 13:17:07 +0800 Subject: updates --- src/client/views/.DS_Store | Bin 10244 -> 10244 bytes .../collectionFreeForm/CollectionFreeFormView.tsx | 49 ++++++++--- src/client/views/nodes/AudioBox.tsx | 1 + .../views/nodes/CollectionFreeFormDocumentView.tsx | 11 +-- src/client/views/nodes/PresBox.tsx | 98 ++++++++++----------- 5 files changed, 88 insertions(+), 71 deletions(-) (limited to 'src') diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store index c379549d0..489c1666e 100644 Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index d9acc3376..98ea8998d 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1583,6 +1583,15 @@ class CollectionFreeFormViewPannableContents extends React.Component { + // const scale = this.props.getLocalTransform().inverse().Scale; + // const newPanX = Math.min((1 - 1 / scale) * this.props.nativeWidth, Math.max(0, moveX)); + // const newPanY = Math.min((1 - 1 / scale) * this.nativeHeight), Math.max(0, panY)); + // } + + @observable private _movementRight: number = 0; + //Adjusts the value in NodeStore onPointerMove = (e: PointerEvent): void => { const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null); @@ -1594,14 +1603,15 @@ class CollectionFreeFormViewPannableContents extends React.Component { + const x: List = list; + if (x && x.length >= NumCast(doc.currentFrame) + 1) { + x[NumCast(doc.currentFrame)] = val; + list = x; + } else { + x.length = NumCast(doc.currentFrame) + 1; + x[NumCast(doc.currentFrame)] = val; + list = x; } } @@ -1685,14 +1708,14 @@ class CollectionFreeFormViewPannableContents extends React.Component - {!targetDoc.editZoomProgressivize ? (null) :
+ {!activeItem.editZoomProgressivize ? (null) :
@@ -1706,7 +1729,7 @@ class CollectionFreeFormViewPannableContents extends React.Component) { super(props); + AudioBox.Instance = this; // onClick play script if (!AudioBox.RangeScript) { diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 42a42ddf1..616aa2e96 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -164,15 +164,16 @@ export class CollectionFreeFormDocumentView extends DocComponent docs.forEach(doc => doc.dataTransition = "inherit"), 1010); } - public static setupZoom(doc: Doc, zoomProgressivize: boolean = false) { + + public static setupZoom(doc: Doc, targDoc: Doc, zoomProgressivize: boolean = false) { const width = new List(); const height = new List(); const top = new List(); const left = new List(); - width.push(NumCast(doc.width)); - height.push(NumCast(doc.height)); - top.push(NumCast(doc.height) / -2); - left.push(NumCast(doc.width) / -2); + width.push(NumCast(targDoc._width)); + height.push(NumCast(targDoc._height)); + top.push(NumCast(targDoc._height) / -2); + left.push(NumCast(targDoc._width) / -2); doc["viewfinder-width-indexed"] = width; doc["viewfinder-height-indexed"] = height; doc["viewfinder-top-indexed"] = top; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index fd4525ced..0a17198a8 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -27,6 +27,7 @@ import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu"; import { actionAsync } from "mobx-utils"; import { SelectionManager } from "../../util/SelectionManager"; import { AudioBox } from "./AudioBox"; +import { DocumentView } from "./DocumentView"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -118,7 +119,7 @@ export class PresBox extends ViewBoxBaseComponent const lastFrame = Cast(presTargetDoc.lastFrame, "number", null); const curFrame = NumCast(presTargetDoc.currentFrame); let internalFrames: boolean = false; - if (presTargetDoc.presProgressivize || presTargetDoc.zoomProgressivize || presTargetDoc.scrollProgressivize) internalFrames = true; + if (presTargetDoc.presProgressivize || activeItem.zoomProgressivize || presTargetDoc.scrollProgressivize) internalFrames = true; // Case 1: There are still other frames and should go through all frames before going to next slide if (internalFrames && lastFrame !== undefined && curFrame < lastFrame) { presTargetDoc._viewTransition = "all 1s"; @@ -126,9 +127,9 @@ export class PresBox extends ViewBoxBaseComponent presTargetDoc.currentFrame = curFrame + 1; if (presTargetDoc.scrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(presTargetDoc, currentFrame); if (presTargetDoc.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); - if (presTargetDoc.zoomProgressivize) this.zoomProgressivizeNext(presTargetDoc); + if (activeItem.zoomProgressivize) this.zoomProgressivizeNext(presTargetDoc); // Case 2: Audio or video therefore wait to play the audio or video before moving on - } else if ((presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio) { + } else if ((presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio && this.layoutDoc.presStatus !== 'auto') { AudioBox.Instance.playFrom(0); this._moveOnFromAudio = true; // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide @@ -169,8 +170,9 @@ export class PresBox extends ViewBoxBaseComponent if (presTargetDoc?.lastFrame !== undefined) { presTargetDoc.currentFrame = 0; } - this.navigateToElement(this.childDocs[index]); //Handles movement to element this._selectedArray = [this.childDocs[index]]; //Update selected array + //Handles movement to element + if (this.layoutDoc._viewType === "stacking") this.navigateToElement(this.childDocs[index]); this.onHideDocument(); //Handles hide after/before } }); @@ -192,8 +194,8 @@ export class PresBox extends ViewBoxBaseComponent this.turnOffEdit(); if (this.itemIndex >= 0) { - if (targetDoc) { - if (srcContext) this.layoutDoc.presCollection = srcContext; + if (srcContext && targetDoc) { + this.layoutDoc.presCollection = srcContext; } else if (targetDoc) this.layoutDoc.presCollection = targetDoc; } if (collectionDocView) { @@ -207,7 +209,7 @@ export class PresBox extends ViewBoxBaseComponent const willZoom = false; //docToJump stayed same meaning, it was not in the group or was the last element in the group - if (targetDoc.zoomProgressivize && this.rootDoc.presStatus !== 'edit') { + if (activeItem.zoomProgressivize && this.rootDoc.presStatus !== 'edit') { this.zoomProgressivizeNext(targetDoc); } else if (docToJump === curDoc) { //checking if curDoc has navigation open @@ -245,22 +247,23 @@ export class PresBox extends ViewBoxBaseComponent * Uses the viewfinder to progressivize through the different views of a single collection. * @param presTargetDoc: document for which internal zoom is used */ - zoomProgressivizeNext = (presTargetDoc: Doc) => { - const srcContext = Cast(presTargetDoc.context, Doc, null); - const docView = DocumentManager.Instance.getDocumentView(presTargetDoc); - const vfLeft: number = this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]); - const vfWidth: number = this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]); - const vfTop: number = this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]); - const vfHeight: number = this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]); + zoomProgressivizeNext = (activeItem: Doc) => { + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + const srcContext = Cast(targetDoc.context, Doc, null); + const docView = DocumentManager.Instance.getDocumentView(targetDoc); + const vfLeft: number = !activeItem ? 0 : this.checkList(targetDoc, activeItem["viewfinder-left-indexed"]); + const vfWidth: number = !activeItem ? 0 : this.checkList(targetDoc, activeItem["viewfinder-width-indexed"]); + const vfTop: number = !activeItem ? 0 : this.checkList(targetDoc, activeItem["viewfinder-top-indexed"]); + const vfHeight: number = !activeItem ? 0 : this.checkList(targetDoc, activeItem["viewfinder-height-indexed"]); // Case 1: document that is not a Golden Layout tab if (srcContext) { const srcDocView = DocumentManager.Instance.getDocumentView(srcContext); if (srcDocView) { - const layoutdoc = Doc.Layout(presTargetDoc); + const layoutdoc = Doc.Layout(targetDoc); const panelWidth: number = srcDocView.props.PanelWidth(); const panelHeight: number = srcDocView.props.PanelHeight(); - const newPanX = NumCast(presTargetDoc.x) + NumCast(layoutdoc._width) / 2; - const newPanY = NumCast(presTargetDoc.y) + NumCast(layoutdoc._height) / 2; + const newPanX = NumCast(targetDoc.x) + NumCast(layoutdoc._width) / 2; + const newPanY = NumCast(targetDoc.y) + NumCast(layoutdoc._height) / 2; const newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight); srcContext._panX = newPanX + (vfLeft + (vfWidth / 2)); srcContext._panY = newPanY + (vfTop + (vfHeight / 2)); @@ -272,9 +275,9 @@ export class PresBox extends ViewBoxBaseComponent const panelWidth: number = docView.props.PanelWidth(); const panelHeight: number = docView.props.PanelHeight(); const newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight); - presTargetDoc._panX = vfLeft + (vfWidth / 2); - presTargetDoc._panY = vfTop + (vfWidth / 2); - presTargetDoc._viewScale = newScale; + targetDoc._panX = vfLeft + (vfWidth / 2); + targetDoc._panY = vfTop + (vfWidth / 2); + targetDoc._viewScale = newScale; } const resize = document.getElementById('resizable'); if (resize) { @@ -990,7 +993,7 @@ export class PresBox extends ViewBoxBaseComponent // Case in which the document has keyframes to navigate to next key frame @undoBatch @action - nextKeyframe = (tagDoc: Doc): void => { + nextKeyframe = (tagDoc: Doc, activeItem: Doc): void => { const childDocs = DocListCast(tagDoc[Doc.LayoutFieldKey(tagDoc)]); const currentFrame = Cast(tagDoc.currentFrame, "number", null); if (currentFrame === undefined) { @@ -1002,20 +1005,20 @@ export class PresBox extends ViewBoxBaseComponent CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); tagDoc.currentFrame = Math.max(0, (currentFrame || 0) + 1); tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), NumCast(tagDoc.lastFrame)); - if (tagDoc.zoomProgressivize) { + if (activeItem.zoomProgressivize) { const resize = document.getElementById('resizable'); if (resize) { - resize.style.width = this.checkList(tagDoc, tagDoc["viewfinder-width-indexed"]) + 'px'; - resize.style.height = this.checkList(tagDoc, tagDoc["viewfinder-height-indexed"]) + 'px'; - resize.style.top = this.checkList(tagDoc, tagDoc["viewfinder-top-indexed"]) + 'px'; - resize.style.left = this.checkList(tagDoc, tagDoc["viewfinder-left-indexed"]) + 'px'; + resize.style.width = this.checkList(tagDoc, activeItem["viewfinder-width-indexed"]) + 'px'; + resize.style.height = this.checkList(tagDoc, activeItem["viewfinder-height-indexed"]) + 'px'; + resize.style.top = this.checkList(tagDoc, activeItem["viewfinder-top-indexed"]) + 'px'; + resize.style.left = this.checkList(tagDoc, activeItem["viewfinder-left-indexed"]) + 'px'; } } } @undoBatch @action - prevKeyframe = (tagDoc: Doc): void => { + prevKeyframe = (tagDoc: Doc, activeItem: Doc): void => { const childDocs = DocListCast(tagDoc[Doc.LayoutFieldKey(tagDoc)]); const currentFrame = Cast(tagDoc.currentFrame, "number", null); if (currentFrame === undefined) { @@ -1024,13 +1027,13 @@ export class PresBox extends ViewBoxBaseComponent } CollectionFreeFormDocumentView.gotoKeyframe(childDocs.slice()); tagDoc.currentFrame = Math.max(0, (currentFrame || 0) - 1); - if (tagDoc.zoomProgressivize) { + if (activeItem.zoomProgressivize) { const resize = document.getElementById('resizable'); if (resize) { - resize.style.width = this.checkList(tagDoc, tagDoc["viewfinder-width-indexed"]) + 'px'; - resize.style.height = this.checkList(tagDoc, tagDoc["viewfinder-height-indexed"]) + 'px'; - resize.style.top = this.checkList(tagDoc, tagDoc["viewfinder-top-indexed"]) + 'px'; - resize.style.left = this.checkList(tagDoc, tagDoc["viewfinder-left-indexed"]) + 'px'; + resize.style.width = this.checkList(tagDoc, activeItem["viewfinder-width-indexed"]) + 'px'; + resize.style.height = this.checkList(tagDoc, activeItem["viewfinder-height-indexed"]) + 'px'; + resize.style.top = this.checkList(tagDoc, activeItem["viewfinder-top-indexed"]) + 'px'; + resize.style.left = this.checkList(tagDoc, activeItem["viewfinder-left-indexed"]) + 'px'; } } } @@ -1072,7 +1075,7 @@ export class PresBox extends ViewBoxBaseComponent
Internal zoom
-
Viewfinder
+
Viewfinder
{/*
Snapshot
*/}
{/*
@@ -1088,14 +1091,14 @@ export class PresBox extends ViewBoxBaseComponent Frames
-
{ e.stopPropagation(); this.prevKeyframe(targetDoc); }}> +
{ e.stopPropagation(); this.prevKeyframe(targetDoc, activeItem); }}>
targetDoc.editing = !targetDoc.editing)} > {NumCast(targetDoc.currentFrame)}
-
{ e.stopPropagation(); this.nextKeyframe(targetDoc); }}> +
{ e.stopPropagation(); this.nextKeyframe(targetDoc, activeItem); }}>
@@ -1144,8 +1147,10 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); if (!targetDoc.editZoomProgressivize) { targetDoc.editZoomProgressivize = true; + activeItem.editZoomProgressivize = true; } else { targetDoc.editZoomProgressivize = false; + activeItem.editZoomProgressivize = false; } } @@ -1168,7 +1173,7 @@ export class PresBox extends ViewBoxBaseComponent const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); activeItem.scrollProgressivize = !activeItem.scrollProgressivize; const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - targetDoc.scrollProgressivize = !targetDoc.zoomProgressivize; + targetDoc.scrollProgressivize = !targetDoc.scrollProgressivize; CollectionFreeFormDocumentView.setupScroll(targetDoc, NumCast(targetDoc.currentFrame), true); if (targetDoc.editScrollProgressivize) { targetDoc.editScrollProgressivize = false; @@ -1185,9 +1190,9 @@ export class PresBox extends ViewBoxBaseComponent activeItem.zoomProgressivize = !activeItem.zoomProgressivize; const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); targetDoc.zoomProgressivize = !targetDoc.zoomProgressivize; - CollectionFreeFormDocumentView.setupZoom(targetDoc, true); - if (targetDoc.editZoomProgressivize) { - targetDoc.editZoomProgressivize = false; + CollectionFreeFormDocumentView.setupZoom(activeItem, targetDoc, true); + if (activeItem.editZoomProgressivize) { + activeItem.editZoomProgressivize = false; targetDoc.currentFrame = 0; targetDoc.lastFrame = 0; } @@ -1296,7 +1301,7 @@ export class PresBox extends ViewBoxBaseComponent const x: List = list; if (x && x.length >= NumCast(doc.currentFrame) + 1) { return x[NumCast(doc.currentFrame)]; - } else { + } else if (doc) { x.length = NumCast(doc.currentFrame) + 1; x[NumCast(doc.currentFrame)] = x[NumCast(doc.currentFrame) - 1]; return x[NumCast(doc.currentFrame)]; @@ -1304,19 +1309,6 @@ export class PresBox extends ViewBoxBaseComponent } - @action - updateList = (doc: Doc, list: any, val: number) => { - const x: List = list; - if (x && x.length >= NumCast(doc.currentFrame) + 1) { - x[NumCast(doc.currentFrame)] = val; - list = x; - } else { - x.length = NumCast(doc.currentFrame) + 1; - x[NumCast(doc.currentFrame)] = val; - list = x; - } - } - @computed get progressivizeChildDocs() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); -- cgit v1.2.3-70-g09d2 From bdce823ca6839fa7de4b927de484417bb596bba0 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Wed, 12 Aug 2020 14:52:28 +0800 Subject: bugs fixes from other comp --- src/client/util/CurrentUserUtils.ts | 10 +- src/client/views/.DS_Store | Bin 10244 -> 10244 bytes src/client/views/MainView.tsx | 64 +++++ .../views/collections/CollectionDockingView.tsx | 1 + .../collectionFreeForm/CollectionFreeFormView.tsx | 289 ++++++++++----------- src/client/views/nodes/PresBox.scss | 96 ++++--- src/client/views/nodes/PresBox.tsx | 107 +++++--- .../views/presentationview/PresElementBox.tsx | 12 +- 8 files changed, 366 insertions(+), 213 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 49377a728..8f65f3e9f 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -836,13 +836,20 @@ export class CurrentUserUtils { } } - // Right sidebar is where mobile uploads are contained + // Sharing sidebar is where shared documents are contained static setupSharingSidebar(doc: Doc) { if (doc["sidebar-sharing"] === undefined) { doc["sidebar-sharing"] = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Shared Documents", childDropAction: "alias" })); } } + // Import sidebar is where shared documents are contained + static setupImportSidebar(doc: Doc) { + if (doc["sidebar-import"] === undefined) { + doc["sidebar-import"] = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Imported Documents", childDropAction: "alias" })); + } + } + static setupClickEditorTemplates(doc: Doc) { if (doc["clickFuncs-child"] === undefined) { @@ -913,6 +920,7 @@ export class CurrentUserUtils { this.setupDefaultIconTemplates(doc); // creates a set of icon templates triggered by the document deoration icon this.setupDocTemplates(doc); // sets up the template menu of templates this.setupSharingSidebar(doc); // sets up the right sidebar collection for mobile upload documents and sharing + this.setupImportSidebar(doc); this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile this.setupMenuPanel(doc); this.setupSearchPanel(doc); diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store index 489c1666e..c6f3afa14 100644 Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f5dccd567..80957aebb 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -63,6 +63,9 @@ import { undoBatch } from '../util/UndoManager'; import { WebBox } from './nodes/WebBox'; import * as ReactDOM from 'react-dom'; import { SearchBox } from './search/SearchBox'; +import { SearchUtil } from '../util/SearchUtil'; +import { Networking } from '../Network'; +import * as rp from 'request-promise'; @observer export class MainView extends React.Component { @@ -545,6 +548,7 @@ export class MainView extends React.Component { case "Catalog": panelDoc = Doc.UserDoc()["sidebar-catalog"] as Doc ?? undefined; break; case "Archive": panelDoc = Doc.UserDoc()["sidebar-recentlyClosed"] as Doc ?? undefined; break; case "Settings": SettingsManager.Instance.open(); break; + case "Import": panelDoc = Doc.UserDoc()["sidebar-import"] as Doc ?? undefined; this.importDocument(); break; case "Sharing": panelDoc = Doc.UserDoc()["sidebar-sharing"] as Doc ?? undefined; break; case "UserDoc": panelDoc = Doc.UserDoc()["sidebar-userDoc"] as Doc ?? undefined; break; } @@ -559,6 +563,66 @@ export class MainView extends React.Component { return true; } + + importDocument = async () => { + const inputRef = React.createRef(); + const sidebar = Cast(Doc.UserDoc()["sidebar-import"], Doc) as Doc; + let process = ''; + let error = ''; + try { + const col = sidebar; + await Docs.Prototypes.initialize(); + const imgPrev = document.getElementById("img_preview"); + if (imgPrev) { + const files: FileList | null = inputRef.current!.files; + if (files && files.length !== 0) { + for (let index = 0; index < files.length; ++index) { + const file = files[index]; + const res = await Networking.UploadFilesToServer(file); + // For each item that the user has selected + res.map(async ({ result }) => { + const name = file.name; + if (result instanceof Error) { + return; + } + const path = Utils.prepend(result.accessPaths.agnostic.client); + let doc = null; + // Case 1: File is a video + if (file.type === "video/mp4") { + doc = Docs.Create.VideoDocument(path, { _nativeWidth: 400, _width: 400, title: name }); + // Case 2: File is a PDF document + } else if (file.type === "application/pdf") { + doc = Docs.Create.PdfDocument(path, { _nativeWidth: 400, _width: 400, _fitWidth: true, title: name }); + // Case 3: File is another document type (most likely Image) + } else { + doc = Docs.Create.ImageDocument(path, { _nativeWidth: 400, _width: 400, title: name }); + } + const res = await rp.get(Utils.prepend("/getUserDocumentId")); + if (!res) { + throw new Error("No user id returned"); + } + const field = await DocServer.GetRefField(res); + let pending: Opt; + if (field instanceof Doc) { + pending = col; + } + if (pending) { + const data = await Cast(pending.data, listSpec(Doc)); + if (data) data.push(doc); + else pending.data = new List([doc]); + } + }); + } + // Case in which the user pressed upload and no files were selected + } else { + process = "No file selected"; + } + } + } catch (error) { + error = JSON.stringify(error); + } + } + @action closeProperties = () => { CurrentUserUtils.propertiesWidth = 0; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 7e096fa37..9e78ad871 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -723,6 +723,7 @@ export class DockedFrameRenderer extends React.Component { pinDoc.presZoomButton = true; pinDoc.context = curPres; Doc.AddDocToList(curPres, "data", pinDoc); + if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true; if (!DocumentManager.Instance.getDocumentView(curPres)) { CollectionDockingView.AddRightSplit(curPres); } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 98ea8998d..3448d2683 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -15,7 +15,7 @@ import { ScriptField } from "../../../../fields/ScriptField"; import { BoolCast, Cast, FieldValue, NumCast, ScriptCast, StrCast } from "../../../../fields/Types"; import { TraceMobx } from "../../../../fields/util"; import { GestureUtils } from "../../../../pen-gestures/GestureUtils"; -import { aggregateBounds, intersectRect, returnFalse, returnOne, returnZero, Utils } from "../../../../Utils"; +import { aggregateBounds, intersectRect, returnFalse, returnOne, returnZero, Utils, setupMoveUpEvents } from "../../../../Utils"; import { CognitiveServices } from "../../../cognitive_services/CognitiveServices"; import { DocServer } from "../../../DocServer"; import { Docs, DocUtils } from "../../../documents/Documents"; @@ -1515,70 +1515,66 @@ class CollectionFreeFormViewPannableContents extends React.Component { - e.stopPropagation(); - e.preventDefault(); - this._isDragging = true; - document.removeEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointerup", this.onPointerUp); - } + // //Adds event listener so knows pointer is down and moving + // onPointerMid = (e: React.PointerEvent): void => { + // e.stopPropagation(); + // e.preventDefault(); + // this._isDragging = true; + // const dragData = new DragManager.DocumentDragData([]); + // console.log(DragManager.StartDocumentDrag([], dragData, e.clientX, e.clientY)); + // } //Adds event listener so knows pointer is down and moving - onPointerBR = (e: React.PointerEvent): void => { + onPointerDown = (e: React.PointerEvent): void => { e.stopPropagation(); e.preventDefault(); - this._isDraggingBR = true; - document.removeEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointerup", this.onPointerUp); + const corner = document.elementFromPoint(e.clientX, e.clientY)?.id; + if (corner) this._drag = corner; + const rect = document.getElementById('resizable'); + if (rect) { + console.log(this._drag); + setupMoveUpEvents(e.target, e, this.onPointerMove, (e) => { }, (e) => { }); + } } - //Adds event listener so knows pointer is down and moving - onPointerBL = (e: React.PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - this._isDraggingBL = true; - document.removeEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointerup", this.onPointerUp); - } + // //Adds event listener so knows pointer is down and moving + // onPointerBL = (e: React.PointerEvent): void => { + // e.stopPropagation(); + // e.preventDefault(); + // this._isDraggingBL = true; + // document.removeEventListener("pointermove", this.onPointerMove); + // document.addEventListener("pointermove", this.onPointerMove); + // document.removeEventListener("pointerup", this.onPointerUp); + // document.addEventListener("pointerup", this.onPointerUp); + // } - //Adds event listener so knows pointer is down and moving - onPointerTR = (e: React.PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - this._isDraggingTR = true; - document.removeEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointerup", this.onPointerUp); - } + // //Adds event listener so knows pointer is down and moving + // onPointerTR = (e: React.PointerEvent): void => { + // e.stopPropagation(); + // e.preventDefault(); + // this._isDraggingTR = true; + // document.removeEventListener("pointermove", this.onPointerMove); + // document.addEventListener("pointermove", this.onPointerMove); + // document.removeEventListener("pointerup", this.onPointerUp); + // document.addEventListener("pointerup", this.onPointerUp); + // } - //Adds event listener so knows pointer is down and moving - onPointerTL = (e: React.PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - this._isDraggingTL = true; - document.removeEventListener("pointermove", this.onPointerMove); - document.addEventListener("pointermove", this.onPointerMove); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointerup", this.onPointerUp); - } + // //Adds event listener so knows pointer is down and moving + // onPointerTL = (e: React.PointerEvent): void => { + // e.stopPropagation(); + // e.preventDefault(); + // this._isDraggingTL = true; + // document.removeEventListener("pointermove", this.onPointerMove); + // document.addEventListener("pointermove", this.onPointerMove); + // document.removeEventListener("pointerup", this.onPointerUp); + // document.addEventListener("pointerup", this.onPointerUp); + // } //Removes all event listeners onPointerUp = (e: PointerEvent): void => { e.stopPropagation(); e.preventDefault(); - this._isDraggingTL = false; - this._isDraggingTR = false; - this._isDraggingBL = false; - this._isDraggingBR = false; - this._isDragging = false; + this._drag = ""; document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); } @@ -1590,105 +1586,106 @@ class CollectionFreeFormViewPannableContents extends React.Component { + @action + onPointerMove = (e: PointerEvent) => { const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); - const tagDocView = DocumentManager.Instance.getDocumentView(targetDoc); - e.stopPropagation(); - e.preventDefault(); const doc = document.getElementById('resizable'); - if (doc && tagDocView) { - - const scale = this.props.zoomScaling(); - const scale2 = tagDocView.childScaling(); - const scale3 = tagDocView.props.ScreenToLocalTransform().Scale; - const scale1 = NumCast(targetDoc._viewScale); - // const scale = this.props.zoomScaling(); - console.log("_viewScale: " + scale1); - console.log("_StLT: " + scale3); - console.log("zoomScaling: " + scale); - console.log("movementX: " + e.movementX); - console.log("movementX * scale: " + e.movementX * scale); + const rect = (e.target as any).getBoundingClientRect(); + const toNumber = (screen_delta: number, wh: number): number => { + // console.log(screen_delta); + // console.log(wh); + return screen_delta + wh; + }; + if (doc) { let height = doc.offsetHeight; let width = doc.offsetWidth; let top = doc.offsetTop; let left = doc.offsetLeft; - // const newHeightB = height += (e.movementY * NumCast(targetDoc._viewScale)); - // const newHeightT = height -= (e.movementY * NumCast(targetDoc._viewScale)); - // const newWidthR = width += (e.movementX * NumCast(targetDoc._viewScale)); - // const newWidthL = width -= (e.movementX * NumCast(targetDoc._viewScale)); - // const newLeft = left += (e.movementX * NumCast(targetDoc._viewScale)); - // const newTop = top += (e.movementY * NumCast(targetDoc._viewScale)); - // switch (this._drag) { - // case "": break; - // case "resizer-br": - // doc.style.height = newHeightB + 'px'; - // doc.style.width = newWidthR + 'px'; - // break; - // case "resizer-bl": - // doc.style.height = newHeightB + 'px'; - // doc.style.width = newWidthL + 'px'; - // doc.style.left = newLeft + 'px'; - // break; - // case "resizer-tr": - // doc.style.width = newWidthR + 'px'; - // doc.style.height = newHeightT + 'px'; - // doc.style.top = newTop + 'px'; - // case "resizer-tl": - // doc.style.width = newWidthL + 'px'; - // doc.style.height = newHeightT + 'px'; - // doc.style.top = newTop + 'px'; - // doc.style.left = newLeft + 'px'; - // case "resizable": - // doc.style.top = newTop + 'px'; - // doc.style.left = newLeft + 'px'; - // } - //Bottom right - if (this._isDraggingBR) { - const newHeight = height += (e.movementY * scale); - doc.style.height = newHeight + 'px'; - const newWidth = width += (e.movementX * scale); - doc.style.width = newWidth + 'px'; - // Bottom left - } else if (this._isDraggingBL) { - const newHeight = height += (e.movementY * scale); - doc.style.height = newHeight + 'px'; - const newWidth = width -= (e.movementX * scale); - doc.style.width = newWidth + 'px'; - const newLeft = left += (e.movementX * scale); - doc.style.left = newLeft + 'px'; - // Top right - } else if (this._isDraggingTR) { - const newWidth = width += (e.movementX * scale); - doc.style.width = newWidth + 'px'; - const newHeight = height -= (e.movementY * scale); - doc.style.height = newHeight + 'px'; - const newTop = top += (e.movementY * scale); - doc.style.top = newTop + 'px'; - // Top left - } else if (this._isDraggingTL) { - const newWidth = width -= (e.movementX * scale); - doc.style.width = newWidth + 'px'; - const newHeight = height -= (e.movementY * scale); - doc.style.height = newHeight + 'px'; - const newTop = top += (e.movementY * scale); - doc.style.top = newTop + 'px'; - const newLeft = left += (e.movementX * scale); - doc.style.left = newLeft + 'px'; - } else if (this._isDragging) { - const newTop = top += (e.movementY * scale); - doc.style.top = newTop + 'px'; - const newLeft = left += (e.movementX * scale); - doc.style.left = newLeft + 'px'; + switch (this._drag) { + case "": break; + case "resizer-br": + doc.style.width = toNumber(e.clientX - rect.x, width) + 'px'; + doc.style.height = toNumber(e.clientY - rect.y, height) + 'px'; + break; + case "resizer-bl": + doc.style.width = toNumber(e.clientX - rect.x, width) + 'px'; + doc.style.height = toNumber(e.clientY - rect.y, height) + 'px'; + doc.style.left = toNumber(e.clientY - rect.y, height) + 'px'; + break; + case "resizer-tr": + doc.style.width = toNumber(e.clientX - rect.x, width) + 'px'; + doc.style.height = toNumber(e.clientY - rect.y, height) + 'px'; + doc.style.top = toNumber(e.clientY - rect.y, top) + 'px'; + case "resizer-tl": + doc.style.width = toNumber(e.clientX - rect.x, width) + 'px'; + doc.style.height = toNumber(e.clientY - rect.y, height) + 'px'; + doc.style.top = toNumber(e.clientY - rect.x, top) + 'px'; + doc.style.left = toNumber(e.clientX - rect.y, left) + 'px'; + case "resizable": + doc.style.top = toNumber(e.clientY - rect.x, top) + 'px'; + doc.style.left = toNumber(e.clientX - rect.y, left) + 'px'; } this.updateList(targetDoc, activeItem["viewfinder-width-indexed"], width); this.updateList(targetDoc, activeItem["viewfinder-height-indexed"], height); this.updateList(targetDoc, activeItem["viewfinder-top-indexed"], top); this.updateList(targetDoc, activeItem["viewfinder-left-indexed"], left); + return false; } + return true; + + + // const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null); + // const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + // const tagDocView = DocumentManager.Instance.getDocumentView(targetDoc); + // e.stopPropagation(); + // e.preventDefault(); + // if (doc && tagDocView) { + + // const scale = this.props.zoomScaling(); + // const scale2 = tagDocView.childScaling(); + // const scale3 = tagDocView.props.ScreenToLocalTransform().Scale; + // const scale1 = NumCast(targetDoc._viewScale); + // // const scale = this.props.zoomScaling(); + // console.log("_viewScale: " + scale1); + // console.log("_StLT: " + scale3); + // console.log("zoomScaling: " + scale); + // console.log("movementX: " + e.movementX); + // console.log("movementX * scale: " + e.movementX * scale); + // let height = doc.offsetHeight; + // let width = doc.offsetWidth; + // let top = doc.offsetTop; + // let left = doc.offsetLeft; + // switch (this._drag) { + // case "": break; + // case "resizer-br": + // doc.style.height = newHeightB + 'px'; + // doc.style.width = newWidthR + 'px'; + // break; + // case "resizer-bl": + // doc.style.height = newHeightB + 'px'; + // doc.style.width = newWidthL + 'px'; + // doc.style.left = newLeft + 'px'; + // break; + // case "resizer-tr": + // doc.style.width = newWidthR + 'px'; + // doc.style.height = newHeightT + 'px'; + // doc.style.top = newTop + 'px'; + // case "resizer-tl": + // doc.style.width = newWidthL + 'px'; + // doc.style.height = newHeightT + 'px'; + // doc.style.top = newTop + 'px'; + // doc.style.left = newLeft + 'px'; + // case "resizable": + // doc.style.top = newTop + 'px'; + // doc.style.left = newLeft + 'px'; + // } + + + // } } @action @@ -1697,7 +1694,7 @@ class CollectionFreeFormViewPannableContents extends React.Component= NumCast(doc.currentFrame) + 1) { x[NumCast(doc.currentFrame)] = val; list = x; - } else { + } else if (doc && x) { x.length = NumCast(doc.currentFrame) + 1; x[NumCast(doc.currentFrame)] = val; list = x; @@ -1709,18 +1706,18 @@ class CollectionFreeFormViewPannableContents extends React.Component - {!activeItem.editZoomProgressivize ? (null) :
+ {!activeItem.editZoomProgressivize ? (null) :
-
-
-
-
+
+
+
+
} diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index a87b0e466..5346efe0e 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -153,7 +153,6 @@ $light-background: #ececec; margin-left: 5px; margin-top: 5px; margin-bottom: 5px; - margin-right: 5px; width: max-content; justify-content: center; align-items: center; @@ -161,6 +160,29 @@ $light-background: #ececec; padding-left: 10px; } + .ribbon-propertyUpDown { + height: 20; + width: 20; + margin-top: 5px; + display: grid; + grid-template-rows: 10px 10px; + + .ribbon-propertyUpDownItem { + color: white; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + background: black; + } + + .ribbon-propertyUpDownItem:hover { + background: darkgrey; + transform: scale(1.05); + } + } + .presBox-subheading { font-size: 11; font-weight: 400; @@ -254,6 +276,18 @@ $light-background: #ececec; width: 100%; } + .presBox-input { + width: 30; + height: 100%; + background: none; + border: none; + text-align: right; + } + + .presBox-input:focus { + outline: none; + } + .ribbon-frameSelector { border: black solid 1px; width: 60px; @@ -399,11 +433,9 @@ $light-background: #ececec; grid-template-rows: max-content auto; justify-self: center; margin-top: 10px; - /* padding-left: 10px; */ padding-right: 10px; letter-spacing: normal; width: 100%; - /* max-width: 100%; */ height: max-content; font-weight: 500; position: relative; @@ -412,9 +444,33 @@ $light-background: #ececec; border-bottom: solid 1px darkgrey; .presBox-dropdown:hover { - border: solid 1px #378AD8; - border-bottom-left-radius: 0px; + border: solid 1px $dark-blue; + + .presBox-dropdownIcon { + color: $dark-blue; + } + } + + .presBox-dropdown { + display: grid; + grid-template-columns: auto 20%; + position: relative; + border: solid 1px black; + background-color: $light-background; + border-radius: 5px; + font-size: 10; + height: 25; + padding-left: 5px; + align-items: center; + margin-top: 5px; + margin-bottom: 5px; + font-weight: 200; + width: 100%; + min-width: max-content; + max-width: 200px; + overflow: visible; + .presBox-dropdownOption { font-size: 11; display: block; @@ -431,7 +487,7 @@ $light-background: #ececec; .presBox-dropdownOption.active { position: relative; - background-color: #aedef8; + background-color: $light-blue; } .presBox-dropdownOptions { @@ -448,34 +504,6 @@ $light-background: #ececec; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } - .presBox-dropdownIcon { - color: #378AD8; - } - } - - .presBox-dropdown { - display: grid; - grid-template-columns: auto 20%; - position: relative; - border: solid 1px black; - background-color: $light-background; - border-radius: 5px; - font-size: 10; - height: 25; - padding-left: 5px; - align-items: center; - margin-top: 5px; - margin-bottom: 5px; - font-weight: 200; - width: 100%; - min-width: max-content; - max-width: 200px; - overflow: visible; - - .presBox-dropdownOptions { - display: none; - } - .presBox-dropdownIcon { position: relative; color: black; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index ff2be6b4e..3083bc6ec 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -55,6 +55,8 @@ export class PresBox extends ViewBoxBaseComponent @observable private presentTools: boolean = false; @observable private pathBoolean: boolean = false; @observable private expandBoolean: boolean = false; + @observable private openMovementDropdown: boolean = false; + @observable private openEffectDropdown: boolean = false; @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); } @computed get itemIndex() { return NumCast(this.rootDoc._itemIndex); } @@ -101,6 +103,11 @@ export class PresBox extends ViewBoxBaseComponent this.layoutDoc._gridGap = 5; } + onComponentUnmount() { + document.removeEventListener("keydown", this.keyEvents, true); + console.log("when does this happen?"); + } + updateCurrentPresentation = () => { Doc.UserDoc().activePresentation = this.rootDoc; } @@ -351,7 +358,13 @@ export class PresBox extends ViewBoxBaseComponent } @action togglePath = () => this.pathBoolean = !this.pathBoolean; - @action toggleExpand = () => this.expandBoolean = !this.expandBoolean; + @action toggleExpandMode = () => { + this.rootDoc.expandBoolean = !this.rootDoc.expandBoolean; + this.childDocs.forEach((doc) => { + if (this.rootDoc.expandBoolean) doc.presExpandInlineButton = true; + else if (!this.rootDoc.expandBoolean) doc.presExpandInlineButton = false; + }); + }; /** * The function that starts the presentation at the given index, also checking if actions should be applied @@ -448,6 +461,7 @@ export class PresBox extends ViewBoxBaseComponent } else { doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf); !this.childDocs.includes(doc) && (doc.presZoomButton = true); + if (this.rootDoc.expandBoolean) doc.presExpandInlineButton = true; } }); return true; @@ -656,16 +670,22 @@ export class PresBox extends ViewBoxBaseComponent } // Converts seconds to ms and updates presTransition - setTransitionTime = (number: String) => { - const timeInMS = Number(number) * 1000; + setTransitionTime = (number: String, change?: number) => { + let timeInMS = Number(number) * 1000; + if (change) timeInMS += change; + if (timeInMS < 0) timeInMS = 100; + if (timeInMS > 10000) timeInMS = 10000; const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); if (targetDoc) targetDoc.presTransition = timeInMS; } // Converts seconds to ms and updates presDuration - setDurationTime = (number: String) => { - const timeInMS = Number(number) * 1000; + setDurationTime = (number: String, change?: number) => { + let timeInMS = Number(number) * 1000; + if (change) timeInMS += change; + if (timeInMS < 0) timeInMS = 100; + if (timeInMS > 20000) timeInMS = 20000; const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); if (targetDoc) targetDoc.presDuration = timeInMS; @@ -676,19 +696,19 @@ export class PresBox extends ViewBoxBaseComponent const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); if (activeItem && targetDoc) { - const transitionSpeed = targetDoc.presTransition ? String(Number(targetDoc.presTransition) / 1000) : 0.5; + let transitionSpeed = targetDoc.presTransition ? String(Number(targetDoc.presTransition) / 1000) : 0.5; let duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2; if (targetDoc.type === DocumentType.AUDIO) duration = NumCast(targetDoc.duration); const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom'; return ( -
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> +
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this.openMovementDropdown = false; this.openEffectDropdown = false; })}>
Movement -
e.stopPropagation()}> +
{ e.stopPropagation(); this.openMovementDropdown = !this.openMovementDropdown })} style={{ borderBottomLeftRadius: this.openMovementDropdown ? 0 : 5 }}> {activeItem.presMovement} -
e.stopPropagation()}> +
e.stopPropagation()} style={{ display: this.openMovementDropdown ? "grid" : "none" }}>
e.stopPropagation()} onClick={() => this.movementChanged('none')}>None
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom
e.stopPropagation()} onClick={() => this.movementChanged('pan')}>Pan
@@ -696,8 +716,21 @@ export class PresBox extends ViewBoxBaseComponent
-
Transition Speed
-
{transitionSpeed} s
+
Transition Speed
+
+ { document.removeEventListener("keydown", this.keyEvents, true); }} + onChange={action((e: React.ChangeEvent) => { if (Number(e.target.value) >= 0 && Number(e.target.value) <= 10 && !isNaN(Number(e.target.value)) || e.target.value === '') this.setTransitionTime(e.target.value) })} /> s +
+
+
this.setTransitionTime(String(duration), 1000)}> + +
+
this.setTransitionTime(String(duration), -1000)}> + +
+
) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} />
@@ -714,9 +747,22 @@ export class PresBox extends ViewBoxBaseComponent
Slide Duration
-
{duration} s
+
+ { document.removeEventListener("keydown", this.keyEvents, true); }} + onChange={action((e: React.ChangeEvent) => { if (Number(e.target.value) >= 0 && Number(e.target.value) <= 20 && !isNaN(Number(e.target.value)) || e.target.value === '') this.setDurationTime(e.target.value) })} /> s +
+
+
this.setDurationTime(String(duration), 1000)}> + +
+
this.setDurationTime(String(duration), -1000)}> + +
+
- ) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} /> + ) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} />
Short
Medium
@@ -725,12 +771,10 @@ export class PresBox extends ViewBoxBaseComponent
Effects -
e.stopPropagation()} - > +
{ e.stopPropagation(); this.openEffectDropdown = !this.openEffectDropdown })} style={{ borderBottomLeftRadius: this.openMovementDropdown ? 0 : 5 }}> {effect} -
e.stopPropagation()}> +
e.stopPropagation()}>
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'None'}>None
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Fade'}>Fade In
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Flip'}>Flip
@@ -761,7 +805,7 @@ export class PresBox extends ViewBoxBaseComponent Apply to all
-
+
); } } @@ -793,9 +837,6 @@ export class PresBox extends ViewBoxBaseComponent } }); } - - private inputRef = React.createRef(); - @computed get optionsDropdown() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); @@ -871,13 +912,18 @@ export class PresBox extends ViewBoxBaseComponent @computed get newDocumentDropdown() { return (
-
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> +
e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
Slide Title:

- { - e.stopPropagation(); - runInAction(() => this.title = e.target.value); - }}> + { + document.removeEventListener("keydown", this.keyEvents, true); + }} + onChange={(e) => { + e.stopPropagation(); + e.preventDefault(); + runInAction(() => this.title = e.target.value); + }}>
Choose type: @@ -1298,16 +1344,15 @@ export class PresBox extends ViewBoxBaseComponent } @action - checkList = (doc: Doc, list: any): number => { + checkList = (doc: Doc, list: any) => { const x: List = list; if (x && x.length >= NumCast(doc.currentFrame) + 1) { return x[NumCast(doc.currentFrame)]; - } else if (doc) { + } else if (doc && x) { x.length = NumCast(doc.currentFrame) + 1; x[NumCast(doc.currentFrame)] = x[NumCast(doc.currentFrame) - 1]; return x[NumCast(doc.currentFrame)]; } - } @computed get progressivizeChildDocs() { @@ -1404,8 +1449,8 @@ export class PresBox extends ViewBoxBaseComponent
-
{this.expandBoolean ? "Minimize all" : "Expand all"}
}> -
0 ? 1 : 0.3 }} className={`toolbar-button ${this.expandBoolean ? "active" : ""}`} onClick={() => { if (this.childDocs.length > 0) this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}> +
{this.rootDoc.expandBoolean ? "Minimize all" : "Expand all"}
}> +
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index a6dbb76ef..42b43b402 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -233,13 +233,23 @@ export class PresElementBox extends ViewBoxBaseComponent = React.createRef(); private _dragRef: React.RefObject = React.createRef(); + @action headerDown = (e: React.PointerEvent) => { - const element = document.elementFromPoint(e.clientX, e.clientY)?.parentElement; + const element1 = document.elementFromPoint(e.clientX, e.clientY)?.parentElement; + const element = e.target as any; e.stopPropagation(); e.preventDefault(); if (element) { if (PresBox.Instance._eleArray.includes(element)) { setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); + } else { + PresBox.Instance._selectedArray = []; + PresBox.Instance._selectedArray.push(this.rootDoc); + PresBox.Instance._eleArray = []; + PresBox.Instance._eleArray.push(this._itemRef.current!); + PresBox.Instance._dragArray = []; + PresBox.Instance._dragArray.push(this._dragRef.current!); + setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); } } } -- cgit v1.2.3-70-g09d2 From 55460c79ddc12b44907979053058e04987f7e4c0 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Thu, 13 Aug 2020 08:38:45 +0800 Subject: bug fixes, small UI changes, import in left sidebar --- src/client/util/CurrentUserUtils.ts | 11 +- src/client/views/MainView.tsx | 142 ++++---- .../views/collections/CollectionDockingView.tsx | 1 + src/client/views/collections/CollectionMenu.tsx | 6 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 188 ++--------- .../collectionFreeForm/PropertiesView.tsx | 8 +- src/client/views/nodes/AudioBox.tsx | 1 + .../views/nodes/CollectionFreeFormDocumentView.tsx | 8 +- src/client/views/nodes/PresBox.scss | 32 +- src/client/views/nodes/PresBox.tsx | 369 +++++++++++++-------- .../views/presentationview/PresElementBox.scss | 4 + .../views/presentationview/PresElementBox.tsx | 135 +------- src/server/ApiManagers/UploadManager.ts | 2 +- 13 files changed, 416 insertions(+), 491 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 6681b4260..c4702cafa 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -457,6 +457,8 @@ export class CurrentUserUtils { } + + // setup the "creator" buttons for the sidebar-- eg. the default set of draggable document creation tools static async setupCreatorButtons(doc: Doc) { let alreadyCreatedButtons: string[] = []; @@ -847,8 +849,13 @@ export class CurrentUserUtils { // Import sidebar is where shared documents are contained static setupImportSidebar(doc: Doc) { + if (doc["sidebar-import-documents"] === undefined) { + doc["sidebar-import-documents"] = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Imported Documents", _showTitle: "title", _height: 300, _yMargin: 30, childDropAction: "alias" })); + } if (doc["sidebar-import"] === undefined) { - doc["sidebar-import"] = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Imported Documents", childDropAction: "alias" })); + const uploads = Cast(doc["sidebar-import-documents"], Doc, null) as Doc; + const newUpload = CurrentUserUtils.ficon({ onClick: ScriptField.MakeScript("importDocument()"), toolTip: "Import external document", _backgroundColor: "black", title: "Import", icon: "upload", system: true }); + doc["sidebar-import"] = new PrefetchProxy(Docs.Create.StackingDocument([newUpload, uploads], { title: "Imported Documents", _yMargin: 30, childDropAction: "alias" })); } } @@ -975,4 +982,4 @@ Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.cre Scripting.addGlobal(function links(doc: any) { return new List(LinkManager.Instance.getAllRelatedLinks(doc)); }, "returns all the links to the document or its annotations", "(doc: any)"); Scripting.addGlobal(function directLinks(doc: any) { return new List(LinkManager.Instance.getAllDirectLinks(doc)); }, - "returns all the links directly to the document", "(doc: any)"); \ No newline at end of file + "returns all the links directly to the document", "(doc: any)"); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f13acd9a7..43afb17bf 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -66,6 +66,7 @@ import { SearchBox } from './search/SearchBox'; import { SearchUtil } from '../util/SearchUtil'; import { Networking } from '../Network'; import * as rp from 'request-promise'; +import { LinkManager } from '../util/LinkManager'; @observer export class MainView extends React.Component { @@ -548,7 +549,7 @@ export class MainView extends React.Component { case "Catalog": panelDoc = Doc.UserDoc()["sidebar-catalog"] as Doc ?? undefined; break; case "Archive": panelDoc = Doc.UserDoc()["sidebar-recentlyClosed"] as Doc ?? undefined; break; case "Settings": SettingsManager.Instance.open(); break; - case "Import": panelDoc = Doc.UserDoc()["sidebar-import"] as Doc ?? undefined; this.importDocument(); break; + case "Import": panelDoc = Doc.UserDoc()["sidebar-import"] as Doc ?? undefined; break; case "Sharing": panelDoc = Doc.UserDoc()["sidebar-sharing"] as Doc ?? undefined; break; case "UserDoc": panelDoc = Doc.UserDoc()["sidebar-userDoc"] as Doc ?? undefined; break; } @@ -563,66 +564,6 @@ export class MainView extends React.Component { return true; } - - importDocument = async () => { - const inputRef = React.createRef(); - const sidebar = Cast(Doc.UserDoc()["sidebar-import"], Doc) as Doc; - let process = ''; - let error = ''; - try { - const col = sidebar; - await Docs.Prototypes.initialize(); - const imgPrev = document.getElementById("img_preview"); - if (imgPrev) { - const files: FileList | null = inputRef.current!.files; - if (files && files.length !== 0) { - for (let index = 0; index < files.length; ++index) { - const file = files[index]; - const res = await Networking.UploadFilesToServer(file); - // For each item that the user has selected - res.map(async ({ result }) => { - const name = file.name; - if (result instanceof Error) { - return; - } - const path = Utils.prepend(result.accessPaths.agnostic.client); - let doc = null; - // Case 1: File is a video - if (file.type === "video/mp4") { - doc = Docs.Create.VideoDocument(path, { _nativeWidth: 400, _width: 400, title: name }); - // Case 2: File is a PDF document - } else if (file.type === "application/pdf") { - doc = Docs.Create.PdfDocument(path, { _nativeWidth: 400, _width: 400, _fitWidth: true, title: name }); - // Case 3: File is another document type (most likely Image) - } else { - doc = Docs.Create.ImageDocument(path, { _nativeWidth: 400, _width: 400, title: name }); - } - const res = await rp.get(Utils.prepend("/getUserDocumentId")); - if (!res) { - throw new Error("No user id returned"); - } - const field = await DocServer.GetRefField(res); - let pending: Opt; - if (field instanceof Doc) { - pending = col; - } - if (pending) { - const data = await Cast(pending.data, listSpec(Doc)); - if (data) data.push(doc); - else pending.data = new List([doc]); - } - }); - } - // Case in which the user pressed upload and no files were selected - } else { - process = "No file selected"; - } - } - } catch (error) { - error = JSON.stringify(error); - } - } - @action closeProperties = () => { CurrentUserUtils.propertiesWidth = 0; @@ -959,6 +900,81 @@ export class MainView extends React.Component { document.addEventListener("editSuccess", onSuccess); }); } + + importDocument = () => { + const sidebar = Cast(Doc.UserDoc()["sidebar-import-documents"], Doc, null) as Doc; + const sidebarDocView = DocumentManager.Instance.getDocumentView(sidebar); + const input = document.createElement("input"); + input.type = "file"; + input.accept = ".zip, application/pdf, video/*, image/*, audio/*"; + input.onchange = async _e => { + const upload = Utils.prepend("/uploadDoc"); + const formData = new FormData(); + const file = input.files && input.files[0]; + if (file && file.type === 'application/zip') { + formData.append('file', file); + formData.append('remap', "true"); + const response = await fetch(upload, { method: "POST", body: formData }); + const json = await response.json(); + if (json !== "error") { + const doc = await DocServer.GetRefField(json); + if (doc instanceof Doc && sidebarDocView) { + sidebarDocView.props.addDocument?.(doc); + setTimeout(() => { + SearchUtil.Search(`{!join from=id to=proto_i}id:link*`, true, {}).then(docs => { + docs.docs.forEach(d => LinkManager.Instance.addLink(d)); + }); + }, 2000); // need to give solr some time to update so that this query will find any link docs we've added. + + } + } + } else if (input.files && input.files.length !== 0) { + const files: FileList | null = input.files; + for (let i = 0; i < files.length; i++) { + const file = files[i]; + const res = await Networking.UploadFilesToServer(file); + res.map(async ({ result }) => { + const name = file.name; + if (result instanceof Error) { + return; + } + const path = Utils.prepend(result.accessPaths.agnostic.client); + let doc: Doc; + // Case 1: File is a video + if (file.type.includes("video")) { + doc = Docs.Create.VideoDocument(path, { _height: 100, title: name }); + // Case 2: File is a PDF document + } else if (file.type === "application/pdf") { + doc = Docs.Create.PdfDocument(path, { _height: 100, _fitWidth: true, title: name }); + // Case 3: File is an image + } else if (file.type.includes("image")) { + doc = Docs.Create.ImageDocument(path, { _height: 100, title: name }); + // Case 4: File is an audio document + } else { + doc = Docs.Create.AudioDocument(path, { title: name }); + } + const res = await rp.get(Utils.prepend("/getUserDocumentId")); + if (!res) { + throw new Error("No user id returned"); + } + const field = await DocServer.GetRefField(res); + let pending: Opt; + if (field instanceof Doc) { + pending = sidebar; + } + if (pending) { + const data = await Cast(pending.data, listSpec(Doc)); + if (data) data.push(doc); + else pending.data = new List([doc]); + } + }); + } + } else { + console.log("No file selected"); + } + }; + input.click(); + } } Scripting.addGlobal(function freezeSidebar() { MainView.expandFlyout(); }); Scripting.addGlobal(function toggleComicMode() { Doc.UserDoc().fontFamily = "Comic Sans MS"; Doc.UserDoc().renderStyle = Doc.UserDoc().renderStyle === "comic" ? undefined : "comic"; }); @@ -968,4 +984,6 @@ Scripting.addGlobal(function copyWorkspace() { Doc.AddDocToList(workspaces, "data", copiedWorkspace); // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) setTimeout(() => MainView.Instance.openWorkspace(copiedWorkspace), 0); -}); \ No newline at end of file +}); +Scripting.addGlobal(function importDocument() { return MainView.Instance.importDocument(); }, + "imports files from device directly into the import sidebar"); diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 754d9257a..998e41bd2 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -731,6 +731,7 @@ export class DockedFrameRenderer extends React.Component { if (!DocumentManager.Instance.getDocumentView(curPres)) { CollectionDockingView.AddRightSplit(curPres); } + DocumentManager.Instance.jumpToDocument(doc, false, undefined, Cast(doc.context, Doc, null)); } } } diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 0377944b7..33617c7ba 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -622,7 +622,7 @@ export class CollectionFreeFormViewChrome extends React.Component : null} {!this.isText && !this.props.isDoc ? Toggle View All
} placement="bottom"> -
this.document.editing = !this.document.editing)} > {NumCast(this.document.currentFrame)}
@@ -735,8 +735,10 @@ export class CollectionStackingViewChrome extends React.Component { this._currentKey = this.pivotField; }; render() { + const doctype = this.props.docView.Document.type; + const isPres: boolean = (doctype === DocumentType.PRES); return ( -
+ isPres ? (null) :
GROUP BY: diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 162713c3b..b15bda87d 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1496,82 +1496,22 @@ interface CollectionFreeFormViewPannableContentsProps { @observer class CollectionFreeFormViewPannableContents extends React.Component{ - private _isDraggingTL = false; - private _isDraggingTR = false; - private _isDraggingBR = false; - private _isDraggingBL = false; - private _isDragging = false; - // private _drag = ""; - - // onPointerDown = (e: React.PointerEvent): void => { - // e.stopPropagation(); - // e.preventDefault(); - // if (e.button === 0) { - // this._drag = e.currentTarget.id; - // console.log(this._drag); - // } - // document.removeEventListener("pointermove", this.onPointerMove); - // document.addEventListener("pointermove", this.onPointerMove); - // document.removeEventListener("pointerup", this.onPointerUp); - // document.addEventListener("pointerup", this.onPointerUp); - // } - - - // //Adds event listener so knows pointer is down and moving - // onPointerMid = (e: React.PointerEvent): void => { - // e.stopPropagation(); - // e.preventDefault(); - // this._isDragging = true; - // const dragData = new DragManager.DocumentDragData([]); - // console.log(DragManager.StartDocumentDrag([], dragData, e.clientX, e.clientY)); - // } + @observable private _drag: string = ''; //Adds event listener so knows pointer is down and moving onPointerDown = (e: React.PointerEvent): void => { e.stopPropagation(); e.preventDefault(); - const corner = document.elementFromPoint(e.clientX, e.clientY)?.id; - if (corner) this._drag = corner; - const rect = document.getElementById('resizable'); + const corner = e.target as any; + console.log(corner.id); + if (corner) this._drag = corner.id; + const rect = document.getElementById(this._drag); if (rect) { console.log(this._drag); setupMoveUpEvents(e.target, e, this.onPointerMove, (e) => { }, (e) => { }); } } - // //Adds event listener so knows pointer is down and moving - // onPointerBL = (e: React.PointerEvent): void => { - // e.stopPropagation(); - // e.preventDefault(); - // this._isDraggingBL = true; - // document.removeEventListener("pointermove", this.onPointerMove); - // document.addEventListener("pointermove", this.onPointerMove); - // document.removeEventListener("pointerup", this.onPointerUp); - // document.addEventListener("pointerup", this.onPointerUp); - // } - - // //Adds event listener so knows pointer is down and moving - // onPointerTR = (e: React.PointerEvent): void => { - // e.stopPropagation(); - // e.preventDefault(); - // this._isDraggingTR = true; - // document.removeEventListener("pointermove", this.onPointerMove); - // document.addEventListener("pointermove", this.onPointerMove); - // document.removeEventListener("pointerup", this.onPointerUp); - // document.addEventListener("pointerup", this.onPointerUp); - // } - - // //Adds event listener so knows pointer is down and moving - // onPointerTL = (e: React.PointerEvent): void => { - // e.stopPropagation(); - // e.preventDefault(); - // this._isDraggingTL = true; - // document.removeEventListener("pointermove", this.onPointerMove); - // document.addEventListener("pointermove", this.onPointerMove); - // document.removeEventListener("pointerup", this.onPointerUp); - // document.addEventListener("pointerup", this.onPointerUp); - // } - //Removes all event listeners onPointerUp = (e: PointerEvent): void => { e.stopPropagation(); @@ -1581,26 +1521,13 @@ class CollectionFreeFormViewPannableContents extends React.Component { - // const scale = this.props.getLocalTransform().inverse().Scale; - // const newPanX = Math.min((1 - 1 / scale) * this.props.nativeWidth, Math.max(0, moveX)); - // const newPanY = Math.min((1 - 1 / scale) * this.nativeHeight), Math.max(0, panY)); - // } - - @observable private _drag: string = ''; - //Adjusts the value in NodeStore @action onPointerMove = (e: PointerEvent) => { - const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null); - const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); const doc = document.getElementById('resizable'); - const rect = (e.target as any).getBoundingClientRect(); - const toNumber = (screen_delta: number, wh: number): number => { - // console.log(screen_delta); - // console.log(wh); - return screen_delta + wh; + const rect = doc!.getBoundingClientRect(); + const toNumber = (original: number, delta: number): number => { + return original + (delta * this.props.zoomScaling()); }; if (doc) { let height = doc.offsetHeight; @@ -1610,84 +1537,41 @@ class CollectionFreeFormViewPannableContents extends React.Component { + const activeItem = Cast(PresBox.Instance.childDocs[PresBox.Instance.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + this.updateList(targetDoc, activeItem["viewfinder-width-indexed"], width); + this.updateList(targetDoc, activeItem["viewfinder-height-indexed"], height); + this.updateList(targetDoc, activeItem["viewfinder-top-indexed"], top); + this.updateList(targetDoc, activeItem["viewfinder-left-indexed"], left); } @action @@ -1708,10 +1592,10 @@ class CollectionFreeFormViewPannableContents extends React.Component {!activeItem.editZoomProgressivize ? (null) :
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index c7edd67b3..a945ae2ba 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -963,8 +963,8 @@ export class PropertiesView extends React.Component { } if (this.isPres) { const selectedItem: boolean = PresBox.Instance?._selectedArray.length > 0; - return
-
+ return
+
Presentation
@@ -1028,7 +1028,7 @@ export class PropertiesView extends React.Component { {PresBox.Instance.newDocumentDropdown}
: null}
-
+ {/*
runInAction(() => { this.openSharing = !this.openSharing; })} style={{ backgroundColor: this.openSharing ? "black" : "" }}> @@ -1040,7 +1040,7 @@ export class PropertiesView extends React.Component { {this.openSharing ?
{this.sharingTable}
: null} -
+
*/}
; } } diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 900963eb0..011b6ff87 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -510,6 +510,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent AudioBox.LabelScript; render() { + AudioBox.Instance = this; const interactive = SnappingManager.GetIsDragging() || this.active() ? "-interactive" : ""; this._first = true; // for indicating the first marker that is rendered this.path && this._buckets.length !== 100 ? this.peaks : null; // render waveform if audio is done recording diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index d11a10df8..52f6a66c8 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -132,7 +132,7 @@ export class CollectionFreeFormDocumentView extends DocComponent { const xindexed = Cast(doc['x-indexed'], listSpec("number"), null); @@ -145,11 +145,11 @@ export class CollectionFreeFormDocumentView extends DocComponent; const PresBoxDocument = makeInterface(documentSchema); @@ -63,7 +64,7 @@ export class PresBox extends ViewBoxBaseComponent @computed get presElement() { return Cast(Doc.UserDoc().presElement, Doc, null); } constructor(props: any) { super(props); - PresBox.Instance = this; + if (Doc.UserDoc().activePresentation = this.rootDoc) PresBox.Instance = this; if (!this.presElement) { // create exactly one presElmentBox template to use by any and all presentations. Doc.UserDoc().presElement = new PrefetchProxy(Docs.Create.PresElementBoxDocument({ title: "pres element template", backgroundColor: "transparent", _xMargin: 0, isTemplateDoc: true, isTemplateForField: "data" @@ -95,8 +96,10 @@ export class PresBox extends ViewBoxBaseComponent } } @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } + componentWillUnmount() { document.removeEventListener("keydown", this.keyEvents, true); + this.turnOffEdit(); } componentDidMount() { @@ -107,13 +110,9 @@ export class PresBox extends ViewBoxBaseComponent this.layoutDoc._gridGap = 5; } - onComponentUnmount() { - document.removeEventListener("keydown", this.keyEvents, true); - console.log("when does this happen?"); - } - updateCurrentPresentation = () => { Doc.UserDoc().activePresentation = this.rootDoc; + PresBox.Instance = this; } /** @@ -138,7 +137,8 @@ export class PresBox extends ViewBoxBaseComponent setTimeout(() => presTargetDoc._viewTransition = undefined, 1010); presTargetDoc.currentFrame = curFrame + 1; if (presTargetDoc.scrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(presTargetDoc, currentFrame); - if (presTargetDoc.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); + if (presTargetDoc.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, presTargetDoc); + else presTargetDoc.editing = true; if (activeItem.zoomProgressivize) this.zoomProgressivizeNext(presTargetDoc); // Case 2: Audio or video therefore wait to play the audio or video before moving on } else if ((presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio && this.layoutDoc.presStatus !== 'auto') { @@ -164,10 +164,18 @@ export class PresBox extends ViewBoxBaseComponent back = () => { this.updateCurrentPresentation(); const docAtCurrent = this.childDocs[this.itemIndex]; - if (docAtCurrent) { + const targetDoc = Cast(docAtCurrent.presentationTargetDoc, Doc, null); + const prevItem = Cast(this.childDocs[Math.max(0, this.itemIndex - 1)], Doc, null); + const prevTargetDoc = Cast(prevItem.presentationTargetDoc, Doc, null); + const lastFrame = Cast(targetDoc.lastFrame, "number", null); + const curFrame = NumCast(targetDoc.currentFrame); + if (lastFrame !== undefined && curFrame >= 1) { + this.prevKeyframe(targetDoc, docAtCurrent); + } else if (docAtCurrent) { let prevSelected = this.itemIndex; prevSelected = Math.max(0, prevSelected - 1); this.gotoDocument(prevSelected, this.itemIndex); + if (NumCast(prevTargetDoc.lastFrame) > 0) prevTargetDoc.currentFrame = NumCast(prevTargetDoc.lastFrame) } } @@ -261,12 +269,12 @@ export class PresBox extends ViewBoxBaseComponent */ zoomProgressivizeNext = (activeItem: Doc) => { const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - const srcContext = Cast(targetDoc.context, Doc, null); + const srcContext = Cast(targetDoc?.context, Doc, null); const docView = DocumentManager.Instance.getDocumentView(targetDoc); - const vfLeft: number = !activeItem ? 0 : this.checkList(targetDoc, activeItem["viewfinder-left-indexed"]); - const vfWidth: number = !activeItem ? 0 : this.checkList(targetDoc, activeItem["viewfinder-width-indexed"]); - const vfTop: number = !activeItem ? 0 : this.checkList(targetDoc, activeItem["viewfinder-top-indexed"]); - const vfHeight: number = !activeItem ? 0 : this.checkList(targetDoc, activeItem["viewfinder-height-indexed"]); + const vfLeft = this.checkList(targetDoc, activeItem["viewfinder-left-indexed"]); + const vfWidth = this.checkList(targetDoc, activeItem["viewfinder-width-indexed"]); + const vfTop = this.checkList(targetDoc, activeItem["viewfinder-top-indexed"]); + const vfHeight = this.checkList(targetDoc, activeItem["viewfinder-height-indexed"]); // Case 1: document that is not a Golden Layout tab if (srcContext) { const srcDocView = DocumentManager.Instance.getDocumentView(srcContext); @@ -309,7 +317,7 @@ export class PresBox extends ViewBoxBaseComponent onHideDocument = () => { this.childDocs.forEach((doc, index) => { const curDoc = Cast(doc, Doc, null); - const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); + const tagDoc = Cast(curDoc.presentationTargetDoc!, Doc, null); if (tagDoc) tagDoc.opacity = 1; if (curDoc.presHideTillShownButton) { if (index > this.itemIndex) { @@ -329,33 +337,48 @@ export class PresBox extends ViewBoxBaseComponent } + //The function that starts or resets presentaton functionally, depending on presStatus of the layoutDoc @undoBatch @action startAutoPres = (startSlide: number) => { this.updateCurrentPresentation(); - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + let activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + let targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + let duration = NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition); + const timer = (ms: number) => { + return new Promise(res => this._presTimer = setTimeout(res, ms)); + } + const load = async () => { // Wrap the loop into an async function for this to work + for (var i = startSlide; i < this.childDocs.length; i++) { + activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + if (targetDoc.presDuration && targetDoc.presTransition) { + duration = NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition); + } else duration = 2500; + if (NumCast(targetDoc.lastFrame) > 0) { + for (var f = 0; f < NumCast(targetDoc.lastFrame); f++) { + await timer(duration / NumCast(targetDoc.lastFrame)); + this.next(); + } + } + await timer(duration); this.next(); // then the created Promise can be awaited + if (i === this.childDocs.length - 1) setTimeout(() => { clearTimeout(this._presTimer); if (this.layoutDoc.presStatus === 'auto') this.layoutDoc.presStatus = "manual"; }, duration); + } + } if (this.layoutDoc.presStatus === "auto") { - if (this._presTimer) clearInterval(this._presTimer); + if (this._presTimer) clearTimeout(this._presTimer); this.layoutDoc.presStatus = "manual"; } else { this.layoutDoc.presStatus = "auto"; this.startPresentation(startSlide); this.gotoDocument(startSlide, this.itemIndex); - this._presTimer = setInterval(() => { - if (this.itemIndex + 1 < this.childDocs.length) this.next(); - else { - clearInterval(this._presTimer); - this.layoutDoc.presStatus = "manual"; - } - }, targetDoc.presDuration ? NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition) : 2000); + load(); } } //The function that resets the presentation by removing every action done by it. It also //stops the presentaton. - // TODO: Ensure resetPresentation is called when the presentation is closed resetPresentation = () => { this.updateCurrentPresentation(); this.rootDoc._itemIndex = 0; @@ -505,20 +528,28 @@ export class PresBox extends ViewBoxBaseComponent return list; } + @action + selectPres = () => { + const presDocView = DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc)!; + SelectionManager.SelectDoc(presDocView, false); + } + //Regular click @action selectElement = (doc: Doc) => { this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex)); + this.selectPres(); } //Command click @action multiSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement) => { if (!this._selectedArray.includes(doc)) { - this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); + this._selectedArray.push(doc); this._eleArray.push(ref); this._dragArray.push(drag); } + this.selectPres(); } //Shift click @@ -533,17 +564,18 @@ export class PresBox extends ViewBoxBaseComponent this._dragArray.push(drag); } } + this.selectPres(); } - // Key for when the presentaiton is active (according to Selection Manager) + // Key for when the presentaiton is active @action keyEvents = (e: KeyboardEvent) => { let handled = false; const anchorNode = document.activeElement as HTMLDivElement; if (anchorNode && anchorNode.className?.includes("lm_title")) return; if (e.keyCode === 27) { // Escape key - if (this.layoutDoc.presStatus === "edit") this._selectedArray = []; - else this.layoutDoc.presStatus = "edit"; + if (this.layoutDoc.presStatus === "edit") { this._selectedArray = []; this._eleArray = []; this._dragArray = []; } + else this.layoutDoc.presStatus = "edit"; if (this._presTimer) clearTimeout(this._presTimer); handled = true; } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all if (this.layoutDoc.presStatus === "edit") { @@ -551,14 +583,14 @@ export class PresBox extends ViewBoxBaseComponent handled = true; } } if (e.keyCode === 37 || e.keyCode === 38) { // left(37) / a(65) / up(38) to go back - this.back(); + this.back(); if (this._presTimer) clearTimeout(this._presTimer); handled = true; } if (e.keyCode === 39 || e.keyCode === 40) { // right (39) / d(68) / down(40) to go to next - this.next(); + this.next(); if (this._presTimer) clearTimeout(this._presTimer); handled = true; } if (e.keyCode === 32) { // spacebar to 'present' or autoplay if (this.layoutDoc.presStatus !== "edit") this.startAutoPres(0); - else this.layoutDoc.presStatus = "manual"; + else this.layoutDoc.presStatus = "manual"; if (this._presTimer) clearTimeout(this._presTimer); handled = true; } if (e.keyCode === 8) { // delete selected items @@ -582,23 +614,13 @@ export class PresBox extends ViewBoxBaseComponent @action viewPaths = async () => { const srcContext = Cast(this.rootDoc.presCollection, Doc, null); - if (this.pathBoolean) { - if (srcContext) { - this.togglePath(); - srcContext._fitToBox = false; - srcContext._viewType = "freeform"; - srcContext.presPathView = false; - } - } else { - if (srcContext) { - this.togglePath(); - srcContext._fitToBox = true; - srcContext._viewType = "freeform"; - srcContext.presPathView = true; - } + if (this.pathBoolean && srcContext) { + this.togglePath(); + srcContext.presPathView = false; + } else if (srcContext) { + this.togglePath(); + srcContext.presPathView = true; } - const viewType = srcContext?._viewType; - const fit = srcContext?._fitToBox; } // Adds the index in the pres path graphically @@ -606,7 +628,7 @@ export class PresBox extends ViewBoxBaseComponent const order: JSX.Element[] = []; this.childDocs.forEach((doc, index) => { const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); - const srcContext = Cast(targetDoc.context, Doc, null); + const srcContext = Cast(targetDoc?.context, Doc, null); // Case A: Document is contained within the colleciton if (this.rootDoc.presCollection === srcContext) { order.push( @@ -636,7 +658,7 @@ export class PresBox extends ViewBoxBaseComponent let pathPoints = ""; this.childDocs.forEach((doc, index) => { const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); - const srcContext = Cast(targetDoc.context, Doc, null); + const srcContext = Cast(targetDoc?.context, Doc, null); if (targetDoc && this.rootDoc.presCollection === srcContext) { const n1x = NumCast(targetDoc.x) + (NumCast(targetDoc._width) / 2); const n1y = NumCast(targetDoc.y) + (NumCast(targetDoc._height) / 2); @@ -689,7 +711,7 @@ export class PresBox extends ViewBoxBaseComponent setTransitionTime = (number: String, change?: number) => { let timeInMS = Number(number) * 1000; if (change) timeInMS += change; - if (timeInMS < 0) timeInMS = 100; + if (timeInMS < 100) timeInMS = 100; if (timeInMS > 10000) timeInMS = 10000; const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); @@ -700,7 +722,7 @@ export class PresBox extends ViewBoxBaseComponent setDurationTime = (number: String, change?: number) => { let timeInMS = Number(number) * 1000; if (change) timeInMS += change; - if (timeInMS < 0) timeInMS = 100; + if (timeInMS < 100) timeInMS = 100; if (timeInMS > 20000) timeInMS = 20000; const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); @@ -712,8 +734,8 @@ export class PresBox extends ViewBoxBaseComponent const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); if (activeItem && targetDoc) { - let transitionSpeed = targetDoc.presTransition ? String(Number(targetDoc.presTransition) / 1000) : 0.5; - let duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2; + let transitionSpeed = targetDoc.presTransition ? NumCast(targetDoc.presTransition) / 1000 : 0.5; + let duration = targetDoc.presDuration ? NumCast(targetDoc.presDuration) / 1000 : 2; if (targetDoc.type === DocumentType.AUDIO) duration = NumCast(targetDoc.duration); const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom'; @@ -721,9 +743,9 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this.openMovementDropdown = false; this.openEffectDropdown = false; })}>
Movement -
{ e.stopPropagation(); this.openMovementDropdown = !this.openMovementDropdown })} style={{ borderBottomLeftRadius: this.openMovementDropdown ? 0 : 5 }}> +
{ e.stopPropagation(); this.openMovementDropdown = !this.openMovementDropdown })} style={{ borderBottomLeftRadius: this.openMovementDropdown ? 0 : 5, border: this.openMovementDropdown ? 'solid 2px #5B9FDD' : 'solid 1px black' }}> {activeItem.presMovement} - +
e.stopPropagation()} style={{ display: this.openMovementDropdown ? "grid" : "none" }}>
e.stopPropagation()} onClick={() => this.movementChanged('none')}>None
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom
@@ -735,15 +757,15 @@ export class PresBox extends ViewBoxBaseComponent
Transition Speed
{ document.removeEventListener("keydown", this.keyEvents, true); }} - onChange={action((e: React.ChangeEvent) => { if (Number(e.target.value) >= 0 && Number(e.target.value) <= 10 && !isNaN(Number(e.target.value)) || e.target.value === '') this.setTransitionTime(e.target.value) })} /> s + onChange={action((e: React.ChangeEvent) => { this.setTransitionTime(e.target.value) })} /> s
-
this.setTransitionTime(String(duration), 1000)}> +
this.setTransitionTime(String(transitionSpeed), 1000)}>
-
this.setTransitionTime(String(duration), -1000)}> +
this.setTransitionTime(String(transitionSpeed), -1000)}>
@@ -765,9 +787,9 @@ export class PresBox extends ViewBoxBaseComponent
Slide Duration
{ document.removeEventListener("keydown", this.keyEvents, true); }} - onChange={action((e: React.ChangeEvent) => { if (Number(e.target.value) >= 0 && Number(e.target.value) <= 20 && !isNaN(Number(e.target.value)) || e.target.value === '') this.setDurationTime(e.target.value) })} /> s + onChange={action((e: React.ChangeEvent) => { this.setDurationTime(e.target.value) })} /> s
this.setDurationTime(String(duration), 1000)}> @@ -787,9 +809,9 @@ export class PresBox extends ViewBoxBaseComponent
Effects -
{ e.stopPropagation(); this.openEffectDropdown = !this.openEffectDropdown })} style={{ borderBottomLeftRadius: this.openMovementDropdown ? 0 : 5 }}> +
{ e.stopPropagation(); this.openEffectDropdown = !this.openEffectDropdown })} style={{ borderBottomLeftRadius: this.openEffectDropdown ? 0 : 5, border: this.openEffectDropdown ? 'solid 2px #5B9FDD' : 'solid 1px black' }}> {effect} - +
e.stopPropagation()}>
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'None'}>None
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Fade'}>Fade In
@@ -850,6 +872,10 @@ export class PresBox extends ViewBoxBaseComponent tagDoc.presTransition = targetDoc.presTransition; tagDoc.presDuration = targetDoc.presDuration; tagDoc.presEffect = targetDoc.presEffect; + tagDoc.presEffectDirection = targetDoc.presEffectDirection; + curDoc.presMovement = activeItem.presMovement; + curDoc.presHideTillShownButton = activeItem.presHideTillShownButton; + curDoc.presHideAfterButton = activeItem.presHideAfterButton; } }); } @@ -882,9 +908,41 @@ export class PresBox extends ViewBoxBaseComponent } }}>Presentation pin view
-
-
Store original website
+
+
+
Pan X
+
+ { document.removeEventListener("keydown", this.keyEvents, true); }} + onChange={action((e: React.ChangeEvent) => { let val = e.target.value; activeItem.presPinViewX = Number(val); })} /> +
+
+
+
Pan Y
+
+ { document.removeEventListener("keydown", this.keyEvents, true); }} + onChange={action((e: React.ChangeEvent) => { let val = e.target.value; activeItem.presPinViewY = Number(val) })} /> +
+
+
+
Scale
+
+ { document.removeEventListener("keydown", this.keyEvents, true); }} + onChange={action((e: React.ChangeEvent) => { let val = e.target.value; activeItem.presPinViewScale = Number(val) })} /> +
+
+ {/*
+
Store original website
+
*/}
@@ -909,11 +967,6 @@ export class PresBox extends ViewBoxBaseComponent
Title
Text goes here
- {/*
runInAction(() => { this.layout = 'twoColumns'; this.createNewSlide(this.layout); })}> -
Title
-
Column one text
-
Column two text
-
*/}
@@ -1043,7 +1096,7 @@ export class PresBox extends ViewBoxBaseComponent @computed get presentDropdown() { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> -
+
this.updateMinimize()}> Minimize
{ this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}> @@ -1065,7 +1118,7 @@ export class PresBox extends ViewBoxBaseComponent CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); } CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame); - CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); + 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 (activeItem.zoomProgressivize) { @@ -1116,38 +1169,52 @@ export class PresBox extends ViewBoxBaseComponent case DocumentType.AUDIO: type = "Audio"; break; case DocumentType.VID: type = "Video"; break; case DocumentType.IMG: type = "Image"; break; + case DocumentType.WEB: type = "Web page"; break; default: type = "Other node"; break; } } return type; } + @observable private openActiveColorPicker: boolean = false; + @observable private openViewedColorPicker: boolean = false; + + + @computed get progressivizeDropdown() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); - + const activeFontColor = targetDoc["pres-text-color"] ? StrCast(targetDoc["pres-text-color"]) : "Black"; + const viewedFontColor = targetDoc["pres-text-viewed-color"] ? StrCast(targetDoc["pres-text-viewed-color"]) : "Black"; if (activeItem && targetDoc) { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
{this.stringType} selected -
-
Child documents
-
Edit
+
+
Contents
+
Edit
+
+
+
Active text color
+
{ console.log("hi"); this.openActiveColorPicker = !this.openActiveColorPicker })}> +
-
-
Internal zoom
-
Viewfinder
- {/*
Snapshot
*/} + {this.activeColorPicker} +
+
Viewed font color
+
this.openViewedColorPicker = !this.openViewedColorPicker)}> +
- {/*
-
Text progressivize
-
Edit
+ {this.viewedColorPicker} + {/*
+
Zoom
+
Edit
*/} -
-
Scroll progressivize
-
Edit
+
+
Scroll
+
Edit
@@ -1157,7 +1224,7 @@ export class PresBox extends ViewBoxBaseComponent
{ e.stopPropagation(); this.prevKeyframe(targetDoc, activeItem); }}>
-
targetDoc.editing = !targetDoc.editing)} > {NumCast(targetDoc.currentFrame)}
@@ -1167,7 +1234,7 @@ export class PresBox extends ViewBoxBaseComponent
{"Last frame"}
}>
{NumCast(targetDoc.lastFrame)}
-
console.log(" TODO: play frames")}>Play
+
console.log(" TODO: play frames")}>Play
@@ -1175,6 +1242,45 @@ export class PresBox extends ViewBoxBaseComponent } } + @undoBatch + @action + switchActive = (color: ColorState) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + const val = String(color.hex); + targetDoc["pres-text-color"] = val; + return true; + } + @undoBatch + @action + switchPresented = (color: ColorState) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + const val = String(color.hex); + targetDoc["pres-text-viewed-color"] = val; + return true; + } + + @computed get activeColorPicker() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + if (this.openActiveColorPicker) return ; + } + + @computed get viewedColorPicker() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + if (this.openViewedColorPicker) return ; + } + turnOffEdit = () => { this.childDocs.forEach((doc) => { doc.editSnapZoomProgressivize = false; @@ -1184,31 +1290,16 @@ export class PresBox extends ViewBoxBaseComponent targetDoc.editSnapZoomProgressivize = false; targetDoc.editZoomProgressivize = false; targetDoc.editScrollProgressivize = false; - if (doc.type === DocumentType.WEB) { - doc.presWebsite = doc.data; - } }); } - //Toggle whether the user edits or not - @action - editSnapZoomProgressivize = (e: React.MouseEvent) => { - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - if (!targetDoc.editSnapZoomProgressivize) { - targetDoc.editSnapZoomProgressivize = true; - } else { - targetDoc.editSnapZoomProgressivize = false; - } - - } - //Toggle whether the user edits or not @action editZoomProgressivize = (e: React.MouseEvent) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); if (!targetDoc.editZoomProgressivize) { + if (!activeItem.zoomProgressivize) activeItem.zoomProgressivize = true; targetDoc.zoomProgressivize = true; targetDoc.editZoomProgressivize = true; activeItem.editZoomProgressivize = true; } else { @@ -1223,6 +1314,7 @@ export class PresBox extends ViewBoxBaseComponent const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); if (!targetDoc.editScrollProgressivize) { + if (!targetDoc.scrollProgressivize) { targetDoc.scrollProgressivize = true; activeItem.scrollProgressivize = true; } targetDoc.editScrollProgressivize = true; } else { targetDoc.editScrollProgressivize = false; @@ -1261,44 +1353,17 @@ export class PresBox extends ViewBoxBaseComponent } } - //Progressivize Text nodes - @action - editTextProgressivize = (e: React.MouseEvent) => { - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - targetDoc.currentFrame = targetDoc.lastFrame; - if (targetDoc?.editTextProgressivize) { - targetDoc.editTextProgressivize = false; - } else { - targetDoc.editTextProgressivize = true; - } - } - - @action - progressivizeText = (e: React.MouseEvent) => { - e.stopPropagation(); - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - activeItem.presProgressivize = !activeItem.presProgressivize; - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); - targetDoc.presProgressivize = !targetDoc.presProgressivize; - if (activeItem.presProgressivize) { - targetDoc.currentFrame = 0; - CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); - targetDoc.lastFrame = docs.length - 1; - } - } - //Progressivize Child Docs @action editProgressivize = (e: React.MouseEvent) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); targetDoc.currentFrame = targetDoc.lastFrame; - if (targetDoc?.editProgressivize) { - targetDoc.editProgressivize = false; - } else { + if (!targetDoc.editProgressivize) { + if (!activeItem.presProgressivize) { activeItem.presProgressivize = true; targetDoc.presProgressivize = true; } targetDoc.editProgressivize = true; + } else { + targetDoc.editProgressivize = false; } } @@ -1309,6 +1374,7 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); if (!activeItem.presProgressivize) { + targetDoc.editing = false; activeItem.presProgressivize = true; targetDoc.presProgressivize = true; targetDoc.currentFrame = 0; @@ -1318,11 +1384,9 @@ export class PresBox extends ViewBoxBaseComponent targetDoc.editProgressivize = false; activeItem.presProgressivize = false; targetDoc.presProgressivize = false; - // docs.forEach((doc, index) => { - // doc.appearFrame = 0; - // }); targetDoc.currentFrame = 0; targetDoc.lastFrame = 0; + targetDoc.editing = true; } } @@ -1360,15 +1424,15 @@ export class PresBox extends ViewBoxBaseComponent } @action - checkList = (doc: Doc, list: any) => { + checkList = (doc: Doc, list: any): number => { const x: List = list; - if (x && x.length >= NumCast(doc.currentFrame) + 1) { + if (x && x.length >= NumCast(doc!.currentFrame) + 1) { return x[NumCast(doc.currentFrame)]; - } else if (doc && x) { + } else if (x) { x.length = NumCast(doc.currentFrame) + 1; x[NumCast(doc.currentFrame)] = x[NumCast(doc.currentFrame) - 1]; return x[NumCast(doc.currentFrame)]; - } + } else return 100; } @computed get progressivizeChildDocs() { @@ -1451,8 +1515,18 @@ export class PresBox extends ViewBoxBaseComponent return width; } + @action + toggleProperties = () => { + if (CurrentUserUtils.propertiesWidth > 0) { + CurrentUserUtils.propertiesWidth = 0; + } else { + CurrentUserUtils.propertiesWidth = 250; + } + } + @computed get toolbar() { - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const propIcon = CurrentUserUtils.propertiesWidth > 0 ? "angle-double-right" : "angle-double-left"; + const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Presentation Panel" : "Open Presentation Panel"; return (
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}> @@ -1471,6 +1545,11 @@ export class PresBox extends ViewBoxBaseComponent
+
{propTitle}
}> +
+ 0 ? '#AEDDF8' : 'white' }} /> +
+
); } diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 1e776384a..6ee190b82 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -3,6 +3,7 @@ $dark-blue: #5B9FDD; $light-background: #ececec; .presElementBox-item { + cursor: grab; display: grid; grid-template-columns: max-content max-content max-content max-content; background-color: #d5dce2; @@ -161,6 +162,7 @@ $light-background: #ececec; } .presElementBox-closeIcon { + cursor: pointer; position: absolute; border-radius: 100%; z-index: 300; @@ -177,6 +179,7 @@ $light-background: #ececec; } .presElementBox-expand { + cursor: pointer; position: absolute; border-radius: 100%; z-index: 300; @@ -193,6 +196,7 @@ $light-background: #ececec; } .presElementBox-expand-selected { + cursor: pointer; position: absolute; border-radius: 100%; right: 3px; diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 42b43b402..a25a8ee33 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -19,6 +19,7 @@ import { PresBox } from "../nodes/PresBox"; import { DocumentType } from "../../documents/DocumentTypes"; import { Tooltip } from "@material-ui/core"; import { DragManager } from "../../util/DragManager"; +import { CurrentUserUtils } from "../../util/CurrentUserUtils"; export const presSchema = createSchema({ presentationTargetDoc: Doc, @@ -58,111 +59,6 @@ export class PresElementBox extends ViewBoxBaseComponent { - e.stopPropagation(); - this.rootDoc.presHideTillShownButton = !this.rootDoc.presHideTillShownButton; - if (!this.rootDoc.presHideTillShownButton) { - if (this.indexInPres >= this.itemIndex && this.targetDoc) { - this.targetDoc.opacity = 1; - } - } else { - if (this.presStatus !== "edit" && this.indexInPres > this.itemIndex && this.targetDoc) { - this.targetDoc.opacity = 0; - } - } - } - - /** - * The function that is called on click to turn Hiding document after presented option on/off. - * It also makes sure that the option swithches from fade-after to this one, since both - * can't coexist. - */ - @action - onHideDocumentAfterPresentedClick = (e: React.MouseEvent) => { - e.stopPropagation(); - this.rootDoc.presHideAfterButton = !this.rootDoc.presHideAfterButton; - if (!this.rootDoc.presHideAfterButton) { - if (this.indexInPres <= this.itemIndex && this.targetDoc) { - this.targetDoc.opacity = 1; - } - } else { - if (this.rootDoc.presFadeButton) this.rootDoc.presFadeButton = false; - if (this.presStatus !== "edit" && this.indexInPres < this.itemIndex && this.targetDoc) { - this.targetDoc.opacity = 0; - } - } - } - - @action - progressivize = (e: React.MouseEvent) => { - e.stopPropagation(); - this.rootDoc.presProgressivize = !this.rootDoc.presProgressivize; - const rootTarget = Cast(this.rootDoc.presentationTargetDoc, Doc, null); - const docs = rootTarget.type === DocumentType.COL ? DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget)]) : - DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget) + "-annotations"]); - if (this.rootDoc.presProgressivize) { - rootTarget.currentFrame = 0; - CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); - rootTarget.lastFrame = docs.length - 1; - } - } - - /** - * The function that is called on click to turn fading document after presented option on/off. - * It also makes sure that the option swithches from hide-after to this one, since both - * can't coexist. - */ - @action - onFadeDocumentAfterPresentedClick = (e: React.MouseEvent) => { - e.stopPropagation(); - this.rootDoc.presFadeButton = !this.rootDoc.presFadeButton; - if (!this.rootDoc.presFadeButton) { - if (this.indexInPres <= this.itemIndex && this.targetDoc) { - this.targetDoc.opacity = 1; - } - } else { - this.rootDoc.presHideAfterButton = false; - if (this.presStatus !== "edit" && (this.indexInPres < this.itemIndex) && this.targetDoc) { - this.targetDoc.opacity = 0.5; - } - } - } - - /** - * The function that is called on click to turn navigation option of docs on/off. - */ - @action - onNavigateDocumentClick = (e: React.MouseEvent) => { - e.stopPropagation(); - this.rootDoc.presNavButton = !this.rootDoc.presNavButton; - if (this.rootDoc.presNavButton) { - this.rootDoc.presZoomButton = false; - if (this.itemIndex === this.indexInPres) { - this.props.focus(this.rootDoc); - } - } - } - - /** - * The function that is called on click to turn zoom option of docs on/off. - */ - @action - onZoomDocumentClick = (e: React.MouseEvent) => { - e.stopPropagation(); - - this.rootDoc.presZoomButton = !this.rootDoc.presZoomButton; - if (this.rootDoc.presZoomButton) { - this.rootDoc.presNavButton = false; - if (this.itemIndex === this.indexInPres) { - this.props.focus(this.rootDoc); - } - } - } /** * Returns a local transformed coordinate array for given coordinates. */ @@ -235,12 +131,11 @@ export class PresElementBox extends ViewBoxBaseComponent) => { - const element1 = document.elementFromPoint(e.clientX, e.clientY)?.parentElement; const element = e.target as any; e.stopPropagation(); e.preventDefault(); - if (element) { - if (PresBox.Instance._eleArray.includes(element)) { + if (element && !(e.ctrlKey || e.metaKey)) { + if (PresBox.Instance._eleArray.includes(this._itemRef.current!)) { setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); } else { PresBox.Instance._selectedArray = []; @@ -303,8 +198,14 @@ export class PresElementBox extends ViewBoxBaseComponent { + if (CurrentUserUtils.propertiesWidth === 0) { + CurrentUserUtils.propertiesWidth = 250; + } + } + render() { - const treecontainer = this.props.ContainingCollectionDoc?._viewType === CollectionViewType.Tree; const className = "presElementBox-item" + (PresBox.Instance._selectedArray.includes(this.rootDoc) ? " presElementBox-active" : ""); const pbi = "presElementBox-interaction"; return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : ( @@ -329,6 +230,14 @@ export class PresElementBox extends ViewBoxBaseComponent { + 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!); + }} onPointerDown={this.headerDown} onPointerUp={this.headerUp} > @@ -357,14 +266,6 @@ export class PresElementBox extends ViewBoxBaseComponent
-
- - - - - - -
{this.renderEmbeddedInline}
); diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts index bd8fe97eb..e088cd2c4 100644 --- a/src/server/ApiManagers/UploadManager.ts +++ b/src/server/ApiManagers/UploadManager.ts @@ -279,7 +279,7 @@ function delay(ms: number) { * * On failure, returns undefined. */ -async function captureYoutubeScreenshot(targetUrl: string){ +async function captureYoutubeScreenshot(targetUrl: string) { // const browser = await launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] }); // const page = await browser.newPage(); // // await page.setViewport({ width: 1920, height: 1080 }); -- cgit v1.2.3-70-g09d2