From 6d2d18385e09da7645ff9c077240820f2d2043c9 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 2 May 2022 11:04:45 -0400
Subject: fixed up html clippings to have a better background color heuristic
 and to allow dragging clippings from webBox's.

---
 src/client/views/MarqueeAnnotator.tsx              |  6 ++--
 src/client/views/collections/CollectionSubView.tsx |  5 ++--
 src/client/views/nodes/WebBox.scss                 | 11 ++++---
 src/client/views/nodes/WebBox.tsx                  | 35 +++++++++++++++++-----
 4 files changed, 40 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx
index a6b012bd6..2c7b04495 100644
--- a/src/client/views/MarqueeAnnotator.tsx
+++ b/src/client/views/MarqueeAnnotator.tsx
@@ -27,7 +27,7 @@ export interface MarqueeAnnotatorProps {
     containerOffset?: () => number[];
     mainCont: HTMLDivElement;
     docView: DocumentView;
-    savedAnnotations: ObservableMap<number, HTMLDivElement[]>;
+    savedAnnotations: () => ObservableMap<number, HTMLDivElement[]>;
     annotationLayer: HTMLDivElement;
     addDocument: (doc: Doc) => boolean;
     getPageFromScroll?: (top: number) => number;
@@ -128,7 +128,7 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
     @undoBatch
     @action
     makeAnnotationDocument = (color: string, isLinkButton?: boolean, savedAnnotations?: ObservableMap<number, HTMLDivElement[]>): Opt<Doc> => {
-        const savedAnnoMap = savedAnnotations ?? this.props.savedAnnotations;
+        const savedAnnoMap = savedAnnotations ?? this.props.savedAnnotations();
         if (savedAnnoMap.size === 0) return undefined;
         const savedAnnos = Array.from(savedAnnoMap.values())[0];
         if (savedAnnos.length && (savedAnnos[0] as any).marqueeing) {
@@ -239,7 +239,7 @@ export class MarqueeAnnotator extends React.Component<MarqueeAnnotatorProps> {
                 copy.style.height = fbounds.height.toString() + "px";
                 copy.className = "marqueeAnnotator-annotationBox";
                 (copy as any).marqueeing = true;
-                MarqueeAnnotator.previewNewAnnotation(this.props.savedAnnotations, this.props.annotationLayer, copy, this.props.getPageFromScroll?.(this._top) || 0);
+                MarqueeAnnotator.previewNewAnnotation(this.props.savedAnnotations(), this.props.annotationLayer, copy, this.props.getPageFromScroll?.(this._top) || 0);
             }
 
             AnchorMenu.Instance.jumpTo(cliX, cliY);
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 30e0adf24..247d0563a 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -317,10 +317,11 @@ export function CollectionSubView<X>(moreProps?: X) {
                             });
                         } else {
                             const srcWeb = SelectionManager.Docs().lastElement();
-                            const srcUrl = (srcWeb?.data as WebField).url?.href?.match(/http[s]?:\/\/[^/]*/)?.[0];
+                            const srcUrl = (srcWeb?.data as WebField)?.url?.href?.match(/https?:\/\/[^/]*/)?.[0];
                             const reg = new RegExp(Utils.prepend(""), "g");
                             const modHtml = srcUrl ? html.replace(reg, srcUrl) : html;
-                            const htmlDoc = Docs.Create.HtmlDocument(modHtml, { ...options, title: "-web page-", _width: 300, _height: 300 });
+                            const backgroundColor = tags.map(tag => tag.match(/.*(background-color: ?[^;]*)/)?.[1]?.replace(/background-color: ?(.*)/, "$1")).filter(t => t)?.[0];
+                            const htmlDoc = Docs.Create.HtmlDocument(modHtml, { ...options, title: srcUrl ? "from:" + srcUrl : "-web clip-", _width: 300, _height: 300, backgroundColor });
                             Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc).text = text;
                             addDocument(htmlDoc);
                             if (srcWeb) {
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index ff38e37dd..b037e7220 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -5,17 +5,18 @@
     height: 100%;
     position: relative;
     display: flex;
-    .webBox-sideResizer { 
+
+    .webBox-sideResizer {
         position: absolute;
         width: 100%;
         height: 100%;
         cursor: ew-resize;
         background: darkgray;
     }
-    .webBox-background { 
+
+    .webBox-background {
         width: 100%;
         height: 100%;
-        background: lightGray;
     }
 
     .webBox-ui {
@@ -120,7 +121,7 @@
         box-shadow: $standard-box-shadow;
         transition: 0.2s;
 
-        &:hover{
+        &:hover {
             filter: brightness(0.85);
         }
     }
@@ -160,6 +161,7 @@
         .webBox-cont {
             pointer-events: none;
         }
+
         .webBox-cont,
         .webBox-cont-interactive {
             padding: 0vw;
@@ -193,6 +195,7 @@
             top: 0;
             left: 0;
             overflow: auto;
+
             .webBox-innerContent {
                 position: relative;
             }
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 5c72417cc..4d4ed6c67 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -80,8 +80,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
     constructor(props: any) {
         super(props);
-        Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(this.dataDoc) || 850);
-        Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(this.dataDoc) || this.Document[HeightSym]() / this.Document[WidthSym]() * 850);
         runInAction(() => this._webUrl = this._url);  // setting the weburl will change the src parameter of the embedded iframe and force a navigation to it.
     }
 
@@ -231,6 +229,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         // clear selection
         if (sel.empty) sel.empty();// Chrome
         else if (sel.removeAllRanges) sel.removeAllRanges();  // Firefox
+        return this._savedAnnotations;
     }
 
     menuControls = () => this.urlEditor; // controls to be added to the top bar when a document of this type is selected
@@ -256,6 +255,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     }
 
     getAnchor = () => {
+
+        // this.createTextAnnotation(sel, sel.getRangeAt(0));
         const anchor =
             AnchorMenu.Instance?.GetAnchor(this._savedAnnotations) ??
             Docs.Create.WebanchorDocument(this._url, {
@@ -267,6 +268,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return anchor;
     }
 
+    _textAnnotationCreator: (() => ObservableMap<number, HTMLDivElement[]>) | undefined;
+    savedAnnotationsCreator: (() => ObservableMap<number, HTMLDivElement[]>) = () => this._textAnnotationCreator?.() || this._savedAnnotations;
+
     @action
     iframeUp = (e: PointerEvent) => {
         this.props.docViewPath().lastElement()?.docView?.cleanupPointerEvents(); // pointerup events aren't generated on containing document view, so we have to invoke it here.
@@ -275,7 +279,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             const scale = (this.props.scaling?.() || 1) * mainContBounds.scale;
             const sel = this._iframe.contentWindow.getSelection();
             if (sel) {
-                this.createTextAnnotation(sel, sel.getRangeAt(0));
+                this._textAnnotationCreator = () => this.createTextAnnotation(sel, sel.getRangeAt(0));
                 AnchorMenu.Instance.jumpTo(e.clientX * scale + mainContBounds.translateX,
                     e.clientY * scale + mainContBounds.translateY - NumCast(this.layoutDoc._scrollTop) * scale);
             }
@@ -283,6 +287,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     }
     @action
     iframeDown = (e: PointerEvent) => {
+        this._textAnnotationCreator = undefined;
+        const sel = this._iframe?.contentWindow?.getSelection?.();
         const mainContBounds = Utils.GetScreenTransform(this._mainCont.current!);
         const scale = (this.props.scaling?.() || 1) * mainContBounds.scale;
         const word = getWordAtPoint(e.target, e.clientX, e.clientY);
@@ -546,6 +552,9 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         this._marqueeing = undefined;
         this._isAnnotating = false;
         this._iframeClick = undefined;
+        const sel = this._iframe?.contentDocument?.getSelection();
+        if (sel?.empty) sel.empty();// Chrome
+        else if (sel?.removeAllRanges) sel.removeAllRanges();  // Firefox
         if (x !== undefined && y !== undefined) {
             this._setPreviewCursor?.(x, y, false, false);
             ContextMenu.Instance.closeMenu();
@@ -610,7 +619,13 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     @observable _previewNativeWidth: Opt<number> = undefined;
     @observable _previewWidth: Opt<number> = undefined;
     toggleSidebar = action((preview: boolean = false) => {
-        const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]);
+        var nativeWidth = NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]);
+        if (!nativeWidth) {
+            const defaultNativeWidth = this.dataDoc[this.fieldKey] instanceof WebField ? 850 : this.Document[WidthSym]();
+            Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(this.dataDoc) || defaultNativeWidth);
+            Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(this.dataDoc) || this.Document[HeightSym]() / this.Document[WidthSym]() * defaultNativeWidth);
+            nativeWidth = NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]);
+        }
         const sideratio = ((!this.layoutDoc.nativeWidth || this.layoutDoc.nativeWidth === nativeWidth ? WebBox.openSidebarWidth : 0) + nativeWidth) / nativeWidth;
         const pdfratio = ((!this.layoutDoc.nativeWidth || this.layoutDoc.nativeWidth === nativeWidth ? WebBox.openSidebarWidth + WebBox.sidebarResizerWidth : 0) + nativeWidth) / nativeWidth;
         const curNativeWidth = NumCast(this.layoutDoc.nativeWidth, nativeWidth);
@@ -620,9 +635,13 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             this._showSidebar = true;
         }
         else {
-            this.layoutDoc.nativeWidth = nativeWidth * pdfratio;
+            this.layoutDoc._showSidebar = !this.layoutDoc._showSidebar;
             this.layoutDoc._width = this.layoutDoc[WidthSym]() * nativeWidth * pdfratio / curNativeWidth;
-            this.layoutDoc._showSidebar = nativeWidth !== this.layoutDoc._nativeWidth;
+            if (!this.layoutDoc._showSidebar && !(this.dataDoc[this.fieldKey] instanceof WebField)) {
+                this.layoutDoc.nativeWidth = this.dataDoc[this.fieldKey + "-nativeWidth"] = undefined;
+            } else {
+                this.layoutDoc.nativeWidth = nativeWidth * pdfratio;
+            }
         }
     });
     sidebarWidth = () => !this.SidebarShown ? 0 :
@@ -716,7 +735,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return (
             <div className="webBox" ref={this._mainCont}
                 style={{ pointerEvents: this.pointerEvents(), display: this.props.thumbShown?.() ? "none" : undefined }} >
-                <div className="webBox-background" />
+                <div className="webBox-background" style={{ backgroundColor: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor) }} />
                 <div className="webBox-container" style={{
                     width: `calc(${100 / scale}% - ${!this.SidebarShown ? 0 : (this.sidebarWidth() - WebBox.sidebarResizerWidth) / scale * (this._previewWidth ? scale : 1)}px)`,
                     transform: `scale(${scale})`,
@@ -752,7 +771,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
                                 addDocument={this.addDocumentWrapper}
                                 docView={this.props.docViewPath().lastElement()}
                                 finishMarquee={this.finishMarquee}
-                                savedAnnotations={this._savedAnnotations}
+                                savedAnnotations={this.savedAnnotationsCreator}
                                 annotationLayer={this._annotationLayer.current}
                                 mainCont={this._mainCont.current} /> </div>}
                 </div >
-- 
cgit v1.2.3-70-g09d2