Archive commit

src/ts/components/shared/set-selection/set-selection.pug

@@ -0,0 +1,47 @@
+div(*ngIf="compact && !onlyPatterns")
+	.row.form-group
+		label.col-sm-4.col-form-label {{label}}
+		.col-sm-8
+			sprite-selection(
+				[(selected)]="set.type" [sprites]="sprites" [fill]="set.fills" [outline]="set.outlines" [darken]="darken"
+				(selectedChange)="onChange()" [circle]="circle" [attr.aria-label]="'Select ' + label" emptyLabel="No {{label}}")
+
+div(*ngIf="!compact && !onlyPatterns")
+	.row.form-group
+		label.col-sm-12.text-center.col-form-label.text-muted {{label}}
+	.row.form-group
+		.col-sm-12
+			sprite-selection(
+				[(selected)]="set.type" [sprites]="sprites" [fill]="set.fills" [outline]="set.outlines" [darken]="darken"
+				(selectedChange)="onChange()" [circle]="circle" [attr.aria-label]="'Select ' + label" emptyLabel="No {{label}}")
+
+div(*ngIf="showColorPatterns && !onlyPatterns")
+	.row.form-group
+		label.col-sm-12.text-center.col-form-label.text-muted Color pattern
+	.row.form-group
+		.col-sm-12
+			sprite-selection(
+				[(selected)]="set.pattern" [sprites]="sets[set.type]" [fill]="exampleFills" [outline]="exampleOutlines"
+				(selectedChange)="onChange()" aria-label="Select color pattern" [darken]="darken")
+
+div(*ngIf="onlyPatterns")
+	.row.form-group
+		label.col-sm-4.col-form-label {{label}}
+		.col-sm-8
+			sprite-selection(
+				[(selected)]="set.pattern" [sprites]="sets[set.type]" [fill]="exampleFills" [outline]="exampleOutlines"
+				(selectedChange)="onChange()" aria-label="Select color pattern" [darken]="darken")
+
+div(*ngFor="let c of exampleFills; let i = index")
+	fill-outline(
+		*ngIf="patternColors > i"
+		label="Color {{i + 1}}"
+		[base]="i === 0 ? base : set.fills[0]"
+		[nonLockable]="i === 0 && nonLockable"
+		[outlineHidden]="isOutlineHidden"
+		[indicatorColor]="showColorPatterns ? c : ''"
+		[(fill)]="set.fills[i]"
+		[(locked)]="set.lockFills[i]"
+		[(outline)]="set.outlines[i]"
+		[(outlineLocked)]="set.lockOutlines[i]"
+		(change)="onChange()")

src/ts/components/shared/set-selection/set-selection.scss

@@ -0,0 +1,3 @@
+.col-form-label.col-sm-4 {
+	padding-top: 16px;
+}

src/ts/components/shared/set-selection/set-selection.ts

@@ -0,0 +1,73 @@
+import { Component, Input, Output, EventEmitter, OnChanges, Directive, Optional } from '@angular/core';
+import { clamp } from 'lodash';
+import { SpriteSet, ColorExtraSets, ColorExtraSet } from '../../../common/interfaces';
+import { getColorCount } from '../../../client/spriteUtils';
+
+const FILLS = ['Orange', 'DodgerBlue', 'LimeGreen', 'Orchid', 'crimson', 'Aquamarine'];
+const OUTLINES = ['Chocolate', 'SteelBlue', 'ForestGreen', 'DarkOrchid', 'darkred', 'DarkTurquoise'];
+
+@Directive({
+	selector: '[setOutlineHidden]',
+})
+export class SetOutlineHidden {
+	@Input() setOutlineHidden = false;
+}
+
+@Component({
+	selector: 'set-selection',
+	templateUrl: 'set-selection.pug',
+	styleUrls: ['set-selection.scss'],
+})
+export class SetSelection implements OnChanges {
+	readonly exampleFills = FILLS;
+	readonly exampleOutlines = OUTLINES;
+	@Input() label?: string;
+	@Input() base?: string;
+	@Input() set?: SpriteSet<string>;
+	@Input() sets?: ColorExtraSets;
+	@Input() sprites?: ColorExtraSet;
+	@Input() circle?: string;
+	@Input() outlineHidden = false;
+	@Input() nonLockable = false;
+	@Input() compact = false;
+	@Input() onlyPatterns = false;
+	@Input() darken = true;
+	@Output() change = new EventEmitter<void>();
+	constructor(@Optional() private hidden: SetOutlineHidden) {
+	}
+	get isOutlineHidden() {
+		return this.hidden ? this.hidden.setOutlineHidden : this.outlineHidden;
+	}
+	get patternColors() {
+		const set = this.getSet();
+		const pat = this.set && set && set[this.set.pattern || 0];
+
+		if (pat && !pat.colors) {
+			return 0;
+		} else if (pat) {
+			return getColorCount(pat);
+		} else {
+			return this.nonLockable ? 1 : 0;
+		}
+	}
+	get showColorPatterns(): boolean {
+		const type = this.set && this.set.type || 0;
+		const set = this.sets && this.sets[type];
+		return !!set && set.length > 1;
+	}
+	ngOnChanges() {
+		this.sprites = this.sets ? this.sets.map(s => s ? s[0] : undefined) : undefined;
+	}
+	onChange() {
+		const set = this.getSet();
+
+		if (this.set && set) {
+			this.set.pattern = clamp(this.set.pattern || 0, 0, set.length - 1);
+		}
+
+		this.change.emit();
+	}
+	private getSet(): ColorExtraSet | undefined {
+		return this.set && this.sets && this.sets[this.set.type || 0];
+	}
+}