feat: add copy/paste layer support

packages/uhk-common/src/models/uhk-module-ids.ts

@@ -10,3 +10,12 @@ export const UHK_MODULE_IDS = Object.freeze({
 
 export type UHK_MODULE_IDS_KEY_TYPE = keyof typeof UHK_MODULE_IDS;
 export type UHK_MODULE_IDS_TYPE = typeof UHK_MODULE_IDS[UHK_MODULE_IDS_KEY_TYPE];
+
+export const UHK_HALVES_AND_MODULE_IDS = [
+    UHK_MODULE_IDS.RIGHT_HALF,
+    UHK_MODULE_IDS.LEFT_HALF,
+    UHK_MODULE_IDS.LEFT_KEY_CLUSTER,
+    UHK_MODULE_IDS.RIGHT_TRACKBALL,
+    UHK_MODULE_IDS.RIGHT_TRACKPOINT,
+    UHK_MODULE_IDS.RIGHT_TOUCHPAD,
+]

packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.html

@@ -6,8 +6,10 @@
                        [halvesInfo]="halvesInfo$ | async"
                        [keyboardLayout]="keyboardLayout$ | async"
                        [allowNewLayers]="true"
+                       [allowLayerCopy]="true"
                        [allowLayerDoubleTap]="allowLayerDoubleTap$ | async"
                        [backlightingMode]="backlightingMode$ | async"
+                       [canPasteLayer]="hasCopiedLayer$ | async"
                        [currentLayer]="currentLayer$ | async"
                        [isBacklightingColoring]="isBacklightingColoring$ | async"
                        [lastEditedKey]="lastEditedKey$ | async"

packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts

@@ -16,6 +16,7 @@ import {
     backlightingColorPalette,
     backlightingMode,
     getHalvesInfo,
+    getHasCopiedLayer,
     getKeyboardLayout,
     getLayerOptions,
     getSecondaryRoleOptions,
@@ -57,6 +58,7 @@ export class KeymapEditComponent implements OnDestroy {
     backlightingMode$: Observable<BacklightingMode>;
     currentLayer$: Observable<LayerOption>;
     deletable$: Observable<boolean>;
+    hasCopiedLayer$: Observable<boolean>;
     isBacklightingColoring$: Observable<boolean>;
     keymap$: Observable<Keymap>;
     keyboardLayout$: Observable<KeyboardLayout>;
@@ -117,6 +119,7 @@ export class KeymapEditComponent implements OnDestroy {
             });
 
         this.deletable$ = store.select(isKeymapDeletable);
+        this.hasCopiedLayer$ = store.select(getHasCopiedLayer);
 
         this.keyboardLayout$ = store.select(getKeyboardLayout);
         this.allowLayerDoubleTap$ = store.select(layerDoubleTapSupported);

packages/uhk-web/src/app/components/layers/layers.component.html

@@ -27,6 +27,35 @@
                 </div>
             </div>
         </div>
+        <circle-tooltip [tooltip]="layerTooltip" width="450" placement="bottom"/>
+    </div>
+
+    <div *ngIf="allowLayerCopy" role="group" class="btn-group btn-group-lg layer-actions">
+        <button #copyTooltip="ngbTooltip"
+                type="button"
+                class="btn btn-default"
+                ngbTooltip="Copy the current layer to Agent's virtual clipboard. You can then paste it onto any layer, overwriting that layer's key actions."
+                tooltipClass="tooltip-layer-action"
+                triggers="hover"
+                container="body"
+                placement="bottom"
+                (click)="copyTooltip.close(); onCopyLayer()"
+        >
+            <fa-icon [icon]="faCopy"></fa-icon>
+        </button>
+        <button *ngIf="canPasteLayer"
+                #pasteTooltip="ngbTooltip"
+                type="button"
+                class="btn btn-default"
+                ngbTooltip="Overwrite the current layer with the layer stored in Agent's virtual clipboard."
+                tooltipClass="tooltip-layer-action"
+                triggers="hover"
+                container="body"
+                placement="bottom"
+                (click)="pasteTooltip.close(); onPasteLayer()"
+        >
+            <fa-icon [icon]="faPaste"></fa-icon>
+        </button>
     </div>
 
     <div *ngIf="showPaletteColors" class="group-container">
@@ -80,7 +109,6 @@
         </div>
     </div>
 
-    <circle-tooltip [tooltip]="layerTooltip" width="450" placement="bottom bottom-end"/>
     <ng-template #layerTooltip>
         <ul class="text-start">
             <li>The <strong>Base</strong> layer is active by default (when no other layers are active). This layer can never be deleted.</li>

packages/uhk-web/src/app/components/layers/layers.component.scss

@@ -32,12 +32,24 @@
                 font-size: 18px;
             }
 
+            circle-tooltip {
+                align-self: center;
+            }
+
             .btn-group {
                 flex-wrap: wrap;
                 .btn {
                     flex-grow: 0;
                 }
             }
         }
+
+        .layer-actions {
+            flex-wrap: wrap;
+
+            .btn {
+                flex-grow: 0;
+            }
+        }
     }
 }

packages/uhk-web/src/app/components/layers/layers.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faCopy, faPaste, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { colord, RgbColor } from 'colord';
 import { LayerName, RgbColorInterface } from 'uhk-common';
@@ -14,7 +14,9 @@ import { LayerOption, ModifyColorOfBacklightingColorPalettePayload } from '../..
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LayersComponent {
+    @Input() allowLayerCopy = false;
     @Input() allowNewLayers: boolean;
+    @Input() canPasteLayer = false;
     @Input() current: LayerOption;
     @Input() layerOptions: LayerOption[];
     @Input() paletteColors: Array<RgbColor> = [];
@@ -27,10 +29,14 @@ export class LayersComponent {
     @Output() selectLayer = new EventEmitter<LayerOption>();
     @Output() toggleColorFromPalette = new EventEmitter<number>();
     @Output() addLayer = new EventEmitter<number>();
+    @Output() copyLayer = new EventEmitter<void>();
+    @Output() pasteLayer = new EventEmitter<void>();
     @Output() removeLayer = new EventEmitter<number>();
 
     @ViewChild('deleteTooltip') deleteTooltip: NgbTooltip;
 
+    faCopy = faCopy;
+    faPaste = faPaste;
     faPlus = faPlus;
     faTrash = faTrash;
     LayerName = LayerName;
@@ -56,6 +62,14 @@ export class LayersComponent {
         this.addLayer.emit(layerOption.id);
     }
 
+    onCopyLayer(): void {
+        this.copyLayer.emit();
+    }
+
+    onPasteLayer(): void {
+        this.pasteLayer.emit();
+    }
+
     onColorSelected(index): void {
         this.toggleColorFromPalette.emit(index);
     }

packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.html

@@ -1,15 +1,19 @@
 <ng-template [ngIf]="layers">
     <layers [class.disabled]="animationState === 'opened'"
+            [allowLayerCopy]="allowLayerCopy"
             [allowNewLayers]="allowNewLayers"
+            [canPasteLayer]="canPasteLayer"
             [paletteColors]="paletteColors"
             [current]="currentLayer"
             [layerOptions]="layerOptions"
             [selectedPaletteColorIndex]="selectedPaletteColorIndex"
             [showPaletteColors]="showPaletteColors"
             (addColorToPalette)="addColorToPalette.emit($event)"
             (addLayer)="onAddLayer($event)"
+            (copyLayer)="onCopyLayer()"
             (deleteColorFromPalette)="deleteColorFromPalette.emit()"
             (modifyColorPaletteColor)="modifyColorPaletteColor.emit($event)"
+            (pasteLayer)="onPasteLayer()"
             (removeLayer)="onRemoveLayer($event)"
             (selectLayer)="selectedLayerChanged.emit($event)"
             (toggleColorFromPalette)="toggleColorFromPalette.emit($event)"

packages/uhk-web/src/app/components/svg/wrap/svg-keyboard-wrap.component.ts

@@ -47,7 +47,7 @@ import {
 import { MapperService } from '../../../services/mapper.service';
 import { AppState, getKeymaps, getMacros, getAnimationEnabled, getOpenPopover } from '../../../store';
 import { ClosePopoverAction } from '../../../store/actions/keymap';
-import { AddLayerAction, RemoveLayerAction, SaveKeyAction, SetKeyColorAction } from '../../../store/actions/keymap';
+import { AddLayerAction, CopyLayerAction, PasteLayerAction, RemoveLayerAction, SaveKeyAction, SetKeyColorAction } from '../../../store/actions/keymap';
 import { PopoverComponent } from '../../popover';
 import { ChangeKeymapDescription } from '../../../models/ChangeKeymapDescription';
 import { KeyActionRemap } from '../../../models/key-action-remap';
@@ -101,8 +101,10 @@ interface NameValuePair {
     ]
 })
 export class SvgKeyboardWrapComponent implements AfterViewInit, OnInit, OnChanges, OnDestroy {
+    @Input() allowLayerCopy = false;
     @Input() allowNewLayers: boolean;
     @Input() backlightingMode: BacklightingMode;
+    @Input() canPasteLayer = false;
     @Input() currentLayer: LayerOption;
     @Input() isBacklightingColoring = false;
     @Input() keymap: Keymap;
@@ -319,6 +321,14 @@ export class SvgKeyboardWrapComponent implements AfterViewInit, OnInit, OnChange
         this.store.dispatch(new RemoveLayerAction(id));
     }
 
+    onCopyLayer(): void {
+        this.store.dispatch(new CopyLayerAction(this.currentLayer.id));
+    }
+
+    onPasteLayer(): void {
+        this.store.dispatch(new PasteLayerAction(this.currentLayer.id));
+    }
+
     showPopover(keyAction: KeyAction): void {
         setTimeout(() => {
             this.keyPosition = this.keyElement.getBoundingClientRect();

packages/uhk-web/src/app/store/actions/keymap.ts

@@ -9,6 +9,8 @@ import { ExchangeKeysActionModel, OpenPopoverModel } from '../../models';
 export enum ActionTypes {
     Add = '[Keymap] Add keymap',
     AddLayer = '[Keymap] Add keymap layer',
+    CopyLayer = '[Keymap] Copy layer',
+    PasteLayer = '[Keymap] Paste layer',
     Duplicate = '[Keymap] Duplicate keymap',
     EditAbbr = '[Keymap] Edit keymap abbreviation',
     EditName = '[Keymap] Edit keymap title',
@@ -41,6 +43,20 @@ export class AddLayerAction implements Action {
     }
 }
 
+export class CopyLayerAction implements Action {
+    type = ActionTypes.CopyLayer;
+
+    constructor(public payload: number) {
+    }
+}
+
+export class PasteLayerAction implements Action {
+    type = ActionTypes.PasteLayer;
+
+    constructor(public payload: number) {
+    }
+}
+
 export class DuplicateKeymapAction implements Action {
     type = ActionTypes.Duplicate;
 
@@ -170,6 +186,8 @@ export class SelectLayerAction implements Action {
 export type Actions
     = AddKeymapAction
     | AddLayerAction
+    | CopyLayerAction
+    | PasteLayerAction
     | DuplicateKeymapAction
     | EditKeymapAbbreviationAction
     | EditKeymapNameAction

packages/uhk-web/src/app/store/effects/user-config.ts

@@ -111,6 +111,7 @@ export class UserConfigEffects {
                 Keymaps.ActionTypes.EditAbbr, Keymaps.ActionTypes.SetDefault, Keymaps.ActionTypes.Remove,
                 Keymaps.ActionTypes.SaveKey, Keymaps.ActionTypes.EditDescription, Keymaps.ActionTypes.ExchangeKeys,
                 Keymaps.ActionTypes.AddLayer, Keymaps.ActionTypes.RemoveLayer, Keymaps.ActionTypes.SetKeyColor,
+                Keymaps.ActionTypes.PasteLayer,
                 Macros.ActionTypes.Add, Macros.ActionTypes.Duplicate, Macros.ActionTypes.EditName, Macros.ActionTypes.Remove,
                 Macros.ActionTypes.AddAction, Macros.ActionTypes.SaveAction, Macros.ActionTypes.DeleteAction,
                 Macros.ActionTypes.ReorderAction, Macros.ActionTypes.DuplicateAction,

packages/uhk-web/src/app/store/index.ts

@@ -139,6 +139,7 @@ export const getMacroMap = createSelector(userConfigState, fromUserConfig.getMac
 export const lastEditedKey = createSelector(userConfigState, fromUserConfig.lastEditedKey);
 export const getOpenPopover = createSelector(userConfigState, fromUserConfig.getOpenPopover);
 export const getSelectedLayerOption = createSelector(userConfigState, fromUserConfig.getSelectedLayerOption);
+export const getHasCopiedLayer = createSelector(userConfigState, fromUserConfig.getHasCopiedLayer);
 export const getLayerOptions = createSelector(userConfigState, fromUserConfig.getLayerOptions);
 export const getSecondaryRoleOptions = createSelector(getSelectedLayerOption, getLayerOptions,
     (selectedLayer, layerOptions): SelectOptionData[] => {

packages/uhk-web/src/app/store/reducers/default-user-configuration.reducer.ts

@@ -26,7 +26,8 @@ export const initialState: State = {
     layerOptions: initLayerOptions(),
     loading: false,
     selectedLayerOption: getBaseLayerOption(),
-    theme: ''
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    theme: (window as any).getUhkTheme()
 };
 
 export function reducer(state = initialState, action: Actions | AppActions.Actions) {