add welcome dialog

release.md

@@ -30,6 +30,6 @@
 
 * `C` add preferences for normal length and color
 * `-` add preferences for face selection and matching
-* `-` svg and image import conversion (share code with Kiri:Moto)
+* `-` add svg and image import conversion (share code with Kiri:Moto)
-* `-` add version chooser
+* `C` add version chooser
-* `-` welcome help menu
+* `-` add welcome menu

src/kiri/main.js

@@ -105,7 +105,7 @@ gapp.register("kiri.main", [], (root, exports) => {
             on(t,l) { return EVENT.on(t,l) },
             emit(t,m,o) { return EVENT.publish(t,m,o) },
             bind(t,m,o) { return EVENT.bind(t,m,o) },
-            alerts() { api.alerts.update() },
+            alerts(clr) { api.alerts.update(clr) },
             import: loadFile,
             settings: triggerSettingsEvent
         },

src/main/mesh.js

@@ -19,6 +19,7 @@ const { broker } = gapp;
 const { moto } = root;
 const { space } = moto;
 
+const version = '1.0.0';
 const call = broker.send;
 const dbindex = [ "admin", "space" ];
 
@@ -144,6 +145,9 @@ function restore_space() {
     }).finally(() => {
         // hide loading curtain
         $d('curtain','none');
+        if (api.prefs.map.info.welcome !== false) {
+            api.welcome(version);
+        }
     });
 }
 
@@ -273,7 +277,7 @@ function space_init(data) {
                 return;
             }
             if (evt.key === '?') {
-                return api.help();
+                return api.welcome(version);
             }
             let { shiftKey, metaKey, ctrlKey, code } = evt;
             switch (code) {
@@ -532,7 +536,6 @@ function set_normals_length(length) {
 }
 
 function set_normals_color(color) {
-console.log({color});
     let { prefs } = mesh.api;
     let { map } = prefs;
     if (map.space.dark) {

src/mesh/build.js

@@ -176,6 +176,37 @@ const log = api.log = {
 // bind endpoint for worker to log in the ui
 gapp.broker.subscribe("mesh.log", log.emit);
 
+// welcome dialog
+api.welcome = function(version = "unknown") {
+    const { prefs } = api;
+    const { map } = prefs;
+    modal.show('About Mesh:Tool', h.div({ class:"welcome" }, [
+        h.a({
+            target: "docs",
+            _: "Guide & Documentation",
+            href: "https://docs.grid.space/projects/mesh-tool"
+        }),
+        h.a({
+            target: "docs",
+            _: "Grid.Space",
+            href: "https://grid.space/"
+        }),
+        h.div(`Version: ${version}`),
+        h.hr({ width: "100%" }),
+        h.div({ class: "choice" }, [
+            h.input({
+                type: "checkbox",
+                [ map.info.welcome !== false ? 'checked' : 'unchecked' ] : 1,
+                onchange: (ev) => {
+                    map.info.welcome = ev.target.checked;
+                    prefs.save();
+                }
+            }),
+            h.div("show at startup")
+        ]),
+    ]));
+};
+
 // bind settings endpoint to api
 api.settings = function() {
     const { util } = mesh;

src/moto/webui.js

@@ -119,7 +119,7 @@ gapp.overlay(root, {
 });
 
 // add common element types
-["a", "i", "div", "span", "label", "input", "button", "svg"].forEach(type => {
+["a", "i", "hr", "div", "span", "label", "input", "button", "svg"].forEach(type => {
     h[type] = (attr, innr) => {
         return h.el(type, attr, innr);
     }

web/mesh/index.css

@@ -27,6 +27,12 @@ body, div {
     margin: 0;
 }
 
+input {
+    background-color: #eee;
+    border-radius: 3px;
+    border: 1px solid black;
+}
+
 #app {
     position: fixed;
     overflow: hidden;
@@ -230,7 +236,7 @@ button:hover {
 
 #modal_frame {
     border-radius: 4px !important;
-    background-color: rgba(255,255,255,0.9) !important;
+    background-color: #fff !important;
     flex-direction: column;
     padding: 0 !important; /* override common below */
     z-index: 51;
@@ -264,6 +270,30 @@ button:hover {
     color: black;
 }
 
+/** welcome dialog **/
+
+.welcome {
+    flex-direction: column;
+    align-items: center;
+    padding: 5px;
+    gap: 5px;
+    font-size: smaller;
+}
+
+.welcome a {
+    color: #038;
+    border-radius: 3px;
+    padding: 0 10px 0 10px;
+}
+
+.welcome a:hover {
+    background-color: #ddd;
+}
+
+.welcome .choice {
+    gap: 5px
+}
+
 /** settings dialog **/
 
 .settings {