From 223262242f7db021c8449e920645892cc5ed2820 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 17 Oct 2020 17:45:10 -0400 Subject: major rewrite of native width/height/aspect. Fixed scaling of text note sidebars. --- src/client/views/nodes/WebBox.tsx | 38 ++++++++++++++++---------------------- 1 file changed, 16 insertions(+), 22 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 66dc3cdcc..eb9e08e20 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -72,8 +72,8 @@ export class WebBox extends ViewBoxAnnotatableComponent { @@ -151,13 +151,13 @@ export class WebBox extends ViewBoxAnnotatableComponent 0.05) { - if (!nativeWidth) this.layoutDoc._nativeWidth = 600; - this.layoutDoc._nativeHeight = NumCast(this.layoutDoc._nativeWidth) / youtubeaspect; - this.layoutDoc._height = NumCast(this.layoutDoc._width) / youtubeaspect; + if (!nativeWidth) Doc.SetNativeWidth(this.layoutDoc, 600); + Doc.SetNativeHeight(this.layoutDoc, (nativeWidth || 600) / youtubeaspect); + this.layoutDoc._height = this.layoutDoc[WidthSym]() / youtubeaspect; } } // else it's an HTMLfield } else if (field?.url) { @@ -388,17 +388,11 @@ export class WebBox extends ViewBoxAnnotatableComponent { - Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); - } specificContextMenu = (e: React.MouseEvent): void => { const cm = ContextMenu.Instance; const funcs: ContextMenuProps[] = []; funcs.push({ description: (this.layoutDoc.useCors ? "Don't Use" : "Use") + " Cors", event: () => this.layoutDoc.useCors = !this.layoutDoc.useCors, icon: "snowflake" }); - funcs.push({ description: (this.layoutDoc[this.fieldKey + "-contentWidth"] ? "Unfreeze" : "Freeze") + " Content Width", event: () => this.layoutDoc[this.fieldKey + "-contentWidth"] = this.layoutDoc[this.fieldKey + "-contentWidth"] ? undefined : NumCast(this.layoutDoc._nativeWidth), icon: "snowflake" }); + funcs.push({ description: (this.layoutDoc[this.fieldKey + "-contentWidth"] ? "Unfreeze" : "Freeze") + " Content Width", event: () => this.layoutDoc[this.fieldKey + "-contentWidth"] = this.layoutDoc[this.fieldKey + "-contentWidth"] ? undefined : Doc.NativeWidth(this.layoutDoc), icon: "snowflake" }); cm.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" }); } @@ -468,7 +462,7 @@ export class WebBox extends ViewBoxAnnotatableComponent + return
{this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno => ) } @@ -543,9 +537,9 @@ export class WebBox extends ViewBoxAnnotatableComponent { if (this._mainCont.current) { const boundingRect = this._mainCont.current.getBoundingClientRect(); - const scalin = (this.Document._nativeWidth || 0) / boundingRect.width; + const scalin = (Doc.NativeWidth(this.Document) || 0) / boundingRect.width; return Math.min(boundingRect.height * scalin, this.props.PanelHeight() * scalin); } return this.props.PanelHeight(); -- cgit v1.2.3-70-g09d2 From b75fc9edafb72a6cf5b1e15a3d2b5300c053f92f Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 22 Oct 2020 01:38:03 -0400 Subject: fixed webBoxes to switch URLS when hyperlink is clicked (and page is not cross-origin). fixed some undo navigation web stuff. fixed drag/drop to create anchor that bounds the original selection. fixed html clippings to not have a nativewith/height so that they reflow --- src/client/documents/Documents.ts | 2 +- src/client/views/collections/CollectionSubView.tsx | 14 +++++++++----- src/client/views/nodes/WebBox.tsx | 20 +++++++++++++------- 3 files changed, 23 insertions(+), 13 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index d7c9af1a3..d7af88b72 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1101,7 +1101,7 @@ export namespace DocUtils { }); } ctor = Docs.Create.WebDocument; - options = { ...options, _fitWidth: true, _nativeWidth: 850, _width: 400, _height: 512, title: path, }; + options = { ...options, _fitWidth: true, _width: 400, _height: 512, title: path, }; } return ctor ? ctor(path, options) : undefined; } diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index f0cf54db4..5c3c70be2 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -344,12 +344,16 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc).text = text; this.props.addDocument(htmlDoc); if (srcWeb) { - const focusNode = (SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")?.[0]?.contentDocument?.getSelection()?.focusNode as any); + const iframe = SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")?.[0]; + const focusNode = (iframe?.contentDocument?.getSelection()?.focusNode as any); if (focusNode) { - const rect = "getBoundingClientRect" in focusNode ? focusNode.getBoundingClientRect() : focusNode?.parentElement.getBoundingClientRect(); - const x = (rect?.x || 0); - const y = NumCast(srcWeb._scrollTop) + (rect?.y || 0); - const anchor = Docs.Create.FreeformDocument([], { _backgroundColor: "transparent", _width: 75, _height: 40, x, y, annotationOn: srcWeb }); + const rects = iframe?.contentWindow?.getSelection()?.getRangeAt(0).getClientRects(); + "getBoundingClientRect" in focusNode ? focusNode.getBoundingClientRect() : focusNode?.parentElement.getBoundingClientRect(); + const x = (rects && Array.from(rects).reduce((x: any, r: DOMRect) => x === undefined || r.x < x ? r.x : x, undefined as any)) || 0; + const y = NumCast(srcWeb._scrollTop) + ((rects && Array.from(rects).reduce((y: any, r: DOMRect) => y === undefined || r.y < y ? r.y : y, undefined as any)) || 0); + const r = (rects && Array.from(rects).reduce((x: any, r: DOMRect) => x === undefined || r.x + r.width > x ? r.x + r.width : x, undefined as any)) || 0; + const b = NumCast(srcWeb._scrollTop) + ((rects && Array.from(rects).reduce((y: any, r: DOMRect) => y === undefined || r.y + r.height > y ? r.y + r.height : y, undefined as any)) || 0); + const anchor = Docs.Create.FreeformDocument([], { _backgroundColor: "transparent", _width: r - x, _height: b - y, x, y, annotationOn: srcWeb }); anchor.context = srcWeb; const key = Doc.LayoutFieldKey(srcWeb); Doc.AddDocToList(srcWeb, key + "-annotations", anchor); diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index eb9e08e20..168fee807 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -72,14 +72,23 @@ export class WebBox extends ViewBoxAnnotatableComponent { const iframe = this._iframeRef.current; if (iframe && iframe.contentDocument) { iframe.setAttribute("enable-annotation", "true"); + iframe.contentDocument.addEventListener("click", undoBatch(action(e => { + const href = (e.target as any)?.href; + if (href) { + this._url = href.replace(Utils.prepend(""), Cast(this.dataDoc[this.fieldKey], WebField, null)?.url.origin); + this.submitURL(); + } + }))); iframe.contentDocument.addEventListener('pointerdown', this.iframedown, false); iframe.contentDocument.addEventListener('scroll', this.iframeScrolled, false); this.layoutDoc.scrollHeight = iframe.contentDocument.children?.[0].scrollHeight || 1000; @@ -178,14 +187,11 @@ export class WebBox extends ViewBoxAnnotatableComponent) => { - this._url = e.target.value; - } - onUrlDragover = (e: React.DragEvent) => { e.preventDefault(); } + + @undoBatch @action onUrlDrop = (e: React.DragEvent) => { const { dataTransfer } = e; -- cgit v1.2.3-70-g09d2 From 4609f550fcc8c3e9c7fd176faa80671d0b55d427 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 22 Oct 2020 10:16:19 -0400 Subject: fixed warnings --- src/client/views/collections/CollectionStackingView.tsx | 1 - src/client/views/nodes/PresBox.tsx | 6 +++--- src/client/views/nodes/WebBox.tsx | 2 +- 3 files changed, 4 insertions(+), 5 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 882a7fdec..4880d342c 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -294,7 +294,6 @@ export class CollectionStackingView extends CollectionSubView this.filteredChildren.find((fdoc, i) => ndoc === fdoc && i < insertInd) ? off + 1 : off, 0); newDocs.filter(ndoc => docs.indexOf(ndoc) !== -1).forEach(ndoc => docs.splice(docs.indexOf(ndoc), 1)); diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 48b163a3a..20106dc3d 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -747,7 +747,7 @@ export class PresBox extends ViewBoxBaseComponent e.stopPropagation(); e.preventDefault(); } - }; + } /** * @@ -1803,7 +1803,7 @@ export class PresBox extends ViewBoxBaseComponent const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Presentation Panel" : "Open Presentation Panel"; const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; const isMini: boolean = this.toolbarWidth <= 100; - const presKeyEvents: boolean = (this.isPres && this._presKeyEventsActive && this.rootDoc === Doc.UserDoc().activePresentation) + const presKeyEvents: boolean = (this.isPres && this._presKeyEventsActive && this.rootDoc === Doc.UserDoc().activePresentation); return (mode === CollectionViewType.Carousel3D) ? (null) : (
{/*
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}> @@ -1993,7 +1993,7 @@ export class PresBox extends ViewBoxBaseComponent // needed to ensure that the childDocs are loaded for looking up fields this.childDocs.slice(); const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; - const presKeyEvents: boolean = (this.isPres && this._presKeyEventsActive && this.rootDoc === Doc.UserDoc().activePresentation) + const presKeyEvents: boolean = (this.isPres && this._presKeyEventsActive && this.rootDoc === Doc.UserDoc().activePresentation); return CurrentUserUtils.OverlayDocs.includes(this.rootDoc) ?
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 168fee807..787718aa0 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -83,7 +83,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { - const href = (e.target as any)?.href; + const href = (e.target as any).href; if (href) { this._url = href.replace(Utils.prepend(""), Cast(this.dataDoc[this.fieldKey], WebField, null)?.url.origin); this.submitURL(); -- cgit v1.2.3-70-g09d2 From df6c56c3b9d527a0b6e7f79c09cb19ec2484feec Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 22 Oct 2020 10:24:29 -0400 Subject: minor code cleanup --- src/client/views/nodes/PresBox.tsx | 14 ++++++++------ src/client/views/nodes/WebBox.tsx | 2 +- 2 files changed, 9 insertions(+), 7 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 20106dc3d..4674982bb 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -127,14 +127,16 @@ export class PresBox extends ViewBoxBaseComponent } @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } + @action componentWillUnmount() { document.removeEventListener("keydown", this.keyEvents, true); - runInAction(() => this._presKeyEventsActive = false); + this._presKeyEventsActive = false; // Turn of progressivize editors this.turnOffEdit(true); } - componentDidMount = async () => { + @action + componentDidMount = () => { this.rootDoc.presBox = this.rootDoc; this.rootDoc._forceRenderEngine = "timeline"; this.rootDoc._replacedChrome = "replaced"; @@ -142,7 +144,7 @@ export class PresBox extends ViewBoxBaseComponent this.layoutDoc._gridGap = 0; this.layoutDoc._yMargin = 0; document.addEventListener("keydown", this.keyEvents, true); - runInAction(() => this._presKeyEventsActive = true); + this._presKeyEventsActive = true; this.turnOffEdit(true); DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(pres => !pres?.includes(this.rootDoc) && Doc.AddDocToList(Doc.UserDoc().myPresentations as Doc, "data", this.rootDoc)); @@ -763,10 +765,10 @@ export class PresBox extends ViewBoxBaseComponent // Adds the index in the pres path graphically @computed get order() { const order: JSX.Element[] = []; - this.childDocs.forEach((doc, index) => { + this.childDocs.filter(doc => Cast(doc.presentationTargetDoc, Doc, null)).forEach((doc, index) => { const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); - const srcContext = Cast(tagDoc?.context, Doc, null); - const width = NumCast(tagDoc?._width) / 10; + const srcContext = Cast(tagDoc.context, Doc, null); + const width = NumCast(tagDoc._width) / 10; const height = Math.max(NumCast(tagDoc._height) / 10, 15); const edge = Math.max(width, height); const fontSize = edge * 0.8; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 787718aa0..de5546fa9 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -83,7 +83,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { - const href = (e.target as any).href; + const href = e.target?.href; if (href) { this._url = href.replace(Utils.prepend(""), Cast(this.dataDoc[this.fieldKey], WebField, null)?.url.origin); this.submitURL(); -- cgit v1.2.3-70-g09d2 From 74e080fd58c681a549a8e369202096bd456b6e6e Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 28 Oct 2020 23:50:03 -0400 Subject: fixed up webBox's to navigate better synchronously when srollTop chagnes. fixed navigation in wikipedia and other pages when hyou dont' click directly on a link. --- src/Utils.ts | 3 +- src/client/views/nodes/WebBox.tsx | 69 +++++++++++++++++++++++++++------------ 2 files changed, 50 insertions(+), 22 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/Utils.ts b/src/Utils.ts index cc7ee9537..daacca51d 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -475,7 +475,7 @@ const easeInOutQuad = (currentTime: number, start: number, change: number, durat return (-change / 2) * (newCurrentTime * (newCurrentTime - 2) - 1) + start; }; -export function smoothScroll(duration: number, element: HTMLElement, to: number) { +export function smoothScroll(duration: number, element: HTMLElement, to: number, finish?: () => void) { const start = element.scrollTop; const change = to - start; const startDate = new Date().getTime(); @@ -489,6 +489,7 @@ export function smoothScroll(duration: number, element: HTMLElement, to: number) requestAnimationFrame(animateScroll); } else { element.scrollTop = to; + finish?.(); } }; animateScroll(); diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index de5546fa9..539f00c81 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -1,4 +1,3 @@ -import { faMousePointer, faPen, faStickyNote } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; @@ -47,6 +46,7 @@ export class WebBox extends ViewBoxAnnotatableComponent = React.createRef(); private _startX: number = 0; private _startY: number = 0; + private _scrollTarget: any = undefined; @observable private _marqueeX: number = 0; @observable private _marqueeY: number = 0; @observable private _marqueeWidth: number = 0; @@ -61,8 +61,8 @@ export class WebBox extends ViewBoxAnnotatableComponent = new Dictionary(); private _selectionReactionDisposer?: IReactionDisposer; private _scrollReactionDisposer?: IReactionDisposer; + private _scrollTopReactionDisposer?: IReactionDisposer; private _moveReactionDisposer?: IReactionDisposer; - private _keyInput = React.createRef(); private _longPressSecondsHack?: NodeJS.Timeout; private _outerRef = React.createRef(); private _iframeRef = React.createRef(); @@ -83,14 +83,17 @@ export class WebBox extends ViewBoxAnnotatableComponent { - const href = e.target?.href; + let href = ""; + for (let ele = e.target; ele; ele = ele.parentElement) { + href = (typeof (ele.href) === "string" ? ele.href : ele.href?.baseVal) || ele.parentElement?.href || href; + } if (href) { this._url = href.replace(Utils.prepend(""), Cast(this.dataDoc[this.fieldKey], WebField, null)?.url.origin); this.submitURL(); } }))); - iframe.contentDocument.addEventListener('pointerdown', this.iframedown, false); - iframe.contentDocument.addEventListener('scroll', this.iframeScrolled, false); + iframe.contentDocument.addEventListener('wheel', this.iframeWheel, false); + iframe.contentDocument.addEventListener('scroll', this.iframeScroll, false); this.layoutDoc.scrollHeight = iframe.contentDocument.children?.[0].scrollHeight || 1000; iframe.contentDocument.children[0].scrollTop = NumCast(this.layoutDoc._scrollTop); iframe.contentDocument.children[0].scrollLeft = NumCast(this.layoutDoc._scrollLeft); @@ -102,17 +105,30 @@ export class WebBox extends ViewBoxAnnotatableComponent this._outerRef.current && smoothScroll(duration, this._outerRef.current, Math.abs(scrollY || 0)), delay); - setTimeout(() => { this.layoutDoc._scrollTop = scrollY; this.layoutDoc._scrollY = undefined; }, duration + delay); + this._forceSmoothScrollUpdate = true; + this.layoutDoc._scrollY = undefined; + setTimeout(() => this._outerRef.current && smoothScroll(duration, this._outerRef.current, Math.abs(scrollY || 0), () => this.layoutDoc._scrollTop = scrollY), delay); } if (scrollX !== undefined) { - setTimeout(() => this._outerRef.current && smoothScroll(duration, this._outerRef.current, Math.abs(scrollX || 0)), delay); - setTimeout(() => { this.layoutDoc._scrollLeft = scrollX; this.layoutDoc._scrollX = undefined; }, duration + delay); + this._forceSmoothScrollUpdate = true; + this.layoutDoc._scrollX = undefined; + setTimeout(() => this._outerRef.current && smoothScroll(duration, this._outerRef.current, Math.abs(scrollX || 0), () => this.layoutDoc._scrollLeft = scrollX), delay); } }, { fireImmediately: true } ); + this._scrollTopReactionDisposer = reaction(() => this.layoutDoc._scrollTop, + scrollTop => { + const durationStr = StrCast(this.Document._viewTransition).match(/([0-9]*)ms/); + const duration = durationStr ? Number(durationStr[1]) : 1000; + if (scrollTop !== undefined && this._forceSmoothScrollUpdate) { + this._outerRef.current && smoothScroll(duration, this._outerRef.current, Math.abs(scrollTop || 0), () => this._forceSmoothScrollUpdate = true); + } else this._forceSmoothScrollUpdate = true; + }, + { fireImmediately: true } + ); }); + _forceSmoothScrollUpdate = true; updateScroll = (x: Opt, y: Opt) => { if (y !== undefined) { @@ -126,18 +142,28 @@ export class WebBox extends ViewBoxAnnotatableComponent void) => this._setPreviewCursor = func; - iframedown = (e: PointerEvent) => { - this._setPreviewCursor?.(e.screenX, e.screenY, false); - } - iframeScrolled = (e: any) => { - if (e.target?.children) { - e.target.children[0].scrollLeft = 0; - const scrollTop = e.target.children[0].scrollTop; - const scrollLeft = e.target.children[0].scrollLeft; - this.layoutDoc._scrollTop = this._outerRef.current!.scrollTop = scrollTop; - this.layoutDoc._scrollLeft = this._outerRef.current!.scrollLeft = scrollLeft; + iframeWheel = (e: any) => { + if (this._forceSmoothScrollUpdate && e.target?.children) { + this._scrollTarget && setTimeout(action(() => { + this._scrollTarget.scrollLeft = 0; + const scrollTop = this._scrollTarget.scrollTop; + const scrollLeft = this._scrollTarget.scrollLeft; + this._outerRef.current!.scrollTop = scrollTop; + this._outerRef.current!.scrollLeft = scrollLeft; + if (this.layoutDoc._scrollTop !== scrollTop) { + this._forceSmoothScrollUpdate = false; + this.layoutDoc._scrollTop = scrollTop; + } + if (this.layoutDoc._scrollLeft !== scrollLeft) { + this._forceSmoothScrollUpdate = false; + this.layoutDoc._scrollLeft = scrollLeft; + } + })) } } + iframeScroll = (e: any) => { + this._scrollTarget = e.target.children[0]; + } async componentDidMount() { const urlField = Cast(this.dataDoc[this.props.fieldKey], WebField); runInAction(() => this._url = urlField?.url.toString() || ""); @@ -180,11 +206,12 @@ export class WebBox extends ViewBoxAnnotatableComponent { -- cgit v1.2.3-70-g09d2 From c36a4560dfc2a3693dd63091126f023f0715ae98 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 30 Oct 2020 15:57:51 -0400 Subject: getting rid of runtime scaling & other warnings --- src/client/views/nodes/PresBox.tsx | 6 +++--- src/client/views/nodes/WebBox.tsx | 7 ++++--- 2 files changed, 7 insertions(+), 6 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 85b2dc874..dd7ba3e26 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -641,9 +641,9 @@ export class PresBox extends ViewBoxBaseComponent const list = Array.from(this._selectedArray.keys()).map((doc: Doc, index: any) => { const curDoc = Cast(doc, Doc, null); const tagDoc = Cast(curDoc.presentationTargetDoc!, Doc, null); - if (curDoc && curDoc === this.activeItem) return
{index + 1}. {curDoc.title}
; - else if (tagDoc) return
{index + 1}. {curDoc.title}
; - else if (curDoc) return
{index + 1}. {curDoc.title}
; + if (curDoc && curDoc === this.activeItem) return
{index + 1}. {curDoc.title}
; + else if (tagDoc) return
{index + 1}. {curDoc.title}
; + else if (curDoc) return
{index + 1}. {curDoc.title}
; }); return list; } diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 539f00c81..326b49167 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -656,13 +656,14 @@ export class WebBox extends ViewBoxAnnotatableComponent this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { + const scaling = Number.isFinite(this.props.ContentScaling()) ? this.props.ContentScaling() : 1; return (
@@ -670,7 +671,7 @@ export class WebBox extends ViewBoxAnnotatableComponent e.stopPropagation()} -- cgit v1.2.3-70-g09d2 From 17eea906fc583baebb7222030aebc78d74f76c37 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 30 Oct 2020 16:00:44 -0400 Subject: from last --- src/client/views/nodes/WebBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 326b49167..6c244a278 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -656,7 +656,7 @@ export class WebBox extends ViewBoxAnnotatableComponent this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop)); render() { - const scaling = Number.isFinite(this.props.ContentScaling()) ? this.props.ContentScaling() : 1; + const scaling = Number.isFinite(this.props.ContentScaling()) ? this.props.ContentScaling() || 1 : 1; return (
Date: Fri, 30 Oct 2020 16:05:08 -0400 Subject: from last --- src/client/views/nodes/WebBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 6c244a278..bdd2071a2 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -690,7 +690,7 @@ export class WebBox extends ViewBoxAnnotatableComponent
Date: Fri, 30 Oct 2020 16:33:42 -0400 Subject: finally fixed webBox warning --- src/client/views/nodes/WebBox.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index bdd2071a2..c84b0a143 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -495,7 +495,7 @@ export class WebBox extends ViewBoxAnnotatableComponent + return
{this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno => ) } @@ -569,10 +569,12 @@ export class WebBox extends ViewBoxAnnotatableComponent this._marqueeX; marqueeY = () => this._marqueeY; marqueeing = () => this._marqueeing; - visibleHeiht = () => { + visibleHeight = () => { if (this._mainCont.current) { const boundingRect = this._mainCont.current.getBoundingClientRect(); - const scalin = (Doc.NativeWidth(this.Document) || 0) / boundingRect.width; - return Math.min(boundingRect.height * scalin, this.props.PanelHeight() * scalin); + const scaling = (Doc.NativeWidth(this.Document) || 0) / boundingRect.width; + return Math.min(boundingRect.height * scaling, this.props.PanelHeight() * scaling); } return this.props.PanelHeight(); } @@ -661,7 +663,7 @@ export class WebBox extends ViewBoxAnnotatableComponent Date: Fri, 30 Oct 2020 17:08:43 -0400 Subject: fixed typo --- src/client/views/nodes/WebBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index c84b0a143..8a8f46963 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -663,7 +663,7 @@ export class WebBox extends ViewBoxAnnotatableComponent Date: Mon, 2 Nov 2020 11:29:07 -0500 Subject: fixed warnings --- src/client/views/nodes/VideoBox.tsx | 2 +- src/client/views/nodes/WebBox.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 190193351..972b60123 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -287,7 +287,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent { -- cgit v1.2.3-70-g09d2 From 24d2da070fbac9d950bae0eff6cdf4137d9b5305 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 6 Nov 2020 15:26:17 -0500 Subject: fixed web pages to scroll and update scrollTop when in annotation mode. fixed pointer events on custom text view headers. --- src/client/documents/Documents.ts | 1 + src/client/util/CurrentUserUtils.ts | 2 +- .../views/collections/CollectionStackingView.tsx | 5 +- src/client/views/nodes/WebBox.tsx | 82 +++++++++++----------- 4 files changed, 47 insertions(+), 43 deletions(-) (limited to 'src/client/views/nodes/WebBox.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index d7af88b72..2d8a897a5 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -61,6 +61,7 @@ export interface DocumentOptions { _autoHeight?: boolean; _headerHeight?: number; // height of header of custom notes _headerFontSize?: number; // font size of header of custom notes + _headerPointerEvents?: string; // types of events the header of a custom text document can consume _panX?: number; _panY?: number; _width?: number; diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 5886aa13f..4f054269f 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -405,7 +405,7 @@ export class CurrentUserUtils { selection: { type: "text", anchor: 1, head: 1 }, storedMarks: [] }; - const headerTemplate = Docs.Create.RTFDocument(new RichTextField(JSON.stringify(json), ""), { title: "header", version: headerViewVersion, target: doc, _height: 70, _headerHeight: 12, _headerFontSize: 9, _autoHeight: true, system: true, cloneFieldFilter: new List(["system"]) }, "header"); // text needs to be a space to allow templateText to be created + const headerTemplate = Docs.Create.RTFDocument(new RichTextField(JSON.stringify(json), ""), { title: "header", version: headerViewVersion, target: doc, _height: 70, _headerPointerEvents: "all", _headerHeight: 12, _headerFontSize: 9, _autoHeight: true, system: true, cloneFieldFilter: new List(["system"]) }, "header"); // text needs to be a space to allow templateText to be created headerTemplate[DataSym].layout = "
" + " " + diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 7a3257525..2285bcb8f 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -289,8 +289,11 @@ export class CollectionStackingView extends CollectionSubView (pos[axis] + pos1[axis]) / 2 ? 1 : 0; } }); + const oldDocs = this.childDocs.length; if (super.onInternalDrop(e, de)) { - const newDocs = de.complete.docDragData.droppedDocuments; + const newDocs = this.childDocs.slice().filter((d: Doc, ind: number) => ind >= oldDocs); + + //de.complete.docDragData.droppedDocuments; const docs = this.childDocList; DragManager.docsBeingDragged = []; if (docs && newDocs.length) { diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 1e5e8133d..80e2d3ce2 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -43,21 +43,19 @@ export class WebBox extends ViewBoxAnnotatableComponent = React.createRef(); static _annotationStyle: any = addStyleSheet(); + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(WebBox, fieldKey); } private _mainCont: React.RefObject = React.createRef(); private _startX: number = 0; private _startY: number = 0; - private _scrollTarget: any = undefined; @observable private _marqueeX: number = 0; @observable private _marqueeY: number = 0; @observable private _marqueeWidth: number = 0; @observable private _marqueeHeight: number = 0; @observable private _marqueeing: boolean = false; - public static LayoutString(fieldKey: string) { return FieldView.LayoutString(WebBox, fieldKey); } - get _collapsed() { return StrCast(this.layoutDoc._chromeStatus) !== "enabled"; } - set _collapsed(value) { this.layoutDoc._chromeStatus = !value ? "enabled" : "disabled"; } @observable private _url: string = "hello"; @observable private _pressX: number = 0; @observable private _pressY: number = 0; + @observable private _iframe: HTMLIFrameElement | null = null; @observable private _savedAnnotations: Dictionary = new Dictionary(); private _selectionReactionDisposer?: IReactionDisposer; private _scrollReactionDisposer?: IReactionDisposer; @@ -65,10 +63,13 @@ export class WebBox extends ViewBoxAnnotatableComponent(); - private _iframeRef = React.createRef(); private _iframeIndicatorRef = React.createRef(); private _iframeDragRef = React.createRef(); private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean) => void); + get scrollHeight() { return this.webpage?.scrollHeight || 1000; } + get _collapsed() { return StrCast(this.layoutDoc._chromeStatus) !== "enabled"; } + set _collapsed(value) { this.layoutDoc._chromeStatus = !value ? "enabled" : "disabled"; } + get webpage() { return this._iframe?.contentDocument?.children[0]; } constructor(props: any) { super(props); @@ -79,8 +80,8 @@ export class WebBox extends ViewBoxAnnotatableComponent { - const iframe = this._iframeRef.current; - if (iframe && iframe.contentDocument) { + const iframe = this._iframe; + if (iframe?.contentDocument) { iframe.setAttribute("enable-annotation", "true"); iframe.contentDocument.addEventListener("click", undoBatch(action(e => { let href = ""; @@ -93,10 +94,10 @@ export class WebBox extends ViewBoxAnnotatableComponent ({ scrollY: this.layoutDoc._scrollY, scrollX: this.layoutDoc._scrollX }), @@ -121,7 +122,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { const durationStr = StrCast(this.Document._viewTransition).match(/([0-9]*)ms/); const duration = durationStr ? Number(durationStr[1]) : 1000; - if (scrollTop !== undefined && this._forceSmoothScrollUpdate) { + if (scrollTop !== this._outerRef.current?.scrollTop && scrollTop !== undefined && this._forceSmoothScrollUpdate) { this._outerRef.current && smoothScroll(duration, this._outerRef.current, Math.abs(scrollTop || 0), () => this._forceSmoothScrollUpdate = true); } else this._forceSmoothScrollUpdate = true; }, @@ -144,10 +145,10 @@ export class WebBox extends ViewBoxAnnotatableComponent void) => this._setPreviewCursor = func; iframeWheel = (e: any) => { if (this._forceSmoothScrollUpdate && e.target?.children) { - this._scrollTarget && setTimeout(action(() => { - this._scrollTarget.scrollLeft = 0; - const scrollTop = this._scrollTarget.scrollTop; - const scrollLeft = this._scrollTarget.scrollLeft; + this.webpage && setTimeout(action(() => { + this.webpage!.scrollLeft = 0; + const scrollTop = this.webpage!.scrollTop; + const scrollLeft = this.webpage!.scrollLeft; this._outerRef.current!.scrollTop = scrollTop; this._outerRef.current!.scrollLeft = scrollLeft; if (this.layoutDoc._scrollTop !== scrollTop) { @@ -161,9 +162,6 @@ export class WebBox extends ViewBoxAnnotatableComponent { - this._scrollTarget = e.target.children[0]; - } async componentDidMount() { const urlField = Cast(this.dataDoc[this.props.fieldKey], WebField); runInAction(() => this._url = urlField?.url.toString() || ""); @@ -210,8 +208,7 @@ export class WebBox extends ViewBoxAnnotatableComponent { @@ -330,9 +327,9 @@ export class WebBox extends ViewBoxAnnotatableComponent { e.currentTarget.before((e.currentTarget.contentDocument?.body || e.currentTarget.contentDocument)?.children[0]!); e.currentTarget.remove(); }} - view =