factored out image resizing, fixed back button, importer script, tooltips on range sliders

3 files changed, 22 insertions, 17 deletions

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 896ac1685..99c6fde34 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -207,7 +207,7 @@ export class ImageBox extends DocAnnotatableComponent<FieldViewProps, ImageDocum
             return url.href;
         } else if (url.href.indexOf(window.location.origin) === -1) {
             return Utils.CorsProxy(url.href);
-        } else if (!(lower.endsWith(".png") || lower.endsWith(".jpg") || lower.endsWith(".jpeg"))) {
+        } else if (!/\.(png|jpg|jpeg|gif)$/.test(lower)) {
             return url.href;//Why is this here
         }
         const ext = path.extname(url.href);
diff --git a/src/client/views/nodes/SliderBox-components.tsx b/src/client/views/nodes/SliderBox-components.tsx
index a38cad459..874a1108f 100644
--- a/src/client/views/nodes/SliderBox-components.tsx
+++ b/src/client/views/nodes/SliderBox-components.tsx
@@ -47,12 +47,12 @@ export class TooltipRail extends Component<TooltipRailProps> {
 
     onMouseEnter = () => {
         document.addEventListener("mousemove", this.onMouseMove);
-    };
+    }
 
     onMouseLeave = () => {
         this.setState({ value: null, percent: null });
         document.removeEventListener("mousemove", this.onMouseMove);
-    };
+    }
 
     onMouseMove = (e: Event) => {
         const { activeHandleID, getEventData } = this.props;
@@ -62,7 +62,7 @@ export class TooltipRail extends Component<TooltipRailProps> {
         } else {
             this.setState(getEventData(e));
         }
-    };
+    }
 
     render() {
         const { value, percent } = this.state;
@@ -120,11 +120,11 @@ export class Handle extends Component<HandleProps> {
 
     onMouseEnter = () => {
         this.setState({ mouseOver: true });
-    };
+    }
 
     onMouseLeave = () => {
         this.setState({ mouseOver: false });
-    };
+    }
 
     render() {
         const {
diff --git a/src/client/views/nodes/SliderBox.tsx b/src/client/views/nodes/SliderBox.tsx
index 2c9effe24..844d95d11 100644
--- a/src/client/views/nodes/SliderBox.tsx
+++ b/src/client/views/nodes/SliderBox.tsx
@@ -50,11 +50,11 @@ export class SliderBox extends DocComponent<FieldViewProps, SliderDocument>(Slid
     onChange = (values: readonly number[]) => runInAction(() => {
         this.Document._sliderMinThumb = values[0];
         this.Document._sliderMaxThumb = values[1];
-        Cast(this.Document.onThumbChanged, ScriptField, null)?.script.run({ range: values, this: this.props.Document })
+        Cast(this.Document.onThumbChanged, ScriptField, null)?.script.run({ range: values, this: this.props.Document });
     })
 
     render() {
-        const domain = [NumCast(this.props.Document._sliderMin), NumCast(this.props.Document._sliderMax)]
+        const domain = [NumCast(this.props.Document._sliderMin), NumCast(this.props.Document._sliderMax)];
         const defaultValues = [NumCast(this.props.Document._sliderMinThumb), NumCast(this.props.Document._sliderMaxThumb)];
         return (
             <div className="sliderBox-outerDiv" onContextMenu={this.specificContextMenu} onPointerDown={e => e.stopPropagation()}
@@ -76,15 +76,20 @@ export class SliderBox extends DocComponent<FieldViewProps, SliderDocument>(Slid
                         <Handles>
                             {({ handles, activeHandleID, getHandleProps }) => (
                                 <div className="slider-handles">
-                                    {handles.map(handle => (
-                                        <Handle
-                                            key={handle.id}
-                                            handle={handle}
-                                            domain={domain}
-                                            isActive={handle.id === activeHandleID}
-                                            getHandleProps={getHandleProps}
-                                        />
-                                    ))}
+                                    {handles.map((handle, i) => {
+                                        const value = i === 0 ? this.Document._sliderMinThumb : this.Document._sliderMaxThumb;
+                                        return (
+                                            <div title={String(value)}>
+                                                <Handle
+                                                    key={handle.id}
+                                                    handle={handle}
+                                                    domain={domain}
+                                                    isActive={handle.id === activeHandleID}
+                                                    getHandleProps={getHandleProps}
+                                                />
+                                            </div>
+                                        );
+                                    })}
                                 </div>
                             )}
                         </Handles>