From a888150f2e220eff4629551aa03813f92aa0b12f Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 5 Feb 2024 22:56:04 -0500 Subject: changed backgroundColor to set on dataDocs. fixed pivoting on tags. fixed link description editing popup. fixed showing link editor in property view - still some weirdness in what is selected. fixed dragging tree view items to set dragData.treeview and be able to drop at bottom of tree. fixed addFolder menu option for TreeViews to add locally.. added a function to collect all docs of a given tag into a collection. fixed setting default font size to update autolayouts. changed dropping link onto same collection to not leave pushpin. fixed minimap thumb updating. added fieldvalue dropdown for dashFieldViews in text. --- src/client/util/SelectionManager.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/util/SelectionManager.ts') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index f2a327445..b79281802 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -51,8 +51,8 @@ export class SelectionManager { public static DeselectAll = (except?: Doc): void => { const found = this.Instance.SelectedViews.find(dv => dv.Document === except); - LinkManager.currentLink = undefined; - LinkManager.currentLinkAnchor = undefined; + LinkManager.Instance.currentLink = undefined; + LinkManager.Instance.currentLinkAnchor = undefined; runInAction(() => (this.Instance.SelectedSchemaDocument = undefined)); this.Instance.SelectedViews.forEach(dv => { dv.IsSelected = false; -- cgit v1.2.3-70-g09d2 From c6955fe2c0720a8e5f13bad91fdc0e2a6f76f8bd Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 6 Feb 2024 12:17:13 -0500 Subject: fixed setting text/line properties on linkBox. fixed setting current link on click. --- src/client/util/SelectionManager.ts | 1 + src/client/views/StyleProvider.tsx | 6 +-- src/client/views/nodes/DocumentView.tsx | 1 - src/client/views/nodes/LinkBox.tsx | 49 ++++++++++++++-------- .../views/nodes/formattedText/RichTextMenu.tsx | 16 ++++--- 5 files changed, 47 insertions(+), 26 deletions(-) (limited to 'src/client/util/SelectionManager.ts') diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index b79281802..eddc7fc16 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -38,6 +38,7 @@ export class SelectionManager { this.Instance.SelectedViews.push(docView); docView.IsSelected = true; docView._props.whenChildContentsActiveChanged(true); + docView.ComponentView?.select?.(false, false); } }); diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 0e38790b6..b7e64d9a8 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -131,9 +131,9 @@ export function DefaultStyleProvider(doc: Opt, props: Opt (sendToBack ? documentView._props.bringToFront?.(this.Document, true) : - this._componentView?.select?.(e.ctrlKey || e.metaKey, e.shiftKey) ?? this._props.select(e.ctrlKey||e.shiftKey, e.metaKey))); const waitFordblclick = this._props.waitForDoubleClickToClick?.() ?? this.Document.waitForDoubleClickToClick; if ((clickFunc && waitFordblclick !== 'never') || waitFordblclick === 'always') { diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx index 7ade846e7..07511d0ec 100644 --- a/src/client/views/nodes/LinkBox.tsx +++ b/src/client/views/nodes/LinkBox.tsx @@ -1,10 +1,10 @@ import { Bezier } from 'bezier-js'; -import { computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Id } from '../../../fields/FieldSymbols'; import { DocCast, NumCast, StrCast } from '../../../fields/Types'; -import { aggregateBounds, emptyFunction, returnAlways, returnFalse, setupMoveUpEvents, Utils } from '../../../Utils'; +import { aggregateBounds, emptyFunction, lightOrDark, returnAlways, returnFalse, setupMoveUpEvents, Utils } from '../../../Utils'; import { DocumentManager } from '../../util/DocumentManager'; import { Transform } from '../../util/Transform'; import { CollectionFreeFormView } from '../collections/collectionFreeForm'; @@ -110,21 +110,33 @@ export class LinkBox extends ViewBoxBaseComponent() { { fireImmediately: true } ); } + + select = (ctrlKey: boolean, shiftKey: boolean) => { + LinkManager.Instance.currentLink = this.Document; + }; + descriptionDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, returnFalse, returnFalse, () => { - LinkManager.Instance.currentLink = this.Document; - LinkDescriptionPopup.Instance.popupX = e.clientX; - LinkDescriptionPopup.Instance.popupY = e.clientY; - LinkDescriptionPopup.Instance.display = true; + setupMoveUpEvents( + this, + e, + returnFalse, + returnFalse, + () => { + LinkManager.Instance.currentLink = this.Document; + LinkDescriptionPopup.Instance.popupX = e.clientX; + LinkDescriptionPopup.Instance.popupY = e.clientY; + LinkDescriptionPopup.Instance.display = true; - const rect = document.body.getBoundingClientRect(); - if (LinkDescriptionPopup.Instance.popupX + 200 > rect.width) { - LinkDescriptionPopup.Instance.popupX -= 190; - } - if (LinkDescriptionPopup.Instance.popupY + 100 > rect.height) { - LinkDescriptionPopup.Instance.popupY -= 40; - } - }); + const rect = document.body.getBoundingClientRect(); + if (LinkDescriptionPopup.Instance.popupX + 200 > rect.width) { + LinkDescriptionPopup.Instance.popupX -= 190; + } + if (LinkDescriptionPopup.Instance.popupY + 100 > rect.height) { + LinkDescriptionPopup.Instance.popupY -= 40; + } + }, + false + ); }; componentWillUnmount(): void { this.disposer?.(); @@ -134,12 +146,15 @@ export class LinkBox extends ViewBoxBaseComponent() { if (this.renderProps) { const highlight = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Highlighting); const highlightColor = highlight?.highlightIndex ? highlight?.highlightColor : undefined; + const fontFamily = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontFamily); + const fontSize = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontSize); + const color = (c => (c !== 'transparent' ? c : undefined))(StrCast(this.layoutDoc.link_fontColor)); const { pts, lx, ty, rx, by } = this.renderProps; const bez = new Bezier(pts.map(p => ({ x: p[0] - lx, y: p[1] - ty }))); const { x, y } = bez.get(0.5); const linkDesc = StrCast(this.dataDoc.link_description) || ' '; - const strokeWidth = NumCast(this.dataDoc.stroke_width, 4); + const strokeWidth = NumCast(this.Document.stroke_width, 4); const dash = StrCast(this.Document.stroke_dash); const strokeDasharray = dash && Number(dash) ? String(strokeWidth * Number(dash)) : undefined; const pointerEvents = this._props.pointerEvents?.() === 'none' ? 'none' : 'all'; @@ -175,7 +190,7 @@ export class LinkBox extends ViewBoxBaseComponent() { style={{ pointerEvents, background: stroke }} x={x} y={y}> -  {linkDesc.substring(0, 50) + (linkDesc.length > 50 ? '...' : '')}  +  {linkDesc.substring(0, 50) + (linkDesc.length > 50 ? '...' : '')}  )} diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 5858c3b11..cd0cdaa74 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -141,12 +141,14 @@ export class RichTextMenu extends AntimodeMenu { const activeSizes = active.activeSizes; const activeColors = active.activeColors; const activeHighlights = active.activeHighlights; + const refDoc = SelectionManager.Views.lastElement()?.layoutDoc ?? Doc.UserDoc(); + const refField = (pfx => (pfx ? pfx + '_' : ''))(SelectionManager.Views.lastElement()?.LayoutFieldKey); this.activeListType = this.getActiveListStyle(); this._activeAlignment = this.getActiveAlignment(); - this._activeFontFamily = !activeFamilies.length ? StrCast(this.TextView?.Document._text_fontFamily, StrCast(Doc.UserDoc().fontFamily, 'Arial')) : activeFamilies.length === 1 ? String(activeFamilies[0]) : 'various'; - this._activeFontSize = !activeSizes.length ? StrCast(this.TextView?.Document.fontSize, StrCast(Doc.UserDoc().fontSize, '10px')) : activeSizes[0]; - this._activeFontColor = !activeColors.length ? StrCast(this.TextView?.Document.fontColor, StrCast(Doc.UserDoc().fontColor, 'black')) : activeColors.length > 0 ? String(activeColors[0]) : '...'; + this._activeFontFamily = !activeFamilies.length ? StrCast(this.TextView?.Document._text_fontFamily, StrCast(refDoc[refField + 'fontFamily'], 'Arial')) : activeFamilies.length === 1 ? String(activeFamilies[0]) : 'various'; + this._activeFontSize = !activeSizes.length ? StrCast(this.TextView?.Document.fontSize, StrCast(refDoc[refField + 'fontSize'], '10px')) : activeSizes[0]; + this._activeFontColor = !activeColors.length ? StrCast(this.TextView?.Document.fontColor, StrCast(refDoc[refField + 'fontColor'], 'black')) : activeColors.length > 0 ? String(activeColors[0]) : '...'; this._activeHighlightColor = !activeHighlights.length ? '' : activeHighlights.length > 0 ? String(activeHighlights[0]) : '...'; // update link in current selection @@ -358,8 +360,8 @@ export class RichTextMenu extends AntimodeMenu { this.setMark(fmark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(fmark)), true); this.view.focus(); } - } else if (SelectionManager.Views.some(dv => dv.ComponentView instanceof EquationBox)) { - SelectionManager.Views.forEach(dv => (dv.Document._text_fontSize = fontSize)); + } else if (SelectionManager.Views.length) { + SelectionManager.Views.forEach(dv => (dv.layoutDoc[dv.LayoutFieldKey + '_fontSize'] = fontSize)); } else Doc.UserDoc().fontSize = fontSize; this.updateMenu(this.view, undefined, this.props, this.layoutDoc); }; @@ -369,6 +371,8 @@ export class RichTextMenu extends AntimodeMenu { const fmark = this.view.state.schema.marks.pFontFamily.create({ family: family }); this.setMark(fmark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(fmark)), true); this.view.focus(); + } else if (SelectionManager.Views.length) { + SelectionManager.Views.forEach(dv => (dv.layoutDoc[dv.LayoutFieldKey + '_fontFamily'] = family)); } else Doc.UserDoc().fontFamily = family; this.updateMenu(this.view, undefined, this.props, this.layoutDoc); }; @@ -387,6 +391,8 @@ export class RichTextMenu extends AntimodeMenu { const colorMark = this.view.state.schema.mark(this.view.state.schema.marks.pFontColor, { color }); this.setMark(colorMark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(colorMark)), true); this.view.focus(); + } else if (SelectionManager.Views.length) { + SelectionManager.Views.forEach(dv => (dv.layoutDoc[dv.LayoutFieldKey + '_fontColor'] = color)); } else Doc.UserDoc().fontColor = color; this.updateMenu(this.view, undefined, this.props, this.layoutDoc); } -- cgit v1.2.3-70-g09d2 From 97bc8fb32741051554509eeaf9d223b327ebd611 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 7 Feb 2024 00:02:36 -0500 Subject: switch to xAnchor to clean up link lines. added transition to getBounds() so that LinkBox can follow animated transitions. added dataTransitions for stacking view. fixed presBox to be able to clear transition timers when a new slide transition is chosen. --- package-lock.json | 18 ++ package.json | 1 + src/client/documents/Documents.ts | 1 - src/client/util/DragManager.ts | 2 +- src/client/util/SelectionManager.ts | 8 +- src/client/views/DocComponent.tsx | 2 +- .../views/collections/CollectionStackingView.tsx | 12 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 15 +- src/client/views/nodes/DocumentView.tsx | 24 ++- src/client/views/nodes/LinkBox.tsx | 213 ++++++++------------- src/client/views/nodes/trails/PresBox.tsx | 7 +- 11 files changed, 141 insertions(+), 162 deletions(-) (limited to 'src/client/util/SelectionManager.ts') diff --git a/package-lock.json b/package-lock.json index aafc14a86..d85f54f51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -182,6 +182,7 @@ "react-measure": "^2.5.2", "react-resizable": "^3.0.5", "react-select": "^5.8.0", + "react-xarrows": "^2.0.2", "readline": "^1.3.0", "recharts": "^2.10.3", "rehype-raw": "^7.0.0", @@ -29602,6 +29603,23 @@ "react-dom": ">= 15.0.0" } }, + "node_modules/react-xarrows": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-xarrows/-/react-xarrows-2.0.2.tgz", + "integrity": "sha512-tDlAqaxHNmy0vegW/6NdhoWyXJq1LANX/WUAlHyzoHe9BwFVnJPPDghmDjYeVr7XWFmBrVTUrHsrW7GKYI6HtQ==", + "dependencies": { + "@types/prop-types": "^15.7.3", + "lodash": "^4.17.21", + "prop-types": "^15.7.2" + }, + "funding": { + "type": "individual", + "url": "https://www.paypal.com/donate?hosted_button_id=CRQ343F9VTRS8" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/reactcss": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz", diff --git a/package.json b/package.json index a94f8c9be..258bd4550 100644 --- a/package.json +++ b/package.json @@ -265,6 +265,7 @@ "react-measure": "^2.5.2", "react-resizable": "^3.0.5", "react-select": "^5.8.0", + "react-xarrows": "^2.0.2", "readline": "^1.3.0", "recharts": "^2.10.3", "rehype-raw": "^7.0.0", diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 95058da22..1978c144b 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -594,7 +594,6 @@ export namespace Docs { layout: { view: LinkBox, dataField: 'link' }, options: { childDontRegisterViews: true, - onClick: FollowLinkScript(), layout_hideLinkAnchors: true, _height: 1, _width: 1, diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 071b25a0e..a6ad0f1b3 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -243,7 +243,7 @@ export namespace DragManager { }; dragData.draggedDocuments.map(d => d.dragFactory); // does this help? trying to make sure the dragFactory Doc is loaded StartDrag(eles, dragData, downX, downY, options, finishDrag); - dragData.draggedViews.forEach(view => view.props.dragStarting?.(dragData)); + dragData.draggedViews.forEach(view => view.props.dragStarting?.()); return true; } diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index eddc7fc16..36b926053 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -52,9 +52,11 @@ export class SelectionManager { public static DeselectAll = (except?: Doc): void => { const found = this.Instance.SelectedViews.find(dv => dv.Document === except); - LinkManager.Instance.currentLink = undefined; - LinkManager.Instance.currentLinkAnchor = undefined; - runInAction(() => (this.Instance.SelectedSchemaDocument = undefined)); + runInAction(() => { + LinkManager.Instance.currentLink = undefined; + LinkManager.Instance.currentLinkAnchor = undefined; + this.Instance.SelectedSchemaDocument = undefined; + }); this.Instance.SelectedViews.forEach(dv => { dv.IsSelected = false; dv._props.whenChildContentsActiveChanged(false); diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 3c772bd42..dacd359c5 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -50,7 +50,7 @@ export interface ViewBoxInterface { dragConfig?: (dragData: DragManager.DocumentDragData) => void; // function to setup dragData in custom way (see TreeViews which add a tree view flag) incrementalRendering?: () => void; infoUI?: () => JSX.Element | null; - screenBounds?: () => Opt<{ left: number; top: number; right: number; bottom: number; center?: { X: number; Y: number } }>; + screenBounds?: () => Opt<{ left: number; top: number; right: number; bottom: number; transition?: string }>; ptToScreen?: (pt: { X: number; Y: number }) => { X: number; Y: number }; ptFromScreen?: (pt: { X: number; Y: number }) => { X: number; Y: number }; snapPt?: (pt: { X: number; Y: number }, excludeSegs?: number[]) => { nearestPt: { X: number; Y: number }; distance: number }; diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 89e72152a..54314f62c 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -135,14 +135,15 @@ export class CollectionStackingView extends CollectionSubView { const height = () => this.getDocHeight(d); const width = () => this.getDocWidth(d); + const trans = () => this.getDocTransition(d); // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap); // just getting the style - const style = this.isStackingView ? { margin: this.Document._stacking_alignCenter ? 'auto' : undefined, width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` }; + const style = this.isStackingView ? { margin: this.Document._stacking_alignCenter ? 'auto' : undefined, transition: trans(), width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` }; // So we're choosing whether we're going to render a column or a masonry doc return (
- {this.getDisplayDoc(d, width, i)} + {this.getDisplayDoc(d, width, trans, i)}
); }); @@ -309,7 +310,7 @@ export class CollectionStackingView extends CollectionSubView Cast(this.Document.childLayoutFitWidth, 'boolean', this._props.childLayoutFitWidth?.(doc) ?? Cast(doc.layout_fitWidth, 'boolean', null)); // this is what renders the document that you see on the screen // called in Children: this actually adds a document to our children list - getDisplayDoc(doc: Doc, width: () => number, count: number) { + getDisplayDoc(doc: Doc, width: () => number, trans: () => string, count: number) { const dataDoc = doc.isTemplateDoc || doc.isTemplateForField ? this._props.TemplateDataDocument : undefined; const height = () => this.getDocHeight(doc); const panelHeight = () => (this.isStackingView ? height() : Math.min(height(), this._props.PanelHeight())); @@ -330,6 +331,7 @@ export class CollectionStackingView extends CollectionSubView boolean; CollectionFreeFormView: CollectionFreeFormView; } @@ -56,7 +55,6 @@ export class CollectionFreeFormDocumentViewWrapper extends ObservableReactCompon @observable Height = this.props.height; @observable AutoDim = this.props.autoDim; @observable Transition = this.props.transition; - @observable DataTransition = this.props.dataTransition; CollectionFreeFormView = this.props.CollectionFreeFormView; // needed for type checking RenderCutoffProvider = this.props.RenderCutoffProvider; // needed for type checking @@ -83,7 +81,6 @@ export class CollectionFreeFormDocumentViewWrapper extends ObservableReactCompon w_Height = () => this.Height; // prettier-ignore w_AutoDim = () => this.AutoDim; // prettier-ignore w_Transition = () => this.Transition; // prettier-ignore - w_DataTransition = () => this.DataTransition; // prettier-ignore PanelWidth = () => this._props.autoDim ? this._props.PanelWidth?.() : this.Width; // prettier-ignore PanelHeight = () => this._props.autoDim ? this._props.PanelHeight?.() : this.Height; // prettier-ignore @@ -117,7 +114,6 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { w_Transition: () => string | undefined; w_Width: () => number; w_Height: () => number; - w_DataTransition: () => string | undefined; PanelWidth: () => number; PanelHeight: () => number; RenderCutoffProvider: (doc: Doc) => boolean; @@ -288,14 +284,21 @@ export class CollectionFreeFormDocumentView extends DocComponent {this._props.RenderCutoffProvider(this.Document) ? (
) : ( - + )}
); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 02f756f16..5efa028d1 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -104,6 +104,7 @@ export interface DocumentViewProps extends FieldViewSharedProps { dontHideOnDrag?: boolean; suppressSetHeight?: boolean; onClickScriptDisable?: 'never' | 'always'; // undefined = only when selected + DataTransition?: () => string | undefined; NativeWidth?: () => number; NativeHeight?: () => number; contextMenuItems?: () => { script: ScriptField; filter?: ScriptField; label: string; icon: string }[]; @@ -116,7 +117,6 @@ export class DocumentViewInternal extends DocComponent {this._props.hideTitle || (!showTitle && !this.layout_showCaption) ? ( this.viewBoxContents() @@ -1075,6 +1075,7 @@ export class DocumentView extends DocComponent() { private _disposers: { [name: string]: IReactionDisposer } = {}; private _viewTimer: NodeJS.Timeout | undefined; private _animEffectTimer: NodeJS.Timeout | undefined; + public Guid = Utils.GenerateGuid(); // a unique id associated with the main
. used by LinkBox's Xanchor to find the arrowhead locations. @computed public static get exploreMode() { return () => (SnappingManager.ExploreMode ? ScriptField.MakeScript('CollectionBrowseClick(documentView, clientX, clientY)', { documentView: 'any', clientX: 'number', clientY: 'number' })! : undefined); @@ -1151,6 +1152,7 @@ export class DocumentView extends DocComponent() { } componentWillUnmount() { + this._viewTimer && clearTimeout(this._viewTimer); runInAction(() => this.Document[DocViews].delete(this)); Object.values(this._disposers).forEach(disposer => disposer?.()); !BoolCast(this.Document.dontRegisterView, this._props.dontRegisterView) && DocumentManager.Instance.RemoveView(this); @@ -1174,21 +1176,23 @@ export class DocumentView extends DocComponent() { return this._props.LayoutTemplateString?.includes('link_anchor_2') ? DocCast(this.Document['link_anchor_2']) : this._props.LayoutTemplateString?.includes('link_anchor_1') ? DocCast(this.Document['link_anchor_1']) : undefined; } - @computed get getBounds() { - if (!this._docViewInternal?._contentDiv || Doc.AreProtosEqual(this.Document, Doc.UserDoc())) { + @computed get getBounds(): Opt<{ left: number; top: number; right: number; bottom: number; transition?: string }> { + if (!this.ContentDiv || Doc.AreProtosEqual(this.Document, Doc.UserDoc())) { return undefined; } - if (this._docViewInternal._componentView?.screenBounds?.()) { - return this._docViewInternal._componentView.screenBounds(); + if (this.ComponentView?.screenBounds?.()) { + return this.ComponentView.screenBounds(); } const xf = this.screenToContentsTransform().scale(this.nativeScaling).inverse(); const [[left, top], [right, bottom]] = [xf.transformPoint(0, 0), xf.transformPoint(this.panelWidth, this.panelHeight)]; if (this._props.LayoutTemplateString?.includes(LinkAnchorBox.name)) { - const docuBox = this._docViewInternal._contentDiv.getElementsByClassName('linkAnchorBox-cont'); - if (docuBox.length) return { ...docuBox[0].getBoundingClientRect(), center: undefined }; + const docuBox = this.ContentDiv.getElementsByClassName('linkAnchorBox-cont'); + if (docuBox.length) return { ...docuBox[0].getBoundingClientRect(), transition: undefined }; } - return { left, top, right, bottom }; + // transition is returned so that the bounds will 'update' at the end of an animated transition. This is needed by xAnchor in LinkBox + const transition = this.docViewPath().find((parent: DocumentView) => parent._props.DataTransition?.() || StrCast(parent.Document.dataTransition)); + return { left, top, right, bottom, transition: transition?._props.DataTransition?.() || StrCast(transition?.Document.dataTransition) }; } @computed get nativeWidth() { @@ -1385,7 +1389,7 @@ export class DocumentView extends DocComponent() { const yshift = Math.abs(this.Yshift) <= 0.001 ? this._props.PanelHeight() : undefined; return ( -
(this._isHovering = true))} onPointerLeave={action(() => (this._isHovering = false))}> +
(this._isHovering = true))} onPointerLeave={action(() => (this._isHovering = false))}> {!this.Document || !this._props.PanelWidth() ? null : (
() { public static LayoutString(fieldKey: string = 'link') { return FieldView.LayoutString(LinkBox, fieldKey); } + disposer: IReactionDisposer | undefined; + @observable _forceAnimate = 0; // forces xArrow to animate when a transition is detected on something that affects an anchor + @observable _hide = false; // don't render if anchor is not visible since that breaks xAnchor constructor(props: FieldViewProps) { super(props); makeObservable(this); } + @computed get anchor1() { return this.anchor(1); } // prettier-ignore + @computed get anchor2() { return this.anchor(2); } // prettier-ignore - onClickScriptDisable = returnAlways; - @computed get anchor1() { - const anchor1 = DocCast(this.dataDoc.link_anchor_1); - const anchor_1 = anchor1?.layout_unrendered ? DocCast(anchor1.annotationOn) : anchor1; - return DocumentManager.Instance.getDocumentView(anchor_1, this.DocumentView?.().containerViewPath?.().lastElement()); - } - @computed get anchor2() { - const anchor2 = DocCast(this.dataDoc.link_anchor_2); - const anchor_2 = anchor2?.layout_unrendered ? DocCast(anchor2.annotationOn) : anchor2; - return DocumentManager.Instance.getDocumentView(anchor_2, this.DocumentView?.().containerViewPath?.().lastElement()); - } - screenBounds = () => { - if (this.layoutDoc._layout_isSvg && this.anchor1 && this.anchor2 && this.anchor1.CollectionFreeFormView) { - const a_invXf = this.anchor1.screenToViewTransform().inverse(); - const b_invXf = this.anchor2.screenToViewTransform().inverse(); - const a_scrBds = { tl: a_invXf.transformPoint(0, 0), br: a_invXf.transformPoint(NumCast(this.anchor1.Document._width), NumCast(this.anchor1.Document._height)) }; - const b_scrBds = { tl: b_invXf.transformPoint(0, 0), br: b_invXf.transformPoint(NumCast(this.anchor2.Document._width), NumCast(this.anchor2.Document._height)) }; - - const pts = [] as number[][]; - pts.push([(a_scrBds.tl[0] + a_scrBds.br[0]) / 2, (a_scrBds.tl[1] + a_scrBds.br[1]) / 2]); - pts.push(Utils.getNearestPointInPerimeter(a_scrBds.tl[0], a_scrBds.tl[1], a_scrBds.br[0] - a_scrBds.tl[0], a_scrBds.br[1] - a_scrBds.tl[1], (b_scrBds.tl[0] + b_scrBds.br[0]) / 2, (b_scrBds.tl[1] + b_scrBds.br[1]) / 2)); - pts.push(Utils.getNearestPointInPerimeter(b_scrBds.tl[0], b_scrBds.tl[1], b_scrBds.br[0] - b_scrBds.tl[0], b_scrBds.br[1] - b_scrBds.tl[1], (a_scrBds.tl[0] + a_scrBds.br[0]) / 2, (a_scrBds.tl[1] + a_scrBds.br[1]) / 2)); - pts.push([(b_scrBds.tl[0] + b_scrBds.br[0]) / 2, (b_scrBds.tl[1] + b_scrBds.br[1]) / 2]); - const agg = aggregateBounds( - pts.map(pt => ({ x: pt[0], y: pt[1] })), - 0, - 0 - ); - return { left: agg.x, top: agg.y, right: agg.r, bottom: agg.b, center: undefined }; - } - return undefined; + anchor = (which: number) => { + const anch = DocCast(this.dataDoc['link_anchor_' + which]); + const anchor = anch?.layout_unrendered ? DocCast(anch.annotationOn) : anch; + return DocumentManager.Instance.getDocumentView(anchor, this.DocumentView?.().containerViewPath?.().lastElement()); }; - disposer: IReactionDisposer | undefined; + componentWillUnmount(): void { + this.disposer?.(); + } componentDidMount() { this._props.setContentViewBox?.(this); this.disposer = reaction( - () => { - if (this.layoutDoc._layout_isSvg && (this.anchor1 || this.anchor2)?.CollectionFreeFormView) { - const a = (this.anchor1 ?? this.anchor2)!; - const b = (this.anchor2 ?? this.anchor1)!; - - const parxf = this.DocumentView?.().containerViewPath?.().lastElement().ComponentView as CollectionFreeFormView; - const this_xf = parxf?.screenToFreeformContentsXf ?? Transform.Identity; //this.ScreenToLocalTransform(); - const a_invXf = a.screenToViewTransform().inverse(); - const b_invXf = b.screenToViewTransform().inverse(); - const a_scrBds = { tl: a_invXf.transformPoint(0, 0), br: a_invXf.transformPoint(NumCast(a.Document._width), NumCast(a.Document._height)) }; - const b_scrBds = { tl: b_invXf.transformPoint(0, 0), br: b_invXf.transformPoint(NumCast(b.Document._width), NumCast(b.Document._height)) }; - const a_bds = { tl: this_xf.transformPoint(a_scrBds.tl[0], a_scrBds.tl[1]), br: this_xf.transformPoint(a_scrBds.br[0], a_scrBds.br[1]) }; - const b_bds = { tl: this_xf.transformPoint(b_scrBds.tl[0], b_scrBds.tl[1]), br: this_xf.transformPoint(b_scrBds.br[0], b_scrBds.br[1]) }; - - const ppt1 = [(a_bds.tl[0] + a_bds.br[0]) / 2, (a_bds.tl[1] + a_bds.br[1]) / 2]; - const pt1 = Utils.getNearestPointInPerimeter(a_bds.tl[0], a_bds.tl[1], a_bds.br[0] - a_bds.tl[0], a_bds.br[1] - a_bds.tl[1], (b_bds.tl[0] + b_bds.br[0]) / 2, (b_bds.tl[1] + b_bds.br[1]) / 2); - const pt2 = Utils.getNearestPointInPerimeter(b_bds.tl[0], b_bds.tl[1], b_bds.br[0] - b_bds.tl[0], b_bds.br[1] - b_bds.tl[1], (a_bds.tl[0] + a_bds.br[0]) / 2, (a_bds.tl[1] + a_bds.br[1]) / 2); - const ppt2 = [(b_bds.tl[0] + b_bds.br[0]) / 2, (b_bds.tl[1] + b_bds.br[1]) / 2]; - - const pts = [ppt1, pt1, pt2, ppt2].map(pt => [pt[0], pt[1]]); - const [lx, rx, ty, by] = [Math.min(pt1[0], pt2[0]), Math.max(pt1[0], pt2[0]), Math.min(pt1[1], pt2[1]), Math.max(pt1[1], pt2[1])]; - return { pts, lx, rx, ty, by }; - } - return undefined; - }, - params => { - this.renderProps = params; - if (params) { - if ( - Math.abs(params.lx - NumCast(this.layoutDoc.x)) > 1e-5 || - Math.abs(params.ty - NumCast(this.layoutDoc.y)) > 1e-5 || - Math.abs(params.rx - params.lx - NumCast(this.layoutDoc._width)) > 1e-5 || - Math.abs(params.by - params.ty - NumCast(this.layoutDoc._height)) > 1e-5 - ) { - this.layoutDoc.x = params?.lx; - this.layoutDoc.y = params?.ty; - this.layoutDoc._width = Math.max(1, params.rx - params?.lx); - this.layoutDoc._height = Math.max(1, params?.by - params?.ty); - } - } else { - this.layoutDoc._width = Math.max(50, NumCast(this.layoutDoc._width)); - this.layoutDoc._height = Math.max(50, NumCast(this.layoutDoc._height)); - } + () => ({ drag: SnappingManager.IsDragging, a: this.anchor1, b: this.anchor2 }), + ({ drag, a, b }) => { + setTimeout( + // need to wait for drag manager to set 'hidden' flag on dragged elements + action(() => { + let a1 = a && document.getElementById(a.Guid); + let a2 = b && document.getElementById(b.Guid); + if (!a1 || !a2 || (a?.ContentDiv as any)?.hidden || (b?.ContentDiv as any)?.hidden) this._hide = true; + else { + for (; a1 && !a1.hidden; a1 = a1.parentElement); + for (; a2 && !a2.hidden; a2 = a2.parentElement); + this._hide = a1 || a2 ? true : false; + } + }) + ); }, { fireImmediately: true } ); } - select = (ctrlKey: boolean, shiftKey: boolean) => { - LinkManager.Instance.currentLink = this.Document; - }; + select = (ctrlKey: boolean, shiftKey: boolean) => (LinkManager.Instance.currentLink = this.Document); descriptionDown = (e: React.PointerEvent) => { setupMoveUpEvents( @@ -121,7 +69,7 @@ export class LinkBox extends ViewBoxBaseComponent() { e, returnFalse, returnFalse, - () => { + action(() => { LinkManager.Instance.currentLink = this.Document; LinkDescriptionPopup.Instance.popupX = e.clientX; LinkDescriptionPopup.Instance.popupY = e.clientY; @@ -134,69 +82,66 @@ export class LinkBox extends ViewBoxBaseComponent() { if (LinkDescriptionPopup.Instance.popupY + 100 > rect.height) { LinkDescriptionPopup.Instance.popupY -= 40; } - }, + }), false ); }; - componentWillUnmount(): void { - this.disposer?.(); - } - @observable renderProps: { lx: number; rx: number; ty: number; by: number; pts: number[][] } | undefined = undefined; render() { - if (this.renderProps) { + trace(); + const a = this.anchor1; + const b = this.anchor2; + this._forceAnimate; + + if (a && b && !this._hide) { + const axf = a.screenToViewTransform(); // these force re-render when a or b moves (so do NOT remove) + const bxf = b.screenToViewTransform(); + const scale = a.CollectionFreeFormView === this.DocumentView?.().CollectionFreeFormView ? axf.Scale : bxf.Scale; + const at = a.getBounds?.transition; // these force re-render when a or b change size and at the end of an animated transition + const bt = b.getBounds?.transition; + if (at || bt) setTimeout(action(() => (this._forceAnimate = this._forceAnimate + 0.01))); // this forces an update during a transition animation const highlight = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Highlighting); const highlightColor = highlight?.highlightIndex ? highlight?.highlightColor : undefined; const fontFamily = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontFamily); const fontSize = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontSize); const color = (c => (c !== 'transparent' ? c : undefined))(StrCast(this.layoutDoc.link_fontColor)); - - const { pts, lx, ty, rx, by } = this.renderProps; - const bez = new Bezier(pts.map(p => ({ x: p[0] - lx, y: p[1] - ty }))); - const { x, y } = bez.get(0.5); - const linkDesc = StrCast(this.dataDoc.link_description) || ' '; - const strokeWidth = NumCast(this.Document.stroke_width, 4); + const { strokeWidth, stroke_startMarker, stroke_endMarker } = this.Document; const dash = StrCast(this.Document.stroke_dash); - const strokeDasharray = dash && Number(dash) ? String(strokeWidth * Number(dash)) : undefined; - const pointerEvents = this._props.pointerEvents?.() === 'none' ? 'none' : 'all'; const stroke = highlightColor ?? 'lightblue'; + + const linkDesc = StrCast(this.dataDoc.link_description) || ' '; + const labelText = linkDesc.substring(0, 50) + (linkDesc.length > 50 ? '...' : ''); return ( -
- - - - - - - - - - - - {!linkDesc.trim().length ? ( - - ) : ( - -  {linkDesc.substring(0, 50) + (linkDesc.length > 50 ? '...' : '')}  - - )} - -
+ borderRadius: '20%', // + padding: '3', + pointerEvents: this._props.isDocumentActive?.() ? 'all' : undefined, + background: stroke, + color: color || lightOrDark(stroke), + fontSize, + fontFamily /*, fontStyle: 'italic'*/, + }}> + {labelText} +
+ } + passProps={{ onPointerDown: this.descriptionDown }} + /> ); } + return null; return (
() { bestTarget.rotation = NumCast(activeItem.config_rotation, NumCast(bestTarget.rotation)); bestTarget.width = NumCast(activeItem.config_width, NumCast(bestTarget.width)); bestTarget.height = NumCast(activeItem.config_height, NumCast(bestTarget.height)); - setTimeout(() => (bestTarget._dataTransition = undefined), transTime + 10); + bestTarget[TransitionTimer] && clearTimeout(bestTarget[TransitionTimer]); + bestTarget[TransitionTimer] = setTimeout(() => (bestTarget[TransitionTimer] = bestTarget._dataTransition = undefined), transTime + 10); changed = true; } } @@ -441,7 +442,7 @@ export class PresBox extends ViewBoxBaseComponent() { const bestTargetData = bestTarget[DocData]; const current = bestTargetData[fkey]; const hash = bestTargetData[fkey] ? stringHash(Field.toString(bestTargetData[fkey] as Field)) : undefined; - if (hash) bestTargetData[fkey + '_' +hash] = current instanceof ObjectField ? current[Copy]() : current; + if (hash) bestTargetData[fkey + '_' + hash] = current instanceof ObjectField ? current[Copy]() : current; bestTargetData[fkey] = activeItem.config_data instanceof ObjectField ? activeItem.config_data[Copy]() : activeItem.config_data; } bestTarget[fkey + '_usePath'] = activeItem.config_usePath; -- cgit v1.2.3-70-g09d2