Palette: leave gap for scrollbar

src/lib/editor/editor.component.ts

@@ -792,8 +792,8 @@ export class EditorComponent implements OnInit, OnDestroy {
     const parentWidth = parent.innerWidth();
     const parentHeight = parent.innerHeight();
     this.fitToContent(this.gridSize, this.gridSize, this.paperPadding, {
-      minWidth: parentWidth - SCROLLBAR_SIZE,
-      minHeight: parentHeight - SCROLLBAR_SIZE,
+      minWidth: parentWidth - Flo.SCROLLBAR_WIDTH,
+      minHeight: parentHeight - Flo.SCROLLBAR_WIDTH,
       allowNewOrigin: 'same'
     });
   }
@@ -810,7 +810,7 @@ export class EditorComponent implements OnInit, OnDestroy {
       minScaleY: minScale,
       maxScaleX: maxScale,
       maxScaleY: maxScale,
-      fittingBBox: {x: 0, y: 0, width: parentWidth - SCROLLBAR_SIZE, height: parentHeight - SCROLLBAR_SIZE}
+      fittingBBox: {x: 0, y: 0, width: parentWidth - Flo.SCROLLBAR_WIDTH, height: parentHeight - Flo.SCROLLBAR_WIDTH}
     });
     /**
      * Size the canvas appropriately and allow origin movement

src/lib/palette/palette.component.ts

@@ -278,7 +278,7 @@ export class Palette implements OnInit, OnDestroy, OnChanges {
     let paletteNodes: Array<dia.Element> = [];
     let groupAdded: Set<string> = new Set<string>();
 
-    let parentWidth: number = this._paletteSize;
+    let parentWidth: number = this._paletteSize - Flo.SCROLLBAR_WIDTH;
     console.debug(`Parent Width: ${parentWidth}`);
 
     // The field closedGroups tells us which should not be shown

src/lib/shared/flo-common.ts

@@ -246,6 +246,31 @@ export namespace Flo {
     }
   }
 
+  export function getScrollbarWidth() {
+
+    // Creating invisible container
+    const outer = document.createElement('div');
+    outer.style.visibility = 'hidden';
+    outer.style.overflow = 'scroll'; // forcing scrollbar to appear
+    outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
+    document.body.appendChild(outer);
+
+    // Creating inner element and placing it in the container
+    const inner = document.createElement('div');
+    outer.appendChild(inner);
+
+    // Calculating difference between container's full width and the child width
+    const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
+
+    // Removing temporary elements from the DOM
+    outer.parentNode.removeChild(outer);
+
+    return scrollbarWidth;
+
+  }
+
+  export const SCROLLBAR_WIDTH = getScrollbarWidth();
+
 }