nodeFabric

zavx0z · Nov 24, 2023 · d502c7f · d502c7f
1 parent 15771a0
commit d502c7f
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 56 deletions.
diff --git a/horse_r.png b/horse_r.png
diff --git a/index.html b/index.html
@@ -4,65 +4,27 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>skeleton-tracing</title>
  <script type="module">
+ import { pathToImageData, i18n, nodeFabric } from "./utils.js"
  await new Promise((res) => import("https://zavx0z.github.io/dev-tools/index.js").then(() => setTimeout(res, 200)))
  await import("./index.js")
-
- function i18n(param) {
- if (param && typeof param === "object") {
- const current = document.documentElement.lang
- const exist = Object.keys(param)
- return exist.includes(current) ? param[current] : exist.includes("en") ? param["en"] : param[exist[0]]
- } else return ""
- }
-
- async function pathToImageData(imagePath) {
- return new Promise((res, rej) => {
- const canvas = document.createElement("canvas")
- try {
- const ctx = canvas.getContext("2d", { willReadFrequently: true })
- document.createElement("canvas").getContext("2d")
- const img = new Image()
- img.onload = () => {
- canvas.width = img.width
- canvas.height = img.height
- ctx.drawImage(img, 0, 0)
- const imageData = ctx.getImageData(0, 0, img.width, img.height)
- res({ img, imageData })
- }
- img.src = imagePath
- } catch (e) {
- rej(JSON.stringify(e))
- } finally {
- canvas.remove()
- }
- })
- }
-
  const { img, imageData } = await pathToImageData("bin.png")
 
  const element = document.querySelector("skeleton-tracing")
+
  element.subscribe((snapshot) => {
- // console.log(snapshot.svg)
  const resultSvg = document.getElementById("resultSvg")
  const svgEl = new DOMParser().parseFromString(snapshot.svg, "application/xml")
  resultSvg.appendChild(resultSvg.ownerDocument.importNode(svgEl.documentElement, true))
  })
-
  element.send({ imageData, preview: true })
- // setTimeout(() => element.send(imageData), 4444)
-
- const template = document.querySelector("template")
- template.content.querySelector("h1").innerHTML = i18n(element.name)
- template.content.appendChild(img)
- element.parentElement.insertBefore(template.content, element)
+
+ const content = nodeFabric(element)
+ document.body.appendChild(content)
  </script>
  <dev-tools mobile></dev-tools>
  </head>
  <body>
  <skeleton-tracing></skeleton-tracing>
- </body>
- <template>
- <h1></h1>
  <div id="resultSvg"></div>
- </template>
+ </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,17 +1,7 @@
 // https://github.com/LingDong-/skeleton-tracing/tree/master/wasm
 const html = String.raw
-function visualize(polylines, width, height, scale, stroke) {
- let svg = `<svg version="1.1" xmlns="http:https://www.w3.org/2000/svg" width="${width * scale}" height="${height * scale}">`
- for (let i = 0; i < polylines.length; i++) {
- svg += `<path fill="none" stroke-width="${stroke}" stroke="rgb(${Math.floor(Math.random() * 200)},${Math.floor(
- Math.random() * 200
- )},${Math.floor(Math.random() * 200)})" d="M${polylines[i]
- .map((x) => x[0] * scale + "," + x[1] * scale)
- .join(" L")}"/>`
- }
- svg += "</svg>"
- return svg
-}
+import { visualize } from "./lib/draw.js"
+
 class Component extends HTMLElement {
  static tag = "skeleton-tracing"
  name = { ru: "Центральная линия", en: "skeleton-tracing" }

diff --git a/lib/draw.js b/lib/draw.js
@@ -0,0 +1,12 @@
+export function visualize(polylines, width, height, scale, stroke) {
+ let svg = `<svg version="1.1" xmlns="http:https://www.w3.org/2000/svg" width="${width * scale}" height="${height * scale}">`
+ for (let i = 0; i < polylines.length; i++) {
+ svg += `<path fill="none" stroke-width="${stroke}" stroke="rgb(${Math.floor(Math.random() * 200)},${Math.floor(
+ Math.random() * 200
+ )},${Math.floor(Math.random() * 200)})" d="M${polylines[i]
+ .map((x) => x[0] * scale + "," + x[1] * scale)
+ .join(" L")}"/>`
+ }
+ svg += "</svg>"
+ return svg
+ }
diff --git a/opencv-thinning-src-img.png b/opencv-thinning-src-img.png
diff --git a/utils.js b/utils.js
@@ -0,0 +1,76 @@
+export async function pathToImageData(imagePath) {
+ return new Promise((res, rej) => {
+ const canvas = document.createElement("canvas")
+ try {
+ const ctx = canvas.getContext("2d", { willReadFrequently: true })
+ document.createElement("canvas").getContext("2d")
+ const img = new Image()
+ img.onload = () => {
+ canvas.width = img.width
+ canvas.height = img.height
+ ctx.drawImage(img, 0, 0)
+ const imageData = ctx.getImageData(0, 0, img.width, img.height)
+ res({ img, imageData })
+ }
+ img.src = imagePath
+ } catch (e) {
+ rej(JSON.stringify(e))
+ } finally {
+ canvas.remove()
+ }
+ })
+}
+
+export function i18n(param) {
+ if (param && typeof param === "object") {
+ const current = document.documentElement.lang
+ const exist = Object.keys(param)
+ return exist.includes(current) ? param[current] : exist.includes("en") ? param["en"] : param[exist[0]]
+ } else return ""
+}
+const html = String.raw
+
+export function nodeFabric(actor) {
+ const template = document.createElement("template")
+ template.innerHTML = html`
+ <h1>${i18n(actor.name)}</h1>
+ <form>
+ ${Object.entries(actor.input)
+ .map(([key, socket]) => {
+ switch (socket.type) {
+ case "Boolean":
+ return html`
+ <div>
+ <input type="checkbox" id="${key}" name="${key}" ${socket.value ? "checked" : ""} />
+ <label for="${key}">${i18n(socket.name)}</label>
+ </div>
+ `
+ case "String":
+ return html`
+ <div>
+ <label for="${key}">${i18n(socket.name)}</label>
+ <textarea cols="80" rows="4" id="${key}" name="${key}"> ${socket.value} </textarea>
+ </div>
+ `
+ default:
+ return ""
+ }
+ })
+ .join("")}
+ </form>
+ `
+ template.content.querySelector("form").addEventListener("change", (e) => {
+ e.preventDefault()
+ const formData = new FormData(e.currentTarget)
+ const props = {}
+ for (const key in actor.input) {
+ const value = formData.get(key)
+ if (actor.input[key].type === "Boolean") {
+ props[key] = value === "on"
+ } else props[key] = value
+ }
+ actor.send(props)
+ })
+ template.content.appendChild(actor)
+ return template.content
+}