props attrs

zavx0z · Nov 23, 2023 · 9c2b1a3 · 9c2b1a3
1 parent fae9597
commit 9c2b1a3
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -5,18 +5,21 @@
  <title>skeleton-tracing</title>
  <script src="https://zavx0z.github.io/dev-tools/index.js" type="module" async></script>
  <dev-tools mobile></dev-tools>
- <script src="./index.js" type="module" defer></script>
+ <script src="index.js" type="module" defer></script>
  <script type="module">
  const element = document.querySelector("skeleton-tracing")
+ element.subscribe((snapshot) => setTimeout(() => console.log(snapshot), 1000))
+
  const template = document.querySelector("template")
+ template.content.querySelector("h1").innerHTML = element.name.ru
  element.parentElement.insertBefore(template.content, element)
  </script>
  </head>
  <body>
- <skeleton-tracing></skeleton-tracing>
+ <skeleton-tracing preview src="bin.png"></skeleton-tracing>
  </body>
  <template>
- <h1>skeleton-tracing</h1>
- <img src="./bin.png" alt="source image" />
+ <h1></h1>
+ <img src="bin.png" alt="source image" />
  </template>
 </html>
diff --git a/index.js b/index.js
@@ -1,36 +1,66 @@
 // https://github.com/LingDong-/skeleton-tracing/tree/master/wasm
 const html = String.raw
 class Component extends HTMLElement {
- name = "skeleton-tracing"
+ static tag = "skeleton-tracing"
+ name = { ru: "Центральная линия", en: "skeleton-tracing" }
+ description = { ru: "", en: "" }
  input = {
  img: {
  name: { ru: "Бинарное изображение" },
  description: { ru: "" },
  type: "String",
+ variant: "Path",
  value: "",
  },
  }
  output = {
- img: {
+ polylines: {
+ name: { ru: "Массив точек линий" },
+ description: { ru: "" },
+ type: "Array.Array.Number",
+ variant: "JS",
+ value: [],
+ },
+ svg: {
  name: { ru: "Центральная линия" },
  description: { ru: "Векторизованное изображение" },
  type: "String",
+ variant: "SVG",
  value: "",
  },
  }
- property = {}
- static observedAttributes = ['src']
+ property = {
+ preview: {
+ name: { ru: "Предпросмотр" },
+ description: { ru: "" },
+ type: "Boolean",
+ value: true,
+ },
+ }
+ static observedAttributes = ["src", "preview"]
  constructor() {
  super()
  this.shadow = this.attachShadow({ mode: "closed" })
+ setTimeout(() => {
+ console.log(this.property.preview.value, this.hasAttribute("preview"), typeof this.getAttribute("preview"), this.getAttribute("preview"))
+ }, 1000)
  }
  connectedCallback() {
- this.render()
+ this.render("./bin.png")
  }
  attributeChangedCallback(attrName, oldValue, newValue) {
- console.log(attrName)
+ switch (attrName) {
+ case "preview":
+ this.property.preview.value = this.hasAttribute("preview")
+ break
+ default:
+ break
+ }
+ setTimeout(() => {
+ console.log(attrName, oldValue, typeof newValue, this.hasAttribute("preview"))
+ }, 1000)
  }
- render() {
+ render(src) {
  import("https://cdn.jsdelivr.net/npm/skeleton-tracing-wasm/build/trace_skeleton_wasm.min.js").then(() => {
  TraceSkeleton.load().then((tracer) => {
  const canvas = document.createElement("canvas")
@@ -41,22 +71,24 @@ class Component extends HTMLElement {
  canvas.height = img.height
  ctx.drawImage(img, 0, 0)
  const result = tracer.fromCanvas(canvas)
-
  const viz = tracer.visualize(result)
- this.shadow.innerHTML = viz
+ setTimeout(()=>console.log(this.property.preview.value), 1000)
+ if (this.hasAttribute("preview")) this.shadow.innerHTML = viz
  canvas.remove()
+ this.subscriptions.forEach((cb) => cb({ polylines: result.polylines, svg: viz }))
  }
- img.src = "./bin.png"
+ img.src = src
  })
  })
  }
- send(message) {
- this.render()
+ mailbox = [] 
+ send({ src }) {
+ this.render(src)
  }
  subscriptions = []
  subscribe(cb) {
  this.subscriptions.push(cb)
  return () => this.subscriptions.unshift(cb)
  }
 }
-customElements.define("skeleton-tracing", Component)
+customElements.define(Component.tag, Component)