начальная рабочая версия

3 weeks ago · 8e53b56482
parent d37df72db8
commit 8e53b56482
5 changed files with 106 additions and 0 deletions
--- a/@shared/konva.min.js
+++ b/@shared/konva.min.js
--- a/index.html
+++ b/index.html
@ -0,0 +1,5 @@
+<!dhtml>
+
+<body>
+  <konva-editor class="konva"></konva-editor>
+</body>
--- a/konva-editor.html
+++ b/konva-editor.html
@ -0,0 +1,37 @@
+<!dhtml lib>
+
+<konva-editor>
+  <script>
+    this.stage = null;
+    this._resizeObserver = null;
+
+    mounted() {
+      const width = this.root.clientWidth || 500;
+      const height = this.root.clientHeight || 500;
+
+      this.stage = new Konva.Stage({
+        container: this.root,
+        width,
+        height,
+      });
+
+      this._resizeObserver = new ResizeObserver(() => {
+        if (!this.stage) return;
+
+        this.stage.width(this.root.clientWidth);
+        this.stage.height(this.root.clientHeight);
+        this.stage.batchDraw();
+      });
+
+      this._resizeObserver.observe(this.root);
+    }
+
+    unmounted() {
+      this._resizeObserver?.disconnect();
+      this._resizeObserver = null;
+
+      this.stage?.destroy();
+      this.stage = null;
+    }
+  </script>
+</konva-editor>
--- a/site.yaml
+++ b/site.yaml
@ -0,0 +1,4 @@
+
+meta:
+  language: ru-RU
+  title: simple konva
--- a/styles.css
+++ b/styles.css
@ -0,0 +1,6 @@
+
+.konva {
+  width: 500px;
+  height: 400px;
+  background-color: lightblue;
+}