diff --git a/package-lock.json b/package-lock.json index 70a24d2..45013c9 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index f82981a..6ea686b 100644 --- a/package.json +++ b/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", diff --git a/src/scss/base.scss b/src/scss/base.scss index 9acceac..235e6e9 100644 --- a/src/scss/base.scss +++ b/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; diff --git a/src/ts/common/modals/modal.ts b/src/ts/common/modals/modal.ts index 236145a..9c42a97 100644 --- a/src/ts/common/modals/modal.ts +++ b/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) => 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` - - +
+ ` render(template, parent) - const yes = document.getElementById(`yes-${id}`) - const no = document.getElementById(`no-${id}`) + const dialog = new MDCDialog(document.querySelector(`#modal-${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}`) }) diff --git a/src/ts/main.ts b/src/ts/main.ts index 6c728d9..69cd7fa 100644 --- a/src/ts/main.ts +++ b/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("not",[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("and", [200, 100], [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("false", [200, 500], [100, 100])) manager.update() -const handleEvent = (e:T,func:(e:T) => any) => { +const handleEvent = (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 = (e:T,func:(e:T) => any) => { } render(html` -
handleEvent(e,(e:MouseEvent) => { - manager.handleMouseMove(e) - screen.updateMouse(e) - })} - @mousedown=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) => - manager.handleMouseDown(e) - )} - @mouseup=${(e:MouseEvent) => handleEvent(e,(e:MouseEvent) => - manager.handleMouseUp(e) - )} - @wheel=${(e:MouseEvent) => handleEvent(e,(e:WheelEvent) => - screen.handleScroll(e) - )}> +
handleEvent(e, (e: MouseEvent) => { + manager.handleMouseMove(e) + screen.updateMouse(e) +})} + @mousedown=${(e: MouseEvent) => handleEvent(e, (e: MouseEvent) => + manager.handleMouseDown(e) +)} + @mouseup=${(e: MouseEvent) => handleEvent(e, (e: MouseEvent) => + manager.handleMouseUp(e) +)} + @wheel=${(e: MouseEvent) => handleEvent(e, (e: WheelEvent) => + screen.handleScroll(e) +)}>
- (val == "1") ? "shown" : "" - )))} + (val == "1") ? "shown" : "" +)))} class=createBar>
@@ -51,10 +52,10 @@ render(html`
- - ${ subscribe(manager.svgs) } + ${ subscribe(manager.svgs)}
@@ -65,9 +66,12 @@ render(html` Something - + { + menu.open = true + // menu.setAbsolutePosition(screen.mousePosition[0], screen.mousePosition[1]) + }}> - something else + Open simulation @@ -76,6 +80,21 @@ render(html`
+ +
+ +
`, document.body) +const menu = new MDCMenu(document.querySelector('.mdc-menu')); +menu.hoistMenuToBody() +menu.setAnchorElement(document.querySelector(`#openSimulation`)) + manager.update() \ No newline at end of file