From fee3821a95072ae31dbe7d79ef9e032040ef7738 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 4 Mar 2021 10:06:31 -0500 Subject: fixed dynamic updating of equations and functions when underlying data cahnges. --- src/client/views/nodes/EquationBox.tsx | 7 +++++++ src/client/views/nodes/FunctionPlotBox.tsx | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx index f49405d02..a8c5430a9 100644 --- a/src/client/views/nodes/EquationBox.tsx +++ b/src/client/views/nodes/EquationBox.tsx @@ -32,6 +32,12 @@ export class EquationBox extends ViewBoxBaseComponent StrCast(this.dataDoc.text), + text => { + if (text && text !== this._ref.current!.mathField.latex()) { + this._ref.current!.mathField.latex(text); + } + }) reaction(() => this.props.isSelected(), selected => { if (this._ref.current) { @@ -78,6 +84,7 @@ export class EquationBox extends ViewBoxBaseComponent !e.ctrlKey && e.stopPropagation()} style={{ pointerEvents: !this.props.isSelected() ? "none" : undefined, diff --git a/src/client/views/nodes/FunctionPlotBox.tsx b/src/client/views/nodes/FunctionPlotBox.tsx index f35677014..9094651f3 100644 --- a/src/client/views/nodes/FunctionPlotBox.tsx +++ b/src/client/views/nodes/FunctionPlotBox.tsx @@ -33,7 +33,7 @@ export class FunctionPlotBox extends ViewBoxBaseComponent [DocListCast(this.dataDoc.data).lastElement()?.text, this.dataDoc.xRange, this.dataDoc.yRange], + reaction(() => [DocListCast(this.dataDoc.data).lastElement()?.text, this.layoutDoc.width, this.layoutDoc.height, this.dataDoc.xRange, this.dataDoc.yRange], () => this.createGraph()); } getAnchor = () => { -- cgit v1.2.3-70-g09d2 From 744dd170f0a4d4e4f2f83d763960edfd8cdb1924 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 4 Mar 2021 10:36:09 -0500 Subject: more adjustments to fitwidth behavior - want things to scroll vertically when they are fit width (eg images) --- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/ImageBox.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 74f00d1b3..b80539d1e 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -815,7 +815,7 @@ export class CollectionFreeFormView extends CollectionSubView { - if (this.layoutDoc._lockedTransform || CurrentUserUtils.OverlayDocs.includes(this.props.Document) || this.props.Document.treeViewOutlineMode === "outline") return; + if (this.layoutDoc._lockedTransform || this.layoutDoc._fitWidth || CurrentUserUtils.OverlayDocs.includes(this.props.Document) || this.props.Document.treeViewOutlineMode === "outline") return; if (!e.ctrlKey && this.props.Document.scrollHeight !== undefined) { // things that can scroll vertically should do that instead of zooming e.stopPropagation(); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 368964295..45dd3b545 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1011,7 +1011,7 @@ export class DocumentView extends React.Component { @computed get nativeScaling() { if (this.shouldNotScale()) return 1; const minTextScale = this.Document.type === DocumentType.RTF ? 0.1 : 0; - if (this.props.PanelHeight() / this.effectiveNativeHeight > this.props.PanelWidth() / this.effectiveNativeWidth) { + if (this.layoutDoc._fitWidth || this.props.PanelHeight() / this.effectiveNativeHeight > this.props.PanelWidth() / this.effectiveNativeWidth) { return Math.max(minTextScale, this.props.PanelWidth() / this.effectiveNativeWidth); // width-limited or fitWidth } return Math.max(minTextScale, this.props.PanelHeight() / this.effectiveNativeHeight); // height-limited or unscaled diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index 6d60c70bf..2536dbe16 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -101,7 +101,7 @@ margin: 0 auto; display: flex; height: 100%; - overflow: hidden; + overflow: auto; .imageBox-fadeBlocker { width: 100%; -- cgit v1.2.3-70-g09d2 From 454f004e7249c78696fa7085fcf10c59ab8e327a Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 4 Mar 2021 12:56:05 -0500 Subject: more fitWidth fixes for PDF --- .../collectionFreeForm/CollectionFreeFormView.tsx | 12 +++--------- src/client/views/nodes/PDFBox.tsx | 15 +++++++++++++-- src/client/views/nodes/formattedText/EquationView.tsx | 1 + 3 files changed, 17 insertions(+), 11 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index b80539d1e..a6a26a001 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -626,7 +626,7 @@ export class CollectionFreeFormView extends CollectionSubView { if ((Math.abs(e.pageX - this._downX) < 3 && Math.abs(e.pageY - this._downY) < 3)) { if (e.shiftKey && Date.now() - this._lastTap < 300) { // reset zoom of freeform view to 1-to-1 on a shift + double click - this.layoutDoc.targetScale && this.zoomSmoothlyAboutPt(this.getTransform().transformPoint(e.clientX, e.clientY), 1); + this.zoomSmoothlyAboutPt(this.getTransform().transformPoint(e.clientX, e.clientY), 1); e.stopPropagation(); e.preventDefault(); } @@ -815,7 +815,7 @@ export class CollectionFreeFormView extends CollectionSubView { - if (this.layoutDoc._lockedTransform || this.layoutDoc._fitWidth || CurrentUserUtils.OverlayDocs.includes(this.props.Document) || this.props.Document.treeViewOutlineMode === "outline") return; + if (this.layoutDoc._lockedTransform || (this.layoutDoc._fitWidth && this.layoutDoc.nativeHeight) || CurrentUserUtils.OverlayDocs.includes(this.props.Document) || this.props.Document.treeViewOutlineMode === "outline") return; if (!e.ctrlKey && this.props.Document.scrollHeight !== undefined) { // things that can scroll vertically should do that instead of zooming e.stopPropagation(); } @@ -824,7 +824,6 @@ export class CollectionFreeFormView extends CollectionSubView { - const anchor = Docs.Create.TextanchorDocument({ - title: StrCast(this.layoutDoc._viewType), - useLinkSmallAnchor: true, - hideLinkButton: true, - annotationOn: this.rootDoc - }); + df const proto = Doc.GetProto(anchor); proto[ViewSpecPrefix + "_viewType"] = this.layoutDoc._viewType; proto.docFilters = ObjectField.MakeCopy(this.layoutDoc.docFilters as ObjectField) || new List([]); diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 33147e7f3..c0e0296fe 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -6,7 +6,7 @@ import "pdfjs-dist/web/pdf_viewer.css"; import { Doc, Opt, WidthSym } from "../../../fields/Doc"; import { documentSchema } from '../../../fields/documentSchemas'; import { makeInterface } from "../../../fields/Schema"; -import { Cast, NumCast } from "../../../fields/Types"; +import { Cast, NumCast, StrCast } from '../../../fields/Types'; import { PdfField } from "../../../fields/URLField"; import { TraceMobx } from '../../../fields/util'; import { Utils, returnOne } from '../../../Utils'; @@ -23,6 +23,7 @@ import { pageSchema } from "./ImageBox"; import "./PDFBox.scss"; import React = require("react"); import { DocAfterFocusFunc } from './DocumentView'; +import { Docs } from '../../documents/Documents'; type PdfDocument = makeInterface<[typeof documentSchema, typeof panZoomSchema, typeof pageSchema]>; const PdfDocument = makeInterface(documentSchema, panZoomSchema, pageSchema); @@ -85,7 +86,17 @@ export class PDFBox extends ViewBoxAnnotatableComponent this.rootDoc; + getAnchor = () => { + const anchor = Docs.Create.TextanchorDocument({ + title: StrCast(this.rootDoc.title + " " + this.layoutDoc._scrollTop), + useLinkSmallAnchor: true, + hideLinkButton: true, + annotationOn: this.rootDoc, + y: NumCast(this.layoutDoc._scrollTop), + }); + this.addDocument(anchor); + return anchor; + } componentWillUnmount() { this._selectReactionDisposer?.(); } componentDidMount() { this.props.setContentView?.(this); diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx index eff018635..056e61846 100644 --- a/src/client/views/nodes/formattedText/EquationView.tsx +++ b/src/client/views/nodes/formattedText/EquationView.tsx @@ -62,6 +62,7 @@ export class EquationViewInternal extends React.Component display: "inline-block", width: this.props.width, height: this.props.height, + bottom: 3, }}> !e.ctrlKey && e.stopPropagation()} style={{ pointerEvents: !this.props.isSelected() ? "none" : undefined, diff --git a/src/client/views/nodes/FunctionPlotBox.tsx b/src/client/views/nodes/FunctionPlotBox.tsx index 9094651f3..e8bec9676 100644 --- a/src/client/views/nodes/FunctionPlotBox.tsx +++ b/src/client/views/nodes/FunctionPlotBox.tsx @@ -57,7 +57,6 @@ export class FunctionPlotBox extends ViewBoxBaseComponent; @@ -47,7 +47,8 @@ export class WebBox extends ViewBoxAnnotatableComponent(); private _iframeDragRef = React.createRef(); private _keyInput = React.createRef(); - private _ignoreScroll = false; + private _ignoreScroll = ""; + private _scrollTimer: any; private _initialScroll: Opt; @observable private _marqueeing: number[] | undefined; @observable private _url: string = "hello"; @@ -90,41 +91,63 @@ export class WebBox extends ViewBoxAnnotatableComponent { - if (this.webpage && this._outerRef.current) { - this.webpage.scrollLeft = 0; - this._outerRef.current.scrollTop = scrollTop; - this._outerRef.current.scrollLeft = 0; - this._ignoreScroll = true; - if (this.layoutDoc._scrollTop !== scrollTop) { - this.layoutDoc._scrollTop = scrollTop; - } - this._ignoreScroll = false; - } + resetIgnoreScroll = () => { + this._scrollTimer && clearTimeout(this._scrollTimer); + this._scrollTimer = setTimeout(() => { + this._scrollTimer = undefined; + this._ignoreScroll = ""; + }, 250); + this._outerRef.current && (this._outerRef.current.scrollLeft = 0); + } + iframeWheel = (e: any) => { + this._ignoreScroll = "iframe"; + this.resetIgnoreScroll(); + e.stopPropagation(); + } + onWebWheel = (e: React.WheelEvent) => { + this._ignoreScroll = "iframe"; + this.goTo(Math.max(0, (this.webpage?.scrollTop || 0) + (this._accumulatedGoTo + 1) * e.deltaY), 100); + this.resetIgnoreScroll(); + e.stopPropagation(); } - iframeWheel = (e: any) => this.webpage && e.target?.children && this.onWheelScroll(this.webpage.scrollTop); onWheel = (e: React.WheelEvent) => { - this._outerRef.current && this.onWheelScroll(this._outerRef.current.scrollTop); + this._ignoreScroll = "outer"; + this.resetIgnoreScroll(); e.stopPropagation(); } - - getAnchor = () => this.rootDoc; + iframeScroll = (e: any) => { + if (!this._ignoreScroll.includes("outer") && this._outerRef.current) { + this._outerRef.current.scrollTop = this.webpage?.scrollTop || 0; + this.layoutDoc._scrollTop = this.webpage?.scrollTop; + } + } + onScroll = (e: any) => { + if (!this._ignoreScroll.includes("iframe") && this.webpage) { + this.webpage.scrollTop = this._outerRef.current?.scrollTop || 0; + this.layoutDoc._scrollTop = this._outerRef.current?.scrollTop; + } + } scrollFocus = (doc: Doc, smooth: boolean) => { let focusSpeed: Opt; if (doc !== this.rootDoc && this.webpage && this._outerRef.current) { - const scrollTo = Utils.scrollIntoView(NumCast(doc.y), doc[HeightSym](), NumCast(this.layoutDoc._scrollTop), this.props.PanelHeight() / (this.props.scaling?.() || 1)); + const scrollTo = doc.type === DocumentType.TEXTANCHOR ? NumCast(doc.y) : Utils.scrollIntoView(NumCast(doc.y), doc[HeightSym](), NumCast(this.layoutDoc._scrollTop), this.props.PanelHeight() / (this.props.scaling?.() || 1)); if (scrollTo !== undefined) { this._initialScroll !== undefined && (this._initialScroll = scrollTo); - this._ignoreScroll = true; - this.goTo(scrollTo, focusSpeed = smooth ? 500 : 0); if (!LinkDocPreview.LinkInfo) { + this._ignoreScroll = "iframe|outer"; this.layoutDoc._scrollTop = scrollTo; + this._ignoreScroll = ""; } - this._ignoreScroll = false; + this._ignoreScroll = "iframe|outer"; + this.goTo(scrollTo, focusSpeed = smooth ? 500 : 0); + setTimeout(() => { + this._scrollTimer = undefined; + this._ignoreScroll = ""; + }, focusSpeed); } } else { this._initialScroll = NumCast(doc.y); @@ -133,6 +156,18 @@ export class WebBox extends ViewBoxAnnotatableComponent { + const anchor = Docs.Create.TextanchorDocument({ + title: StrCast(this.rootDoc.title + " " + this.layoutDoc._scrollTop), + useLinkSmallAnchor: true, + hideLinkButton: true, + annotationOn: this.rootDoc, + y: NumCast(this.layoutDoc._scrollTop), + }); + this.addDocument(anchor); + return anchor; + } + async componentDidMount() { this.props.setContentView?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document. this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link. @@ -172,7 +207,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { if (this._outerRef.current && this.webpage) { if (duration) { - smoothScroll(duration, this.webpage as any as HTMLElement, scrollTop); - smoothScroll(duration, this._outerRef.current, scrollTop); + if (this._accumulatedGoTo++) { + this._resetGoTo.resetGoTo = { to: scrollTop, duration }; + } else { + smoothScroll(duration, [this.webpage as any as HTMLElement, this._outerRef.current], scrollTop, () => this._accumulatedGoTo = 0, this._resetGoTo); + } } else { this.webpage.scrollTop = scrollTop; this._outerRef.current.scrollTop = scrollTop; @@ -202,6 +242,7 @@ export class WebBox extends ViewBoxAnnotatableComponent
{this.content}
e.stopPropagation()} + onScroll={this.onScroll} >
- + whenActiveChanged={this.whenActiveChanged} />
{this.annotationLayer} -- cgit v1.2.3-70-g09d2 From 5753b5105a5f0afccea74abbceaf9f1f96e16db1 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 4 Mar 2021 22:38:27 -0500 Subject: fixed template doc height setting (when autoHeight text field) --- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/formattedText/EquationView.tsx | 15 +++++++++------ src/client/views/nodes/formattedText/FormattedTextBox.tsx | 2 +- src/client/views/nodes/formattedText/nodes_rts.ts | 1 + 4 files changed, 12 insertions(+), 8 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 45dd3b545..a85082f26 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -757,7 +757,7 @@ export class DocumentViewInternal extends DocComponent this.props.ScreenToLocalTransform().translate(0, -this.headerMargin); contentScaling = () => this.ContentScale; onClickFunc = () => this.onClickHandler; - setHeight = (height: number) => this.rootDoc._height = height; + setHeight = (height: number) => this.layoutDoc._height = height; setContentView = (view: { getAnchor?: () => Doc, forward?: () => boolean, back?: () => boolean }) => this._componentView = view; @observable contentsActive: () => boolean = returnFalse; @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive; diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx index 056e61846..15f15a11e 100644 --- a/src/client/views/nodes/formattedText/EquationView.tsx +++ b/src/client/views/nodes/formattedText/EquationView.tsx @@ -15,24 +15,24 @@ export class EquationView { this._fieldWrapper = document.createElement("div"); this._fieldWrapper.style.width = node.attrs.width; this._fieldWrapper.style.height = node.attrs.height; - this._fieldWrapper.style.fontWeight = "bold"; this._fieldWrapper.style.position = "relative"; this._fieldWrapper.style.display = "inline-block"; - this._fieldWrapper.onkeypress = function (e: any) { e.stopPropagation(); }; - this._fieldWrapper.onkeydown = function (e: any) { e.stopPropagation(); }; - this._fieldWrapper.onkeyup = function (e: any) { e.stopPropagation(); }; this._fieldWrapper.onmousedown = function (e: any) { e.stopPropagation(); }; ReactDOM.render(, this._fieldWrapper); (this as any).dom = this._fieldWrapper; } + _editor: EquationEditor | undefined; + setEditor = (editor?: EquationEditor) => { this._editor = editor; } destroy() { ReactDOM.unmountComponentAtNode(this._fieldWrapper); } - selectNode() { } + selectNode() { this._editor?.mathField.focus(); } + deselectNode() { } } interface IEquationViewInternal { @@ -40,6 +40,7 @@ interface IEquationViewInternal { tbox: FormattedTextBox; width: number; height: number; + setEditor: (editor: EquationEditor | undefined) => void; } @observer @@ -47,6 +48,7 @@ export class EquationViewInternal extends React.Component _reactionDisposer: IReactionDisposer | undefined; _textBoxDoc: Doc; _fieldKey: string; + _ref: React.RefObject = React.createRef(); constructor(props: IEquationViewInternal) { super(props); @@ -55,6 +57,7 @@ export class EquationViewInternal extends React.Component } componentWillUnmount() { this._reactionDisposer?.(); } + componentDidMount() { this.props.setEditor(this._ref.current ?? undefined); } render() { return
height: this.props.height, bottom: 3, }}> - FormattedTextBox.CanAnnotate = !FormattedTextBox.CanAnnotate, icon: "expand-arrows-alt" }); + uicontrols.push({ description: !this.Document._noSidebar ? "Hide Sidebar Handle" : "Show Sidebar Handle", event: () => this.layoutDoc._noSidebar = !this.layoutDoc._noSidebar, icon: "expand-arrows-alt" }); uicontrols.push({ description: `${this.layoutDoc._showAudio ? "Hide" : "Show"} Dictation Icon`, event: () => this.layoutDoc._showAudio = !this.layoutDoc._showAudio, icon: "expand-arrows-alt" }); uicontrols.push({ description: "Show Highlights...", noexpand: true, subitems: highlighting, icon: "hand-point-right" }); !Doc.UserDoc().noviceMode && uicontrols.push({ @@ -597,7 +598,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const options = cm.findByDescription("Options..."); const optionItems = options && "subitems" in options ? options.subitems : []; - optionItems.push({ description: !this.Document._noSidebar ? "Hide Sidebar Handle" : "Show Sidebar Handle", event: () => this.layoutDoc._noSidebar = !this.layoutDoc._noSidebar, icon: "expand-arrows-alt" }); optionItems.push({ description: !this.Document._singleLine ? "Make Single Line" : "Make Multi Line", event: () => this.layoutDoc._singleLine = !this.layoutDoc._singleLine, icon: "expand-arrows-alt" }); optionItems.push({ description: `${this.Document._autoHeight ? "Lock" : "Auto"} Height`, event: () => this.layoutDoc._autoHeight = !this.layoutDoc._autoHeight, icon: "plus" }); !options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "eye" }); diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts index 3bd41fa7d..9893da3bb 100644 --- a/src/client/views/nodes/formattedText/nodes_rts.ts +++ b/src/client/views/nodes/formattedText/nodes_rts.ts @@ -247,6 +247,7 @@ export const nodes: { [index: string]: NodeSpec } = { attrs: { fieldKey: { default: "" }, }, + atom: true, group: "inline", draggable: false, toDOM(node) { -- cgit v1.2.3-70-g09d2 From 8320813a7d998c853d4b21b74749ebe417717675 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 5 Mar 2021 13:48:01 -0500 Subject: fixed linked doc preview of images --- src/client/views/nodes/LinkDocPreview.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index 716810536..a3c149ffc 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -109,8 +109,20 @@ export class LinkDocPreview extends React.Component { this.props.docProps?.addDocTab(Docs.Create.WebDocument(this.props.hrefs[0], { title: this.props.hrefs[0], _width: 200, _height: 400, useCors: true }), "add:right"); } } - width = () => Math.min(225, NumCast(this._targetDoc?.[WidthSym](), 225)); - height = () => Math.min(225, NumCast(this._targetDoc?.[HeightSym](), 225)); + width = () => { + if (!this._targetDoc) return 225; + if (this._targetDoc[WidthSym]() < this._targetDoc?.[HeightSym]()) { + return Math.min(225, this._targetDoc[HeightSym]()) * this._targetDoc[WidthSym]() / this._targetDoc[HeightSym](); + } + return Math.min(225, NumCast(this._targetDoc?.[WidthSym](), 225)); + } + height = () => { + if (!this._targetDoc) return 225; + if (this._targetDoc[WidthSym]() > this._targetDoc?.[HeightSym]()) { + return Math.min(225, this._targetDoc[WidthSym]()) * this._targetDoc[HeightSym]() / this._targetDoc[WidthSym](); + } + return Math.min(225, NumCast(this._targetDoc?.[HeightSym](), 225)); + } @computed get previewHeader() { return !this._linkDoc || !this._targetDoc || !this._linkSrc ? (null) :
@@ -177,8 +189,9 @@ export class LinkDocPreview extends React.Component { } render() { + const borders = 16; // 8px border on each side return
+ style={{ left: this.props.location[0], top: this.props.location[1], width: this.width() + borders, height: this.height() + borders }}> {this.docPreview}
; } -- cgit v1.2.3-70-g09d2 From cf2b070379ff8c83ceafb8eb441f5db2a6466b89 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 5 Mar 2021 13:56:20 -0500 Subject: fixed linkdocpreview border. --- src/client/views/nodes/LinkDocPreview.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/LinkDocPreview.scss b/src/client/views/nodes/LinkDocPreview.scss index b7aeaa072..06ae466f0 100644 --- a/src/client/views/nodes/LinkDocPreview.scss +++ b/src/client/views/nodes/LinkDocPreview.scss @@ -10,7 +10,6 @@ z-index: 2004; .linkDocPreview-inner { background-color: white; - border: 8px solid white; width: 100%; height: 100%; pointer-events: none; -- cgit v1.2.3-70-g09d2 From 364b946e286533c2b30b80157cde8eebb2473c87 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 5 Mar 2021 15:50:03 -0500 Subject: from last --- src/client/views/nodes/LinkDocPreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index a3c149ffc..3fe164f8a 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -191,7 +191,7 @@ export class LinkDocPreview extends React.Component { render() { const borders = 16; // 8px border on each side return
+ style={{ left: this.props.location[0], top: this.props.location[1], width: this.width() + borders, height: this.height() + borders + (this.props.showHeader ? 37 : 0) }}> {this.docPreview}
; } -- cgit v1.2.3-70-g09d2 From ea0ec26d362d6794b9020a60b55cf6c38368aef4 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 6 Mar 2021 15:49:22 -0500 Subject: cleaned up a little bit in doc decorations. --- src/client/views/DocumentDecorations.tsx | 118 ++++++++------------- src/client/views/GlobalKeyHandler.ts | 2 +- src/client/views/nodes/EquationBox.tsx | 2 +- .../views/nodes/formattedText/EquationView.tsx | 2 +- .../views/nodes/formattedText/RichTextRules.ts | 3 +- 5 files changed, 48 insertions(+), 79 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index ec9cb2714..44d4460fa 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -10,7 +10,7 @@ import { InkField } from "../../fields/InkField"; import { ScriptField } from '../../fields/ScriptField'; import { Cast, NumCast } from "../../fields/Types"; import { GetEffectiveAcl } from '../../fields/util'; -import { setupMoveUpEvents } from "../../Utils"; +import { setupMoveUpEvents, emptyFunction } from "../../Utils"; import { Docs, DocUtils } from "../documents/Documents"; import { DocumentType } from '../documents/DocumentTypes'; import { CurrentUserUtils } from '../util/CurrentUserUtils'; @@ -26,7 +26,6 @@ import { InkStrokeProperties } from './InkStrokeProperties'; import { LightboxView } from './LightboxView'; import { DocumentView } from "./nodes/DocumentView"; import React = require("react"); -import e = require('express'); @observer export class DocumentDecorations extends React.Component<{ boundsLeft: number, boundsTop: number }, { value: string }> { @@ -58,12 +57,12 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b constructor(props: any) { super(props); DocumentDecorations.Instance = this; - reaction(() => SelectionManager.Views().slice(), docs => this.titleBlur(false)); + reaction(() => SelectionManager.Views().slice(), action(docs => this._edtingTitle = false)); } @computed - get Bounds(): { x: number, y: number, b: number, r: number } { - const boudns = SelectionManager.Views().map(dv => dv.getBounds()).reduce((bounds, rect) => + get Bounds() { + return SelectionManager.Views().map(dv => dv.getBounds()).reduce((bounds, rect) => !rect ? bounds : { x: Math.min(rect.left, bounds.x), @@ -72,49 +71,34 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b b: Math.max(rect.bottom, bounds.b) }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE }); - return boudns; } @action - titleBlur = (commit: boolean) => { + titleBlur = () => { this._edtingTitle = false; - if (commit) { - if (this._accumulatedTitle.startsWith("#") || this._accumulatedTitle.startsWith("=")) { - this._titleControlString = this._accumulatedTitle; - } else if (this._titleControlString.startsWith("#")) { - const selectionTitleFieldKey = this._titleControlString.substring(1); - selectionTitleFieldKey === "title" && (SelectionManager.Views()[0].dataDoc["title-custom"] = !this._accumulatedTitle.startsWith("-")); - UndoManager.RunInBatch(() => selectionTitleFieldKey && SelectionManager.Views().forEach(d => { - const value = typeof d.props.Document[selectionTitleFieldKey] === "number" ? +this._accumulatedTitle : this._accumulatedTitle; - Doc.SetInPlace(d.props.Document, selectionTitleFieldKey, value, true); - }), "title blur"); - } + if (this._accumulatedTitle.startsWith("#") || this._accumulatedTitle.startsWith("=")) { + this._titleControlString = this._accumulatedTitle; + } else if (this._titleControlString.startsWith("#")) { + const titleFieldKey = this._titleControlString.substring(1); + UndoManager.RunInBatch(() => titleFieldKey && SelectionManager.Views().forEach(d => { + titleFieldKey === "title" && (d.dataDoc["title-custom"] = !this._accumulatedTitle.startsWith("-")); + //@ts-ignore + Doc.SetInPlace(d.rootDoc, titleFieldKey, +this._accumulatedTitle == this._accumulatedTitle ? +this._accumulatedTitle : this._accumulatedTitle, true); + }), "title blur"); } } - @action titleEntered = (e: React.KeyboardEvent) => { - if (e.key === "Enter") { - const text = (e.target as any).value; - if (text.startsWith("::")) { - this._accumulatedTitle = text.slice(2, text.length); - const promoteDoc = SelectionManager.Views()[0]; - Doc.SetInPlace(promoteDoc.props.Document, "title", this._accumulatedTitle, true); - DocUtils.Publish(promoteDoc.props.Document, this._accumulatedTitle, promoteDoc.props.addDocument, promoteDoc.props.removeDocument); - } - (e.target as any).blur(); - } - } + titleEntered = (e: React.KeyboardEvent) => e.key === "Enter" && (e.target as any).blur(); + @action onTitleDown = (e: React.PointerEvent): void => { setupMoveUpEvents(this, e, e => this.onBackgroundMove(true, e), (e) => { }, action((e) => { !this._edtingTitle && (this._accumulatedTitle = this._titleControlString.startsWith("#") ? this.selectionTitle : this._titleControlString); this._edtingTitle = true; setTimeout(() => this._keyinput.current!.focus(), 0); - })) + })); } - onBackgroundDown = (e: React.PointerEvent): void => { - setupMoveUpEvents(this, e, e => this.onBackgroundMove(false, e), (e) => { }, (e) => { }); - } + onBackgroundDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, e => this.onBackgroundMove(false, e), emptyFunction, emptyFunction); @action onBackgroundMove = (dragTitle: boolean, e: PointerEvent): boolean => { @@ -138,7 +122,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b } @undoBatch - onCloseClick = (e: React.MouseEvent) => { + onCloseClick = () => { const selected = SelectionManager.Views().slice(); SelectionManager.DeselectAll(); selected.map(dv => dv.props.removeDocument?.(dv.props.Document)); @@ -146,24 +130,22 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b @undoBatch @action onMaximizeClick = (e: React.MouseEvent): void => { - if (e.button === 0) { - const selectedDocs = SelectionManager.Views(); - if (selectedDocs.length) { - if (e.ctrlKey) { // open an alias in a new tab with Ctrl Key - selectedDocs[0].props.Document._fullScreenView = Doc.MakeAlias(selectedDocs[0].props.Document); - (selectedDocs[0].props.Document._fullScreenView as Doc).context = undefined; - CollectionDockingView.AddSplit(selectedDocs[0].props.Document._fullScreenView as Doc, "right"); - } else if (e.shiftKey) { // open centered in a new workspace with Shift Key - const alias = Doc.MakeAlias(selectedDocs[0].props.Document); - alias.context = undefined; - alias.x = -alias[WidthSym]() / 2; - alias.y = -alias[HeightSym]() / 2; - CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([alias], { title: "Tab for " + alias.title }), "right"); - } else if (e.altKey) { // open same document in new tab - CollectionDockingView.ToggleSplit(Cast(selectedDocs[0].props.Document._fullScreenView, Doc, null) || selectedDocs[0].props.Document, "right"); - } else { - LightboxView.SetLightboxDoc(selectedDocs[0].props.Document, undefined, selectedDocs.slice(1).map(view => view.props.Document)); - } + const selectedDocs = SelectionManager.Views(); + if (selectedDocs.length) { + if (e.ctrlKey) { // open an alias in a new tab with Ctrl Key + selectedDocs[0].props.Document._fullScreenView = Doc.MakeAlias(selectedDocs[0].props.Document); + (selectedDocs[0].props.Document._fullScreenView as Doc).context = undefined; + CollectionDockingView.AddSplit(selectedDocs[0].props.Document._fullScreenView as Doc, "right"); + } else if (e.shiftKey) { // open centered in a new workspace with Shift Key + const alias = Doc.MakeAlias(selectedDocs[0].props.Document); + alias.context = undefined; + alias.x = -alias[WidthSym]() / 2; + alias.y = -alias[HeightSym]() / 2; + CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([alias], { title: "Tab for " + alias.title }), "right"); + } else if (e.altKey) { // open same document in new tab + CollectionDockingView.ToggleSplit(Cast(selectedDocs[0].props.Document._fullScreenView, Doc, null) || selectedDocs[0].props.Document, "right"); + } else { + LightboxView.SetLightboxDoc(selectedDocs[0].props.Document, undefined, selectedDocs.slice(1).map(view => view.props.Document)); } } SelectionManager.DeselectAll(); @@ -191,7 +173,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b onRotateDown = (e: React.PointerEvent): void => { this._rotateUndo = UndoManager.StartBatch("rotatedown"); - setupMoveUpEvents(this, e, this.onRotateMove, () => this._rotateUndo?.end(), (e) => { }); + setupMoveUpEvents(this, e, this.onRotateMove, () => this._rotateUndo?.end(), emptyFunction); this._prevY = e.clientY; this._inkCenterPts = SelectionManager.Views() .filter(dv => dv.rootDoc.type === DocumentType.INK) @@ -201,7 +183,6 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b @action onRotateMove = (e: PointerEvent, down: number[]): boolean => { - // const distance = Math.sqrt((this._prevY - e.clientY) * (this._prevY - e.clientY) + (this._prevX - e.clientX) * (this._prevX - e.clientX)); const distance = Math.abs(this._prevY - e.clientY); const angle = e.clientY > this._prevY ? distance * (Math.PI / 180) : e.clientY < this._prevY ? - distance * (Math.PI / 180) : 0; this._prevY = e.clientY; @@ -233,15 +214,13 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b return ({ doc, x: NumCast(doc.x), y: NumCast(doc.y), width: NumCast(doc._width), height: NumCast(doc._height) }); }); - setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, (e) => { }); - if (e.button === 0) { - this._resizeHdlId = e.currentTarget.className; - const bounds = e.currentTarget.getBoundingClientRect(); - this._offX = this._resizeHdlId.toLowerCase().includes("left") ? bounds.right - e.clientX : bounds.left - e.clientX; - this._offY = this._resizeHdlId.toLowerCase().includes("top") ? bounds.bottom - e.clientY : bounds.top - e.clientY; - this.Interacting = true; // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them - this._resizeUndo = UndoManager.StartBatch("DocDecs resize"); - } + setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction); + this.Interacting = true; // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them + this._resizeHdlId = e.currentTarget.className; + const bounds = e.currentTarget.getBoundingClientRect(); + this._offX = this._resizeHdlId.toLowerCase().includes("left") ? bounds.right - e.clientX : bounds.left - e.clientX; + this._offY = this._resizeHdlId.toLowerCase().includes("top") ? bounds.bottom - e.clientY : bounds.top - e.clientY; + this._resizeUndo = UndoManager.StartBatch("DocDecs resize"); this._snapX = e.pageX; this._snapY = e.pageY; DragManager.docsBeingDragged.forEach(doc => this._dragHeights.set(doc, { start: NumCast(doc._height), lowest: NumCast(doc._height) })); @@ -278,11 +257,6 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b let dragBottom = false; let dragRight = false; let dX = 0, dY = 0, dW = 0, dH = 0; - const unfreeze = () => - SelectionManager.Views().forEach(action((element: DocumentView) => - ((element.rootDoc.type === DocumentType.COMPARISON || - (element.rootDoc.type === DocumentType.WEB && Doc.LayoutField(element.rootDoc) instanceof HtmlField)) - && Doc.NativeHeight(element.layoutDoc)) && element.toggleNativeDimensions())); switch (this._resizeHdlId) { case "": break; case "documentDecorations-topLeftResizer": @@ -297,7 +271,6 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b dH = -move[1]; break; case "documentDecorations-topResizer": - unfreeze(); dY = -1; dH = -move[1]; break; @@ -311,17 +284,14 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b dH = move[1]; break; case "documentDecorations-bottomResizer": - unfreeze(); dH = move[1]; dragBottom = true; break; case "documentDecorations-leftResizer": - unfreeze(); dX = -1; dW = -move[0]; break; case "documentDecorations-rightResizer": - unfreeze(); dW = move[0]; dragRight = true; break; @@ -452,7 +422,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b const titleArea = this._edtingTitle ? this.titleBlur(true)} onChange={action(e => this._accumulatedTitle = e.target.value)} onKeyPress={this.titleEntered} /> : + onBlur={e => this.titleBlur()} onChange={action(e => this._accumulatedTitle = e.target.value)} onKeyPress={this.titleEntered} /> :
{`${this.selectionTitle}`}
; diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 14c0a18a3..6e467efd7 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -259,7 +259,7 @@ export class KeyManager { const pt = SelectionManager.Views()[0].props.ScreenToLocalTransform().transformPoint(bds.x + (bds.r - bds.x) / 2, bds.y + (bds.b - bds.y) / 2); const text = `__DashDocId(${pt?.[0] || 0},${pt?.[1] || 0}):` + SelectionManager.Views().map(dv => dv.Document[Id]).join(":"); SelectionManager.Views().length && navigator.clipboard.writeText(text); - DocumentDecorations.Instance.onCloseClick(undefined); + DocumentDecorations.Instance.onCloseClick(); stopPropagation = false; preventDefault = false; } diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx index 64e1e9c72..9111cb418 100644 --- a/src/client/views/nodes/EquationBox.tsx +++ b/src/client/views/nodes/EquationBox.tsx @@ -37,7 +37,7 @@ export class EquationBox extends ViewBoxBaseComponent this.props.isSelected(), selected => { if (this._ref.current) { diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx index 15f15a11e..508500ab6 100644 --- a/src/client/views/nodes/formattedText/EquationView.tsx +++ b/src/client/views/nodes/formattedText/EquationView.tsx @@ -29,7 +29,7 @@ export class EquationView { (this as any).dom = this._fieldWrapper; } _editor: EquationEditor | undefined; - setEditor = (editor?: EquationEditor) => { this._editor = editor; } + setEditor = (editor?: EquationEditor) => this._editor = editor; destroy() { ReactDOM.unmountComponentAtNode(this._fieldWrapper); } selectNode() { this._editor?.mathField.focus(); } deselectNode() { } diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts index e5d924f42..4b9b78211 100644 --- a/src/client/views/nodes/formattedText/RichTextRules.ts +++ b/src/client/views/nodes/formattedText/RichTextRules.ts @@ -316,8 +316,7 @@ export class RichTextRules { if (!fieldKey && !docid) return state.tr; docid && DocServer.GetRefField(docid).then(docx => { if (!(docx instanceof Doc && docx)) { - const docx = Docs.Create.FreeformDocument([], { title: rawdocid, _width: 500, _height: 500 }, docid); - DocUtils.Publish(docx, docid, returnFalse, returnFalse); + Docs.Create.FreeformDocument([], { title: rawdocid, _width: 500, _height: 500 }, docid); } }); const node = (state.doc.resolve(start) as any).nodeAfter; -- cgit v1.2.3-70-g09d2