diff --git a/src/lib/editor/editor.component.ts b/src/lib/editor/editor.component.ts index 283850a..3c44f64 100644 --- a/src/lib/editor/editor.component.ts +++ b/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 diff --git a/src/lib/palette/palette.component.ts b/src/lib/palette/palette.component.ts index 36ea071..a9a400b 100644 --- a/src/lib/palette/palette.component.ts +++ b/src/lib/palette/palette.component.ts @@ -278,7 +278,7 @@ export class Palette implements OnInit, OnDestroy, OnChanges { let paletteNodes: Array = []; let groupAdded: Set = new Set(); - 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 diff --git a/src/lib/shared/flo-common.ts b/src/lib/shared/flo-common.ts index 4477c49..803edf9 100644 --- a/src/lib/shared/flo-common.ts +++ b/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(); + }