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

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;
 }