diff options
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 213 | ||||
| -rw-r--r-- | src/client/views/nodes/PresBox.tsx | 206 |
2 files changed, 212 insertions, 207 deletions
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<CollectionFreeFormViewPannableContentsProps>{ + 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) : <div id="resizable" className="resizable" onPointerDown={this.onPointerMid} style={{ width: vfWidth, height: vfHeight, top: vfTop, left: vfLeft, position: 'absolute' }}> + <div className='resizers'> + <div id="resizer-tl" className='resizer top-left' onPointerDown={this.onPointerTL}></div> + <div id="resizer-tr" className='resizer top-right' onPointerDown={this.onPointerTR}></div> + <div id="resizer-bl" className='resizer bottom-left' onPointerDown={this.onPointerBL}></div> + <div id="resizer-br" className='resizer bottom-right' onPointerDown={this.onPointerBR}></div> + </div> + </div>} + </> + ); + } + } + @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<FieldViewProps, PresBoxSchema> 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<number> = list; @@ -1499,30 +1317,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> } } - // 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) : <div id="resizable" className="resizable" onPointerDown={this.onPointerMid} style={{ width: vfWidth, height: vfHeight, top: vfTop, left: vfLeft, position: 'absolute' }}> - <div className='resizers'> - <div id="resizer-tl" className='resizer top-left' onPointerDown={this.onPointerTL}></div> - <div id="resizer-tr" className='resizer top-right' onPointerDown={this.onPointerTR}></div> - <div id="resizer-bl" className='resizer bottom-left' onPointerDown={this.onPointerBL}></div> - <div id="resizer-br" className='resizer bottom-right' onPointerDown={this.onPointerBR}></div> - </div> - </div>} - </> - ); - } - } - @computed get progressivizeChildDocs() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); |