From f1dea8f31886c1e5e3d8bb772434009803b8fb8a Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 28 Feb 2023 14:47:27 -0500 Subject: added view spec capture options to complete link --- src/client/views/DocumentButtonBar.scss | 19 +++--- src/client/views/DocumentButtonBar.tsx | 70 ++++++++++++++++++++-- src/client/views/nodes/DocumentLinksButton.tsx | 63 ++----------------- .../views/nodes/formattedText/FormattedTextBox.tsx | 15 ++++- 4 files changed, 91 insertions(+), 76 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss index 835d6c8bb..1abf33cac 100644 --- a/src/client/views/DocumentButtonBar.scss +++ b/src/client/views/DocumentButtonBar.scss @@ -18,6 +18,8 @@ $linkGap: 3px; cursor: pointer; } +.documentButtonBar-endLinkTypes, +.documentButtonBar-linkTypes, .documentButtonBar-followTypes, .documentButtonBar-pinTypes { position: absolute; @@ -28,15 +30,6 @@ $linkGap: 3px; height: 20px; align-items: center; } -.documentButtonBar-linkTypes { - position: absolute; - display: none; - width: 60px; - top: -14px; - background: black; - height: 20px; - align-items: center; -} .documentButtonBar-followTypes { width: 20px; display: none; @@ -72,6 +65,14 @@ $linkGap: 3px; } } } +.documentButtonBar-endLink { + color: white; + &:hover { + .documentButtonBar-endLinkTypes { + display: flex; + } + } +} .documentButtonBar-pinIcon { &:hover { diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 9298c881c..20c35739e 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -28,6 +28,7 @@ import { TemplateMenu } from './TemplateMenu'; import React = require('react'); import { DocumentType } from '../documents/DocumentTypes'; import { FontIconBox } from './nodes/button/FontIconBox'; +import { PinProps } from './nodes/trails'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -285,6 +286,52 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV ); } + @observable subEndLink = ''; + @computed + get endLinkButton() { + const linkBtn = (pinDocLayout: boolean, pinDocContent: boolean, icon: IconProp) => { + const tooltip = `Finish Link and Save ${this.subEndLink} data`; + return !this.view0 ? null : ( + {tooltip}}> +
+ (this.subEndLink = (pinDocLayout ? 'Layout' : '') + (pinDocLayout && pinDocContent ? ' &' : '') + (pinDocContent ? ' Content' : '')))} + onPointerLeave={action(e => (this.subEndLink = ''))} + onClick={e => { + const docs = this.props + .views() + .filter(v => v) + .map(dv => dv!.rootDoc); + this.view0 && + DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.view0.props.Document, true, this.view0, { + pinDocLayout, + pinDocContent, + pinData: !pinDocContent ? {} : { poslayoutview: true, dataannos: true, dataview: true }, + } as PinProps); + + e.stopPropagation(); + }} + /> +
+ + ); + }; + return !this.view0 ? null : ( +
+
+ {linkBtn(true, false, 'window-maximize')} + {linkBtn(false, true, 'address-card')} + {linkBtn(true, true, 'id-card')} +
+ +
+ ); + } @observable subPin = ''; @computed @@ -497,6 +544,23 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV this._showLinkPopup = !this._showLinkPopup; e.stopPropagation(); }; + + @observable _captureEndLinkLayout = false; + @action + captureEndLinkLayout = (e: React.PointerEvent) => { + this._captureEndLinkLayout = !this._captureEndLinkLayout; + }; + @observable _captureEndLinkContent = false; + @action + captureEndLinkContent = (e: React.PointerEvent) => { + this._captureEndLinkContent = !this._captureEndLinkContent; + }; + + @action + captureEndLinkState = (e: React.PointerEvent) => { + this._captureEndLinkContent = this._captureEndLinkLayout = !this._captureEndLinkLayout; + }; + @action toggleTrail = (e: React.PointerEvent) => { const rootView = this.props.views()[0]; @@ -539,11 +603,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
{this.linkButton}
)} - {(DocumentLinksButton.StartLink || Doc.UserDoc()['documentLinksButton-fullMenu']) && DocumentLinksButton.StartLink !== doc ? ( -
- -
- ) : null} + {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== doc ?
{this.endLinkButton}
: null} { Doc.noviceMode ? null :
{this.templateButton}
/*
{this.metadataButton}
*/ diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 5783d0e57..a40599d85 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -128,48 +128,8 @@ export class DocumentLinksButton extends React.Component { - if (doubleTap && !this.props.StartLink) { - if (DocumentLinksButton.StartLink === this.props.View.props.Document) { - DocumentLinksButton.StartLink = undefined; - DocumentLinksButton.StartLinkView = undefined; - DocumentLinksButton.AnnotationId = undefined; - } else if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document) { - const sourceDoc = DocumentLinksButton.StartLink; - const targetDoc = this.props.View.ComponentView?.getAnchor?.(true) || this.props.View.Document; - const linkDoc = DocUtils.MakeLink({ doc: sourceDoc }, { doc: targetDoc }, 'links'); //why is long drag here when this is used for completing links by clicking? - - LinkManager.currentLink = linkDoc; - - runInAction(() => { - if (linkDoc) { - TaskCompletionBox.textDisplayed = 'Link Created'; - TaskCompletionBox.popupX = e.screenX; - TaskCompletionBox.popupY = e.screenY - 133; - TaskCompletionBox.taskCompleted = true; - - LinkDescriptionPopup.popupX = e.screenX; - LinkDescriptionPopup.popupY = e.screenY - 100; - LinkDescriptionPopup.descriptionPopup = true; - - const rect = document.body.getBoundingClientRect(); - if (LinkDescriptionPopup.popupX + 200 > rect.width) { - LinkDescriptionPopup.popupX -= 190; - TaskCompletionBox.popupX -= 40; - } - if (LinkDescriptionPopup.popupY + 100 > rect.height) { - LinkDescriptionPopup.popupY -= 40; - TaskCompletionBox.popupY -= 40; - } - - setTimeout( - action(() => (TaskCompletionBox.taskCompleted = false)), - 2500 - ); - } - }); - } - } + action(e => { + DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View); }) ) ); @@ -280,22 +240,7 @@ export class DocumentLinksButton extends React.Component ) : null} {!this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document ? ( //if the origin node is not this node -
- DocumentLinksButton.StartLink && - DocumentLinksButton.finishLinkClick( - e.clientX, - e.clientY, - DocumentLinksButton.StartLink, - this.props.View.props.Document, - true, - this.props.View, - (e.shiftKey ? { pinDocLayout: true, pinDocContent: true, pinData: { poslayoutview: true, dataannos: true, dataview: true } } : {}) as PinProps - ) - }> +
) : null} @@ -304,7 +249,7 @@ export class DocumentLinksButton extends React.Component this.makeLinkAnchor(undefined, OpenWhere.addRight, undefined, 'Anchored Selection', false, addAsAnnotation); + getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => { + if (!pinProps) return this.rootDoc; + const anchor = Docs.Create.TextanchorDocument({ annotationOn: this.rootDoc, unrendered: true }); + this.addDocument(anchor); + this.makeLinkAnchor(anchor, OpenWhere.addRight, undefined, 'Anchored Selection', false, addAsAnnotation); + PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), scrollable: true } }, this.rootDoc); + return anchor; + }; @action setupAnchorMenu = () => { @@ -988,8 +996,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent clearStyleSheetRules(FormattedTextBox._highlightStyleSheet), Math.max(this._focusSpeed || 0, 3000)); } } - - return this._didScroll ? this._focusSpeed : didToggle ? 1 : undefined; // if we actually scrolled, then return some focusSpeed + const finalFocusSpeed = this._didScroll ? this._focusSpeed : didToggle ? 1 : undefined; + PresBox.restoreTargetDocView(docView, textAnchor, finalFocusSpeed ?? 0); + return finalFocusSpeed; // if we actually scrolled, then return some focusSpeed }; // if the scroll height has changed and we're in autoHeight mode, then we need to update the textHeight component of the doc. -- cgit v1.2.3-70-g09d2