Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into menu_restructure

2 files changed, 166 insertions, 159 deletions

diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index 4623444b9..4b2f3cc1a 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -1,135 +1,140 @@
 @import "../globalCssVariables.scss";
 
 
-.webBox-container, .webBox-container-dragging {
-    transform-origin: top left;
-    width: 100%;
-    height: 100%;
-
-    .webBox-htmlSpan {
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-    .webBox-cont {
-        pointer-events: none;
-    }
-    .webBox-cont, .webBox-cont-interactive {
-        padding: 0vw;
-        position: absolute;
-        top: 0;
-        left: 0;
+.webBox {
+    height:100%;
+    position: relative;
+    display: flex;
+    .webBox-container, .webBox-container-dragging {
+        transform-origin: top left;
         width: 100%;
         height: 100%;
-        transform-origin: top left;
-        overflow: auto;
-        .webBox-iframe {
+
+        .webBox-htmlSpan {
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        .webBox-cont {
+            pointer-events: none;
+        }
+        .webBox-cont, .webBox-cont-interactive {
+            padding: 0vw;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            transform-origin: top left;
+            overflow: auto;
+            .webBox-iframe {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top:0;
+            }
+        }
+        .webBox-cont-interactive {
+            span {
+                user-select: text !important;
+            }
+        }
+        .webBox-outerContent {
             width: 100%;
             height: 100%;
             position: absolute;
-            top:0;
+            top: 0;
+            left: 0;
+            overflow: auto;
+            .webBox-innerContent { 
+                width:100%;
+            }
         }
-    }
-    .webBox-cont-interactive {
-        span {
-            user-select: text !important;
+        div.webBox-outerContent::-webkit-scrollbar-thumb {
+            display:none;
         }
     }
-    .webBox-outerContent {
+
+
+    .webBox-overlay {
         width: 100%;
         height: 100%;
         position: absolute;
-        top: 0;
-        left: 0;
-        overflow: auto;
-        .webBox-innerContent { 
-            width:100%;
-        }
-    }
-    div.webBox-outerContent::-webkit-scrollbar-thumb {
-        display:none;
     }
-}
-
-
-.webBox-overlay {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-}
 
-.webBox-buttons {
-    margin-left: 44;
-    background:lightGray;
-    width: 100%;
-}
-.webBox-freeze {
-    display: flex;
-    align-items: center; 
-    justify-content: center;
-    margin-right: 5px;
-    width: 30px;
-}
-
-.webBox-urlEditor {
-    position: relative;
-    opacity: 0.9;
-    z-index: 9001;
-    transition: top .5s;
-
-    .urlEditor {
-        display: grid;
-        grid-template-columns: 1fr auto;
-        padding-bottom: 10px;
-        overflow: hidden;
-
-        .editorBase {
-            display: flex;
-
-            .editor-collapse {
-                transition: all .5s, opacity 0.3s;
-                position: absolute;
-                width: 40px;
-                transform-origin: top left;
-            }
+    .webBox-buttons {
+        margin-left: 44;
+        background:lightGray;
+        width: 100%;
+    }
+    .webBox-freeze {
+        display: flex;
+        align-items: center; 
+        justify-content: center;
+        margin-right: 5px;
+        width: 30px;
+    }
 
-            .switchToText {
-                color: $main-accent;
+    .webBox-urlEditor {
+        position: relative;
+        opacity: 0.9;
+        z-index: 9001;
+        transition: top .5s;
+
+        .urlEditor {
+            display: grid;
+            grid-template-columns: 1fr auto;
+            padding-bottom: 10px;
+            overflow: hidden;
+
+            .editorBase {
+                display: flex;
+
+                .editor-collapse {
+                    transition: all .5s, opacity 0.3s;
+                    position: absolute;
+                    width: 40px;
+                    transform-origin: top left;
+                }
+
+                .switchToText {
+                    color: $main-accent;
+                }
+
+                .switchToText:hover {
+                    color: $dark-color;
+                }
             }
 
-            .switchToText:hover {
-                color: $dark-color;
+            button:hover {
+                transform: scale(1);
             }
         }
+    }
 
-        button:hover {
-            transform: scale(1);
-        }
+    .webpage-urlInput {
+        padding: 12px 10px 11px 10px;
+        border: 0px;
+        color: grey;
+        letter-spacing: 2px;
+        outline-color: black;
+        background: rgb(238, 238, 238);
+        width: 100%;
+        margin-right: 10px;
+        height: 100%;
     }
-}
-
-.webpage-urlInput {
-    padding: 12px 10px 11px 10px;
-    border: 0px;
-    color: grey;
-    letter-spacing: 2px;
-    outline-color: black;
-    background: rgb(238, 238, 238);
-    width: 100%;
-    margin-right: 10px;
-    height: 100%;
-}
-
-.touch-iframe-overlay {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-
-    .indicator {
+
+    .touch-iframe-overlay {
+        width: 100%;
+        height: 100%;
         position: absolute;
 
-        &.active {
-            background-color: rgba(0, 0, 0, 0.1);
+        .indicator {
+            position: absolute;
+
+            &.active {
+                background-color: rgba(0, 0, 0, 0.1);
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 39bb7c01d..724044295 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -399,7 +399,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     specificContextMenu = (e: React.MouseEvent): void => {
         const cm = ContextMenu.Instance;
         const funcs: ContextMenuProps[] = [];
-        funcs.push({ description: (!this.layoutDoc._nativeWidth || !this.layoutDoc._nativeHeight ? "Freeze" : "Unfreeze") + " Aspect", event: this.toggleNativeDimensions, icon: "snowflake" });
+        funcs.push({ description: (this.layoutDoc.UseCors ? "Don't Use" : "Use") + " Cors", event: () => this.layoutDoc.UseCors = !this.layoutDoc.UseCors, icon: "snowflake" });
         cm.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
 
     }
@@ -446,58 +446,60 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     }
     scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop));
     render() {
-        return (<div className={`webBox-container`}
-            style={{
-                transform: `scale(${this.props.ContentScaling()})`,
-                width: Number.isFinite(this.props.ContentScaling()) ? `${100 / this.props.ContentScaling()}%` : "100%",
-                height: Number.isFinite(this.props.ContentScaling()) ? `${100 / this.props.ContentScaling()}%` : "100%",
-                pointerEvents: this.layoutDoc.isBackground ? "none" : undefined
-            }}
-            onContextMenu={this.specificContextMenu}>
-            <base target="_blank" />
-            {this.content}
-            <div className={"webBox-outerContent"} ref={this._outerRef}
-                style={{ pointerEvents: this.layoutDoc.isAnnotating && !this.layoutDoc.isBackground ? "all" : "none" }}
-                onWheel={e => e.stopPropagation()}
-                onScroll={e => {
-                    const iframe = this._iframeRef?.current?.contentDocument;
-                    const outerFrame = this._outerRef.current;
-                    if (iframe && outerFrame) {
-                        if (iframe.children[0].scrollTop !== outerFrame.scrollTop) {
-                            iframe.children[0].scrollTop = outerFrame.scrollTop;
+        return (<div className="webBox" style={{ width: Number.isFinite(this.props.ContentScaling()) ? `${Math.max(100, 100 / this.props.ContentScaling())}% ` : "100%" }}>
+            <div className={`webBox-container`}
+                style={{
+                    transform: `scale(${this.props.ContentScaling()})`,
+                    width: Number.isFinite(this.props.ContentScaling()) ? `${100 / this.props.ContentScaling()}% ` : "100%",
+                    height: Number.isFinite(this.props.ContentScaling()) ? `${100 / this.props.ContentScaling()}% ` : "100%",
+                    pointerEvents: this.layoutDoc.isBackground ? "none" : undefined
+                }}
+                onContextMenu={this.specificContextMenu}>
+                <base target="_blank" />
+                {this.content}
+                <div className={"webBox-outerContent"} ref={this._outerRef}
+                    style={{ pointerEvents: this.layoutDoc.isAnnotating && !this.layoutDoc.isBackground ? "all" : "none" }}
+                    onWheel={e => e.stopPropagation()}
+                    onScroll={e => {
+                        const iframe = this._iframeRef?.current?.contentDocument;
+                        const outerFrame = this._outerRef.current;
+                        if (iframe && outerFrame) {
+                            if (iframe.children[0].scrollTop !== outerFrame.scrollTop) {
+                                iframe.children[0].scrollTop = outerFrame.scrollTop;
+                            }
+                            if (iframe.children[0].scrollLeft !== outerFrame.scrollLeft) {
+                                iframe.children[0].scrollLeft = outerFrame.scrollLeft;
+                            }
                         }
-                        if (iframe.children[0].scrollLeft !== outerFrame.scrollLeft) {
-                            iframe.children[0].scrollLeft = outerFrame.scrollLeft;
-                        }
-                    }
-                    //this._outerRef.current!.scrollTop !== this._scrollTop && (this._outerRef.current!.scrollTop = this._scrollTop)
-                }}>
-                <div className={"webBox-innerContent"} style={{ height: NumCast(this.layoutDoc.scrollHeight), width: 4000 }}>
-                    <CollectionFreeFormView {...this.props}
-                        PanelHeight={this.props.PanelHeight}
-                        PanelWidth={this.props.PanelWidth}
-                        annotationsKey={this.annotationKey}
-                        NativeHeight={returnZero}
-                        NativeWidth={returnZero}
-                        focus={this.props.focus}
-                        setPreviewCursor={this.setPreviewCursor}
-                        isSelected={this.props.isSelected}
-                        isAnnotationOverlay={true}
-                        select={emptyFunction}
-                        active={this.active}
-                        ContentScaling={returnOne}
-                        whenActiveChanged={this.whenActiveChanged}
-                        removeDocument={this.removeDocument}
-                        moveDocument={this.moveDocument}
-                        addDocument={this.addDocument}
-                        CollectionView={undefined}
-                        ScreenToLocalTransform={this.scrollXf}
-                        renderDepth={this.props.renderDepth + 1}
-                        docFilters={this.props.docFilters}
-                        ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
-                    </CollectionFreeFormView>
+                        //this._outerRef.current!.scrollTop !== this._scrollTop && (this._outerRef.current!.scrollTop = this._scrollTop)
+                    }}>
+                    <div className={"webBox-innerContent"} style={{ height: NumCast(this.layoutDoc.scrollHeight), width: 4000 }}>
+                        <CollectionFreeFormView {...this.props}
+                            PanelHeight={this.props.PanelHeight}
+                            PanelWidth={this.props.PanelWidth}
+                            annotationsKey={this.annotationKey}
+                            NativeHeight={returnZero}
+                            NativeWidth={returnZero}
+                            focus={this.props.focus}
+                            setPreviewCursor={this.setPreviewCursor}
+                            isSelected={this.props.isSelected}
+                            isAnnotationOverlay={true}
+                            select={emptyFunction}
+                            active={this.active}
+                            ContentScaling={returnOne}
+                            whenActiveChanged={this.whenActiveChanged}
+                            removeDocument={this.removeDocument}
+                            moveDocument={this.moveDocument}
+                            addDocument={this.addDocument}
+                            CollectionView={undefined}
+                            ScreenToLocalTransform={this.scrollXf}
+                            renderDepth={this.props.renderDepth + 1}
+                            docFilters={this.props.docFilters}
+                            ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
+                        </CollectionFreeFormView>
+                    </div>
                 </div>
-            </div>
-        </div >);
+            </div >
+        </div>);
     }
 }
\ No newline at end of file