add exclusion for shuffle & recursive modes

src/components/Collage.vue

@@ -15,13 +15,23 @@
     </div>
     <div class="controls">
         <div class="modes">
-            <label v-for="(mode, idx) in modes"
+            <ul class="modes-list">
-                   :class="{disabled: images.length < mode.minImages,
+                <li v-for="(mode, idx) in modes"
+                    :class="['mode', {
+                            disabled: images.length < mode.minImages,
+                            excluded: excludedModes.includes(idx),
                             selected: idx === currentModeType,
-                            lastActive: lastActiveModeTypes.includes(idx)}">
+                            lastActive: lastActiveModeTypes.includes(idx)}]">
-                {{mode.name}}
+                    <label class="handle">{{mode.name}}<input type="radio" :value="idx"
-                <input type="radio" :value="idx" v-model="currentModeType">
+                                                              v-model="currentModeType"></label>
-            </label>
+                    <span class="mode-plus"
+                          v-if="['recursive', 'shuffle'].includes(currentModeType) && images.length >= minImages">
+                        <span class="separator"></span>
+                        <label>{{ excludedModes.includes(idx) ? 'o' : 'x'}}<input type="checkbox" :value="idx"
+                                                                                  v-model="excludedModes"></label>
+                    </span>
+                </li>
+            </ul>
             <hr>
             <label :class="{disabled: images.length < minImages,
                             selected: 'shuffle' === currentModeType}">
@@ -87,6 +97,7 @@ export default class Collage extends Vue {
     };
     private currentModeType: DisplayCollageModeType = "shuffle";
     private lastActiveModeTypes: CollageModeType[] = [];
+    private excludedModes: CollageModeType[] = [];
     private modes = collageModes;
 
     private get minImages() {
@@ -120,11 +131,12 @@ export default class Collage extends Vue {
         if (this.images.length >= this.minImages) {
             this.reset();
 
+            const permissibleModeKeys = (Object.keys(collageModes) as CollageModeType[])
+              .filter(k => !this.excludedModes.includes(k) && collageModes[k].minImages <= this.images.length);
+
             if (this.currentModeType !== "recursive") {
                 let mode: CollageMode;
                 if (this.currentModeType === "shuffle") {
-                    const permissibleModeKeys = Object.keys(collageModes)
-                      .filter(k => collageModes[k as CollageModeType].minImages <= this.images.length) as CollageModeType[];
                     const randomModeType = choice(permissibleModeKeys);
                     this.lastActiveModeTypes = [randomModeType];
                     mode = collageModes[randomModeType];
@@ -136,8 +148,6 @@ export default class Collage extends Vue {
                 const segments = mode.getSegments(this.context, this.collageConfig, shuffledImages);
                 mode.place(this.context, shuffledImages, segments);
             } else {
-                const permissibleModeKeys = Object.keys(collageModes)
-                  .filter(k => collageModes[k as CollageModeType].minImages <= this.images.length) as CollageModeType[];
                 this.lastActiveModeTypes = [];
                 const shuffledImages = shuffle(this.images);
                 const rootSegment: Segment = {x: 0, y: 0, w: this.context.canvas.width, h: this.context.canvas.height};
@@ -228,6 +238,35 @@ export default class Collage extends Vue {
     align-items: center;
 }
 
+.modes-list {
+    list-style: none;
+    padding: 0;
+}
+
+.mode {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+}
+
+.separator {
+    border: 1px solid gray;
+    width: 0;
+    margin: 0 .5em;
+    align-self: stretch;
+}
+
+.mode .mode-plus, .mode .mode-plus label {
+    color: gray;
+    font-size: 14px;
+}
+
+.mode-plus {
+    display: flex;
+    align-items: center;
+}
+
 .controls .modes hr {
     margin-top: .5rem;
     width: 100%;
@@ -265,11 +304,16 @@ export default class Collage extends Vue {
     pointer-events: none;
 }
 
+.excluded .handle {
+    color: gray;
+    text-decoration: line-through;
+}
+
 .selected {
     font-weight: bold;
 }
 
-.lastActive {
+.lastActive .handle {
     text-decoration: underline;
 }
 </style>