diff --git a/src/components/application-menu/application-menu.vue b/src/components/application-menu/application-menu.vue
index 28fbeb4..fd378a6 100644
--- a/src/components/application-menu/application-menu.vue
+++ b/src/components/application-menu/application-menu.vue
@@ -394,7 +394,6 @@ import {
     CREATE_DOCUMENT, RESIZE_DOCUMENT, SAVE_DOCUMENT, EXPORT_IMAGE, LOAD_SELECTION, SAVE_SELECTION,
     PREFERENCES, RESIZE_CANVAS, GRID_TO_LAYERS, STROKE_SELECTION
 } from "@/definitions/modal-windows";
-import { getRectangleForSelection } from "@/math/selection-math";
 import CloudServiceConnector from "@/mixins/cloud-service-connector";
 import ImageToDocumentManager from "@/mixins/image-to-document-manager";
 import { getCanvasInstance } from "@/factories/sprite-factory";
@@ -403,6 +402,7 @@ import LayerFactory from "@/factories/layer-factory";
 import { supportsFullscreen, setToggleButton } from "@/utils/environment-util";
 import { cloneCanvas } from "@/utils/canvas-util";
 import { renderFullSize } from "@/utils/document-util";
+import { selectionToRectangle } from "@/utils/selection-util";
 import sharedMessages from "@/messages.json"; // for CloudServiceConnector
 import messages from "./messages.json";
 
@@ -574,8 +574,8 @@ export default {
                 width  : this.activeDocument.width,
                 height : this.activeDocument.height
             };
-            const selection = [ ...this.activeDocument.selection ];
-            const { left, top, width, height } = getRectangleForSelection( selection );
+            const selection = [ ...this.activeDocument.activeSelection ];
+            const { left, top, width, height } = selectionToRectangle( selection );
             const commit = async () => {
                 await store.commit( "cropActiveDocumentContent", { left, top });
                 store.commit( "setActiveDocumentSize", {
diff --git a/src/components/selection-menu/load-selection/load-selection.vue b/src/components/selection-menu/load-selection/load-selection.vue
index 4eb2ca4..162967d 100644
--- a/src/components/selection-menu/load-selection/load-selection.vue
+++ b/src/components/selection-menu/load-selection/load-selection.vue
@@ -1,7 +1,7 @@
 /**
  * The MIT License (MIT)
  *
- * Igor Zinken 2020-2022 - https://www.igorski.nl
+ * Igor Zinken 2020-2023 - https://www.igorski.nl
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of
  * this software and associated documentation files (the "Software"), to deal in
@@ -29,8 +29,9 @@
             <div class="form" @keyup.enter="requestLoad()">
                 <div class="wrapper input">
                     <label v-t="'availableSelections'"></label>
-                    <select-box :options="selections"
-                                 v-model="name"
+                    <select-box
+                        :options="selections"
+                        v-model="name"
                     />
                 </div>
             </div>
@@ -82,17 +83,24 @@ export default {
             return this.name.length > 0;
         },
     },
+    created() {
+        this.name = this.selections[ 0 ].value;
+    },
     methods: {
         ...mapMutations([
             "closeModal",
             "setActiveTool",
         ]),
-        requestLoad() {
+        async requestLoad() {
             if ( !this.isValid ) {
                 return;
             }
             this.setActiveTool({ tool: ToolTypes.LASSO, document: this.activeDocument });
+
+            // allow interaction pane to spawn (if no select mode was active yet)
+            await this.$nextTick();
             getCanvasInstance()?.interactionPane.setSelection( this.activeDocument.selections[ this.name ]);
+
             this.closeModal();
         },
     },
diff --git a/src/components/selection-menu/save-selection/save-selection.vue b/src/components/selection-menu/save-selection/save-selection.vue
index 26a7ebc..a9341b6 100644
--- a/src/components/selection-menu/save-selection/save-selection.vue
+++ b/src/components/selection-menu/save-selection/save-selection.vue
@@ -89,7 +89,7 @@ export default {
             if ( !this.isValid ) {
                 return;
             }
-            this.saveSelection({ name: this.name, selection: this.activeDocument.selection });
+            this.saveSelection({ name: this.name, selection: this.activeDocument.activeSelection });
             this.closeModal();
         },
     },
diff --git a/src/components/stroke-selection-window/stroke-selection-window.vue b/src/components/stroke-selection-window/stroke-selection-window.vue
index a21bf98..5e37a2f 100644
--- a/src/components/stroke-selection-window/stroke-selection-window.vue
+++ b/src/components/stroke-selection-window/stroke-selection-window.vue
@@ -112,7 +112,7 @@ export default {
                 type      : "stroke",
                 size      : this.size,
                 color     : this.color,
-                selection : this.activeDocument.selection
+                selection : this.activeDocument.activeSelection
             });
             this.closeModal();
         },
diff --git a/src/components/tool-options-panel/tool-options-selection/messages.json b/src/components/tool-options-panel/tool-options-selection/messages.json
index a1beaef..125fb38 100644
--- a/src/components/tool-options-panel/tool-options-selection/messages.json
+++ b/src/components/tool-options-panel/tool-options-selection/messages.json
@@ -3,6 +3,7 @@
         "selection": "Selection",
         "lockedRatio": "Locked ratio",
         "shiftKey": "Hold Shift while drawing selection",
+        "mergeDescr": "Hold shift prior to drawing a new selection to add to the existing selection.",
         "widthToHeight": "Width : height",
         "existingSelection": "Existing selection",
         "coordinates": "Coordinates",
diff --git a/src/components/tool-options-panel/tool-options-selection/tool-options-selection.vue b/src/components/tool-options-panel/tool-options-selection/tool-options-selection.vue
index 3d605d3..80912b5 100644
--- a/src/components/tool-options-panel/tool-options-selection/tool-options-selection.vue
+++ b/src/components/tool-options-panel/tool-options-selection/tool-options-selection.vue
@@ -1,7 +1,7 @@
 /**
  * The MIT License (MIT)
  *
- * Igor Zinken 2021-2022 - https://www.igorski.nl
+ * Igor Zinken 2021-2023 - https://www.igorski.nl
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of
  * this software and associated documentation files (the "Software"), to deal in
@@ -27,6 +27,7 @@
         @focusout="handleBlur"
     >
         <h3 v-t="'selection'"></h3>
+        <p v-t="'mergeDescr'"></p>
         <template v-if="!isLassoSelection">
             <div class="wrapper input">
                 <label v-t="'lockedRatio'" v-tooltip="$t('shiftKey')"></label>
@@ -82,7 +83,7 @@
                     class="input-field half"
                     :min="1"
                     :max="maxWidth"
-                    :disabled="!hasSelection"
+                    :disabled="!hasSelection || hasMultipleShapes"
                 />
                 <input
                     type="number"
@@ -90,24 +91,25 @@
                     class="input-field half"
                     :min="1"
                     :max="maxHeight"
-                    :disabled="!hasSelection"
+                    :disabled="!hasSelection || hasMultipleShapes"
                 />
             </div>
         </template>
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters, mapMutations } from "vuex";
 import { ToggleButton } from "vue-js-toggle-button";
 import ToolTypes from "@/definitions/tool-types";
-import KeyboardService from "@/services/keyboard-service";
+import type { Rectangle } from "@/definitions/document";
 import { getCanvasInstance } from "@/factories/sprite-factory";
+import { translatePoints } from "@/math/point-math";
+import KeyboardService from "@/services/keyboard-service";
+import { selectionToRectangle } from "@/utils/selection-util";
 
 import messages from "./messages.json";
 
-const clamp = value => value === Infinity ? 1 : value === -Infinity ? 0 : value;
-
 export default {
     i18n: { messages },
     components: {
@@ -127,35 +129,35 @@ export default {
             "selectionOptions",
         ]),
         maintainRatio: {
-            get() {
+            get(): boolean {
                 return this.selectionOptions.lockRatio;
             },
-            set( value ) {
+            set( value: boolean ): void {
                 this.setToolOptionValue({ tool: ToolTypes.SELECTION, option: "lockRatio", value });
             }
         },
         xRatio: {
-            get() {
+            get(): number {
                 return this.selectionOptions.xRatio;
             },
-            set( value ) {
+            set( value: number ): void {
                 this.setToolOptionValue({ tool: ToolTypes.SELECTION, option: "xRatio", value });
             }
         },
         yRatio: {
-            get() {
+            get(): number {
                 return this.selectionOptions.yRatio;
             },
-            set( value ) {
+            set( value: number ): void {
                 this.setToolOptionValue({ tool: ToolTypes.SELECTION, option: "yRatio", value });
             }
         },
         /* existing selection coordinates */
         x: {
-            get() {
-                return Math.round( this.cachedSelectionBounds.x );
+            get(): number {
+                return Math.round( this.cachedSelectionBounds.left );
             },
-            set( value ) {
+            set( value: number ): void {
                 if ( isNaN( value )) {
                     return;
                 }
@@ -163,10 +165,10 @@ export default {
             }
         },
         y: {
-            get() {
-                return Math.round( this.cachedSelectionBounds.y );
+            get(): number {
+                return Math.round( this.cachedSelectionBounds.top );
             },
-            set( value ) {
+            set( value: number ): void {
                 if ( isNaN( value )) {
                     return;
                 }
@@ -174,10 +176,10 @@ export default {
             }
         },
         width: {
-            get() {
+            get(): number {
                 return Math.round( this.cachedSelectionBounds.width );
             },
-            set( value ) {
+            set( value: number ): void {
                 if ( isNaN( value )) {
                     return;
                 }
@@ -185,42 +187,30 @@ export default {
             }
         },
         height: {
-            get() {
+            get(): number {
                 return Math.round( this.cachedSelectionBounds.height );
             },
-            set( value ) {
+            set( value: number ): void {
                 if ( isNaN( value )) {
                     return;
                 }
                 this.adjustSelectionSize( this.width, Math.min( this.maxHeight - this.y, Math.abs( value )));
             }
         },
-        cachedSelectionBounds() {
+        cachedSelectionBounds(): Rectangle {
             if ( !this.hasSelection ) {
-                return { x: 0, y: 0, width: 0, height: 0 };
+                return { left: 0, top: 0, width: 0, height: 0 };
             }
-            let x = Infinity;
-            let y = Infinity;
-            let r = -Infinity;
-            let b = -Infinity;
-            this.activeDocument.selection.forEach( point => {
-                x = point.x < x ? point.x : x;
-                y = point.y < y ? point.y : y;
-                r = point.x > r ? point.x : r;
-                b = point.y > b ? point.y : b;
-            });
-            return {
-                x      : clamp( x ),
-                y      : clamp( y ),
-                width  : clamp( r - x ),
-                height : clamp( b - y )
-            };
+            return selectionToRectangle( this.activeDocument.activeSelection );
         },
-        isLassoSelection() {
+        isLassoSelection(): boolean {
             return this.activeTool === ToolTypes.LASSO;
         },
+        hasMultipleShapes(): boolean {
+            return this.activeDocument.activeSelection.length > 1;
+        },
     },
-    created() {
+    created(): void {
         this.maxWidth  = this.activeDocument.width - 1;
         this.maxHeight = this.activeDocument.height - 1;
     },
@@ -228,21 +218,18 @@ export default {
         ...mapMutations([
             "setToolOptionValue",
         ]),
-        handleFocus() {
+        handleFocus(): void {
             KeyboardService.setSuspended( true );
         },
-        handleBlur() {
+        handleBlur(): void {
             KeyboardService.setSuspended( false );
         },
-        moveSelection( deltaX = 0, deltaY = 0 ) {
+        moveSelection( deltaX = 0, deltaY = 0 ): void {
             getCanvasInstance()?.interactionPane.setSelection(
-                this.activeDocument.selection.map(({ x, y }) => ({
-                    x: x + deltaX,
-                    y: y + deltaY
-                })), true
-            );
+                this.activeDocument.activeSelection.map( shape => translatePoints( shape, deltaX, deltaY )
+            ), true );
         },
-        adjustSelectionSize( newWidth = 1, newHeight = 1 ) {
+        adjustSelectionSize( newWidth = 1, newHeight = 1 ): void {
             const wider  = newWidth  >= this.width;
             const taller = newHeight >= this.height;
             const maxX   = this.x + newWidth;
@@ -251,10 +238,10 @@ export default {
             const prevBottom = this.y + this.height;
 
             getCanvasInstance()?.interactionPane.setSelection(
-                this.activeDocument.selection.map(({ x, y }) => ({
+                this.activeDocument.activeSelection.map( shape => shape.map(({ x, y }) => ({
                     x: wider  && x === prevRight  ? Math.max( maxX, x ) : Math.min( maxX, x ),
                     y: taller && y === prevBottom ? Math.max( maxY, y ) : Math.min( maxY, y ),
-                })), true
+                }))), true
             );
         }
     }
diff --git a/src/definitions/document.ts b/src/definitions/document.ts
index d96c31a..05e0d50 100644
--- a/src/definitions/document.ts
+++ b/src/definitions/document.ts
@@ -69,7 +69,11 @@ export type Text = {
     color: string;
 };
 
-export type Selection = Point[];
+// a shape is a list of Points (describing coordinates within a polygon)
+export type Shape = Point[];
+
+// selections can consist of multiple non-connecting Shapes
+export type Selection = Shape[];
 
 export type Document = {
     id: string;
@@ -79,6 +83,6 @@ export type Document = {
     height: number;
     selections: Record<string, Selection>,
     // the below are only used at runtime, will not be serialized
-    selection: null | Selection;
+    activeSelection: Selection;
     invertSelection: boolean;
 };
diff --git a/src/factories/document-factory.ts b/src/factories/document-factory.ts
index e16a576..780d0c3 100644
--- a/src/factories/document-factory.ts
+++ b/src/factories/document-factory.ts
@@ -1,7 +1,7 @@
 /**
  * The MIT License (MIT)
  *
- * Igor Zinken 2020-2021 - https://www.igorski.nl
+ * Igor Zinken 2020-2023 - https://www.igorski.nl
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of
  * this software and associated documentation files (the "Software"), to deal in
@@ -47,7 +47,7 @@ const DocumentFactory = {
             height,
             selections,
             // only used at runtime, will not be serialized
-            selection: null,
+            activeSelection: [],
             invertSelection: false,
         };
     },
diff --git a/src/math/selection-math.ts b/src/math/selection-math.ts
index 4766ab3..2c79fc8 100644
--- a/src/math/selection-math.ts
+++ b/src/math/selection-math.ts
@@ -20,72 +20,21 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-import type { Rectangle } from "zcanvas";
-import type { Selection } from "@/definitions/document";
+import type { Shape } from "@/definitions/document";
 
 const UP     = 0;
 const LEFT   = 1;
 const DOWN   = 2;
 const RIGHT  = 3;
 
-export const getRectangleForSelection = ( selection: Selection ): Rectangle => {
-    let minX = Infinity;
-    let minY = Infinity;
-    let maxX = 0;
-    let maxY = 0;
-
-    selection.forEach(({ x, y }) => {
-        minX = Math.min( minX, x );
-        maxX = Math.max( maxX, x );
-        minY = Math.min( minY, y );
-        maxY = Math.max( maxY, y );
-    });
-    return {
-        left   : minX,
-        top    : minY,
-        width  : maxX - minX,
-        height : maxY - minY
-    };
-};
-
-export const createSelectionForRectangle = ( width: number, height: number, x = 0, y = 0 ): Selection => [
-    { x, y },
-    { x: x + width, y },
-    { x: x + width, y: y + height },
-    { x, y: y + height },
-    { x, y }
-];
-
-export const isSelectionRectangular = ( selection: Selection ): boolean => {
-    if ( selection.length !== 5 ) {
-        return false;
-    }
-    if ( selection[ 1 ].x !== selection[ 2 ].x ||
-         selection[ 2 ].y !== selection[ 3 ].y ) {
-        return false;
-    }
-    return isSelectionClosed( selection );
-};
-
-export const isSelectionClosed = ( selection: Selection ): boolean => {
-    // smallest selection is four point polygon
-    if ( !selection || selection.length < 3 ) {
-        return false;
-    }
-    const firstPoint = selection[ 0 ];
-    const lastPoint  = selection[ selection.length - 1 ];
-
-    return firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y;
-};
-
 /**
  * @param {HTMLCanvasElement} cvs
  * @param {number} sourceX
  * @param {number} sourceY
  * @param {number=} threshold in 0 - 100 range
- * @return {Selection}
+ * @return {Shape}
  */
-export const selectByColor = ( cvs: HTMLCanvasElement, sourceX: number, sourceY: number, threshold = 0 ): Selection => {
+export const selectByColor = ( cvs: HTMLCanvasElement, sourceX: number, sourceY: number, threshold = 0 ): Shape => {
     const { width, height } = cvs;
 
     const ctx = cvs.getContext( "2d" );
@@ -213,14 +162,3 @@ export const selectByColor = ( cvs: HTMLCanvasElement, sourceX: number, sourceY:
 
     return path;
 };
-
-export const mergeSelections = ( selectionA: Selection, selectionB: Selection ): Selection => {
-    // TODO this is quite brute force...
-    const out = [ ...selectionA ];
-    for ( const { x, y } of selectionB ) {
-        if ( !out.find( compare => compare.x === x && compare.y === y )) {
-            out.push({ x, y });
-        }
-    }
-    return out;
-};
diff --git a/src/rendering/canvas-elements/interaction-pane.ts b/src/rendering/canvas-elements/interaction-pane.ts
index 7a3a46f..0553854 100644
--- a/src/rendering/canvas-elements/interaction-pane.ts
+++ b/src/rendering/canvas-elements/interaction-pane.ts
@@ -23,19 +23,21 @@
 import Vue from "vue";
 import { sprite } from "zcanvas";
 import type { Point, Size, Viewport } from "zcanvas";
-import type { Document, Layer, Selection } from "@/definitions/document";
+import type { Document, Layer, Shape, Selection } from "@/definitions/document";
 import ToolTypes from "@/definitions/tool-types";
 import { enqueueState } from "@/factories/history-state-factory";
 import { getCanvasInstance, getSpriteForLayer } from "@/factories/sprite-factory";
 import { isPointInRange, translatePoints, snapToAngle, rectToCoordinateList } from "@/math/point-math";
 import { scaleRectangle } from "@/math/rectangle-math";
-import { isSelectionClosed, createSelectionForRectangle, selectByColor, mergeSelections } from "@/math/selection-math";
+import { selectByColor } from "@/math/selection-math";
 import { fastRound } from "@/math/unit-math";
 import LayerSprite from "@/rendering/canvas-elements/layer-sprite";
 import type ZoomableCanvas from "@/rendering/canvas-elements/zoomable-canvas";
 import KeyboardService from "@/services/keyboard-service";
 import { isInsideTransparentArea } from "@/utils/canvas-util";
 import { createDocumentSnapshot, createLayerSnapshot } from "@/utils/document-util";
+import { getLastShape } from "@/utils/selection-util";
+import { rectangleToShape, mergeShapes, isShapeClosed } from "@/utils/shape-util";
 
 export enum InteractionModes {
     MODE_PAN = 0,
@@ -57,6 +59,7 @@ class InteractionPane extends sprite {
     private _pointerDown: boolean;
     private _hasSelection: boolean;
     private _selectionClosed: boolean;
+    private _isAddingToExistingSelection: boolean;
     private _isRectangleSelect: boolean;
     private _activeTool: ToolTypes;
     private _pointerX: number;
@@ -105,13 +108,13 @@ class InteractionPane extends sprite {
         if ( document && mode === InteractionModes.MODE_SELECTION ) {
             // create empty selection (or reset to empty selection when switching between
             // rectangle selection tool modes)
-            if ( !document.selection ) {
+            if ( !document.activeSelection ) {
                 this.setSelection( [] );
             } else if ( this._activeTool !== activeTool ) {
                 this.resetSelection();
             }
-            this._hasSelection    = document.selection.length > 0;
-            this._selectionClosed = isSelectionClosed( document.selection );
+            this._hasSelection = document.activeSelection.length > 0;
+            this._selectionClosed = isShapeClosed( getLastShape( document.activeSelection ));
             // we distinguish between the rectangular and lasso selection tool
             this._isRectangleSelect = activeTool === ToolTypes.SELECTION;
             // selection mode has an always active move listener
@@ -125,7 +128,7 @@ class InteractionPane extends sprite {
     }
 
     handleActiveTool( tool: ToolTypes, remainInteractive: boolean ): void {
-        if ( tool !== ToolTypes.LASSO && this.getActiveDocument()?.selection && !this._selectionClosed ) {
+        if ( tool !== ToolTypes.LASSO && this.getActiveDocument()?.activeSelection && !this._selectionClosed ) {
             // reset unclosed selection when switching tools
             this.resetSelection();
         }
@@ -151,14 +154,14 @@ class InteractionPane extends sprite {
 
     resetSelection(): void {
         const document = this.getActiveDocument();
-        const currentSelection = document.selection || [];
+        const currentSelection = document.activeSelection || [];
         if ( this.mode === InteractionModes.MODE_SELECTION ) {
             this.setSelection( [] );
-            if ( isSelectionClosed( currentSelection )) {
+            if ( isShapeClosed( getLastShape( currentSelection ))) {
                 storeSelectionHistory( document, currentSelection, "reset" );
             }
         } else {
-            Vue.delete( document, "selection" );
+            Vue.set( document, "activeSelection", [] );
         }
         Vue.set( document, "invertSelection", false );
         this._selectionClosed = false;
@@ -168,18 +171,18 @@ class InteractionPane extends sprite {
 
     setSelection( value: Selection, optStoreState = false ): void {
         const document = this.getActiveDocument();
-        const currentSelection = document.selection || [];
-        Vue.set( document, "selection", value );
+        const currentSelection = document.activeSelection || [];
+        Vue.set( document, "activeSelection", value );
         if ( optStoreState ) {
             storeSelectionHistory( document, currentSelection );
         }
-        this._selectionClosed = value?.length > 1; // TODO: can we determine this from first and last point?
+        this._selectionClosed = isShapeClosed( getLastShape( value ));
         this.invalidate();
     }
 
     invertSelection(): void {
         const document = this.getActiveDocument();
-        if ( document.selection?.length > 0 ) {
+        if ( document.activeSelection?.length > 0 ) {
             const curValue = document.invertSelection;
             const updateFn = ( value: boolean ) => {
                 Vue.set( document, "invertSelection", value );
@@ -200,7 +203,7 @@ class InteractionPane extends sprite {
     selectAll( targetLayer: Layer = null ): void {
         const bounds = targetLayer ? getSpriteForLayer( targetLayer ).getBounds() : this._bounds;
         this.setSelection(
-            rectToCoordinateList( bounds.left, bounds.top, bounds.width, bounds.height )
+            [ rectToCoordinateList( bounds.left, bounds.top, bounds.width, bounds.height )]
         );
     }
 
@@ -223,6 +226,12 @@ class InteractionPane extends sprite {
         this.mode === InteractionModes.MODE_SELECTION && this.handleRelease( this._pointerX, this._pointerY );
     }
 
+    closeSelection(): void {
+        this._selectionClosed = true;
+        // triggers reactivity (as activeSelection is a nested array)
+        this.canvas.store.commit( "setActiveSelection", [ ...this.getActiveDocument().activeSelection ]);
+    }
+
     /* zCanvas.sprite overrides */
 
     async handlePress( x: number, y: number ): Promise<void> {
@@ -252,23 +261,38 @@ class InteractionPane extends sprite {
                 break;
 
             case InteractionModes.MODE_SELECTION:
+                const isShiftKeyDown = KeyboardService.hasShift();
+                let { activeSelection } = this.getActiveDocument();
                 let completeSelection = false;
+
                 if ( this._activeTool === ToolTypes.WAND ) {
                     const cvs = await ( this._toolOptions.sampleMerged ? createDocumentSnapshot( this.getActiveDocument() ) : createLayerSnapshot( this.getActiveLayer() ));
-                    let selection = selectByColor( cvs, x, y, this._toolOptions.threshold );
-                    if ( KeyboardService.hasShift() ) {
-                        selection = mergeSelections( selection, this.getActiveDocument().selection ?? [] );
+                    const selectedShape: Shape = selectByColor( cvs, x, y, this._toolOptions.threshold );
+                    if ( isShiftKeyDown ) {
+                        // TODO check if mergable first in above condition
+                        activeSelection = [ mergeShapes( selectedShape, getLastShape( activeSelection ) ?? [] ) ];
+                    } else {
+                        activeSelection = [ ...activeSelection, selectedShape ];
                     }
-                    this.canvas.store.commit( "setRuntimeSelection", selection );
+                    this.canvas.store.commit( "setActiveSelection", activeSelection );
                     completeSelection = true;
                 }
-                else if ( !this._selectionClosed ) {
-                    const { selection } = this.getActiveDocument();
+                else if ( !this._selectionClosed || isShiftKeyDown ) {
+                    this._isAddingToExistingSelection = activeSelection.length > 0 && isShiftKeyDown && this._selectionClosed;
+                    if ( this._isAddingToExistingSelection ) {
+                        activeSelection.push( [] );
+                        this._selectionClosed = false;
+                    }
+                    let selectionShape: Shape = getLastShape( activeSelection );
+                    if ( !selectionShape ) {
+                        selectionShape = [];
+                        this.canvas.store.commit( "setActiveSelection", [ selectionShape ]);
+                    }
                     // selection mode, set the click coordinate as the first point in the selection
-                    const firstPoint = selection[ 0 ];
+                    const firstPoint = selectionShape[ 0 ];
                     if ( firstPoint ) {
-                        if ( KeyboardService.hasShift() ) {
-                            ({ x, y } = snapToAngle( x, y, selection[ selection.length - 1 ] ));
+                        if ( isShiftKeyDown ) {
+                            ({ x, y } = snapToAngle( x, y, selectionShape.at( -1 ) ));
                         }
                         else if ( isPointInRange( x, y, firstPoint.x, firstPoint.y, 5 / this.canvas.zoomFactor )) {
                             // point was in range of start coordinate, snap and close selection
@@ -277,7 +301,7 @@ class InteractionPane extends sprite {
                             completeSelection = true;
                         }
                     }
-                    selection.push({ x, y });
+                    selectionShape.push({ x, y });
                 }
                 if ( completeSelection ) {
                     storeSelectionHistory( this.getActiveDocument() );
@@ -301,8 +325,8 @@ class InteractionPane extends sprite {
                 // when mouse is down and selection is closed, drag the selection
                 if ( this._selectionClosed && this._pointerDown ) {
                     const document = this.getActiveDocument();
-                    const currentSelection = document.selection;
-                    document.selection = translatePoints( currentSelection, x - this._dragStartEventCoordinates.x, y - this._dragStartEventCoordinates.y );
+                    const currentSelection = document.activeSelection;
+                    document.activeSelection = currentSelection.map( s => translatePoints( s, x - this._dragStartEventCoordinates.x, y - this._dragStartEventCoordinates.y ));
                     this._dragStartEventCoordinates = { x, y }; // update to current position so we can easily move the selection using relative deltas
                     storeSelectionHistory( document, currentSelection, "drag" );
                 }
@@ -328,6 +352,7 @@ class InteractionPane extends sprite {
         this._lastRelease   = now;
 
         if ( this.mode === InteractionModes.MODE_SELECTION ) {
+            this._isAddingToExistingSelection = false;
             this.forceMoveListener(); // keep the move listener active
             if ( isDoubleClick && this._selectionClosed ) {
                 this.resetSelection();
@@ -335,20 +360,20 @@ class InteractionPane extends sprite {
             }
             const document = this.getActiveDocument();
             if ( this._isRectangleSelect ) {
-                if ( document.selection.length > 0 && !this._selectionClosed ) {
+                if ( !this._selectionClosed ) {
                     // when releasing in rectangular select mode, set the selection to
                     // the bounding box of the down press coordinate and this release coordinate
-                    const firstPoint = document.selection[ 0 ];
+                    const firstPoint = getLastShape( document.activeSelection )[ 0 ];
                     const { width, height } = calculateSelectionSize( firstPoint, Math.max( 0, Math.min( document.width, x )), Math.max( 0, Math.min( document.height, y )), this._toolOptions );
-                    document.selection = rectToCoordinateList( firstPoint.x, firstPoint.y, width, height );
-                    this._selectionClosed = true;
+                    document.activeSelection[ document.activeSelection.length - 1 ] = rectToCoordinateList( firstPoint.x, firstPoint.y, width, height );
+                    this.closeSelection();
                     storeSelectionHistory( document );
                 }
             }
             else if ( isDoubleClick && !this._selectionClosed ) {
                 // double click on unclosed lasso tool selections auto-closes the selection
-                document.selection.push({ ...document.selection[ 0 ] });
-                this._selectionClosed = true;
+                document.activeSelection.at( -1 ).push({ ...document.activeSelection.at( -1 )[ 0 ] });
+                this.closeSelection();
                 storeSelectionHistory( document );
             }
         }
@@ -356,45 +381,49 @@ class InteractionPane extends sprite {
 
     draw( ctx: CanvasRenderingContext2D, viewport: Viewport ): void {
         // render selection outline
-        let { selection, invertSelection, width, height } = this.getActiveDocument();
-        if ( /*this.mode === InteractionModes.MODE_SELECTION && */ selection?.length ) {
-            const firstPoint    = selection[ 0 ];
-            const localPointerX = this._pointerX - viewport.left; // local to viewport
-            const localPointerY = this._pointerY - viewport.top;
-            const hasUnclosedSelection = selection.length && !this._selectionClosed;
+        let { invertSelection, width, height } = this.getActiveDocument();
+        const { activeSelection } = this.getActiveDocument();
+        if ( /*this.mode === InteractionModes.MODE_SELECTION && */ activeSelection?.length > 0 ) {
+            for ( let shape of activeSelection ) {
+                const connectToPointer = shape === activeSelection.at( -1 );
+                const firstPoint    = shape[ 0 ];
+                const localPointerX = this._pointerX - viewport.left; // local to viewport
+                const localPointerY = this._pointerY - viewport.top;
+                const hasUnclosedSelection = shape.length && !this._selectionClosed;
 
-            // when in rectangular select mode, the outline will draw from the first coordinate
-            // (defined in handlePress()) to the current pointer coordinate
-            if ( this._isRectangleSelect && hasUnclosedSelection ) {
-                const { width, height } = calculateSelectionSize( firstPoint, this._pointerX, this._pointerY, this._toolOptions );
-                selection = rectToCoordinateList( firstPoint.x, firstPoint.y, width, height );
-            }
-            // for unclosed lasso selections, draw line to current cursor position
-            let currentPosition = null;
-            if ( !this._isRectangleSelect && hasUnclosedSelection ) {
-                currentPosition = KeyboardService.hasShift() ?
-                    snapToAngle( localPointerX, localPointerY, selection[ selection.length - 1 ], viewport )
-                : { x: localPointerX, y: localPointerY };
-            }
+                // when in rectangular select mode, the outline will draw from the first coordinate
+                // (defined in handlePress()) to the current pointer coordinate
+                if ( connectToPointer && this._isRectangleSelect && hasUnclosedSelection ) {
+                    const { width, height } = calculateSelectionSize( firstPoint, this._pointerX, this._pointerY, this._toolOptions );
+                    shape = rectToCoordinateList( firstPoint.x, firstPoint.y, width, height );
+                }
+                // for unclosed lasso selections, draw line to current cursor position
+                let currentPosition = null;
+                if ( connectToPointer && !this._isRectangleSelect && hasUnclosedSelection ) {
+                    currentPosition = KeyboardService.hasShift() ?
+                        snapToAngle( localPointerX, localPointerY, shape.at( -1 ), viewport )
+                    : { x: localPointerX, y: localPointerY };
+                }
 
-            // draw each point in the selection
-            drawSelection( ctx, this.canvas, viewport, selection, currentPosition );
-            if ( invertSelection && !hasUnclosedSelection ) {
-                drawSelection( ctx, this.canvas, viewport, createSelectionForRectangle( width, height ), currentPosition );
-            }
+                // draw each point in the selection
+                drawSelectionShape( ctx, this.canvas, viewport, shape, currentPosition );
+                if ( invertSelection && !hasUnclosedSelection ) {
+                    drawSelectionShape( ctx, this.canvas, viewport, rectangleToShape( width, height ), currentPosition );
+                }
 
-            // highlight current cursor position for unclosed selections
-            ctx.save();
-            if ( !this._selectionClosed ) {
-                const { zoomFactor } = this.canvas;
-                ctx.beginPath();
-                ctx.lineWidth   = ctx.lineWidth * ( 2 / zoomFactor );
-                ctx.strokeStyle = "#0db0bc";
-                const size = firstPoint && isPointInRange( this._pointerX, this._pointerY, firstPoint.x, firstPoint.y, 5 / zoomFactor ) ? 15 : 5;
-                ctx.arc( localPointerX, localPointerY, size / zoomFactor, 0, 2 * Math.PI );
-                ctx.stroke();
+                // highlight current cursor position for unclosed selections
+                ctx.save();
+                if ( !this._selectionClosed ) {
+                    const { zoomFactor } = this.canvas;
+                    ctx.beginPath();
+                    ctx.lineWidth   = ctx.lineWidth * ( 2 / zoomFactor );
+                    ctx.strokeStyle = "#0db0bc";
+                    const size = firstPoint && isPointInRange( this._pointerX, this._pointerY, firstPoint.x, firstPoint.y, 5 / zoomFactor ) ? 15 : 5;
+                    ctx.arc( localPointerX, localPointerY, size / zoomFactor, 0, 2 * Math.PI );
+                    ctx.stroke();
+                }
+                ctx.restore();
             }
-            ctx.restore();
         } else {
             // show bounding box around active layer
             const activeLayer = this.getActiveLayer();
@@ -427,24 +456,24 @@ export default InteractionPane;
 
 /* internal methods */
 
-function drawSelection( ctx: CanvasRenderingContext2D, zCanvas: ZoomableCanvas, viewport: Viewport,
-    selection: Selection, currentPosition: Point ): void {
+function drawSelectionShape( ctx: CanvasRenderingContext2D, zCanvas: ZoomableCanvas, viewport: Viewport,
+                             shape: Shape, currentPosition: Point ): void {
     ctx.save();
-    drawSelectionOutline( ctx, zCanvas, viewport, selection, "#000", currentPosition );
+    drawShapeOutline( ctx, zCanvas, viewport, shape, "#000", currentPosition );
     ctx.restore();
 
     ctx.save();
     ctx.setLineDash([ 10 / zCanvas.zoomFactor ]);
-    drawSelectionOutline( ctx, zCanvas, viewport, selection, "#FFF", currentPosition );
+    drawShapeOutline( ctx, zCanvas, viewport, shape, "#FFF", currentPosition );
     ctx.restore();
 }
 
-function drawSelectionOutline( ctx: CanvasRenderingContext2D, zCanvas: ZoomableCanvas, viewport: Viewport,
-    selection: Selection, color: string, currentPosition: Point = null ): void {
+function drawShapeOutline( ctx: CanvasRenderingContext2D, zCanvas: ZoomableCanvas, viewport: Viewport,
+                           shape: Shape, color: string, currentPosition: Point = null ): void {
     ctx.lineWidth = 2 / zCanvas.zoomFactor;
     ctx.beginPath();
     ctx.strokeStyle = color;
-    selection.forEach(( point, index ) => {
+    shape.forEach(( point, index ) => {
         ctx[ index === 0 ? "moveTo" : "lineTo" ](
             ( .5 + point.x - viewport.left ) << 0,
             ( .5 + point.y - viewport.top )  << 0
@@ -481,7 +510,7 @@ function syncSelection(): void {
 }
 
 function storeSelectionHistory( document: Document, optPreviousSelection: Selection = [], optType = "" ): void {
-    const selection = [ ...document.selection ];
+    const selection = [ ...document.activeSelection ];
     enqueueState( `selection_${document.name}${optType}`, {
         undo() {
             const cvs = getCanvasInstance();
diff --git a/src/rendering/canvas-elements/layer-sprite.ts b/src/rendering/canvas-elements/layer-sprite.ts
index 97fd2bc..943340c 100644
--- a/src/rendering/canvas-elements/layer-sprite.ts
+++ b/src/rendering/canvas-elements/layer-sprite.ts
@@ -29,11 +29,10 @@ import { createCanvas, canvasToBlob, globalToLocal } from "@/utils/canvas-util";
 import { renderCross } from "@/utils/render-util";
 import { blobToResource } from "@/utils/resource-manager";
 import { getSizeForBrush } from "@/definitions/brush-types";
-import type { Document, Layer, Selection } from "@/definitions/document";
+import type { Document, Layer, Shape, Selection } from "@/definitions/document";
 import type { CanvasContextPairing, CanvasDrawable, Brush, BrushToolOptions, BrushAction } from "@/definitions/editor";
 import { LayerTypes } from "@/definitions/layer-types";
 import ToolTypes, { canDrawOnSelection } from "@/definitions/tool-types";
-import { isSelectionClosed } from "@/math/selection-math";
 import { scaleRectangle, rotateRectangle } from "@/math/rectangle-math";
 import { translatePointerRotation } from "@/math/point-math";
 import { renderEffectsForLayer } from "@/services/render-service";
@@ -50,6 +49,8 @@ import {
 import BrushFactory from "@/factories/brush-factory";
 import { getSpriteForLayer } from "@/factories/sprite-factory";
 import { enqueueState } from "@/factories/history-state-factory";
+import { getLastShape } from "@/utils/selection-util";
+import { isShapeClosed } from "@/utils/shape-util";
 import type { BitMapperyState } from "@/store";
 
 const HALF   = 0.5;
@@ -214,9 +215,9 @@ class LayerSprite extends ZoomableSprite {
     }
 
     setSelection( document: Document, onlyWhenClosed = false ): void {
-        const { selection } = document;
-        if ( !onlyWhenClosed || ( isSelectionClosed( selection ) && canDrawOnSelection( this.layer ))) {
-            this._selection = selection?.length ? selection : null;
+        const { activeSelection } = document;
+        if ( !onlyWhenClosed || ( isShapeClosed( getLastShape( activeSelection )) && canDrawOnSelection( this.layer ))) {
+            this._selection = activeSelection?.length > 0 ? activeSelection : null;
         } else {
             this._selection = null;
         }
@@ -230,7 +231,7 @@ class LayerSprite extends ZoomableSprite {
         this._isColorPicker    = false;
         this._selection        = null;
         this._toolType         = null;
-        this.toolOptions      = null;
+        this.toolOptions       = null;
         this.cloneStartCoords  = null;
 
         // store pending paint states (if there were any)
@@ -240,7 +241,7 @@ class LayerSprite extends ZoomableSprite {
             return;
         }
 
-        this._toolType    = tool;
+        this._toolType   = tool;
         this.toolOptions = toolOptions;
 
         // note we use setDraggable() even outside of ToolTypes.DRAG
@@ -306,15 +307,15 @@ class LayerSprite extends ZoomableSprite {
         const isLowResPreview = this._brush.down && !( drawOnMask && isEraser );
 
         // if there is an active selection, painting will be constrained within
-        let selectionPoints: Selection = optAction?.selection || this._selection;
-        if ( selectionPoints ) {
+        let selection: Selection = optAction?.selection || this._selection;
+        if ( selection ) {
             let { left, top } = this.layer;
             if ( this.isRotated() && !isLowResPreview ) {
-                selectionPoints = rotatePointerLists( selectionPoints as Point[], this.layer, width, height );
+                selection = selection.map(( shape: Shape ) => rotatePointers( shape as Point[], this.layer, width, height ));
                 left = top = 0; // pointers have been rotated within clipping context
             }
             ctx.save(); // 2. clipping save()
-            clipContextToSelection( ctx, selectionPoints, left, top, this._invertSelection );
+            clipContextToSelection( ctx, selection, left, top, this._invertSelection );
         }
 
         if ( optAction ) {
@@ -346,7 +347,7 @@ class LayerSprite extends ZoomableSprite {
             if ( isCloneStamp ) {
                 if ( isLowResPreview ) {
                     renderClonedStroke( ctx, this._brush, this, this.toolOptions.sourceLayerId,
-                        rotatePointerLists( pointers, this.layer, width, height )
+                        rotatePointers( pointers, this.layer, width, height )
                     );
                     // clone operation is direct-to-Layer-source
                     this.setBitmap( ctx.canvas );
@@ -364,16 +365,16 @@ class LayerSprite extends ZoomableSprite {
                     overrides = createOverrideConfig( this.canvas, pointers );
                     ctx = this.tempCanvas.ctx;
 
-                    if ( selectionPoints && this.tempCanvas ) {
+                    if ( selection && this.tempCanvas ) {
                         ctx.save(); // 3. tempCanvas clipping save()
-                        clipContextToSelection( ctx, selectionPoints, 0, 0, this._invertSelection, overrides );
+                        clipContextToSelection( ctx, selection, 0, 0, this._invertSelection, overrides );
                     }
                 } else {
                     // render full brush stroke path directly onto the Layer source
                     ctx = createCanvas( orgContext.canvas.width, orgContext.canvas.height ).ctx;
                     // transform destination context in case the current layer is rotated or mirrored
                     ctx.scale( mirrorX ? -1 : 1, mirrorY ? -1 : 1 );
-                    this._brush.pointers = rotatePointerLists( this._brush.pointers, this.layer, width, height );
+                    this._brush.pointers = rotatePointers( this._brush.pointers, this.layer, width, height );
                 }
                 renderBrushStroke( ctx, this._brush, overrides );
 
@@ -386,12 +387,12 @@ class LayerSprite extends ZoomableSprite {
                     }
                     orgContext.drawImage( ctx.canvas, 0, 0 );
                     ctx = orgContext;
-                } else if ( selectionPoints && this.tempCanvas ) {
+                } else if ( selection && this.tempCanvas ) {
                     orgContext.restore(); // 3. tempCanvas clipping restore()
                 }
             }
         }
-        if ( selectionPoints ) {
+        if ( selection ) {
             ctx.restore(); // 2. clipping restore()
         }
         ctx.restore(); // 1. preparation restore()
@@ -725,7 +726,7 @@ export default LayerSprite;
 
 /* internal non-instance methods */
 
-function rotatePointerLists( pointers: Point[], layer: Layer, sourceWidth: number, sourceHeight: number ): Point[] {
+function rotatePointers( pointers: Point[], layer: Layer, sourceWidth: number, sourceHeight: number ): Point[] {
     // we take layer.left instead of bounds.left as it provides the unrotated Layer offset
     const { left, top } = layer;
     // translate pointer to translated space, when layer is rotated or mirrored
@@ -751,7 +752,7 @@ function rotatePointerLists( pointers: Point[], layer: Layer, sourceWidth: numbe
 }
 
 function rotatePointer( x: number, y: number, layer: Layer, sourceWidth: number, sourceHeight: number ): Point {
-    return rotatePointerLists([{ x, y }], layer, sourceWidth, sourceHeight )[ 0 ];
+    return rotatePointers([{ x, y }], layer, sourceWidth, sourceHeight )[ 0 ];
 }
 
 // NOTE we use getSpriteForLayer() instead of passing the Sprite by reference
diff --git a/src/rendering/clipping.ts b/src/rendering/clipping.ts
index f23e962..d4df052 100644
--- a/src/rendering/clipping.ts
+++ b/src/rendering/clipping.ts
@@ -1,7 +1,7 @@
 /**
  * The MIT License (MIT)
  *
- * Igor Zinken 2021 - https://www.igorski.nl
+ * Igor Zinken 2021-2023 - https://www.igorski.nl
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of
  * this software and associated documentation files (the "Software"), to deal in
@@ -20,22 +20,23 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
-import type { Selection } from "@/definitions/document";
-import { isSelectionRectangular } from "@/math/selection-math";
+import type { Point } from "zcanvas";
+import type { Shape, Selection } from "@/definitions/document";
 import type { OverrideConfig } from "@/rendering/lowres";
+import { isShapeRectangular } from "@/utils/shape-util";
 
 /**
  * Prepares a clipping path corresponding to given selections outline, transformed
  * appropriately to the destination coordinates.
  *
  * @param {CanvasRenderingContext2D} ctx destination context to clip
- * @param {Selection} selectionPoints all coordinates within the selection
+ * @param {Selection} selection all shapes within the selection
  * @param {Number} offsetX destination offset to shift selection by (bounds relative to viewport)
  * @param {Number} offsetY destination offset to shift selection by (bounds relative to viewport)
  * @param {Boolean=} invert optional whether to invert the selection
- * @param {OverrideConfig=} overrideConfig optional override Object when workin in lowres preview mode
+ * @param {OverrideConfig=} overrideConfig optional override Object when working in lowres preview mode
  */
-export const clipContextToSelection = ( ctx: CanvasRenderingContext2D, selectionPoints: Selection,
+export const clipContextToSelection = ( ctx: CanvasRenderingContext2D, selection: Selection,
     offsetX: number, offsetY: number, invert = false, overrideConfig: OverrideConfig = null ): void => {
     let scale = 1;
     let vpX   = 0;
@@ -43,23 +44,28 @@ export const clipContextToSelection = ( ctx: CanvasRenderingContext2D, selection
     if ( overrideConfig ) {
         ({ scale, vpX, vpY } = overrideConfig );
     }
+
     ctx.beginPath();
-    selectionPoints.forEach(( point, index ) => {
-        ctx[ index === 0 ? "moveTo" : "lineTo" ]( (( point.x - offsetX ) * scale ) - vpX, (( point.y - offsetY ) * scale ) - vpY );
-    });
-    // when the selection is inverted, we can reverse the clipping operation
-    // by drawing the rectangular outline over the clipping path
-    if ( invert ) {
-        createInverseClipping( ctx, selectionPoints, offsetX, offsetY, ctx.canvas.width, ctx.canvas.height );
+    for ( const shape of selection ) {
+        shape.forEach(( point: Point, index: number ) => {
+            ctx[ index === 0 ? "moveTo" : "lineTo" ]( (( point.x - offsetX ) * scale ) - vpX, (( point.y - offsetY ) * scale ) - vpY );
+        });
+        // when the selection is inverted, we can reverse the clipping operation
+        // by drawing the rectangular outline over the clipping path
+        if ( invert ) {
+            createInverseClipping( ctx, shape, offsetX, offsetY, ctx.canvas.width, ctx.canvas.height );
+            ctx.clip(); // necessary when using multiple shapes within selection
+        }
     }
+    ctx.closePath();
     ctx.clip();
 };
 
-export const createInverseClipping = ( ctx: CanvasRenderingContext2D, selection: Selection,
+export const createInverseClipping = ( ctx: CanvasRenderingContext2D, shape: Shape,
     x: number, y: number, width: number, height: number ): void => {
     // when the selection is inverted, we can reverse the clipping operation
     // by drawing the rectangular outline over the clipping path
-    if ( isSelectionRectangular( selection )) {
+    if ( isShapeRectangular( shape )) {
         ctx.rect( width - x, -y, -width, height );
     } else {
         ctx.rect( width - x, height - y, -width, -height );
diff --git a/src/services/keyboard-service.ts b/src/services/keyboard-service.ts
index 6b83f11..bcaebb0 100644
--- a/src/services/keyboard-service.ts
+++ b/src/services/keyboard-service.ts
@@ -21,6 +21,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import type { Store, Commit, Dispatch } from "vuex";
+import type { Shape } from "@/definitions/document";
 import { LayerTypes } from "@/definitions/layer-types";
 import { ALL_PANELS } from "@/definitions/panel-types";
 import ToolTypes, { MAX_BRUSH_SIZE, MIN_ZOOM, MAX_ZOOM, canDraw } from "@/definitions/tool-types";
@@ -145,7 +146,7 @@ function handleKeyDown( event: KeyboardEvent ): void {
     switch ( keyCode )
     {
         case 8: // backspace
-            if ( getters.activeDocument?.selection?.length && getters.activeLayer ) {
+            if ( getters.activeDocument?.activeSelection?.length && getters.activeLayer ) {
                 dispatch( "deleteInSelection" );
             }
             break;
@@ -254,7 +255,7 @@ function handleKeyDown( event: KeyboardEvent ): void {
         case 67: // C
             // copy current selection
             if ( hasOption ) {
-                if ( getters.activeDocument?.selection?.length > 0 ) {
+                if ( getters.activeDocument?.activeSelection?.length > 0 ) {
                     dispatch( "requestSelectionCopy", shiftDown );
                     preventDefault( event );
                 }
@@ -310,7 +311,7 @@ function handleKeyDown( event: KeyboardEvent ): void {
         case 73: // I
             if ( hasOption ) {
                 if ( shiftDown ) { // invert selection
-                    if ( getters.activeDocument.selection ) {
+                    if ( getters.activeDocument.activeSelection ) {
                         dispatch( "invertSelection" );
                         preventDefault( event ); // import Mail
                     }
@@ -414,7 +415,7 @@ function handleKeyDown( event: KeyboardEvent ): void {
         case 88: // X
             // cut current selection
             if ( hasOption ) {
-                if ( getters.activeDocument?.selection?.length ) {
+                if ( getters.activeDocument?.activeSelection?.length ) {
                     dispatch( "requestSelectionCut" );
                     preventDefault( event ); // override browser cut
                 }
@@ -547,12 +548,12 @@ function moveObject( axis = 0, dir = 0, activeTool: ToolTypes ): void {
         case ToolTypes.LASSO:
         case ToolTypes.WAND:
             getCanvasInstance()?.interactionPane.setSelection(
-                translatePoints(
-                    getters.activeDocument.selection,
+                getters.activeDocument.activeSelection.map(( shape: Shape ) => translatePoints(
+                    shape,
                     axis === 0 ? dir === 0 ? -speed : speed : 0,
                     axis === 1 ? dir === 0 ? -speed : speed : 0
                 ), true
-            );
+            ));
             break;
     }
 }
diff --git a/src/store/index.ts b/src/store/index.ts
index 300b11c..053451a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -305,7 +305,7 @@ export default {
         },
         async deleteInSelection({ getters }: ActionContext<BitMapperyState, any> ): Promise<void> {
             const activeLayer = getters.activeLayer;
-            if ( !activeLayer || !getters.activeDocument?.selection.length ) {
+            if ( !activeLayer || !getters.activeDocument?.activeSelection.length ) {
                 return;
             }
             const hasMask       = !!activeLayer.mask;
diff --git a/src/store/modules/document-module.ts b/src/store/modules/document-module.ts
index e527548..a4c02c4 100644
--- a/src/store/modules/document-module.ts
+++ b/src/store/modules/document-module.ts
@@ -72,7 +72,10 @@ const DocumentModule: Module<DocumentState, any> = {
         },
         // @ts-expect-error state is declared but never read
         hasSelection: ( state: DocumentState, getters: any ): boolean => {
-            return getters.activeDocument?.selection?.length > 0;
+            if ( !getters.activeDocument ) {
+                return false;
+            }
+            return getters.activeDocument.activeSelection[ 0 ]?.length > 0;
         },
     },
     mutations: {
@@ -95,8 +98,8 @@ const DocumentModule: Module<DocumentState, any> = {
             getCanvasInstance()?.rescaleFn();
             getCanvasInstance()?.refreshFn();
         },
-        setRuntimeSelection( state: DocumentState, selection: Selection ): void {
-            Vue.set( state.documents[ state.activeIndex ], "selection", selection );
+        setActiveSelection( state: DocumentState, selection: Selection ): void {
+            Vue.set( state.documents[ state.activeIndex ], "activeSelection", selection );
         },
         addNewDocument( state: DocumentState, nameOrDocument: string | Document ): void {
             const document = typeof nameOrDocument === "object" ? nameOrDocument : DocumentFactory.create({ name: nameOrDocument });
diff --git a/src/utils/document-util.ts b/src/utils/document-util.ts
index cdf92a5..3549b0b 100644
--- a/src/utils/document-util.ts
+++ b/src/utils/document-util.ts
@@ -1,7 +1,7 @@
 /**
  * The MIT License (MIT)
  *
- * Igor Zinken 2020-2022 - https://www.igorski.nl
+ * Igor Zinken 2020-2023 - https://www.igorski.nl
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of
  * this software and associated documentation files (the "Software"), to deal in
@@ -23,14 +23,14 @@
 import { canvas, loader } from "zcanvas";
 import type { Rectangle, SizedImage } from "zcanvas";
 import { PNG } from "@/definitions/image-types";
-import type { Document, Layer } from "@/definitions/document";
+import type { Document, Shape, Layer } from "@/definitions/document";
 import { renderEffectsForLayer } from "@/services/render-service";
 import { createSpriteForLayer, getSpriteForLayer } from "@/factories/sprite-factory";
-import { createCanvas } from "@/utils/canvas-util";
+import { rotateRectangle, areEqual } from "@/math/rectangle-math";
 import { reverseTransformation } from "@/rendering/transforming";
 import type ZoomableCanvas from "@/rendering/canvas-elements/zoomable-canvas";
-import { rotateRectangle, areEqual } from "@/math/rectangle-math";
-import { getRectangleForSelection } from "@/math/selection-math";
+import { createCanvas } from "@/utils/canvas-util";
+import { selectionToRectangle } from "@/utils/selection-util";
 
 /**
  * Creates a snapshot of the current document at its full size.
@@ -154,15 +154,19 @@ export const copySelection = async ( activeDocument: Document, activeLayer: Laye
     const merged = copyMerged ? await createDocumentSnapshot( activeDocument ) : null;
 
     const { zcvs, cvs, ctx } = createFullSizeZCanvas( activeDocument );
+
+    ctx.save();
     ctx.beginPath();
-    activeDocument.selection.forEach(( point, index ) => {
-        ctx[ index === 0 ? "moveTo" : "lineTo" ]( point.x, point.y );
+    activeDocument.activeSelection.forEach(( shape: Shape ) => {
+        shape.forEach(( point, index ) => {
+            ctx[ index === 0 ? "moveTo" : "lineTo" ]( point.x, point.y );
+        });
     });
     ctx.closePath();
+
     if ( activeDocument.invertSelection ) {
         ctx.globalCompositeOperation = "destination-in";
     }
-    ctx.save();
     ctx.clip();
 
     if ( copyMerged ) {
@@ -181,7 +185,7 @@ export const copySelection = async ( activeDocument: Document, activeLayer: Laye
 
     // when calculating the source rectangle we must take the device pixel ratio into account
     const pixelRatio = window.devicePixelRatio || 1;
-    const selectionRectangle = getRectangleForSelection( activeDocument.selection );
+    const selectionRectangle = selectionToRectangle( activeDocument.activeSelection );
     const selectionCanvas = createCanvas( selectionRectangle.width, selectionRectangle.height );
     selectionCanvas.ctx.drawImage(
         cvs,
@@ -215,9 +219,13 @@ export const deleteSelectionContent = ( activeDocument: Document, activeLayer: L
     }
 
     ctx.beginPath();
-    activeDocument.selection.forEach(( point, index ) => {
-        ctx[ index === 0 ? "moveTo" : "lineTo" ]( point.x - left, point.y - top );
+    activeDocument.activeSelection.forEach( selection => {
+        selection.forEach(( point, index ) => {
+            ctx[ index === 0 ? "moveTo" : "lineTo" ]( point.x - left, point.y - top );
+        });
     });
+    ctx.closePath();
+
     if ( activeDocument.invertSelection ) {
         ctx.globalCompositeOperation = "destination-in";
     }
diff --git a/src/utils/selection-util.ts b/src/utils/selection-util.ts
new file mode 100644
index 0000000..bb7094a
--- /dev/null
+++ b/src/utils/selection-util.ts
@@ -0,0 +1,51 @@
+/**
+ * The MIT License (MIT)
+ *
+ * Igor Zinken 2021-2023 - https://www.igorski.nl
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import type { Rectangle } from "zcanvas";
+import type { Shape, Selection } from "@/definitions/document";
+import { shapeToRectangle } from "@/utils/shape-util";
+
+export const selectionToRectangle = ( selection: Selection ): Rectangle => {
+    if ( selection.length === 1 ) {
+        return shapeToRectangle( selection[ 0 ]);
+    }
+
+    const [ xCoords, yCoords ] = selection.reduce(( acc: number[][], shape: Shape ) => {
+        acc[ 0 ].push( ...shape.map( s => s.x ));
+        acc[ 1 ].push( ...shape.map( s => s.y ));
+        return acc;
+    }, [[], []] );
+
+    const left = Math.min.apply( null, xCoords );
+    const top  = Math.min.apply( null, yCoords );
+
+    return {
+        left,
+        top,
+        width  : Math.max.apply( null, xCoords ) - left,
+        height : Math.max.apply( null, yCoords ) - top,
+    };
+};
+
+export const getLastShape = ( selection: Selection ): Shape => {
+    return selection[ selection.length - 1 ];
+};
diff --git a/src/utils/shape-util.ts b/src/utils/shape-util.ts
new file mode 100644
index 0000000..dcb1106
--- /dev/null
+++ b/src/utils/shape-util.ts
@@ -0,0 +1,116 @@
+/**
+ * The MIT License (MIT)
+ *
+ * Igor Zinken 2023 - https://www.igorski.nl
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import type { Rectangle } from "zcanvas";
+import type { Shape } from "@/definitions/document";
+
+export const shapeToRectangle = ( shape: Shape ): Rectangle => {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = 0;
+    let maxY = 0;
+
+    shape.forEach(({ x, y }) => {
+        minX = Math.min( minX, x );
+        maxX = Math.max( maxX, x );
+        minY = Math.min( minY, y );
+        maxY = Math.max( maxY, y );
+    });
+    return {
+        left   : minX,
+        top    : minY,
+        width  : maxX - minX,
+        height : maxY - minY
+    };
+};
+
+export const rectangleToShape = ( width: number, height: number, x = 0, y = 0 ): Shape => [
+    { x, y },
+    { x: x + width, y },
+    { x: x + width, y: y + height },
+    { x, y: y + height },
+    { x, y }
+];
+
+export const isShapeRectangular = ( shape: Shape ): boolean => {
+    if ( shape.length !== 5 ) {
+        return false;
+    }
+    if ( shape[ 1 ].x !== shape[ 2 ].x ||
+         shape[ 2 ].y !== shape[ 3 ].y ) {
+         return false;
+    }
+    return isShapeClosed( shape );
+};
+
+export const isShapeClosed = ( shape: Shape ): boolean => {
+    // smallest shape is four point polygon
+    if ( !shape || shape.length < 3 ) {
+        return false;
+    }
+    const firstPoint = shape[ 0 ];
+    const lastPoint  = shape[ shape.length - 1 ];
+
+    return firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y;
+};
+
+/**
+ * Verifies whether given shapes overlap and thus can be merged.
+ * Note: this assumes each shape is not self-intersecting and has no holes.
+ */
+export const canBeMerged = ( shapeA: Shape, shapeB: Shape ): boolean => {
+    // Combine the coordinates of both polygons into a single array
+    let combinedCoords = [ ...shapeA.flat(), ...shapeB.flat() ];
+
+    // Sort the coordinates in counterclockwise order
+    combinedCoords.sort(( a, b ) => {
+        return ( a.x - combinedCoords[ 0 ].x ) * ( b.y - combinedCoords[ 0 ].y ) -
+               ( b.x - combinedCoords[ 0 ].x ) * ( a.y - combinedCoords[ 0 ].y );
+    });
+
+    // Check if any coordinate is the same as the previous coordinate
+    for ( let i = 1; i < combinedCoords.length; i++ ) {
+        if ( combinedCoords[ i ].x === combinedCoords[ i - 1 ].x &&
+             combinedCoords[ i ].y === combinedCoords[ i - 1 ].y ) {
+            return true;
+        }
+    }
+    return false;
+};
+
+export const mergeShapes = ( shapeA: Shape, shapeB: Shape ): Shape => {
+    let combinedCoords = [ ...shapeA, ...shapeB ];
+
+    // Sort the coordinates in counterclockwise order
+    combinedCoords.sort(( a, b ) => {
+        return ( a.x - combinedCoords[ 0 ].x ) * ( b.y - combinedCoords[ 0 ].y ) -
+               ( b.x - combinedCoords[ 0 ].x ) * ( a.y - combinedCoords[ 0 ].y );
+    });
+
+    // Remove any duplicate points
+    let uniqueCoords = combinedCoords.filter(( item, index ) => {
+        return combinedCoords.findIndex(( coord ) => coord.x === item.x && coord.y === item.y ) === index;
+    });
+
+    // Create a new array of polygons that contains the merged polygon
+    return uniqueCoords;
+};
diff --git a/tests/unit/factories/document-factory.spec.ts b/tests/unit/factories/document-factory.spec.ts
index d677671..74facf7 100644
--- a/tests/unit/factories/document-factory.spec.ts
+++ b/tests/unit/factories/document-factory.spec.ts
@@ -24,7 +24,7 @@ describe( "Document factory", () => {
                 height: 1000,
                 layers: [ { layer: "1" } ],
                 selections: {},
-                selection: null,
+                activeSelection: [],
                 invertSelection: false,
             });
         });
@@ -45,7 +45,7 @@ describe( "Document factory", () => {
                 height: 900,
                 layers,
                 selections: { foo: [{ x: 0, y: 0 }] },
-                selection: null,
+                activeSelection: [],
                 invertSelection: false,
             });
         });
diff --git a/tests/unit/math/selection-math.spec.ts b/tests/unit/math/selection-math.spec.ts
deleted file mode 100644
index a4fa1b0..0000000
--- a/tests/unit/math/selection-math.spec.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { it, describe, expect } from "vitest";
-import { getRectangleForSelection, createSelectionForRectangle, isSelectionRectangular, isSelectionClosed } from "@/math/selection-math";
-
-describe( "selection math", () => {
-    it( "should be able to calculate the bounding box of the selection", () => {
-        const selection = [
-            { x: 100, y: 150 },
-            { x: 50,  y: 899 },
-            { x: 50,  y: 100 },
-            { x: 101, y: 100 }
-        ];
-        expect( getRectangleForSelection( selection )).toEqual({
-            left: 50,
-            top: 100,
-            width: 51,
-            height: 799
-        });
-    });
-
-    it( "should be able to convert a rectangle into a valid list of selection coordinates", () => {
-        expect( createSelectionForRectangle( 400, 300, 50, 75 )).toEqual([
-            { x: 50,  y: 75 },
-            { x: 450, y: 75 },
-            { x: 450, y: 375 },
-            { x: 50,  y: 375 },
-            { x: 50,  y: 75 }
-        ]);
-    });
-
-    describe(" when determining whether a selection is rectangular", () => {
-        it( "should recognize unclosed selections", () => {
-            expect(isSelectionRectangular([
-                { x: 50,  y: 50 },
-                { x: 250, y: 50 },
-                { x: 250, y: 150 },
-                { x: 50,  y: 150 }
-            ])).toBe( false );
-        });
-
-        it( "should recognize non-rectangular selections", () => {
-            expect(isSelectionRectangular([
-                { x: 50,  y: 50 },
-                { x: 250, y: 50 },
-                { x: 150, y: 150 },
-                { x: 50,  y: 150 },
-                { x: 50,  y: 50 }
-            ])).toBe( false );
-
-            expect(isSelectionRectangular([
-                { x: 50,  y: 50 },
-                { x: 250, y: 50 },
-                { x: 250, y: 150 },
-                { x: 50,  y: 75 },
-                { x: 50,  y: 50 }
-            ])).toBe( false );
-        });
-
-        it( "should recognize a rectangular selection", () => {
-            expect(isSelectionRectangular([
-                { x: 50,  y: 50 },
-                { x: 250, y: 50 },
-                { x: 250, y: 150 },
-                { x: 50,  y: 150 },
-                { x: 50,  y: 50 }
-            ])).toBe( true );
-        });
-    });
-
-    describe( "when determining whether a selection is closed", () => {
-        it( "should not consider a selection with less than four points closable", () => {
-            const selection = [{ x: 100, y: 150 }];
-            expect( isSelectionClosed( selection )).toBe( false );
-            selection.push({ x: 150, y: 150 });
-            expect( isSelectionClosed( selection )).toBe( false );
-            selection.push({ x: 100, y: 200 });
-            expect( isSelectionClosed( selection )).toBe( false );
-        });
-
-        it( "should not consider a selection where the first and last point are not at the same coordinate closed", () => {
-            const selection = [
-                { x: 100, y: 150 },
-                { x: 150, y: 150 },
-                { x: 100, y: 200 },
-                { x: 100, y: 160 }
-            ];
-            expect( isSelectionClosed( selection )).toBe( false );
-        });
-
-        it( "should consider a selection where the first and last point are at the same coordinate closed", () => {
-            const selection = [
-                { x: 100, y: 150 },
-                { x: 150, y: 150 },
-                { x: 100, y: 200 },
-                { x: 100, y: 150 }
-            ];
-            expect( isSelectionClosed( selection )).toBe( true );
-        });
-    });
-});
diff --git a/tests/unit/store/modules/document-module.spec.ts b/tests/unit/store/modules/document-module.spec.ts
index 4fa4ee4..8b3d13f 100644
--- a/tests/unit/store/modules/document-module.spec.ts
+++ b/tests/unit/store/modules/document-module.spec.ts
@@ -79,14 +79,14 @@ describe( "Vuex document module", () => {
             expect( getters.activeLayerEffects( {}, mockedGetters )).toEqual( mockedGetters.activeLayer.effects );
         });
 
-        it( "should know when the current Document has an active selection", () => {
-            const mockedGetters = { activeDocument: { selection: null } };
+        it( "should know whether the current Document has an active selection", () => {
+            const mockedGetters = { activeDocument: { activeSelection: [] } };
             expect( getters.hasSelection( {}, mockedGetters )).toBe( false );
 
-            mockedGetters.activeDocument.selection = [];
+            mockedGetters.activeDocument.activeSelection = [ [] ];
             expect( getters.hasSelection( {}, mockedGetters )).toBe( false );
 
-            mockedGetters.activeDocument.selection = [{ x: 0, y: 0 }];
+            mockedGetters.activeDocument.activeSelection = [[ { x: 0, y: 0 }] ];
             expect( getters.hasSelection( {}, mockedGetters )).toBe( true );
         });
     });
@@ -187,17 +187,17 @@ describe( "Vuex document module", () => {
             });
         });
 
-        it( "should be able to set the runtime selection for the currently active document", () => {
+        it( "should be able to set the active selection for the currently active document", () => {
             const selection = [{ x: 0, y: 0 }, { x: 10, y: 10 }];
 
             const state = {
-                documents: [ { name: "foo", selection: [] }, { name: "bar", selection: [] } ],
+                documents: [ { name: "foo", activeSelection: [] }, { name: "bar", activeSelection: [] } ],
                 activeIndex: 1
             };
-            mutations.setRuntimeSelection( state, selection );
+            mutations.setActiveSelection( state, selection );
 
-            expect( state.documents[ 0 ].selection ).toHaveLength( 0 );
-            expect( state.documents[ 1 ].selection ).toEqual( selection );
+            expect( state.documents[ 0 ].activeSelection ).toHaveLength( 0 );
+            expect( state.documents[ 1 ].activeSelection ).toEqual( selection );
         });
 
         it( "should be able to add a new Document to the list", () => {
diff --git a/tests/unit/utils/selection-util.spec.ts b/tests/unit/utils/selection-util.spec.ts
new file mode 100644
index 0000000..ed48343
--- /dev/null
+++ b/tests/unit/utils/selection-util.spec.ts
@@ -0,0 +1,40 @@
+import { it, describe, expect } from "vitest";
+import { selectionToRectangle, getLastShape } from "@/utils/selection-util";
+
+describe( "Selection utilities", () => {
+    const selection = [
+        [
+            { x: 10, y: 5 },
+            { x: 50, y: 5 },
+            { x: 50, y: 55 },
+            { x: 10, y: 55 }
+        ], [
+            { x: 25, y: 25 },
+            { x: 75, y: 25 },
+            { x: 75, y: 75 },
+            { x: 25, y: 75 },
+        ]
+    ];
+
+    it( "should be able to calculate the bounding box of a selection with a single Shape", () => {
+        expect( selectionToRectangle( [ selection[ 1 ]] )).toEqual({
+            left: 25,
+            top: 25,
+            width: 50,
+            height: 50
+        });
+    });
+
+    it( "should be able to calculate the bounding box of a selection with multiple Shapes", () => {
+        expect( selectionToRectangle( selection )).toEqual({
+            left: 10,
+            top: 5,
+            width: 65,
+            height: 70
+        });
+    });
+
+    it( "should be able to retrieve the last shape in the selection", () => {
+        expect( getLastShape( selection )).toEqual( selection.at( -1 ));
+    });
+});
diff --git a/tests/unit/utils/shape-util.spec.ts b/tests/unit/utils/shape-util.spec.ts
new file mode 100644
index 0000000..398c722
--- /dev/null
+++ b/tests/unit/utils/shape-util.spec.ts
@@ -0,0 +1,102 @@
+import { it, describe, expect } from "vitest";
+import {
+    shapeToRectangle, rectangleToShape,
+    isShapeRectangular, isShapeClosed
+} from "@/utils/shape-util";
+
+describe( "Shape utilities", () => {
+    it( "should be able to calculate the bounding box of the shape", () => {
+        const shape = [
+            { x: 100, y: 150 },
+            { x: 50,  y: 899 },
+            { x: 50,  y: 100 },
+            { x: 101, y: 100 }
+        ];
+        expect( shapeToRectangle( shape )).toEqual({
+            left: 50,
+            top: 100,
+            width: 51,
+            height: 799
+        });
+    });
+
+    it( "should be able to convert a rectangle into a valid list of shape coordinates", () => {
+        expect( rectangleToShape( 400, 300, 50, 75 )).toEqual([
+            { x: 50,  y: 75 },
+            { x: 450, y: 75 },
+            { x: 450, y: 375 },
+            { x: 50,  y: 375 },
+            { x: 50,  y: 75 }
+        ]);
+    });
+
+    describe(" when determining whether a shape is rectangular", () => {
+        it( "should recognize unclosed shapes", () => {
+            expect( isShapeRectangular([
+                { x: 50,  y: 50 },
+                { x: 250, y: 50 },
+                { x: 250, y: 150 },
+                { x: 50,  y: 150 }
+            ])).toBe( false );
+        });
+
+        it( "should recognize non-rectangular shapes", () => {
+            expect( isShapeRectangular([
+                { x: 50,  y: 50 },
+                { x: 250, y: 50 },
+                { x: 150, y: 150 },
+                { x: 50,  y: 150 },
+                { x: 50,  y: 50 }
+            ])).toBe( false );
+
+            expect( isShapeRectangular([
+                { x: 50,  y: 50 },
+                { x: 250, y: 50 },
+                { x: 250, y: 150 },
+                { x: 50,  y: 75 },
+                { x: 50,  y: 50 }
+            ])).toBe( false );
+        });
+
+        it( "should recognize a rectangular shape", () => {
+            expect( isShapeRectangular([
+                { x: 50,  y: 50 },
+                { x: 250, y: 50 },
+                { x: 250, y: 150 },
+                { x: 50,  y: 150 },
+                { x: 50,  y: 50 }
+            ])).toBe( true );
+        });
+    });
+
+    describe( "when determining whether a shape is closed", () => {
+        it( "should not consider a shape with less than four points closable", () => {
+            const shape = [{ x: 100, y: 150 }];
+            expect( isShapeClosed( shape )).toBe( false );
+            shape.push({ x: 150, y: 150 });
+            expect( isShapeClosed( shape )).toBe( false );
+            shape.push({ x: 100, y: 200 });
+            expect( isShapeClosed( shape )).toBe( false );
+        });
+
+        it( "should not consider a shape where the first and last point are not at the same coordinate as closed", () => {
+            const shape = [
+                { x: 100, y: 150 },
+                { x: 150, y: 150 },
+                { x: 100, y: 200 },
+                { x: 100, y: 160 }
+            ];
+            expect( isShapeClosed( shape )).toBe( false );
+        });
+
+        it( "should consider a shape where the first and last point are at the same coordinate as closed", () => {
+            const shape = [
+                { x: 100, y: 150 },
+                { x: 150, y: 150 },
+                { x: 100, y: 200 },
+                { x: 100, y: 150 }
+            ];
+            expect( isShapeClosed( shape )).toBe( true );
+        });
+    });
+});
diff --git a/tsconfig.check.json b/tsconfig.check.json
index c49b1d7..fefa9fb 100644
--- a/tsconfig.check.json
+++ b/tsconfig.check.json
@@ -1,6 +1,6 @@
 {
     "extends": "./tsconfig.app.json",
-    "includes": [ "src/**/*.ts", "tests/**/*.ts" ],
+    "includes": [ "src/**/*.ts", "src/**/*.vue", "tests/**/*.ts" ],
     "compilerOptions": {
         "skipLibCheck": true
     }