Archive commit

src/ts/components/shared/butt-mark-editor/butt-mark-editor.pug

@@ -0,0 +1,20 @@
+.form-group.text-center
+	label#butt-mark-label.text-muted Butt mark
+.row.form-group(role="group" aria-labelledby="butt-mark-label")
+	.col-sm-7.mb-1
+		button.btn.btn-primary((click)="clearCM()" title="Clear all")
+			fa-icon([icon]="trashIcon" [fixedWidth]="true")
+		.btn-group.ml-1(btnRadioGroup [(ngModel)]="state.brushType")
+			button.btn.btn-primary(btnRadio="eraser" title="Eraser")
+				fa-icon([icon]="eraserIcon" [fixedWidth]="true")
+			button.btn.btn-primary(btnRadio="eyedropper" title="Eyedropper")
+				fa-icon([icon]="eyeDropperIcon" [fixedWidth]="true")
+			button.btn.btn-primary(btnRadio="brush" title="Brush")
+				fa-icon([icon]="paintBrushIcon" [fixedWidth]="true")
+	.col-sm-5.mb-1
+		color-picker([(color)]="state.brush" label="Brush color")
+.form-group.text-center
+	bitmap-box([bitmap]="info.cm" [tool]="state.brushType" [(color)]="state.brush" [width]="cmSize" [height]="cmSize")
+.form-group.d-flex.justify-content-center.align-items-center.text-muted
+	custom-checkbox([(checked)]="info.cmFlip")
+		| don't flip mark on the right side

src/ts/components/shared/butt-mark-editor/butt-mark-editor.ts

@@ -0,0 +1,30 @@
+import { Component, Input } from '@angular/core';
+import { fill } from 'lodash';
+import { PonyInfo } from '../../../common/interfaces';
+import { CM_SIZE } from '../../../common/constants';
+import { faTrash, faEraser, faPaintBrush, faEyeDropper } from '../../../client/icons';
+
+export interface ButtMarkEditorState {
+	brushType: string;
+	brush: string;
+}
+
+@Component({
+	selector: 'butt-mark-editor',
+	templateUrl: 'butt-mark-editor.pug',
+})
+export class ButtMarkEditor {
+	readonly trashIcon = faTrash;
+	readonly eraserIcon = faEraser;
+	readonly eyeDropperIcon = faEyeDropper;
+	readonly paintBrushIcon = faPaintBrush;
+	readonly cmSize = CM_SIZE;
+	@Input() info!: PonyInfo;
+	@Input() state = {
+		brushType: 'brush',
+		brush: 'orange',
+	};
+	clearCM() {
+		fill(this.info.cm!, '');
+	}
+}