Differences

This shows you the differences between two versions of the page.

--- konvabean [2026/05/25 19:20] – created wikiadmin
+++ konvabean [2026/05/26 13:54] (current) – [LLM Meta Prompt] wikiadmin
@@ Line 1: / Line 1: @@
 ====== MIStudio Konva Bean ======
 ===== TL;DR / Quick Start =====
+<note>
+See the end of the document for a prompt that you can use with your favorite LLM - ChatGPT, CoPilot, Claude, Gemini, etc. to create any graphics you can imagine...
+</note>
 **Three critical rules**
@@ Line 40: / Line 43: @@
 init(container) {
   container.innerHTML = "";
+  container.style.overflow = "hidden";
+  container.style.position = "relative";
+  this.stageHost = document.createElement("div");
+  this.stageHost.style.position = "absolute";
+  this.stageHost.style.left = "0px";
+  this.stageHost.style.top = "0px";
+  this.stageHost.style.width = "100%";
+  this.stageHost.style.height = "100%";
+  this.stageHost.style.overflow = "hidden";
+  container.appendChild(this.stageHost);
+  var w = container.clientWidth || container.offsetWidth || 300;
+  var h = container.clientHeight || container.offsetHeight || 200;
   this.stage = new window.Konva.Stage({
-    container: container,
+    container: this.stageHost,
-    width: container.clientWidth || 300,
+    width: w,
-    height: container.clientHeight || 200
+    height: h
   });
@@ Line 51: / Line 68: @@
   this.circle = new window.Konva.Circle({
-    x: 100,
+    x: w / 2,
-    y: 100,
+    y: h / 2,
     radius: 40,
     fill: "steelblue"
@@ Line 58: / Line 75: @@
   this.layer.add(this.circle);
-  this.layer.draw();
+  var self = this;
+  this.resize = function() {
+    if (!self.stage || !self.circle) {
+      return;
+    }
+    var w = container.clientWidth || container.offsetWidth || 1;
+    var h = container.clientHeight || container.offsetHeight || 1;
+    self.stage.width(w);
+    self.stage.height(h);
+    self.circle.x(w / 2);
+    self.circle.y(h / 2);
+    self.layer.draw();
+  };
+  this.resizeObserver = new ResizeObserver(function() {
+    self.resize();
+  });
+  this.resizeObserver.observe(container);
+  this.resize();
+}
+cleanup() {
+  if (this.resizeObserver) {
+    this.resizeObserver.disconnect();
+    this.resizeObserver = null;
+  }
+  if (this.stage) {
+    this.stage.destroy();
+    this.stage = null;
+  }
+  this.circle = null;
+  this.layer = null;
+  this.stageHost = null;
+  this.resize = null;
 }
@@ Line 66: / Line 126: @@
     var value = parseFloat(obj.value);
-    this.circle.fill(value > 50 ? "red" : "green");
+    if (this.circle) {
-    this.layer.draw();
+      this.circle.fill(value > 50 ? "red" : "green");
+      this.layer.draw();
+    }
   } catch (err) {
     console.error(err);
@@ Line 329: / Line 391: @@
 ===== LLM Meta Prompt =====
-Copy this into ChatGPT/Claude/etc. and describe the visualization you want.
+Copy this into ChatGPT/Claude/etc. and describe the visualization you want.  A more extensive prompt is available [[KonvaDetailedPrompt | Konva Detailed Prompt]]
 <code>