fixes for typing url in web box. fixes for dropping imags from proxied document. possible fix for updateing image width/height

2 files changed, 22 insertions, 19 deletions

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 6ae32a1d6..f870a5df4 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -258,22 +258,27 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum
             height: NumCast(this.dataDoc[this.props.fieldKey + "-nativeHeight"])
         };
         const cachedImgPath = this.dataDoc[this.props.fieldKey + "-imgPath"];
+        const docAspect = this.Document[HeightSym]() / this.Document[WidthSym]();
+        const cachedAspect = cachedNativeSize.height / cachedNativeSize.width;
         if (!cachedNativeSize.width || !cachedNativeSize.height || Math.abs(NumCast(this.layoutDoc._width) / NumCast(this.layoutDoc._height) - cachedNativeSize.width / cachedNativeSize.height) > 0.05 || imgPath !== cachedImgPath) {
-            (!this.layoutDoc.isTemplateDoc || this.dataDoc !== this.layoutDoc) && requestImageSize(imgPath).then((inquiredSize: any) => {
-                const rotation = NumCast(this.dataDoc[this.props.fieldKey + "-rotation"]) % 180;
-                const rotatedNativeSize = rotation === 90 || rotation === 270 ? { height: inquiredSize.width, width: inquiredSize.height } : inquiredSize;
-                const rotatedAspect = rotatedNativeSize.height / rotatedNativeSize.width;
-                const docAspect = this.Document[HeightSym]() / this.Document[WidthSym]();
-                setTimeout(action(() => {
-                    if (this.Document[WidthSym]() && (!cachedNativeSize.width || !cachedNativeSize.height || Math.abs(1 - docAspect / rotatedAspect) > 0.1)) {
-                        this.Document._height = this.Document[WidthSym]() * rotatedAspect;
-                        this.dataDoc[this.props.fieldKey + "-nativeWidth"] = this.Document._nativeWidth = rotatedNativeSize.width;
-                        this.dataDoc[this.props.fieldKey + "-nativeHeight"] = this.Document._nativeHeight = rotatedNativeSize.height;
-                    }
-                    this.dataDoc[this.props.fieldKey + "-imgPath"] = imgPath;
-                }), 0);
-            })
-                .catch((err: any) => console.log(err));
+            if (!this.layoutDoc.isTemplateDoc || this.dataDoc !== this.layoutDoc) {
+                requestImageSize(imgPath).then((inquiredSize: any) => {
+                    const rotation = NumCast(this.dataDoc[this.props.fieldKey + "-rotation"]) % 180;
+                    const rotatedNativeSize = rotation === 90 || rotation === 270 ? { height: inquiredSize.width, width: inquiredSize.height } : inquiredSize;
+                    const rotatedAspect = rotatedNativeSize.height / rotatedNativeSize.width;
+                    setTimeout(action(() => {
+                        if (this.Document[WidthSym]() && (!cachedNativeSize.width || !cachedNativeSize.height || Math.abs(1 - docAspect / rotatedAspect) > 0.1)) {
+                            this.Document._height = this.Document[WidthSym]() * rotatedAspect;
+                            this.dataDoc[this.props.fieldKey + "-nativeWidth"] = this.Document._nativeWidth = rotatedNativeSize.width;
+                            this.dataDoc[this.props.fieldKey + "-nativeHeight"] = this.Document._nativeHeight = rotatedNativeSize.height;
+                        }
+                        this.dataDoc[this.props.fieldKey + "-imgPath"] = imgPath;
+                    }), 0);
+                }).catch((err: any) => console.log(err));
+            } else if (Math.abs(1 - docAspect / cachedAspect) > 0.1) {
+                this.Document._width = this.Document[WidthSym]() || cachedNativeSize.width;
+                this.Document._height = this.Document[WidthSym]() * cachedAspect;
+            }
         } else if (this.Document._nativeWidth !== cachedNativeSize.width || this.Document._nativeHeight !== cachedNativeSize.height) {
             !(this.Document[StrCast(this.props.Document.layoutKey)] instanceof Doc) && setTimeout(() => {
                 if (!(this.Document[StrCast(this.props.Document.layoutKey)] instanceof Doc)) {
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 24cb08c4c..557adfc03 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -81,14 +81,12 @@ export class WebBox extends DocAnnotatableComponent<FieldViewProps, WebDocument>
 
     @action
     submitURL = () => {
-        const script = KeyValueBox.CompileKVPScript(`new WebField("${this.url}")`);
-        if (!script) return;
-        KeyValueBox.ApplyKVPScript(this.props.Document, "data", script);
+        this.dataDoc[this.props.fieldKey] = new WebField(new URL(this.url));
     }
 
     @action
     setURL() {
-        const urlField: FieldResult<WebField> = Cast(this.props.Document.data, WebField);
+        const urlField: FieldResult<WebField> = Cast(this.dataDoc[this.props.fieldKey], WebField);
         if (urlField) this.url = urlField.url.toString();
         else this.url = "";
     }