diff --git a/release.md b/release.md index 8b1f8e36..03518b88 100644 --- a/release.md +++ b/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 diff --git a/src/kiri/main.js b/src/kiri/main.js index 159f084d..c32b9f16 100644 --- a/src/kiri/main.js +++ b/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])); diff --git a/src/load/file.js b/src/load/file.js index bf84b86f..6aab2945 100644 --- a/src/load/file.js +++ b/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)); }; diff --git a/src/main/mesh.js b/src/main/mesh.js index f5e61bd4..b869011c 100644 --- a/src/main/mesh.js +++ b/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); }) diff --git a/web/mesh/index.css b/web/mesh/index.css index 07d378eb..875ef009 100644 --- a/web/mesh/index.css +++ b/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 {