thm
/
kollagen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add exclusion for shuffle & recursive modes

master
Tomáš Mládek 2020-07-20 14:57:05 +02:00
parent c481d5739f
commit f54b61e236
1 changed files with 55 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/Collage.vue
View File

@ -15,13 +15,23 @@
</div>
<div class="controls">
<div class="modes">
<label v-for="(mode, idx) in modes"
:class="{disabled: images.length < mode.minImages,
<ul class="modes-list">
<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)}">
{{mode.name}}
<input type="radio" :value="idx" v-model="currentModeType">
</label>
lastActive: lastActiveModeTypes.includes(idx)}]">
<label class="handle">{{mode.name}}<input type="radio" :value="idx"
v-model="currentModeType"></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>