diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 3 | ||||
| -rw-r--r-- | src/client/views/nodes/PresBox.tsx | 231 | ||||
| -rw-r--r-- | src/client/views/presentationview/PresElementBox.scss | 4 | ||||
| -rw-r--r-- | src/client/views/presentationview/PresElementBox.tsx | 33 |
4 files changed, 151 insertions, 120 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index c47edefd6..37d561954 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -954,13 +954,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu const fullDegree = Doc.isBrushedHighlightedDegree(this.props.Document); const borderRounding = this.layoutDoc.borderRounding; const localScale = fullDegree; - const highlightColors = Cast(Doc.UserDoc().activeWorkspace, Doc, null)?.darkScheme ? ["transparent", "#65350c", "#65350c", "yellow", "magenta", "cyan", "orange"] : ["transparent", "maroon", "maroon", "yellow", "magenta", "cyan", "orange"]; const highlightStyles = ["solid", "dashed", "solid", "solid", "solid", "solid", "solid"]; let highlighting = fullDegree && this.layoutDoc.type !== DocumentType.FONTICON && this.layoutDoc._viewType !== CollectionViewType.Linear && this.props.Document.type !== DocumentType.INK; - highlighting = highlighting && this.props.focus !== emptyFunction; // bcz: hack to turn off highlighting onsidebar panel documents. need to flag a document as not highlightable in a more direct way + highlighting = highlighting && this.props.focus !== emptyFunction && this.layoutDoc.title !== "[pres element template]"; // bcz: hack to turn off highlighting onsidebar panel documents. need to flag a document as not highlightable in a more direct way const topmost = this.topMost ? "-topmost" : ""; return <div className={`documentView-node${topmost}`} id={this.props.Document[Id]} diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 28e340cf1..c04c6c409 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -5,13 +5,14 @@ import { observer } from "mobx-react"; import { Doc, DocListCast, DocCastAsync, WidthSym } from "../../../fields/Doc"; import { InkTool } from "../../../fields/InkField"; import { BoolCast, Cast, NumCast, StrCast, ScriptCast } from "../../../fields/Types"; -import { returnFalse, returnOne, numberRange, setupMoveUpEvents, emptyFunction, returnTrue } from "../../../Utils"; +import { returnFalse, returnOne, numberRange, returnTrue } from "../../../Utils"; import { documentSchema } from "../../../fields/documentSchemas"; import { DocumentManager } from "../../util/DocumentManager"; import { undoBatch } from "../../util/UndoManager"; import { CollectionDockingView, DockedFrameRenderer } from "../collections/CollectionDockingView"; import { CollectionView, CollectionViewType } from "../collections/CollectionView"; import { FieldView, FieldViewProps } from './FieldView'; +import { DocumentType } from "../../documents/DocumentTypes"; import "./PresBox.scss"; import { ViewBoxBaseComponent } from "../DocComponent"; import { makeInterface, listSpec } from "../../../fields/Schema"; @@ -30,6 +31,7 @@ import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu"; import { conformsTo } from "lodash"; import { translate } from "googleapis/build/src/apis/translate"; import { DragManager, dropActionType } from "../../util/DragManager"; +import { actionAsync } from "mobx-utils"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -92,55 +94,18 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); 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; // Case 1: There are still other frames and should go through all frames before going to next slide - if (lastFrame !== undefined && curFrame < lastFrame) { + if (internalFrames && lastFrame !== undefined && curFrame < lastFrame) { presTargetDoc._viewTransition = "all 1s"; setTimeout(() => presTargetDoc._viewTransition = undefined, 1010); presTargetDoc.currentFrame = curFrame + 1; - if (presTargetDoc.zoomProgressivize) { - const srcContext = Cast(presTargetDoc.context, Doc, null); - const srcDocView = DocumentManager.Instance.getDocumentView(srcContext); - if (srcContext && srcDocView) { - const layoutdoc = Doc.Layout(presTargetDoc); - const panelWidth: number = srcDocView.props.PanelWidth(); - const panelHeight: number = srcDocView.props.PanelHeight(); - console.log("srcDocView: " + srcDocView.props.PanelWidth()); - // console.log("layoutdoc._width: " + layoutdoc._width); - // console.log("srcContext._width: " + srcContext._width); - const newPanX = NumCast(presTargetDoc.x) + NumCast(layoutdoc._width) / 2; - const newPanY = NumCast(presTargetDoc.y) + NumCast(layoutdoc._height) / 2; - // const newPanX = NumCast(presTargetDoc.x) + panelWidth / 2; - // const newPanY = NumCast(presTargetDoc.y) + panelHeight / 2; - let newScale = 0.9 * Math.min(Number(panelWidth) / this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]), Number(panelHeight) / this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"])); - // srcContext._panX = newPanX + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2)); - // srcContext._panY = newPanY + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2)); - srcContext._panX = newPanX + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2)); - srcContext._panY = newPanY + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2)); - // srcContext._panX = newPanX - // srcContext._panY = newPanY - srcContext._viewScale = newScale; - console.log("X: " + srcContext._panX + ", Y: " + srcContext._panY + ", Scale: " + srcContext._viewScale); - const resize = document.getElementById('resizable'); - if (resize) { - resize.style.width = this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) + 'px'; - resize.style.height = this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) + 'px'; - resize.style.top = this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + 'px'; - resize.style.left = this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + 'px'; - } - } - } + if (presTargetDoc.zoomProgressivize) this.zoomProgressivizeNext(presTargetDoc); // Case 2: No more frames in current doc and next slide is defined, therefore move to next slide } else if (this.childDocs[this.itemIndex + 1] !== undefined) { const nextSelected = this.itemIndex + 1; this.gotoDocument(nextSelected, this.itemIndex); - - // for (nextSelected = nextSelected + 1; nextSelected < this.childDocs.length; nextSelected++) { - // if (!this.childDocs[nextSelected].groupButton) { - // break; - // } else { - // this.gotoDocument(nextSelected, this.itemIndex); - // } - // } } } @@ -163,6 +128,58 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> } } + 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"]); + // Case 1: document that is not a Golden Layout tab + if (srcContext) { + console.log("CASE 1"); + const srcDocView = DocumentManager.Instance.getDocumentView(srcContext); + if (srcDocView) { + const layoutdoc = Doc.Layout(presTargetDoc); + const panelWidth: number = srcDocView.props.PanelWidth(); + const panelHeight: number = srcDocView.props.PanelHeight(); + console.log("srcDocView: " + srcDocView.props.PanelWidth()); + // console.log("layoutdoc._width: " + layoutdoc._width); + // console.log("srcContext._width: " + srcContext._width); + const newPanX = NumCast(presTargetDoc.x) + NumCast(layoutdoc._width) / 2; + const newPanY = NumCast(presTargetDoc.y) + NumCast(layoutdoc._height) / 2; + // const newPanX = NumCast(presTargetDoc.x) + panelWidth / 2; + // const newPanY = NumCast(presTargetDoc.y) + panelHeight / 2; + let newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight); + // srcContext._panX = newPanX + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2)); + // srcContext._panY = newPanY + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2)); + srcContext._panX = newPanX + (vfLeft + (vfWidth / 2)); + srcContext._panY = newPanY + (vfTop + (vfHeight / 2)); + // srcContext._panX = newPanX + // srcContext._panY = newPanY + srcContext._viewScale = newScale; + console.log("X: " + srcContext._panX + ", Y: " + srcContext._panY + ", Scale: " + srcContext._viewScale); + } + } + // Case 2: document is the containing collection + if (docView && !srcContext) { + console.log("CASE 2"); + const panelWidth: number = docView.props.PanelWidth(); + const panelHeight: number = docView.props.PanelHeight(); + let newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight); + presTargetDoc._panX = vfLeft + (vfWidth / 2); + presTargetDoc._panY = vfTop + (vfWidth / 2); + presTargetDoc._viewScale = newScale; + } + const resize = document.getElementById('resizable'); + if (resize) { + resize.style.width = vfWidth + 'px'; + resize.style.height = vfHeight + 'px'; + resize.style.top = vfTop + 'px'; + resize.style.left = vfLeft + 'px'; + } + } + @action onHideDocumentUntilPressClick = () => { @@ -440,14 +457,28 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> } childLayoutTemplate = () => this.rootDoc._viewType !== CollectionViewType.Stacking ? undefined : this.presElement; removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.dataDoc, this.fieldKey, doc); - getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight + getTransform = () => this.props.ScreenToLocalTransform();// listBox padding-left and pres-box-cont minHeight - .translate(-5, -65) panelHeight = () => this.props.PanelHeight() - 40; active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) && (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) // KEYS @observable _selectedArray: Doc[] = []; + @observable _sortedSelectedArray: Doc[] = []; @observable _eleArray: HTMLElement[] = []; + @observable _dragArray: HTMLElement[] = []; + + //TODO: Update to radix / quick sort + @action + sortArray = (): Doc[] => { + const sort: Doc[] = this._selectedArray; + this.childDocs.forEach((doc, i) => { + if (this._selectedArray.includes(doc)) { + sort.push(doc); + } + }); + return sort; + } @computed get listOfSelected() { const list = this._selectedArray.map((doc: Doc, index: any) => { @@ -473,6 +504,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> @action multiSelect = (doc: Doc, ref: HTMLElement) => { this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); + const ele = ref.getElementsByClassName("stacking"); this._eleArray.push(ref); } @@ -1013,16 +1045,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> </div> </div> <div className="ribbon-final-box"> - <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "collection" ? "inline-flex" : "none" }}> + <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.COL ? "inline-flex" : "none" }}> <div className="ribbon-button" style={{ backgroundColor: activeItem.presProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeChild}>Child documents</div> <div className="ribbon-button" style={{ display: activeItem.presProgressivize ? "flex" : "none", backgroundColor: targetDoc.editProgressivize ? "#aedef8" : "" }} onClick={this.editProgressivize}>Edit</div> </div> - <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "collection" || targetDoc.type === "image" ? "inline-flex" : "none" }}> + <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.COL || targetDoc.type === "image" ? "inline-flex" : "none" }}> <div className="ribbon-button" style={{ backgroundColor: activeItem.zoomProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeZoom}>Internal zoom</div> <div className="ribbon-button" style={{ display: activeItem.zoomProgressivize ? "flex" : "none", backgroundColor: targetDoc.editZoomProgressivize ? "#aedef8" : "" }} onClick={this.editZoomProgressivize}>Viewfinder</div> <div className="ribbon-button" style={{ display: activeItem.zoomProgressivize ? "flex" : "none", backgroundColor: targetDoc.editSnapZoomProgressivize ? "#aedef8" : "" }} onClick={this.editSnapZoomProgressivize}>Snapshot</div> </div> - <div className="ribbon-doubleButton" style={{ display: targetDoc.type === "rtf" ? "inline-flex" : "none" }}> + <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.RTF ? "inline-flex" : "none" }}> <div className="ribbon-button" onClick={this.progressivizeText}>Text progressivize</div> <div className="ribbon-button" style={{ display: activeItem.textProgressivize ? "flex" : "none", backgroundColor: targetDoc.editTextProgressivize ? "#aedef8" : "" }} onClick={this.editTextProgressivize}>Edit</div> </div> @@ -1178,7 +1210,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> const x: List<number> = xlist; const y: List<number> = ylist; const tags: JSX.Element[] = []; - let pathPoints = ""; //List of all of the paths that need to be added + let pathPoints = ""; //List of all of the pathpoints that need to be added // console.log(x); // console.log(x.length); // console.log(x[0]); @@ -1566,58 +1598,58 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> private _itemRef: React.RefObject<HTMLDivElement> = React.createRef(); - protected createPresDropTarget = (ele: HTMLDivElement) => { - console.log("created?"); - this.treedropDisposer?.(); - ele && (this.treedropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc, this.onInternalPreDrop.bind(this))); - if (ele) { - console.log("ele: " + ele.className) - } - } + // protected createPresDropTarget = (ele: HTMLDivElement) => { + // console.log("created?"); + // this.treedropDisposer?.(); + // ele && (this.treedropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc, this.onInternalPreDrop.bind(this))); + // if (ele) { + // console.log("ele: " + ele.className) + // } + // } - protected onInternalPreDrop(e: Event, de: DragManager.DropEvent, targetAction: dropActionType) { - console.log("preDrop?") - if (de.complete.docDragData) { - // if targetDropAction is, say 'alias', but we're just dragging within a collection, we want to ignore the targetAction. - // otherwise, the targetAction should become the actual action (which can still be overridden by the userDropAction -eg, shift/ctrl keys) - if (targetAction && !de.complete.docDragData.draggedDocuments.some(d => d.context === this.props.Document && this.childDocs.includes(d))) { - de.complete.docDragData.dropAction = targetAction; - } - e.stopPropagation(); - } - } + // protected onInternalPreDrop(e: Event, de: DragManager.DropEvent, targetAction: dropActionType) { + // console.log("preDrop?") + // if (de.complete.docDragData) { + // // if targetDropAction is, say 'alias', but we're just dragging within a collection, we want to ignore the targetAction. + // // otherwise, the targetAction should become the actual action (which can still be overridden by the userDropAction -eg, shift/ctrl keys) + // if (targetAction && !de.complete.docDragData.draggedDocuments.some(d => d.context === this.props.Document && this.childDocs.includes(d))) { + // de.complete.docDragData.dropAction = targetAction; + // } + // e.stopPropagation(); + // } + // } - @action - protected onInternalDrop(e: Event, de: DragManager.DropEvent): boolean { - console.log("drop in pres") - const docDragData = de.complete.docDragData; - ScriptCast(this.props.Document.dropConverter)?.script.run({ dragData: docDragData }); - if (docDragData && this.props.addDocument) { - console.log("docDragData && this.props.addDocument"); - let added = false; - const dropaction = docDragData.dropAction || docDragData.userDropAction; - if (dropaction && dropaction !== "move") { - console.log("dropaction && dropaction !== move"); - added = this.props.addDocument(docDragData.droppedDocuments); - } else if (docDragData.moveDocument) { - console.log("docDragData.moveDocument"); - const movedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] === d); - const addedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] !== d); - const res = addedDocs.length ? this.props.addDocument(addedDocs) : true; - if (movedDocs.length) { - const canAdd = this.props.Document._viewType === CollectionViewType.Pile || de.embedKey || - Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.props.Document); - added = docDragData.moveDocument(movedDocs, this.props.Document, canAdd ? this.props.addDocument : returnFalse); - } else added = res; - } else { - console.log("else"); - added = this.props.addDocument(docDragData.droppedDocuments); - } - added && e.stopPropagation(); - return added; - } - return false; - } + // @action + // protected onInternalDrop(e: Event, de: DragManager.DropEvent): boolean { + // console.log("drop in pres") + // const docDragData = de.complete.docDragData; + // ScriptCast(this.props.Document.dropConverter)?.script.run({ dragData: docDragData }); + // if (docDragData && this.props.addDocument) { + // console.log("docDragData && this.props.addDocument"); + // let added = false; + // const dropaction = docDragData.dropAction || docDragData.userDropAction; + // if (dropaction && dropaction !== "move") { + // console.log("dropaction && dropaction !== move"); + // added = this.props.addDocument(docDragData.droppedDocuments); + // } else if (docDragData.moveDocument) { + // console.log("docDragData.moveDocument"); + // const movedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] === d); + // const addedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] !== d); + // const res = addedDocs.length ? this.props.addDocument(addedDocs) : true; + // if (movedDocs.length) { + // const canAdd = this.props.Document._viewType === CollectionViewType.Pile || de.embedKey || + // Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.props.Document); + // added = docDragData.moveDocument(movedDocs, this.props.Document, canAdd ? this.props.addDocument : returnFalse); + // } else added = res; + // } else { + // console.log("else"); + // added = this.props.addDocument(docDragData.droppedDocuments); + // } + // added && e.stopPropagation(); + // return added; + // } + // return false; + // } render() { this.childDocs.slice(); // needed to insure that the childDocs are loaded for looking up fields @@ -1670,8 +1702,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> {this.moreInfoDropdown} {this.transitionDropdown} {this.progressivizeDropdown} - <div className="presBox-listCont" - ref={this.createPresDropTarget}> + <div className="presBox-listCont"> + {/* ref={this.createPresDropTarget}> */} {mode !== CollectionViewType.Invalid ? <CollectionView {...this.props} ContainingCollectionDoc={this.props.Document} @@ -1685,6 +1717,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema> dontRegisterView={true} focus={this.selectElement} // presMultiSelect={this.multiSelect} + // ScreenToLocalTransform={Transform.Identity} /> ScreenToLocalTransform={this.getTransform} /> : (null) } diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index c87a1583a..159cb5f8a 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -2,7 +2,7 @@ display: grid; grid-template-columns: max-content max-content max-content; background-color: #d5dce2; - box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25); + // box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25); position: relative; pointer-events: all; width: 100%; @@ -44,7 +44,7 @@ .presElementBox-item:hover { transition: all .1s; - background: #AAAAAA; + background: #98b7da; border-radius: 6px; } diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 5fba447db..a27d5ef16 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -19,9 +19,6 @@ import { PresBox } from "../nodes/PresBox"; import { DocumentType } from "../../documents/DocumentTypes"; import { Tooltip } from "@material-ui/core"; import { DragManager } from "../../util/DragManager"; -import { undoBatch } from "../../util/UndoManager"; -import { DocUtils } from "../../documents/Documents"; -import { DocumentManager } from "../../util/DocumentManager"; export const presSchema = createSchema({ presentationTargetDoc: Doc, @@ -44,7 +41,6 @@ const PresDocument = makeInterface(presSchema, documentSchema); @observer export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDocument>(PresDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresElementBox, fieldKey); } - private _treedropDisposer?: DragManager.DragDropDisposer; _heightDisposer: IReactionDisposer | undefined; // these fields are conditionally computed fields on the layout document that take this document as a parameter @computed get indexInPres() { return Number(this.lookupField("indexInPres")); } // the index field is where this document is in the presBox display list (since this value is different for each presentation element, the value can't be stored on the layout template which is used by all display elements) @@ -178,14 +174,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc } embedHeight = () => 100; - embedWidth = () => this.props.PanelWidth() - 20; + // embedWidth = () => this.props.PanelWidth(); // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); - // embedWidth = () => this.props.PanelWidth() - 20; + embedWidth = () => this.props.PanelWidth() - 20; /** * The function that is responsible for rendering a preview or not for this * presentation element. */ - @computed get renderEmbeddedInline() { return !this.rootDoc.presExpandInlineButton || !this.targetDoc ? (null) : <div className="presElementBox-embedded" style={{ height: this.embedHeight(), width: this.embedWidth() }}> @@ -194,7 +189,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc DataDoc={this.targetDoc[DataSym] !== this.targetDoc && this.targetDoc[DataSym]} LibraryPath={emptyPath} fitToBox={true} - backgroundColor={this.props.backgroundColor} + backgroundColor={() => "darkgrey"} rootSelected={returnTrue} addDocument={returnFalse} removeDocument={returnFalse} @@ -238,15 +233,21 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc private _itemRef: React.RefObject<HTMLDivElement> = React.createRef(); headerDown = (e: React.PointerEvent<HTMLDivElement>) => { + const element = document.elementFromPoint(e.clientX, e.clientY)?.parentElement; e.stopPropagation(); e.preventDefault(); - setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); + if (element) { + console.log(element.className); + if (PresBox.Instance._eleArray.includes(element)) { + setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); + } + } } startDrag = (e: PointerEvent, down: number[], delta: number[]) => { // const ele: HTMLElement[] = PresBox.Instance._eleArray.map(doc => doc); const activeItem = this.rootDoc; - const dragData = new DragManager.DocumentDragData(PresBox.Instance._selectedArray.map(doc => doc)); + const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc)); // let value = this.getValue(this._heading); // value = typeof value === "string" ? `"${value}"` : value; if (activeItem) { @@ -265,13 +266,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc const pbi = "presElementBox-interaction"; return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : ( <div className={className} key={this.props.Document[Id] + this.indexInPres} - style={{ outlineWidth: Doc.IsBrushed(this.targetDoc) ? `1px` : "0px", }} ref={this._itemRef} + style={{ outlineWidth: Doc.IsBrushed(this.targetDoc) ? `1px` : "0px", }} onClick={e => { - if (this.props.active(true) || PresBox.Instance._selectedArray.includes(this.rootDoc)) { - e.stopPropagation(); - e.preventDefault(); - } if (e.ctrlKey || e.metaKey) { PresBox.Instance.multiSelect(this.rootDoc, this._itemRef.current!); console.log("cmmd click"); @@ -292,7 +289,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc // }} onPointerDown={this.headerDown} > - {treecontainer ? (null) : <> + <> <div className="presElementBox-number"> {`${this.indexInPres + 1}.`} </div> @@ -313,7 +310,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"presElementBox-expand" + (this.rootDoc.presExpandInlineButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}> <FontAwesomeIcon icon={(this.rootDoc.presExpandInlineButton ? "angle-up" : "angle-down")} onPointerDown={e => e.stopPropagation()} /> </div></Tooltip> - </>} + </> <div className="presElementBox-highlight" style={{ display: PresBox.Instance._selectedArray.includes(this.rootDoc) ? "block" : "none" }} /> <div className="presElementBox-buttons" style={{ display: this.rootDoc.presExpandInlineButton ? "grid" : "none" }}> <button title="Zoom" className={pbi + (this.rootDoc.presZoomButton ? "-selected" : "")} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} onPointerDown={e => e.stopPropagation()} /></button> @@ -328,3 +325,5 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc ); } } + +// this.layoutDoc.title !== "pres element template"
\ No newline at end of file |