diff options
Diffstat (limited to 'src/client/views/collections')
15 files changed, 108 insertions, 105 deletions
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index b6acf3153..fb57a668e 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -7,10 +7,11 @@ import { Doc, Opt } from '../../../fields/Doc'; import { DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { DragManager } from '../../util/DragManager'; import { StyleProp } from '../StyleProvider'; -import { DocumentView, DocumentViewProps } from '../nodes/DocumentView'; +import { DocumentView, DocumentViewInternalProps, DocumentViewProps } from '../nodes/DocumentView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import './CollectionCarouselView.scss'; import { CollectionSubView } from './CollectionSubView'; +import { FieldViewProps } from '../nodes/FieldView'; @observer export class CollectionCarouselView extends CollectionSubView() { @@ -40,7 +41,7 @@ export class CollectionCarouselView extends CollectionSubView() { e.stopPropagation(); this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; }; - captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<DocumentViewProps>, property: string): any => { + captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<DocumentViewInternalProps|FieldViewProps>, property: string): any => { // first look for properties on the document in the carousel, then fallback to properties on the container const childValue = doc?.['caption-' + property] ? this.props.styleProvider?.(doc, captionProps, property) : undefined; return childValue ?? this.props.styleProvider?.(this.layoutDoc, captionProps, property); diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 0744814dd..527b72213 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -18,7 +18,7 @@ import { undoBatch } from '../../util/UndoManager'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { LightboxView } from '../LightboxView'; -import { DocFocusOptions, DocumentView, DocumentViewProps } from '../nodes/DocumentView'; +import { DocFocusOptions, DocumentView, DocumentViewInternalProps, DocumentViewProps } from '../nodes/DocumentView'; import { FieldViewProps } from '../nodes/FieldView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { StyleProp } from '../StyleProvider'; @@ -195,7 +195,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { const found = this._mainCont && Array.from(this._mainCont.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]); if (found) { const top = found.getBoundingClientRect().top; - const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top); + const localTop = this.ScreenToLocalBoxXf().transformPoint(0, top); if (Math.floor(localTop[1]) !== 0 && Math.ceil(this.props.PanelHeight()) < (this._mainCont?.scrollHeight || 0)) { let focusSpeed = options.zoomTime ?? 500; smoothScroll(focusSpeed, this._mainCont!, localTop[1] + this._mainCont!.scrollTop, options.easeFunc); @@ -204,7 +204,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { } }; - styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string) => { + styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewInternalProps | FieldViewProps>, property: string) => { switch (property) { case StyleProp.BoxShadow: if (doc && DragManager.docsBeingDragged.includes(doc)) { @@ -282,7 +282,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { const y = this._scroll; // required for document decorations to update when the text box container is scrolled const { translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv || undefined); // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform. so we have to subtract that off - return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale); + return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.ScreenToLocalBoxXf().Scale); } // how to get the width of a document. Currently returns the width of the column (minus margins) @@ -341,10 +341,10 @@ export class CollectionNoteTakingView extends CollectionSubView() { onPointerMove = (force: boolean, ex: number, ey: number) => { if (this.childDocList?.includes(DragManager.DocDragData?.draggedDocuments?.lastElement() as any) || force || SnappingManager.CanEmbed) { // get the current docs for the column based on the mouse's x coordinate - const xCoord = this.props.ScreenToLocalTransform().transformPoint(ex, ey)[0] - 2 * this.gridGap; + const xCoord = this.ScreenToLocalBoxXf().transformPoint(ex, ey)[0] - 2 * this.gridGap; const colDocs = this.getDocsFromXCoord(xCoord); // get the index for where you need to insert the doc you are currently dragging - const clientY = this.props.ScreenToLocalTransform().transformPoint(ex, ey)[1]; + const clientY = this.ScreenToLocalBoxXf().transformPoint(ex, ey)[1]; let dropInd = -1; let pos0 = (this.refList.lastElement() as HTMLDivElement).children[0].getBoundingClientRect().height + this.yMargin * 2; colDocs.forEach((doc, i) => { @@ -437,7 +437,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { if (rowCol[0] <= 0) { docs.splice(0, 0, ...newDocs); } else { - const colDocs = this.getDocsFromXCoord(this.props.ScreenToLocalTransform().transformPoint(de.x, de.y)[0]); + const colDocs = this.getDocsFromXCoord(this.ScreenToLocalBoxXf().transformPoint(de.x, de.y)[0]); const previousDoc = colDocs[rowCol[0] - 1]; const previousDocIndex = docs.indexOf(previousDoc); docs.splice(previousDocIndex + 1, 0, ...newDocs); @@ -546,7 +546,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { yMargin={this.yMargin} type={type} createDropTarget={this.createDashEventsTarget} - screenToLocalTransform={this.props.ScreenToLocalTransform} + screenToLocalTransform={this.ScreenToLocalBoxXf} editableViewProps={this.editableViewProps} /> ); @@ -586,7 +586,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { // setColumnStartXCoords is used to update column widths when using the drag handlers between columns @action setColumnStartXCoords = (movementXScreen: number, colIndex: number) => { - const movementX = this.props.ScreenToLocalTransform().transformDirection(movementXScreen, 0)[0]; + const movementX = this.ScreenToLocalBoxXf().transformDirection(movementXScreen, 0)[0]; const leftHeader = this.colHeaderData[colIndex]; const rightHeader = this.colHeaderData[colIndex + 1]; leftHeader.setWidth(leftHeader.width + movementX / this.availableWidth); diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx index a63688354..d99b4f9de 100644 --- a/src/client/views/collections/CollectionStackedTimeline.tsx +++ b/src/client/views/collections/CollectionStackedTimeline.tsx @@ -23,11 +23,12 @@ import { undoBatch, UndoManager } from '../../util/UndoManager'; import { CollectionSubView } from '../collections/CollectionSubView'; import { LightboxView } from '../LightboxView'; import { AudioWaveform } from '../nodes/audio/AudioWaveform'; -import { DocFocusFunc, DocFocusOptions, DocumentView, DocumentViewProps, OpenWhere } from '../nodes/DocumentView'; +import { DocFocusFunc, DocFocusOptions, DocumentView, DocumentViewInternalProps, DocumentViewProps, OpenWhere, StyleProviderFunc } from '../nodes/DocumentView'; import { LabelBox } from '../nodes/LabelBox'; import { VideoBox } from '../nodes/VideoBox'; import { ObservableReactComponent } from '../ObservableReactComponent'; import './CollectionStackedTimeline.scss'; +import { FieldViewProps } from '../nodes/FieldView'; export type CollectionStackedTimelineProps = { Play: () => void; @@ -367,7 +368,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData, xp: number) { if (super.onInternalDrop(e, de)) { // determine x coordinate of drop and assign it to the documents being dragged --- see internalDocDrop of collectionFreeFormView.tsx for how it's done when dropping onto a 2D freeform view - const localPt = this._props.ScreenToLocalTransform().transformPoint(de.x, de.y); + const localPt = this.ScreenToLocalBoxXf().transformPoint(de.x, de.y); const x = localPt[0] - docDragData.offset[0]; const timelinePt = this.toTimeline(x + this._scroll, this.timelineContentWidth); docDragData.droppedDocuments.forEach(drop => { @@ -502,7 +503,7 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack return this._props.PanelWidth() * this.zoomFactor; } // subtract size of container border - dictationScreenToLocalTransform = () => this._props.ScreenToLocalTransform().translate(0, -this.timelineContentHeight); + dictationScreenToLocalTransform = () => this.ScreenToLocalBoxXf().translate(0, -this.timelineContentHeight); isContentActive = () => this._props.isSelected() || this._props.isContentActive(); @@ -672,7 +673,7 @@ interface StackedTimelineAnchorProps { width: number; height: number; toTimeline: (screen_delta: number, width: number) => number; - styleProvider?: (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string) => any; + styleProvider?: StyleProviderFunc; playLink: (linkDoc: Doc, options: DocFocusOptions) => void; setTime: (time: number) => void; startTag: string; @@ -695,7 +696,7 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch _lastTimecode: number; _disposer: IReactionDisposer | undefined; - constructor(props: any) { + constructor(props: StackedTimelineAnchorProps) { super(props); makeObservable(this); this._lastTimecode = this._props.currentTimecode(); diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 16adf4b96..995f071ca 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -24,7 +24,7 @@ import { ContextMenuProps } from '../ContextMenuItem'; import { EditableView } from '../EditableView'; import { LightboxView } from '../LightboxView'; import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView'; -import { DocFocusOptions, DocumentView, DocumentViewProps } from '../nodes/DocumentView'; +import { DocFocusOptions, DocumentView, DocumentViewInternalProps, DocumentViewProps } from '../nodes/DocumentView'; import { FieldViewProps } from '../nodes/FieldView'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; import { StyleProp } from '../StyleProvider'; @@ -255,7 +255,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection const found = this._mainCont && Array.from(this._mainCont.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]); if (found) { const top = found.getBoundingClientRect().top; - const localTop = this._props.ScreenToLocalTransform().transformPoint(0, top); + const localTop = this.ScreenToLocalBoxXf().transformPoint(0, top); if (Math.floor(localTop[1]) !== 0) { let focusSpeed = options.zoomTime ?? 500; smoothScroll(focusSpeed, this._mainCont!, localTop[1] + this._mainCont!.scrollTop, options.easeFunc); @@ -265,7 +265,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection return undefined; }; - styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string) => { + styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewInternalProps | FieldViewProps>, property: string) => { if (property === StyleProp.Opacity && doc) { if (this._props.childOpacity) { return this._props.childOpacity(); @@ -370,7 +370,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection this._scroll; // must be referenced for document decorations to update when the text box container is scrolled const { translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv); // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform. so we have to subtract that off - return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this._props.ScreenToLocalTransform().Scale); + return new Transform(-translateX + (dref?.centeringX || 0), -translateY + (dref?.centeringY || 0), 1).scale(this.ScreenToLocalBoxXf().Scale); } getDocWidth(d?: Doc) { if (!d) return 0; @@ -567,7 +567,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection yMargin={this.yMargin} type={type} createDropTarget={this.createDashEventsTarget} - screenToLocalTransform={this._props.ScreenToLocalTransform} + screenToLocalTransform={this.ScreenToLocalBoxXf} /> ); }; @@ -611,7 +611,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection parent={this} type={type} createDropTarget={this.createDashEventsTarget} - screenToLocalTransform={this._props.ScreenToLocalTransform} + screenToLocalTransform={this.ScreenToLocalBoxXf} setDocHeight={this.setDocHeight} /> ); diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx index 7bbdb7073..7036ec41c 100644 --- a/src/client/views/collections/CollectionTimeView.tsx +++ b/src/client/views/collections/CollectionTimeView.tsx @@ -211,7 +211,6 @@ export class CollectionTimeView extends CollectionSubView() { Array.from(keySet).map(fieldKey => docItems.push({ description: ':' + fieldKey, event: () => (this.layoutDoc._pivotField = fieldKey), icon: 'compress-arrows-alt' })); docItems.push({ description: ':default', event: () => (this.layoutDoc._pivotField = undefined), icon: 'compress-arrows-alt' }); ContextMenu.Instance.addItem({ description: 'Pivot Fields ...', subitems: docItems, icon: 'eye' }); - const pt = this._props.ScreenToLocalTransform().inverse().transformPoint(x, y); ContextMenu.Instance.displayMenu(x, y, ':'); }; diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 7f8d42088..18e0b98ef 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -154,7 +154,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree } }; - screenToLocalTransform = () => this._props.ScreenToLocalTransform().translate(0, -this._headerHeight); + screenToLocalTransform = () => this.ScreenToLocalBoxXf().translate(0, -this._headerHeight); @action remove = (doc: Doc | Doc[]): boolean => { @@ -312,7 +312,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree return this.dataDoc === null ? null : ( <div className="collectionTreeView-titleBar" - ref={action((r: any) => (this._titleRef = r) && (this._titleHeight = r.getBoundingClientRect().height * this._props.ScreenToLocalTransform().Scale))} + ref={action((r: any) => (this._titleRef = r) && (this._titleHeight = r.getBoundingClientRect().height * this.ScreenToLocalBoxXf().Scale))} key={this.Document[Id]} style={!this.outlineMode ? { marginLeft: this.marginX(), paddingTop: this.marginTop() } : {}}> {this.outlineMode ? this.documentTitle : this.editableTitle} diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index c2f5ab2c0..4a239e4b1 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -112,7 +112,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<ViewBoxAnnotatab return viewField as any as CollectionViewType; } - screenToLocalTransform = () => (this._props.renderDepth ? this._props.ScreenToLocalTransform() : this._props.ScreenToLocalTransform().scale(this._props.PanelWidth() / this.bodyPanelWidth())); + screenToLocalTransform = () => (this._props.renderDepth ? this.ScreenToLocalBoxXf() : this.ScreenToLocalBoxXf().scale(this._props.PanelWidth() / this.bodyPanelWidth())); // prettier-ignore private renderSubView = (type: CollectionViewType | undefined, props: SubCollectionViewProps) => { TraceMobx(); diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index ac0ce7a2a..80808be92 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -29,7 +29,7 @@ import { LightboxView } from '../LightboxView'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { DefaultStyleProvider, StyleProp } from '../StyleProvider'; import { Colors } from '../global/globalEnums'; -import { DocFocusOptions, DocumentView, DocumentViewProps, OpenWhere, OpenWhereMod } from '../nodes/DocumentView'; +import { DocFocusOptions, DocumentView, DocumentViewInternalProps, DocumentViewProps, OpenWhere, OpenWhereMod } from '../nodes/DocumentView'; import { KeyValueBox } from '../nodes/KeyValueBox'; import { DashFieldView } from '../nodes/formattedText/DashFieldView'; import { PinProps, PresBox, PresMovement } from '../nodes/trails'; @@ -37,6 +37,7 @@ import { CollectionDockingView } from './CollectionDockingView'; import { CollectionView } from './CollectionView'; import './TabDocView.scss'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; +import { FieldViewProps } from '../nodes/FieldView'; const _global = (window /* browser */ || global) /* node */ as any; interface TabDocViewProps { @@ -426,7 +427,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> { ScreenToLocalTransform = () => { this._forceInvalidateScreenToLocal; const { translateX, translateY } = Utils.GetScreenTransform(this._mainCont?.children?.[0] as HTMLElement); - return CollectionDockingView.Instance?._props.ScreenToLocalTransform().translate(-translateX, -translateY) ?? Transform.Identity(); + return CollectionDockingView.Instance?.ScreenToLocalBoxXf().translate(-translateX, -translateY) ?? Transform.Identity(); }; PanelWidth = () => this._panelWidth; PanelHeight = () => this._panelHeight; @@ -527,7 +528,7 @@ class TabMiniThumb extends React.Component<TabMiniThumbProps> { } @observer export class TabMinimapView extends ObservableReactComponent<TabMinimapViewProps> { - static miniStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string): any => { + static miniStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewInternalProps | FieldViewProps>, property: string): any => { if (doc) { switch (property.split(':')[0]) { default: diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index f2ceaa681..01b80e209 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -27,7 +27,7 @@ import { UndoManager, undoBatch, undoable } from '../../util/UndoManager'; import { EditableView } from '../EditableView'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { StyleProp } from '../StyleProvider'; -import { DocumentView, DocumentViewInternal, DocumentViewProps, OpenWhere, StyleProviderFunc } from '../nodes/DocumentView'; +import { DocumentView, DocumentViewInternal, DocumentViewInternalProps, DocumentViewProps, OpenWhere, StyleProviderFunc } from '../nodes/DocumentView'; import { FieldViewProps } from '../nodes/FieldView'; import { KeyValueBox } from '../nodes/KeyValueBox'; import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; @@ -172,6 +172,8 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { return this._docRef?.IsSelected; } + ScreenToLocalTransform = () => this._props.ScreenToLocalTransform(); + childDocList(field: string) { const layout = Cast(Doc.LayoutField(this.Document), Doc, null); return DocListCast(this._props.dataDoc?.[field], DocListCast(layout?.[field], DocListCast(this.Document[field]))); @@ -447,11 +449,11 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { } refTransform = (ref: HTMLDivElement | undefined | null) => { - if (!ref) return this._props.ScreenToLocalTransform(); + if (!ref) return this.ScreenToLocalTransform(); const { scale, translateX, translateY } = Utils.GetScreenTransform(ref); const outerXf = Utils.GetScreenTransform(this.treeView.MainEle()); - const offset = this._props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY); - return this._props.ScreenToLocalTransform().translate(offset[0], offset[1]); + const offset = this.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY); + return this.ScreenToLocalTransform().translate(offset[0], offset[1]); }; docTransform = () => this.refTransform(this._dref?.ContentRef?.current); getTransform = () => this.refTransform(this._tref.current); @@ -511,7 +513,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { this._props.dragAction, this._props.addDocTab, this.titleStyleProvider, - this._props.ScreenToLocalTransform, + this.ScreenToLocalTransform, this._props.isContentActive, expandedWidth, this._props.renderDepth, @@ -671,7 +673,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { StrCast(this.Document.childDragAction, this._props.dragAction) as dropActionType, this._props.addDocTab, this.titleStyleProvider, - this._props.ScreenToLocalTransform, + this.ScreenToLocalTransform, this._props.isContentActive, this._props.panelWidth, this._props.renderDepth, @@ -865,7 +867,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { e.preventDefault(); } }; - titleStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => { + titleStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewInternalProps | FieldViewProps>, property: string): any => { if (!doc || doc !== this.Document) return this._props?.treeView?._props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView const treeView = this.treeView; @@ -897,7 +899,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> { } return treeView._props.styleProvider?.(doc, props, property); }; - embeddedStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => { + embeddedStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewInternalProps | FieldViewProps>, property: string): any => { if (property.startsWith(StyleProp.Decorations)) return null; return this._props?.treeView?._props.styleProvider?.(doc, props, property); // properties are inherited from the CollectionTreeView, not the hierarchical parent in the treeView }; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 6131fe037..5204633ea 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -22,8 +22,6 @@ export interface CollectionFreeFormLinkViewProps { LinkDocs: Doc[]; } -// props.screentolocatransform - @observer export class CollectionFreeFormLinkView extends ObservableReactComponent<CollectionFreeFormLinkViewProps> { @observable _opacity: number = 0; @@ -42,10 +40,10 @@ export class CollectionFreeFormLinkView extends ObservableReactComponent<Collect componentDidMount() { this._anchorDisposer = reaction( () => [ - this._props.A._props.ScreenToLocalTransform(), + this._props.A.screenToViewTransform(), Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_1, Doc, null)?.annotationOn, Doc, null)?.layout_scrollTop, Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_1, Doc, null)?.annotationOn, Doc, null)?.[DocCss], - this._props.B._props.ScreenToLocalTransform(), + this._props.B.screenToViewTransform(), Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_2, Doc, null)?.annotationOn, Doc, null)?.layout_scrollTop, Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_2, Doc, null)?.annotationOn, Doc, null)?.[DocCss], ], @@ -91,7 +89,7 @@ export class CollectionFreeFormLinkView extends ObservableReactComponent<Collect } } else { const m = targetAhyperlink.getBoundingClientRect(); - const mp = A._props.ScreenToLocalTransform().transformPoint(m.right, m.top + 5); + const mp = A.screenToViewTransform().transformPoint(m.right, m.top + 5); const mpx = mp[0] / A._props.PanelWidth(); const mpy = mp[1] / A._props.PanelHeight(); if (mpx >= 0 && mpx <= 1) linkDoc.link_anchor_1_x = mpx * 100; @@ -106,7 +104,7 @@ export class CollectionFreeFormLinkView extends ObservableReactComponent<Collect } } else { const m = targetBhyperlink.getBoundingClientRect(); - const mp = B._props.ScreenToLocalTransform().transformPoint(m.right, m.top + 5); + const mp = B.screenToViewTransform().transformPoint(m.right, m.top + 5); const mpx = mp[0] / B._props.PanelWidth(); const mpy = mp[1] / B._props.PanelHeight(); if (mpx >= 0 && mpx <= 1) linkDoc.link_anchor_2_x = mpx * 100; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 44654c8fe..0128647a4 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -38,7 +38,7 @@ import { ActiveInkWidth, InkingStroke, SetActiveInkColor, SetActiveInkWidth } fr import { LightboxView } from '../../LightboxView'; import { CollectionFreeFormDocumentView, CollectionFreeFormDocumentViewWrapper } from '../../nodes/CollectionFreeFormDocumentView'; import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp'; -import { DocFocusOptions, DocumentView, DocumentViewProps, OpenWhere } from '../../nodes/DocumentView'; +import { DocFocusOptions, DocumentView, DocumentViewInternalProps, DocumentViewProps, OpenWhere } from '../../nodes/DocumentView'; import { FieldViewProps } from '../../nodes/FieldView'; import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox'; import { PinProps, PresBox } from '../../nodes/trails/PresBox'; @@ -172,10 +172,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @computed get panZoomXf() { return new Transform(this.panX(), this.panY(), 1 / this.zoomScaling()); } - @computed get screenToLocalXf() { + @computed get screenToFreeformContentsXf() { return this._props - .ScreenToLocalTransform() - .scale(this._props.isAnnotationOverlay ? 1 : 1) + .ScreenToLocalTransform() // .translate(-this.cachedCenteringShiftX, -this.cachedCenteringShiftY) .transform(this.panZoomXf); } @@ -242,7 +241,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection zoomScaling = () => this.freeformData()?.scale ?? NumCast(Doc.Layout(this.Document)[this.scaleFieldKey], NumCast(Cast(this.Document.resolvedDataDoc, Doc, null)?.[this.scaleFieldKey], 1)); PanZoomCenterXf = () => this._props.isAnnotationOverlay && this.zoomScaling() === 1 ? `` : `translate(${this.cachedCenteringShiftX}px, ${this.cachedCenteringShiftY}px) scale(${this.zoomScaling()}) translate(${-this.panX()}px, ${-this.panY()}px)`; - ScreenToLocalXf = () => this.screenToLocalXf.copy(); + ScreenToContentsXf = () => this.screenToFreeformContentsXf.copy(); getActiveDocuments = () => this.childLayoutPairs.filter(pair => this.isCurrent(pair.layout)).map(pair => pair.layout); isAnyChildContentActive = () => this._props.isAnyChildContentActive(); addLiveTextBox = (newDoc: Doc) => { @@ -329,13 +328,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection findDoc(dv => res(dv)); }); - internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData, xp: number, yp: number) { + internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData) { if (!super.onInternalDrop(e, de)) return false; const refDoc = docDragData.droppedDocuments[0]; - const [xpo, ypo] = this._props.ScreenToLocalTransform().transformPoint(de.x, de.y); - const z = NumCast(refDoc.z); - const x = (z ? xpo : xp) - docDragData.offset[0]; - const y = (z ? ypo : yp) - docDragData.offset[1]; + const fromScreenXf = NumCast(refDoc.z) ? this.ScreenToLocalBoxXf() : this.screenToFreeformContentsXf; + const [xpo, ypo] = fromScreenXf.transformPoint(de.x, de.y); + const x = xpo - docDragData.offset[0]; + const y = ypo - docDragData.offset[1]; const zsorted = this.childLayoutPairs .map(pair => pair.layout) .slice() @@ -347,7 +346,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection for (let i = 0; i < docDragData.droppedDocuments.length; i++) { const d = docDragData.droppedDocuments[i]; const layoutDoc = Doc.Layout(d); - const delta = Utils.rotPt(x - dropPos[0], y - dropPos[1], this._props.ScreenToLocalTransform().Rotate); + const delta = Utils.rotPt(x - dropPos[0], y - dropPos[1], fromScreenXf.Rotate); if (this.Document._currentFrame !== undefined) { CollectionFreeFormDocumentView.setupKeyframes([d], NumCast(this.Document._currentFrame), false); const pvals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000)); // get filled in values (uses defaults when not value is specified) for position @@ -393,8 +392,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } @undoBatch - internalAnchorAnnoDrop(e: Event, annoDragData: DragManager.AnchorAnnoDragData, xp: number, yp: number) { + internalAnchorAnnoDrop(e: Event, de: DragManager.DropEvent, annoDragData: DragManager.AnchorAnnoDragData) { const dropCreator = annoDragData.dropDocCreator; + const [xp, yp] = this.screenToFreeformContentsXf.transformPoint(de.x, de.y); annoDragData.dropDocCreator = (annotationOn: Doc | undefined) => { const dropDoc = dropCreator(annotationOn); if (dropDoc) { @@ -408,20 +408,21 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } @undoBatch - internalLinkDrop(e: Event, de: DragManager.DropEvent, linkDragData: DragManager.LinkDragData, xp: number, yp: number) { + internalLinkDrop(e: Event, de: DragManager.DropEvent, linkDragData: DragManager.LinkDragData) { if (linkDragData.linkDragView.props.docViewPath().includes(this._props.docViewPath().lastElement())) { + const [x, y] = this.screenToFreeformContentsXf.transformPoint(de.x, de.y); let added = false; // do nothing if link is dropped into any freeform view parent of dragged document const source = !linkDragData.dragDocument.embedContainer || linkDragData.dragDocument.embedContainer !== this.Document - ? Docs.Create.TextDocument('', { _width: 200, _height: 75, x: xp, y: yp, title: 'dropped annotation' }) + ? Docs.Create.TextDocument('', { _width: 200, _height: 75, x, y, title: 'dropped annotation' }) : Docs.Create.FontIconDocument({ title: 'anchor', icon_label: '', followLinkToggle: true, icon: 'map-pin', - x: xp, - y: yp, + x, + y, backgroundColor: '#ACCEF7', layout_hideAllLinks: true, layout_hideLinkButton: true, @@ -441,14 +442,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } onInternalDrop = (e: Event, de: DragManager.DropEvent) => { - const [xp, yp] = this.screenToLocalXf.transformPoint(de.x, de.y); - if (de.complete.annoDragData?.dragDocument && super.onInternalDrop(e, de)) return this.internalAnchorAnnoDrop(e, de.complete.annoDragData, xp, yp); - else if (de.complete.linkDragData) return this.internalLinkDrop(e, de, de.complete.linkDragData, xp, yp); - else if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData, xp, yp); + if (de.complete.annoDragData?.dragDocument && super.onInternalDrop(e, de)) return this.internalAnchorAnnoDrop(e, de, de.complete.annoDragData); + else if (de.complete.linkDragData) return this.internalLinkDrop(e, de, de.complete.linkDragData); + else if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData); return false; }; - onExternalDrop = (e: React.DragEvent) => (([x, y]) => super.onExternalDrop(e, { x, y }))(this.screenToLocalXf.transformPoint(e.pageX, e.pageY)); + onExternalDrop = (e: React.DragEvent) => (([x, y]) => super.onExternalDrop(e, { x, y }))(this.screenToFreeformContentsXf.transformPoint(e.pageX, e.pageY)); static overlapping(doc1: Doc, doc2: Doc, clusterDistance: number) { const doc2Layout = Doc.Layout(doc2); @@ -489,7 +489,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection const { left, top } = clusterDocs[0].getBounds() || { left: 0, top: 0 }; const de = new DragManager.DocumentDragData(eles, e.ctrlKey || e.altKey ? 'embed' : undefined); de.moveDocument = this._props.moveDocument; - de.offset = this.screenToLocalXf.transformDirection(ptsParent.clientX - left, ptsParent.clientY - top); + de.offset = this.screenToFreeformContentsXf.transformDirection(ptsParent.clientX - left, ptsParent.clientY - top); DragManager.StartDocumentDrag( clusterDocs.map(v => v.ContentDiv!), de, @@ -586,7 +586,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection } }; - clusterStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string) => { + clusterStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewInternalProps | FieldViewProps>, property: string) => { let styleProp = this._props.styleProvider?.(doc, props, property); // bcz: check 'props' used to be renderDepth + 1 if (doc && this.childDocList?.includes(doc)) switch (property) { @@ -643,7 +643,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection break; case InkTool.None: if (!(this._props.layoutEngine?.() || StrCast(this.layoutDoc._layoutEngine))) { - this._hitCluster = this.pickCluster(this.screenToLocalXf.transformPoint(e.clientX, e.clientY)); + this._hitCluster = this.pickCluster(this.screenToFreeformContentsXf.transformPoint(e.clientX, e.clientY)); setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, emptyFunction, this._hitCluster !== -1 ? true : false, false); } break; @@ -664,8 +664,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection case GestureUtils.Gestures.Triangle: case GestureUtils.Gestures.Stroke: const points = ge.points; - const B = this.screenToLocalXf.transformBounds(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height); - const inkWidth = ActiveInkWidth() * this._props.ScreenToLocalTransform().Scale; + const B = this.screenToFreeformContentsXf.transformBounds(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height); + const inkWidth = ActiveInkWidth() * this.ScreenToLocalBoxXf().Scale; const inkDoc = Docs.Create.InkDocument( points, { title: ge.gesture.toString(), @@ -696,7 +696,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection break; case GestureUtils.Gestures.Text: if (ge.text) { - const B = this.screenToLocalXf.transformPoint(ge.points[0].X, ge.points[0].Y); + const B = this.screenToFreeformContentsXf.transformPoint(ge.points[0].X, ge.points[0].Y); this.addDocument(Docs.Create.TextDocument(ge.text, { title: ge.text, x: B[0], y: B[1] })); e.stopPropagation(); } @@ -719,7 +719,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection e.preventDefault(); } else if (this.isContentActive() && e.shiftKey) { // reset zoom of freeform view to 1-to-1 on a shift + double click - this.zoomSmoothlyAboutPt(this.screenToLocalXf.transformPoint(e.clientX, e.clientY), 1); + this.zoomSmoothlyAboutPt(this.screenToFreeformContentsXf.transformPoint(e.clientX, e.clientY), 1); e.stopPropagation(); e.preventDefault(); } @@ -738,8 +738,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection const shiftKey = e.shiftKey && !e.ctrlKey; PresBox.Instance?.pauseAutoPres(); this._props.DocumentView?.().clearViewTransition(); - const [dxi, dyi] = this.screenToLocalXf.transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); - const { x: dx, y: dy } = Utils.rotPt(dxi, dyi, this._props.ScreenToLocalTransform().Rotate); + const [dxi, dyi] = this.screenToFreeformContentsXf.transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); + const { x: dx, y: dy } = Utils.rotPt(dxi, dyi, this.ScreenToLocalBoxXf().Rotate); this.setPan(NumCast(this.Document[this.panXFieldKey]) - (ctrlKey ? 0 : dx), NumCast(this.Document[this.panYFieldKey]) - (shiftKey ? 0 : dy), 0, true); this._lastX = e.clientX; this._lastY = e.clientY; @@ -940,7 +940,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection if (this.Document.isGroup || this.Document[(this._props.viewField ?? '_') + 'freeform_noZoom']) return; let deltaScale = deltaY > 0 ? 1 / 1.05 : 1.05; if (deltaScale < 0) deltaScale = -deltaScale; - const [x, y] = this.screenToLocalXf.transformPoint(pointX, pointY); + const [x, y] = this.screenToFreeformContentsXf.transformPoint(pointX, pointY); const invTransform = this.panZoomXf.inverse(); if (deltaScale * invTransform.Scale > 20) { deltaScale = 20 / invTransform.Scale; @@ -982,7 +982,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection if (((!e.metaKey && !e.altKey) || Doc.UserDoc().freeformScrollMode === freeformScrollMode.Zoom) && this._props.isContentActive(true)) { const deltaX = e.shiftKey ? e.deltaX : e.ctrlKey ? 0 : e.deltaX; const deltaY = e.shiftKey ? 0 : e.ctrlKey ? e.deltaY : e.deltaY; - this.scrollPan({ deltaX: -deltaX * this.screenToLocalXf.Scale, deltaY: e.shiftKey ? 0 : -deltaY * this.screenToLocalXf.Scale }); + this.scrollPan({ deltaX: -deltaX * this.screenToFreeformContentsXf.Scale, deltaY: e.shiftKey ? 0 : -deltaY * this.screenToFreeformContentsXf.Scale }); break; } default: @@ -1040,9 +1040,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection const minPanY = NumCast(this.dataDoc._freeform_panY_min, 0); const maxPanX = NumCast(this.dataDoc._freeform_panX_max, this.nativeWidth); const newPanX = Math.min(minPanX + scale * maxPanX, Math.max(minPanX, panX)); - const fitYscroll = (((this.nativeHeight / this.nativeWidth) * this._props.PanelWidth() - this._props.PanelHeight()) * this._props.ScreenToLocalTransform().Scale) / minScale; + const fitYscroll = (((this.nativeHeight / this.nativeWidth) * this._props.PanelWidth() - this._props.PanelHeight()) * this.ScreenToLocalBoxXf().Scale) / minScale; const nativeHeight = (this._props.PanelHeight() / this._props.PanelWidth() / (this.nativeHeight / this.nativeWidth)) * this.nativeHeight; - const maxScrollTop = this.nativeHeight / this._props.ScreenToLocalTransform().Scale - this._props.PanelHeight(); + const maxScrollTop = this.nativeHeight / this.ScreenToLocalBoxXf().Scale - this._props.PanelHeight(); const maxPanY = minPanY + // minPanY + scrolling introduced by view scaling + scrolling introduced by layout_fitWidth scale * NumCast(this.dataDoc._panY_max, nativeHeight) + @@ -1116,11 +1116,11 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection zoomSmoothlyAboutPt(docpt: number[], scale: number, transitionTime = 500) { if (this.Document.isGroup) return; this.setPanZoomTransition(transitionTime); - const screenXY = this.screenToLocalXf.inverse().transformPoint(docpt[0], docpt[1]); + const screenXY = this.screenToFreeformContentsXf.inverse().transformPoint(docpt[0], docpt[1]); this.layoutDoc[this.scaleFieldKey] = scale; - const newScreenXY = this.screenToLocalXf.inverse().transformPoint(docpt[0], docpt[1]); + const newScreenXY = this.screenToFreeformContentsXf.inverse().transformPoint(docpt[0], docpt[1]); const scrDelta = { x: screenXY[0] - newScreenXY[0], y: screenXY[1] - newScreenXY[1] }; - const newpan = this.screenToLocalXf.transformDirection(scrDelta.x, scrDelta.y); + const newpan = this.screenToFreeformContentsXf.transformDirection(scrDelta.x, scrDelta.y); this.layoutDoc[this.panXFieldKey] = NumCast(this.layoutDoc[this.panXFieldKey]) - newpan[0]; this.layoutDoc[this.panYFieldKey] = NumCast(this.layoutDoc[this.panYFieldKey]) - newpan[1]; } @@ -1229,7 +1229,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection onKey={this.onKeyDown} onDoubleClick={this.onChildDoubleClickHandler} onBrowseClick={this.onBrowseClickHandler} - ScreenToLocalTransform={childLayout.z ? this._props.ScreenToLocalTransform : this.ScreenToLocalXf} + ScreenToLocalTransform={childLayout.z ? this.ScreenToLocalBoxXf : this.ScreenToContentsXf} PanelWidth={childLayout[Width]} PanelHeight={childLayout[Height]} childFilters={this.childDocFilters} @@ -1264,7 +1264,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return ( (this.addDocument?.( (doc instanceof Doc ? [doc] : doc).map(doc => { - const pt = this.screenToLocalXf.transformPoint(NumCast(doc.x), NumCast(doc.y)); + const pt = this.screenToFreeformContentsXf.transformPoint(NumCast(doc.x), NumCast(doc.y)); doc.x = pt[0]; doc.y = pt[1]; return doc; @@ -1437,7 +1437,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @observable _hideInfo = false; @action closeInfo = () => (this._hideInfo = true); - infoUI = () => (this._hideInfo || this.Document.annotationOn ? null : <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} close={this.closeInfo} />); + infoUI = () => (this._hideInfo || this.Document.annotationOn || this._props.renderDepth ? null : <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} close={this.closeInfo} />); componentDidMount() { this._props.setContentView?.(this); @@ -1601,7 +1601,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection promoteCollection = () => { const childDocs = this.childDocs.slice(); childDocs.forEach(doc => { - const scr = this.screenToLocalXf.inverse().transformPoint(NumCast(doc.x), NumCast(doc.y)); + const scr = this.screenToFreeformContentsXf.inverse().transformPoint(NumCast(doc.x), NumCast(doc.y)); doc.x = scr?.[0]; doc.y = scr?.[1]; }); @@ -1713,7 +1713,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection visited.add(this.Document); showGroupDragTarget && (this.GroupChildDrag = BoolCast(this.Document.isGroup)); const activeDocs = this.getActiveDocuments(); - const size = this.screenToLocalXf.transformDirection(this._props.PanelWidth(), this._props.PanelHeight()); + const size = this.screenToFreeformContentsXf.transformDirection(this._props.PanelWidth(), this._props.PanelHeight()); const selRect = { left: this.panX() - size[0] / 2, top: this.panY() - size[1] / 2, width: size[0], height: size[1] }; const docDims = (doc: Doc) => ({ left: NumCast(doc.x), top: NumCast(doc.y), width: NumCast(doc._width), height: NumCast(doc._height) }); const isDocInView = (doc: Doc, rect: { left: number; top: number; width: number; height: number }) => intersectRect(docDims(doc), rect); @@ -1725,7 +1725,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection const horizLines: number[] = []; const vertLines: number[] = []; - const invXf = this.screenToLocalXf.inverse(); + const invXf = this.screenToFreeformContentsXf.inverse(); snappableDocs .filter(doc => !doc.isGroup && (snapToDraggedDoc || (SnappingManager.IsResizing !== doc && !DragManager.docsBeingDragged.includes(doc)))) .forEach(doc => { @@ -1822,8 +1822,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection selectDocuments={this.selectDocuments} addDocument={this.addDocument} addLiveTextDocument={this.addLiveTextBox} - getContainerTransform={this._props.ScreenToLocalTransform} - getTransform={this.ScreenToLocalXf} + getContainerTransform={this.ScreenToLocalBoxXf} + getTransform={this.ScreenToContentsXf} panXFieldKey={this.panXFieldKey} panYFieldKey={this.panYFieldKey} isAnnotationOverlay={this.isAnnotationOverlay}> @@ -1859,7 +1859,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection }; lightboxPanelWidth = () => Math.max(0, this._props.PanelWidth() - 30); lightboxPanelHeight = () => Math.max(0, this._props.PanelHeight() - 30); - lightboxScreenToLocal = () => this._props.ScreenToLocalTransform().translate(-15, -15); + lightboxScreenToLocal = () => this.ScreenToLocalBoxXf().translate(-15, -15); onPassiveWheel = (e: WheelEvent) => { const docHeight = NumCast(this.Document[Doc.LayoutFieldKey(this.Document) + '_nativeHeight'], this.nativeHeight); const scrollable = NumCast(this.layoutDoc[this.scaleFieldKey], 1) === 1 && docHeight > this._props.PanelHeight() / this.nativeDimScaling; @@ -1950,7 +1950,7 @@ export function CollectionBrowseClick(dv: DocumentView, clientX: number, clientY } while (parFfview?.Document.isGroup) parFfview = parFfview.props.DocumentView?.().CollectionFreeFormView; const ffview = selfFfview && selfFfview.layoutDoc[selfFfview.scaleFieldKey] !== 0.5 ? selfFfview : parFfview; // if focus doc is a freeform that is not at it's default 0.5 scale, then zoom out on it. Otherwise, zoom out on the parent ffview - ffview?.zoomSmoothlyAboutPt(ffview.screenToLocalXf.transformPoint(clientX, clientY), ffview?.isAnnotationOverlay ? 1 : 0.5, browseTransitionTime); + ffview?.zoomSmoothlyAboutPt(ffview.screenToFreeformContentsXf.transformPoint(clientX, clientY), ffview?.isAnnotationOverlay ? 1 : 0.5, browseTransitionTime); Doc.linkFollowHighlight(dv?.props.Document, false); } }); diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 0f750c4f8..d078e1d4f 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -130,7 +130,7 @@ export class CollectionGridView extends CollectionSubView() { * Maps the x- and y- coordinates of the event to a grid cell. */ screenToCell(sx: number, sy: number) { - const pt = this._props.ScreenToLocalTransform().transformPoint(sx, sy); + const pt = this.ScreenToLocalBoxXf().transformPoint(sx, sy); const x = Math.floor(pt[0] / this.colWidthPlusGap); const y = Math.floor((pt[1] + this._scroll) / this.rowHeight); return { x, y }; @@ -159,7 +159,7 @@ export class CollectionGridView extends CollectionSubView() { const xypos = this.flexGrid ? layout : this.unflexedPosition(this.renderedLayoutList.findIndex(l => l.i === layout.i)); const pos = { x: xypos.x * this.colWidthPlusGap + this.margin, y: xypos.y * this.rowHeightPlusGap + this.margin - this._scroll }; - return this._props.ScreenToLocalTransform().translate(-pos.x, -pos.y); + return this.ScreenToLocalBoxXf().translate(-pos.x, -pos.y); }; /** @@ -390,7 +390,7 @@ export class CollectionGridView extends CollectionSubView() { numCols={this.numCols} rowHeight={this.rowHeight} setLayout={this.setLayout} - transformScale={this._props.ScreenToLocalTransform().Scale} + transformScale={this.ScreenToLocalBoxXf().Scale} compactType={this.compaction} // determines whether nodes should remain in position, be bound to the top, or to the left preventCollision={BoolCast(this.Document.gridPreventCollision)} // determines whether nodes should move out of the way (i.e. collide) when other nodes are dragged over them margin={this.margin} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index 5bea59e7b..563084af8 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -189,7 +189,7 @@ export class CollectionMulticolumnView extends CollectionSubView() { let offset = 0; for (const { layout: candidate } of this.childLayoutPairs) { if (candidate === layout) { - return this._props.ScreenToLocalTransform().translate(-offset / (this._props.NativeDimScaling?.() || 1), 0); + return this.ScreenToLocalBoxXf().translate(-offset / (this._props.NativeDimScaling?.() || 1), 0); } offset += this.lookupPixels(candidate) + resizerWidth; } diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index 3043eb0f8..bf0d39197 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -184,7 +184,7 @@ export class CollectionMultirowView extends CollectionSubView() { let offset = 0; for (const { layout: candidate } of this.childLayoutPairs) { if (candidate === layout) { - return this._props.ScreenToLocalTransform().translate(0, -offset / (this._props.NativeDimScaling?.() || 1)); + return this.ScreenToLocalBoxXf().translate(0, -offset / (this._props.NativeDimScaling?.() || 1)); } offset += this.lookupPixels(candidate) + resizerHeight; } diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 2546f5b02..492aed0ea 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -16,7 +16,7 @@ import { undoable, undoBatch } from '../../../util/UndoManager'; import { ContextMenu } from '../../ContextMenu'; import { EditableView } from '../../EditableView'; import { Colors } from '../../global/globalEnums'; -import { DocFocusOptions, DocumentView, DocumentViewProps } from '../../nodes/DocumentView'; +import { DocFocusOptions, DocumentView, DocumentViewInternalProps, DocumentViewProps } from '../../nodes/DocumentView'; import { KeyValueBox } from '../../nodes/KeyValueBox'; import { ObservableReactComponent } from '../../ObservableReactComponent'; import { DefaultStyleProvider, StyleProp } from '../../StyleProvider'; @@ -24,6 +24,7 @@ import { CollectionSubView } from '../CollectionSubView'; import './CollectionSchemaView.scss'; import { SchemaColumnHeader } from './SchemaColumnHeader'; import { SchemaRowBox } from './SchemaRowBox'; +import { FieldViewProps } from '../../nodes/FieldView'; export enum ColumnType { Number, @@ -321,8 +322,8 @@ export class CollectionSchemaView extends CollectionSubView() { change = this._displayColumnWidths[shrinking] - CollectionSchemaView._minColWidth; } - this._displayColumnWidths[shrinking] -= change * this._props.ScreenToLocalTransform().Scale; - this._displayColumnWidths[growing] += change * this._props.ScreenToLocalTransform().Scale; + this._displayColumnWidths[shrinking] -= change * this.ScreenToLocalBoxXf().Scale; + this._displayColumnWidths[growing] += change * this.ScreenToLocalBoxXf().Scale; return false; } @@ -379,7 +380,7 @@ export class CollectionSchemaView extends CollectionSubView() { @action highlightDropColumn = (e: PointerEvent) => { e.stopPropagation(); - const mouseX = this._props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[0]; + const mouseX = this.ScreenToLocalBoxXf().transformPoint(e.clientX, e.clientY)[0]; const index = this.findDropIndex(mouseX); this._colEles.forEach((colRef, i) => { let leftStyle = ''; @@ -439,7 +440,7 @@ export class CollectionSchemaView extends CollectionSubView() { onInternalDrop = (e: Event, de: DragManager.DropEvent) => { if (de.complete.columnDragData) { - const mouseX = this._props.ScreenToLocalTransform().transformPoint(de.x, de.y)[0]; + const mouseX = this.ScreenToLocalBoxXf().transformPoint(de.x, de.y)[0]; const index = this.findDropIndex(mouseX); this.moveColumn(de.complete.columnDragData.colIndex, index ?? de.complete.columnDragData.colIndex); @@ -483,7 +484,7 @@ export class CollectionSchemaView extends CollectionSubView() { const nativeWidth = this._previewRef!.getBoundingClientRect(); const minWidth = 40; const maxWidth = 1000; - const movedWidth = this._props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0]; + const movedWidth = this.ScreenToLocalBoxXf().transformDirection(nativeWidth.right - e.clientX, 0)[0]; const width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth; this.layoutDoc.schema_previewWidth = width; return false; @@ -507,7 +508,7 @@ export class CollectionSchemaView extends CollectionSubView() { const found = this._tableContentRef && Array.from(this._tableContentRef.getElementsByClassName('documentView-node')).find((node: any) => node.id === doc[Id]); if (found) { const rect = found.getBoundingClientRect(); - const localRect = this._props.ScreenToLocalTransform().transformBounds(rect.left, rect.top, rect.width, rect.height); + const localRect = this.ScreenToLocalBoxXf().transformBounds(rect.left, rect.top, rect.width, rect.height); if (localRect.y < this.rowHeightFunc() || localRect.y + localRect.height > this._props.PanelHeight()) { let focusSpeed = options.zoomTime ?? 50; smoothScroll(focusSpeed, this._tableContentRef!, localRect.y + this._tableContentRef!.scrollTop - this.rowHeightFunc(), options.easeFunc); @@ -829,7 +830,7 @@ export class CollectionSchemaView extends CollectionSubView() { rowHeightFunc = () => (BoolCast(this.layoutDoc._schema_singleLine) ? CollectionSchemaView._rowSingleLineHeight : CollectionSchemaView._rowHeight); sortedDocsFunc = () => this.sortedDocs; isContentActive = () => this._props.isSelected() || this._props.isContentActive(); - screenToLocal = () => this._props.ScreenToLocalTransform().translate(-this.tableWidth, 0); + screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0); previewWidthFunc = () => this.previewWidth; render() { return ( @@ -960,8 +961,8 @@ class CollectionSchemaViewDoc extends ObservableReactComponent<CollectionSchemaV } tableWidthFunc = () => this._props.schema.tableWidth; - screenToLocalXf = () => this._props.schema._props.ScreenToLocalTransform().translate(0, -this._props.rowHeight() - this._props.index * this._props.rowHeight()); - noOpacityStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string) => { + screenToLocalXf = () => this._props.schema.ScreenToLocalBoxXf().translate(0, -this._props.rowHeight() - this._props.index * this._props.rowHeight()); + noOpacityStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewInternalProps | FieldViewProps>, property: string) => { if (property === StyleProp.Opacity) return 1; return DefaultStyleProvider(doc, props, property); }; |