feat(actions): implement preliminary flip/rotate dialog

actions/flip-rotate.js

@@ -0,0 +1,10 @@
+export class FlipRotateAction {
+  execute() {
+    const app = document.querySelector('paint-app').shadowRoot;
+    const dialog = document.createElement('paint-dialog-flip-and-rotate');
+    dialog.addEventListener('close', () => {
+      app.removeChild(dialog);
+    });
+    app.appendChild(dialog);
+  }
+}

elements/dialogs/flip-and-rotate.js

@@ -0,0 +1,104 @@
+import { css, html, LitElement } from '../../web_modules/lit-element.js';
+import { renderMnemonic } from '../../helpers/render-mnemonic.js';
+
+export class FlipAndRotate extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        top: 0;
+        right: 0;
+      }
+    
+      .content {
+        display: flex;
+        padding: 13px;
+      }
+
+      .options {
+        width: 174px;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .options input[name='degree'] {
+        margin-left: 50px;
+      }
+
+      .buttons {
+        width: 75px;
+        display: flex;
+        flex-direction: column;
+        margin-left: 8px;
+      }
+
+      .buttons button {
+        margin-bottom: 5px;
+      }
+
+      span.mnemonic {
+        text-decoration: underline;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <paint-window caption="Flip and Rotate">
+        <div class="content">
+          <div>
+            <fieldset>
+              <legend>Flip and Rotate</legend>
+              <div class="options">
+                <label
+                  ><input type="radio" name="mode" disabled /> ${renderMnemonic(
+                    'Flip horizontal',
+                    'F',
+                  )}</label
+                >
+                <label
+                  ><input type="radio" name="mode" disabled /> ${renderMnemonic(
+                    'Flip vertical',
+                    'v',
+                  )}</label
+                >
+                <label
+                  ><input type="radio" name="mode" disabled /> ${renderMnemonic(
+                    'Rotate by angle',
+                    'R',
+                  )}</label
+                >
+                <label
+                  ><input type="radio" name="degree" disabled />
+                  ${renderMnemonic('90°', '9')}</label
+                >
+                <label
+                  ><input type="radio" name="degree" disabled />
+                  ${renderMnemonic('180°', '1')}</label
+                >
+                <label
+                  ><input type="radio" name="degree" disabled />
+                  ${renderMnemonic('270°', '2')}</label
+                >
+              </div>
+            </fieldset>
+          </div>
+          <div class="buttons">
+            <button @click="${this.onCancel}">OK</button>
+            <button @click="${this.onCancel}">Cancel</button>
+          </div>
+        </div>
+      </paint-window>
+    `;
+  }
+
+  onCancel() {
+    this.dispatchEvent(
+      new CustomEvent('close', { bubbles: true, composed: true }),
+    );
+  }
+}
+
+customElements.define('paint-dialog-flip-and-rotate', FlipAndRotate);

elements/index.js

@@ -1,3 +1,4 @@
+import './dialogs/flip-and-rotate.js';
 import './window/window.js';
 import './window/title-bar-button.js';
 import './app.js';

menus/image.js

@@ -1,5 +1,6 @@
 import { InvertColorsAction } from '../actions/invert-image.js';
 import { ClearImageAction } from '../actions/clear-image.js';
+import { FlipRotateAction } from '../actions/flip-rotate.js';
 
 export const imageMenu = {
   caption: 'Image',
@@ -11,6 +12,7 @@ export const imageMenu = {
       mnemonic: 'F',
       // shortcut: 'Ctrl+R', <- prevents reloading
       helpText: 'Flips or rotates the picture or a selection.',
+      instance: new FlipRotateAction(),
     },
     {
       caption: 'Stretch/Skew…',