add png import-conversion parameterization

release.md

@@ -35,7 +35,7 @@ Full docs @ https://docs.grid.space/projects/kiri-moto
 * multi-body identification and isolation
 * quick add primitives: cube, cylinder
 * control wireframe transparency
-* ~ parameterize png/jpg image import
+* parameterize png image import
 * ~ undo / redo for some operations
 * ~ show camera focal point
 * ~ better Z split snapping and split at defined Z index

src/kiri/main.js

@@ -511,6 +511,7 @@ gapp.register("kiri.main", [], (root, exports) => {
      * Settings Functions
      ******************************************************************* */
 
+    // convert any image type to png
     function loadImageConvert(res, name) {
         let url = URL.createObjectURL(new Blob([res]));
 

src/load/file.js

@@ -68,9 +68,9 @@ function load_data(data, file, ext, opt = {}) {
     });
 }
 
-function load_file(file) {
+function load_file(file, opt) {
     if (Array.isArray(file)) {
-        return Promise.all(file.map(file => load_file(file)));
+        return Promise.all(file.map(file => load_file(file, opt)));
     }
     return new Promise((resolve, reject) => {
         if (!file) {
@@ -81,7 +81,7 @@ function load_file(file) {
         let ext = name.toLowerCase().split('.').pop();
         reader.file = file;
         reader.onloadend = function (event) {
-            load_data(event.target.result, name, ext)
+            load_data(event.target.result, name, ext, opt)
                 .then(data => resolve(data))
                 .catch(e => reject(e));
         };

src/main/mesh.js

@@ -458,7 +458,57 @@ function space_init(data) {
 
 function load_files(files) {
     mesh.api.log.emit(`loading file...`);
-    load.File.load([...files])
+    let api = mesh.api;
+    let has_image = false;
+    for (let file of files) {
+        has_image = has_image || file.type === 'image/png';
+    }
+    if (has_image) {
+        api.modal.dialog({
+            title: `image options`,
+            body: [ h.div({ class: "image-import" }, [
+                h.div([
+                    h.label("invert pixels"),
+                    h.input({ id: "inv_image", type: "checkbox" })
+                ]),
+                h.div([
+                    h.label("invert alpha"),
+                    h.input({ id: "inv_alpha", type: "checkbox" })
+                ]),
+                h.div([
+                    h.label("border size"),
+                    h.input({ id: "img_border", value: 5, size: 4 })
+                ]),
+                h.div([
+                    h.label("blur pixels"),
+                    h.input({ id: "img_blur", value: 5, size: 4 })
+                ]),
+                h.div([
+                    h.label("base pixels"),
+                    h.input({ id: "img_base", value: 5, size: 4 })
+                ]),
+                h.div([
+                    h.button({ _: "next", onclick() {
+                        let { inv_image, inv_alpha, img_border, img_blur, img_base } = api.modal.bound;
+                        load_files_opt(files, {
+                            inv_image: inv_image.checked,
+                            inv_alpha: inv_alpha.checked,
+                            border: parseInt(img_border.value || 0),
+                            blur: parseInt(img_blur.value || 0),
+                            base: parseInt(img_base.value || 0),
+                        });
+                        api.modal.hide();
+                    } }),
+                ])
+            ]) ]
+        });
+    } else {
+        load_files(files);
+    }
+}
+
+function load_files_opt(files, opt) {
+    load.File.load([...files], opt)
         .then(data => {
             call.space_load(data);
         })

web/mesh/index.css

@@ -229,6 +229,25 @@ button:hover {
     text-align: center;
 }
 
+.image-import {
+    flex-direction: column;
+    gap: 3px;
+}
+
+.image-import label {
+    padding-right: 5px;
+    flex-grow: 1;
+}
+
+.image-import input {
+    text-align: center;
+}
+
+.image-import button {
+    margin: 10px 20px 1px 20px;
+    flex-grow: 1;
+}
+
 /** generic modal dialogs **/
 
 #modal_page {