Better scrollbars

src/index.tsx

@@ -4,6 +4,7 @@ import rough from "roughjs/bin/wrappers/rough";
 import { RoughCanvas } from "roughjs/bin/canvas";
 
 import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex";
+import { roundRect } from "./roundRect";
 
 import "./styles.scss";
 
@@ -254,38 +255,72 @@ type SceneState = {
 };
 
 const SCROLLBAR_WIDTH = 6;
+const SCROLLBAR_MIN_SIZE = 15;
 const SCROLLBAR_MARGIN = 4;
 const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
 const CANVAS_WINDOW_OFFSET_LEFT = 250;
 const CANVAS_WINDOW_OFFSET_TOP = 0;
 
-function getScrollbars(
+function getScrollBars(
   canvasWidth: number,
   canvasHeight: number,
   scrollX: number,
   scrollY: number
 ) {
+  let minX = Infinity;
+  let maxX = 0;
+  let minY = Infinity;
+  let maxY = 0;
+
+  elements.forEach(element => {
+    minX = Math.min(minX, getElementAbsoluteX1(element));
+    maxX = Math.max(maxX, getElementAbsoluteX2(element));
+    minY = Math.min(minY, getElementAbsoluteY1(element));
+    maxY = Math.max(maxY, getElementAbsoluteY2(element));
+  });
+
+  minX += scrollX;
+  maxX += scrollX;
+  minY += scrollY;
+  maxY += scrollY;
+  const leftOverflow = Math.max(-minX, 0);
+  const rightOverflow = Math.max(-(canvasWidth - maxX), 0);
+  const topOverflow = Math.max(-minY, 0);
+  const bottomOverflow = Math.max(-(canvasHeight - maxY), 0);
+
   // horizontal scrollbar
-  const sceneWidth = canvasWidth + Math.abs(scrollX);
-  const scrollBarWidth = (canvasWidth * canvasWidth) / sceneWidth;
-  const scrollBarX = scrollX > 0 ? 0 : canvasWidth - scrollBarWidth;
-  const horizontalScrollBar = {
-    x: scrollBarX + SCROLLBAR_MARGIN,
-    y: canvasHeight - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN,
-    width: scrollBarWidth - SCROLLBAR_MARGIN * 2,
-    height: SCROLLBAR_WIDTH
-  };
+  let horizontalScrollBar = null;
+  if (leftOverflow || rightOverflow) {
+    horizontalScrollBar = {
+      x: Math.min(
+        leftOverflow + SCROLLBAR_MARGIN,
+        canvasWidth - SCROLLBAR_MIN_SIZE - SCROLLBAR_MARGIN
+      ),
+      y: canvasHeight - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN,
+      width: Math.max(
+        canvasWidth - rightOverflow - leftOverflow - SCROLLBAR_MARGIN * 2,
+        SCROLLBAR_MIN_SIZE
+      ),
+      height: SCROLLBAR_WIDTH
+    };
+  }
 
   // vertical scrollbar
-  const sceneHeight = canvasHeight + Math.abs(scrollY);
-  const scrollBarHeight = (canvasHeight * canvasHeight) / sceneHeight;
-  const scrollBarY = scrollY > 0 ? 0 : canvasHeight - scrollBarHeight;
-  const verticalScrollBar = {
-    x: canvasWidth - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN,
-    y: scrollBarY + SCROLLBAR_MARGIN,
-    width: SCROLLBAR_WIDTH,
-    height: scrollBarHeight - SCROLLBAR_WIDTH * 2
-  };
+  let verticalScrollBar = null;
+  if (topOverflow || bottomOverflow) {
+    verticalScrollBar = {
+      x: canvasWidth - SCROLLBAR_WIDTH - SCROLLBAR_MARGIN,
+      y: Math.min(
+        topOverflow + SCROLLBAR_MARGIN,
+        canvasHeight - SCROLLBAR_MIN_SIZE - SCROLLBAR_MARGIN
+      ),
+      width: SCROLLBAR_WIDTH,
+      height: Math.max(
+        canvasHeight - bottomOverflow - topOverflow - SCROLLBAR_WIDTH * 2,
+        SCROLLBAR_MIN_SIZE
+      )
+    };
+  }
 
   return {
     horizontal: horizontalScrollBar,
@@ -301,13 +336,14 @@ function isOverScrollBars(
   scrollX: number,
   scrollY: number
 ) {
-  const scrollBars = getScrollbars(canvasWidth, canvasHeight, scrollX, scrollY);
+  const scrollBars = getScrollBars(canvasWidth, canvasHeight, scrollX, scrollY);
 
   const [isOverHorizontalScrollBar, isOverVerticalScrollBar] = [
     scrollBars.horizontal,
     scrollBars.vertical
   ].map(
     scrollBar =>
+      scrollBar &&
       scrollBar.x <= x &&
       x <= scrollBar.x + scrollBar.width &&
       scrollBar.y <= y &&
@@ -466,26 +502,30 @@ function renderScene(
   });
 
   if (renderScrollbars) {
-    const scrollBars = getScrollbars(
+    const scrollBars = getScrollBars(
       context.canvas.width / window.devicePixelRatio,
       context.canvas.height / window.devicePixelRatio,
       sceneState.scrollX,
       sceneState.scrollY
     );
 
+    const strokeStyle = context.strokeStyle;
     context.fillStyle = SCROLLBAR_COLOR;
-    context.fillRect(
-      scrollBars.horizontal.x,
-      scrollBars.horizontal.y,
-      scrollBars.horizontal.width,
-      scrollBars.horizontal.height
-    );
-    context.fillRect(
-      scrollBars.vertical.x,
-      scrollBars.vertical.y,
-      scrollBars.vertical.width,
-      scrollBars.vertical.height
-    );
+    context.strokeStyle = "rgba(255,255,255,0.8)";
+    [scrollBars.horizontal, scrollBars.vertical].forEach(scrollBar => {
+      if (scrollBar)
+        roundRect(
+          context,
+          scrollBar.x,
+          scrollBar.y,
+          scrollBar.width,
+          scrollBar.height,
+          SCROLLBAR_WIDTH / 2,
+          true,
+          true
+        );
+    });
+    context.strokeStyle = strokeStyle;
     context.fillStyle = fillStyle;
   }
 }
@@ -889,7 +929,6 @@ const SHAPES = [
 
 const shapesShortcutKeys = SHAPES.map(shape => shape.value[0]);
 
-
 function capitalize(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
@@ -1134,7 +1173,11 @@ class App extends React.Component<{}, AppState> {
           <h4>Shapes</h4>
           <div className="panelTools">
             {SHAPES.map(({ value, icon }) => (
-              <label key={value} className="tool" title={`${capitalize(value)} - ${capitalize(value)[0]}`}>
+              <label
+                key={value}
+                className="tool"
+                title={`${capitalize(value)} - ${capitalize(value)[0]}`}
+              >
                 <input
                   type="radio"
                   checked={this.state.elementType === value}

src/roundRect.ts

@@ -0,0 +1,66 @@
+/**
+ * https://stackoverflow.com/a/3368118
+ * Draws a rounded rectangle using the current state of the canvas.
+ * If you omit the last three params, it will draw a rectangle
+ * outline with a 5 pixel border radius
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Number} x The top left x coordinate
+ * @param {Number} y The top left y coordinate
+ * @param {Number} width The width of the rectangle
+ * @param {Number} height The height of the rectangle
+ * @param {Number} [radius = 5] The corner radius; It can also be an object
+ *                 to specify different radii for corners
+ * @param {Number} [radius.tl = 0] Top left
+ * @param {Number} [radius.tr = 0] Top right
+ * @param {Number} [radius.br = 0] Bottom right
+ * @param {Number} [radius.bl = 0] Bottom left
+ * @param {Boolean} [fill = false] Whether to fill the rectangle.
+ * @param {Boolean} [stroke = true] Whether to stroke the rectangle.
+ */
+export function roundRect(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius?: number | { tl: number; tr: number; br: number; bl: number },
+  fill?: boolean,
+  stroke?: boolean
+) {
+  if (typeof stroke === "undefined") {
+    stroke = true;
+  }
+  if (typeof radius === "undefined") {
+    radius = 5;
+  }
+  if (typeof radius === "number") {
+    radius = { tl: radius, tr: radius, br: radius, bl: radius };
+  } else {
+    const sides = ["tl", "tr", "br", "bl"] as const;
+    for (const side of sides) {
+      radius[side] = radius[side] || 0;
+    }
+  }
+  ctx.beginPath();
+  ctx.moveTo(x + radius.tl, y);
+  ctx.lineTo(x + width - radius.tr, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
+  ctx.lineTo(x + width, y + height - radius.br);
+  ctx.quadraticCurveTo(
+    x + width,
+    y + height,
+    x + width - radius.br,
+    y + height
+  );
+  ctx.lineTo(x + radius.bl, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
+  ctx.lineTo(x, y + radius.tl);
+  ctx.quadraticCurveTo(x, y, x + radius.tl, y);
+  ctx.closePath();
+  if (fill) {
+    ctx.fill();
+  }
+  if (stroke) {
+    ctx.stroke();
+  }
+}