😊 Added a dummy menu 🍜

package-lock.json

@@ -32,6 +32,39 @@
                 "tslib": "^1.9.3"
             }
         },
+        "@material/button": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/button/-/button-2.3.0.tgz",
+            "integrity": "sha512-xFyZjm0pmisfSU6OHO3Wk2zZX51N9D0DohmaPoXnZt2unfD8bCwRmlmD7TTUQCLnuBoIaqrYShpcRTGp4K5dMw==",
+            "requires": {
+                "@material/elevation": "^1.1.0",
+                "@material/feature-targeting": "^0.44.1",
+                "@material/ripple": "^2.3.0",
+                "@material/rtl": "^0.42.0",
+                "@material/shape": "^1.1.1",
+                "@material/theme": "^1.1.0",
+                "@material/typography": "^2.3.0"
+            }
+        },
+        "@material/dialog": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-2.3.0.tgz",
+            "integrity": "sha512-T0xEKUW4uY5ZK7S92bdCVjFo9naasTRFNTXccIk+lBkbUlTsCOJMtix+dSJcj8ba8NOZjjq7phfAQqnNKUOhvg==",
+            "requires": {
+                "@material/animation": "^1.0.0",
+                "@material/base": "^1.0.0",
+                "@material/dom": "^1.1.0",
+                "@material/elevation": "^1.1.0",
+                "@material/feature-targeting": "^0.44.1",
+                "@material/ripple": "^2.3.0",
+                "@material/rtl": "^0.42.0",
+                "@material/shape": "^1.1.1",
+                "@material/theme": "^1.1.0",
+                "@material/typography": "^2.3.0",
+                "focus-trap": "^5.0.0",
+                "tslib": "^1.9.3"
+            }
+        },
         "@material/dom": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@material/dom/-/dom-1.1.0.tgz",
@@ -89,6 +122,35 @@
                 "tslib": "^1.9.3"
             }
         },
+        "@material/menu": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/menu/-/menu-2.3.0.tgz",
+            "integrity": "sha512-XPI6w4x5c9ACwKBdujcTskBlisWlEgrb09Sa+s0vjhqBJVZVAUJT1j0OpG8tArNUqQiFssXBa/JuJIe6sMAK1A==",
+            "requires": {
+                "@material/base": "^1.0.0",
+                "@material/feature-targeting": "^0.44.1",
+                "@material/list": "^2.3.0",
+                "@material/menu-surface": "^2.3.0",
+                "@material/ripple": "^2.3.0",
+                "@material/rtl": "^0.42.0",
+                "tslib": "^1.9.3"
+            }
+        },
+        "@material/menu-surface": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@material/menu-surface/-/menu-surface-2.3.0.tgz",
+            "integrity": "sha512-jJ1MyeJnEJUO0Z7kNxvqN0xruWbTT2XKHCiApQcJHHkeibWfbWJdhXcx5aO4FMf/TVcy3ADSxDTdvc6AYrBX0g==",
+            "requires": {
+                "@material/animation": "^1.0.0",
+                "@material/base": "^1.0.0",
+                "@material/elevation": "^1.1.0",
+                "@material/feature-targeting": "^0.44.1",
+                "@material/rtl": "^0.42.0",
+                "@material/shape": "^1.1.1",
+                "@material/theme": "^1.1.0",
+                "tslib": "^1.9.3"
+            }
+        },
         "@material/ripple": {
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-2.3.0.tgz",

package.json

@@ -48,8 +48,12 @@
     "dependencies": {
         "@eix/input": "git+https://github.com/eix-js/input.git",
         "@eix/utils": "git+https://github.com/eix-js/utils.git",
+        "@material/button": "^2.3.0",
+        "@material/dialog": "^2.3.0",
         "@material/drawer": "^2.3.0",
         "@material/list": "^2.3.0",
+        "@material/menu": "^2.3.0",
+        "@material/theme": "^1.1.0",
         "file-saver": "^2.0.2",
         "haunted": "^4.3.0",
         "lit-html": "^1.0.0",

src/scss/base.scss

@@ -1,7 +1,18 @@
 @import "./toastr.scss";
 @import "./modal.scss";
+
+$mdc-theme-primary: black;
+$mdc-theme-secondary: #feeae6;
+$mdc-theme-on-primary: white;
+$mdc-theme-surface: black;
+$mdc-theme-on-secondary: #442b2d;
+
 @import "@material/drawer/mdc-drawer.scss";
-@import "@material/list/mdc-list.scss";
+@import "@material/list/mdc-list";
+@import "@material/dialog/mdc-dialog";
+@import "@material/button/mdc-button";
+@import "@material/menu-surface/mdc-menu-surface";
+@import "@material/menu/mdc-menu";
 
 html, body {
     padding: 0;

src/ts/common/modals/modal.ts

@@ -1,7 +1,7 @@
 import { render, html } from "lit-html"
 import { confirmModalOptions } from "./interfaces";
 import { fromEvent } from "rxjs";
-import MicroModal from "micromodal"
+import { MDCDialog } from '@material/dialog';
 
 let lastId = 0
 
@@ -14,60 +14,65 @@ export const modal = (options: Partial<confirmModalOptions>) => new Promise((res
     }
 
     const parent = document.getElementsByClassName("ModalContainer")[0]
-    const finalOptions: confirmModalOptions = { ...defaultOptions, ...options }
+    const { title, content, yes, no }: confirmModalOptions = { ...defaultOptions, ...options }
     const id = lastId++
 
     if (!parent)
         rej(false)
 
     const template = html`
-    <div class="modal micromodal-slide" id="modal-${id}" aria-hidden="true">
+    <div class="mdc-dialog"
-        <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+     id="modal-${id}"
-            <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
+     role="alertdialog"
-                <header class="modal__header">
+     aria-modal="true"
-                    <h2 class="modal__title" id="modal-${id}-title">
+     aria-labelledby="${title}"
-                        ${finalOptions.title}
+     aria-describedby="my-dialog-content">
-                    </h2>
+        <div class="mdc-dialog__container">
-                    <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
+            <div class="mdc-dialog__surface">
-                </header>
+                <h2 class="mdc-dialog__title" id="${title}">
-                <main class="modal__content" id="modal-${id}-content">
+                    ${title}
-                    ${finalOptions.content}
+                </h2>
-                </main>
+                <div class="mdc-dialog__content" id="my-dialog-content">
-                <footer class="modal__footer">
+                    ${content}
-                    <button class="modal__btn" id="yes-${id}">${finalOptions.yes}</button>
+                </div>
-                    <button class="modal__btn modal__btn-primary" id="no-${id}" aria-label="Close this dialog window">
+                <footer class="mdc-dialog__actions">
-                        ${finalOptions.no}
+                    <button type="button" class="mdc-button mdc-dialog__button" id="no-${id}">
+                        <span class="mdc-button__label">${no}</span>
+                    </button>
+                    <button type="button" class="mdc-button mdc-dialog__button" id="yes-${id}">
+                        <span class="mdc-button__label">${yes}</span>
                     </button>
                 </footer>
             </div>
         </div>
-    </div>
+        <div class="mdc-dialog__scrim"></div>
-    </div>
+        </div>
     `
 
     render(template, parent)
 
-    const yes = document.getElementById(`yes-${id}`)
+    const dialog = new MDCDialog(document.querySelector(`#modal-${id}`))
-    const no = document.getElementById(`no-${id}`)
+    dialog.open()
+
+    const _yes = document.getElementById(`yes-${id}`)
+    const _no = document.getElementById(`no-${id}`)
 
     const clear = () => {
         // render(html``,parent)
-        MicroModal.close()
+        dialog.close()
         subscriptions.forEach(val => val.unsubscribe())
     }
 
     const subscriptions = [
-        fromEvent(yes, "click").subscribe(val => {
+        fromEvent(_yes, "click").subscribe(val => {
             clear()
             res(true)
         }),
-        fromEvent(no, "click").subscribe(val => {
+        fromEvent(_no, "click").subscribe(val => {
             clear()
             res(false)
         })
     ]
-
-    MicroModal.show(`modal-${id}`)
 })
 
 

src/ts/main.ts

@@ -5,17 +5,18 @@ import { Component } from "./common/component";
 import { FunctionStore } from "./common/activation/activationStore";
 import { ComponentManager } from "./common/componentManager";
 import { map } from "rxjs/operators";
+import { MDCMenu } from '@material/menu';
 
 const screen = new Screen()
 
 const manager = new ComponentManager()
-manager.components.push(new Component("and",[200,100],[100,100]))
+manager.components.push(new Component("and", [200, 100], [100, 100]))
-manager.components.push(new Component("not",[200,500],[100,100]))
+manager.components.push(new Component("not", [200, 500], [100, 100]))
-manager.components.push(new Component("true",[200,500],[100,100]))
+manager.components.push(new Component("true", [200, 500], [100, 100]))
-manager.components.push(new Component("false",[200,500],[100,100]))
+manager.components.push(new Component("false", [200, 500], [100, 100]))
 manager.update()
 
-const handleEvent = <T>(e:T,func:(e:T) => any) => {
+const handleEvent = <T>(e: T, func: (e: T) => any) => {
     if (manager.barAlpha.value == "0")
         func(e)
     else if (manager.barAlpha.value == "1"
@@ -25,23 +26,23 @@ const handleEvent = <T>(e:T,func:(e:T) => any) => {
 }
 
 render(html`
-    <div @mousemove=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) => {
+    <div @mousemove=${(e: MouseEvent) => handleEvent(e, (e: MouseEvent) => {
-            manager.handleMouseMove(e)
+    manager.handleMouseMove(e)
-            screen.updateMouse(e)
+    screen.updateMouse(e)
-        })}
+})}
-        @mousedown=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) =>
+        @mousedown=${(e: MouseEvent) => handleEvent(e, (e: MouseEvent) =>
-            manager.handleMouseDown(e)
+    manager.handleMouseDown(e)
-        )}
+)}
-        @mouseup=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) =>
+        @mouseup=${(e: MouseEvent) => handleEvent(e, (e: MouseEvent) =>
-            manager.handleMouseUp(e)
+    manager.handleMouseUp(e)
-        )}
+)}
-        @wheel=${(e:MouseEvent) => handleEvent(e,(e:WheelEvent) =>
+        @wheel=${(e: MouseEvent) => handleEvent(e, (e: WheelEvent) =>
-            screen.handleScroll(e)
+    screen.handleScroll(e)
-        )}>
+)}>
 
         <div id=${subscribe(manager.barAlpha.pipe(map(val =>
-            (val == "1") ? "shown" : ""
+    (val == "1") ? "shown" : ""
-        )))}
+)))}
         class=createBar>
             <div class="topContainer">
                 <div>
@@ -51,10 +52,10 @@ render(html`
                 </div>
             </div>
         </div>
-        <svg height=${ subscribe(screen.height) }
+        <svg height=${ subscribe(screen.height)}
-            width=${ subscribe(screen.width) }
+            width=${ subscribe(screen.width)}
             viewBox=${subscribe(screen.viewBox)}>
-            ${ subscribe(manager.svgs) }
+            ${ subscribe(manager.svgs)}
         </svg>
     </div>
     <div class="ModalContainer"></div>
@@ -65,9 +66,12 @@ render(html`
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
             <span class="mdc-list-item__text">Something</span>
         </a>
-        <a class="mdc-list-item" href="#">
+        <a class="mdc-list-item" href="#" id="openSimulation" @click=${() => {
+        menu.open = true
+        // menu.setAbsolutePosition(screen.mousePosition[0], screen.mousePosition[1])
+    }}>
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
-            <span class="mdc-list-item__text">something else</span>
+            <span class="mdc-list-item__text">Open simulation</span>
         </a>
         <a class="mdc-list-item" href="#">
             <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
@@ -76,6 +80,21 @@ render(html`
         </nav>
     </div>
     </aside>
+
+    <div class="mdc-menu mdc-menu-surface mdc-theme--primary-bg mdc-theme--on-primary">
+        <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
+            <li class="mdc-list-item" role="menuitem">
+            <span class="mdc-list-item__text">A Menu Item</span>
+            </li>
+            <li class="mdc-list-item" role="menuitem">
+            <span class="mdc-list-item__text">Another Menu Item</span>
+            </li>
+        </ul>
+    </div>
 `, document.body)
 
+const menu = new MDCMenu(document.querySelector('.mdc-menu'));
+menu.hoistMenuToBody()
+menu.setAnchorElement(document.querySelector(`#openSimulation`))
+
 manager.update()