targetj 1.0.259 → 1.0.260

package/build/ParticleRenderer.js

@@ -0,0 +1,637 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { ColorUtil } from "./ColorUtil.js";
+
+/**
+ * It renders GPU-backed children using WebGPU.
+ */
+var ParticleRenderer = /*#__PURE__*/function () {
+  function ParticleRenderer(tmodel) {
+    _classCallCheck(this, ParticleRenderer);
+    this.tmodel = tmodel;
+    this.canvas = undefined;
+    this.device = undefined;
+    this.context = undefined;
+    this.format = undefined;
+    this.pipeline = undefined;
+    this.bindGroup = undefined;
+    this.particleBuffer = undefined;
+    this.targetParticleBuffer = undefined;
+    this.uniformBuffer = undefined;
+    this.transitionStep = 0;
+    this.transitionActive = false;
+    this.particleCount = 0;
+    this.canvasLayer = undefined;
+    this.initializationPromise = undefined;
+  }
+  return _createClass(ParticleRenderer, [{
+    key: "init",
+    value: function () {
+      var _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var _this = this;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!this.device) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return", true);
+            case 2:
+              if (this.tmodel.hasDom()) {
+                _context.next = 4;
+                break;
+              }
+              return _context.abrupt("return", false);
+            case 4:
+              if (!this.initializationPromise) {
+                this.initializationPromise = this.initialize().catch(function (error) {
+                  _this.initializationPromise = undefined;
+                  throw error;
+                });
+              }
+              _context.next = 7;
+              return this.initializationPromise;
+            case 7:
+              return _context.abrupt("return", !!this.device);
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function init() {
+        return _init.apply(this, arguments);
+      }
+      return init;
+    }()
+  }, {
+    key: "initialize",
+    value: function () {
+      var _initialize = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        var adapter;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (navigator.gpu) {
+                _context2.next = 2;
+                break;
+              }
+              throw new Error("WebGPU is not supported by this browser.");
+            case 2:
+              if (globalThis.GPUBufferUsage) {
+                _context2.next = 4;
+                break;
+              }
+              throw new Error("GPUBufferUsage is not available in this WebGPU environment.");
+            case 4:
+              this.createCanvas();
+              _context2.next = 7;
+              return navigator.gpu.requestAdapter();
+            case 7:
+              adapter = _context2.sent;
+              if (adapter) {
+                _context2.next = 10;
+                break;
+              }
+              throw new Error("Unable to obtain a WebGPU adapter.");
+            case 10:
+              _context2.next = 12;
+              return adapter.requestDevice();
+            case 12:
+              this.device = _context2.sent;
+              this.context = this.canvas.getContext("webgpu");
+              if (this.context) {
+                _context2.next = 16;
+                break;
+              }
+              throw new Error("Unable to obtain a WebGPU canvas context.");
+            case 16:
+              this.format = navigator.gpu.getPreferredCanvasFormat();
+              this.resizeCanvas();
+              this.context.configure({
+                device: this.device,
+                format: this.format,
+                alphaMode: "premultiplied"
+              });
+              this.createUniformBuffer();
+              this.createPipeline();
+            case 21:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function initialize() {
+        return _initialize.apply(this, arguments);
+      }
+      return initialize;
+    }()
+  }, {
+    key: "createCanvas",
+    value: function createCanvas() {
+      var _this$tmodel$$dom;
+      if (this.canvas) {
+        return;
+      }
+      var parent = (_this$tmodel$$dom = this.tmodel.$dom) === null || _this$tmodel$$dom === void 0 ? void 0 : _this$tmodel$$dom.element;
+      if (!parent) {
+        throw new Error("Unable to create a GPU child layer without a parent DOM element.");
+      }
+      var oldLayer = parent.querySelector('[data-targetjs-gpu-layer="true"]');
+      if (oldLayer) {
+        oldLayer.remove();
+      }
+      this.canvasLayer = document.createElement("div");
+      this.canvasLayer.setAttribute("data-targetjs-gpu-layer", "true");
+      Object.assign(this.canvasLayer.style, {
+        position: "absolute",
+        left: "0px",
+        top: "0px",
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        zIndex: "0"
+      });
+      this.canvas = document.createElement("canvas");
+      this.canvas.setAttribute("data-targetjs-gpu-children", "true");
+      Object.assign(this.canvas.style, {
+        position: "sticky",
+        left: "0px",
+        top: "0px",
+        width: "1px",
+        height: "1px",
+        display: "block",
+        pointerEvents: "none"
+      });
+      this.canvasLayer.appendChild(this.canvas);
+      parent.prepend(this.canvasLayer);
+    }
+  }, {
+    key: "createUniformBuffer",
+    value: function createUniformBuffer() {
+      this.uniformBuffer = this.device.createBuffer({
+        size: 32,
+        usage: globalThis.GPUBufferUsage.UNIFORM | globalThis.GPUBufferUsage.COPY_DST
+      });
+    }
+  }, {
+    key: "createPipeline",
+    value: function createPipeline() {
+      var shaderModule = this.device.createShaderModule({
+        code: "\n                struct Uniforms {\n                    viewport: vec2f,\n                    contentOffset: vec2f,\n                    step: f32,\n                    transitionActive: f32,\n                    padding: vec2f,\n                }\n\n                @group(0) @binding(0)\n                var<uniform> uniforms: Uniforms;\n\n                struct VertexOutput {\n                    @builtin(position) position: vec4f,\n                    @location(0) localPosition: vec2f,\n                    @location(1) backgroundColor: vec4f,\n                    @location(2) size: vec2f,\n                    @location(3) borderRadius: f32,\n                }\n\n                fn getProgress(step: f32, steps: f32) -> f32 {\n                    if (uniforms.transitionActive < 0.5) {\n                        return 0.0;\n                    }\n\n                    if (steps < 0.0) {\n                        return 0.0;\n                    }\n\n                    if (steps == 0.0) {\n                        return 1.0;\n                    }\n\n                    return clamp(step / steps, 0.0, 1.0);\n                }\n\n                @vertex\n                fn vertexMain(\n                    @location(0) childPosition: vec2f,\n                    @location(1) childSize: vec2f,\n                    @location(2) childBackgroundColor: vec4f,\n                    @location(3) childGeometry: vec2f,\n                    @location(4) targetPosition: vec2f,\n                    @location(5) targetSize: vec2f,\n                    @location(6) targetBackgroundColor: vec4f,\n                    @location(7) targetGeometry: vec2f,\n                    @location(8) targetPositionSteps: vec2f,\n                    @location(9) targetSizeSteps: vec2f,\n                    @location(10) targetBackgroundColorSteps: f32,\n                    @location(11) targetGeometrySteps: vec2f,\n                    @builtin(vertex_index) vertexIndex: u32\n                ) -> VertexOutput {\n                    let corners = array<vec2f, 6>(\n                        vec2f(-1.0, -1.0),\n                        vec2f( 1.0, -1.0),\n                        vec2f(-1.0,  1.0),\n                        vec2f(-1.0,  1.0),\n                        vec2f( 1.0, -1.0),\n                        vec2f( 1.0,  1.0)\n                    );\n\n                    let xProgress = getProgress(uniforms.step, targetPositionSteps.x);\n                    let yProgress = getProgress(uniforms.step, targetPositionSteps.y);\n                    let widthProgress = getProgress(uniforms.step, targetSizeSteps.x);\n                    let heightProgress = getProgress(uniforms.step, targetSizeSteps.y);\n                    let backgroundColorProgress = getProgress(uniforms.step, targetBackgroundColorSteps);\n                    let borderRadiusProgress = getProgress(uniforms.step, targetGeometrySteps.x);\n                    let rotateProgress = getProgress(uniforms.step, targetGeometrySteps.y);\n\n                    let position = vec2f(\n                        mix(childPosition.x, targetPosition.x, xProgress),\n                        mix(childPosition.y, targetPosition.y, yProgress)\n                    );\n\n                    let size = vec2f(\n                        mix(childSize.x, targetSize.x, widthProgress),\n                        mix(childSize.y, targetSize.y, heightProgress)\n                    );\n\n                    let backgroundColor = mix(childBackgroundColor, targetBackgroundColor, backgroundColorProgress);\n                    let borderRadius = mix(childGeometry.x, targetGeometry.x, borderRadiusProgress);\n                    let rotate = mix(childGeometry.y, targetGeometry.y, rotateProgress);\n                    let localPosition = corners[vertexIndex];\n                    let localPixelPosition = localPosition * size * 0.5;\n                    let angle = rotate * 3.141592653589793 / 180.0;\n                    let cosine = cos(angle);\n                    let sine = sin(angle);\n\n                    let rotatedPosition = vec2f(\n                        localPixelPosition.x * cosine - localPixelPosition.y * sine,\n                        localPixelPosition.x * sine + localPixelPosition.y * cosine\n                    );\n\n                    let elementCenter = position - uniforms.contentOffset + size * 0.5;\n                    let pixelPosition = elementCenter + rotatedPosition;\n\n                    let clipPosition = vec2f(\n                        pixelPosition.x / uniforms.viewport.x * 2.0 - 1.0,\n                        1.0 - pixelPosition.y / uniforms.viewport.y * 2.0\n                    );\n\n                    var output: VertexOutput;\n\n                    output.position = vec4f(clipPosition, 0.0, 1.0);\n                    output.localPosition = localPosition;\n                    output.backgroundColor = backgroundColor;\n                    output.size = size;\n                    output.borderRadius = borderRadius;\n\n                    return output;\n                }\n\n                @fragment\n                fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {\n                    let halfSize = max(input.size * 0.5, vec2f(0.0001));\n                    let radius = clamp(input.borderRadius, 0.0, min(halfSize.x, halfSize.y));\n\n                    if (radius > 0.0) {\n                        let pixelPosition = input.localPosition * halfSize;\n                        let q = abs(pixelPosition) - (halfSize - vec2f(radius));\n                        let distance = length(max(q, vec2f(0.0))) + min(max(q.x, q.y), 0.0) - radius;\n\n                        if (distance > 0.0) {\n                            discard;\n                        }\n                    }\n\n                    return input.backgroundColor;\n                }\n            "
+      });
+      this.pipeline = this.device.createRenderPipeline({
+        layout: "auto",
+        vertex: {
+          module: shaderModule,
+          entryPoint: "vertexMain",
+          buffers: [{
+            arrayStride: 80,
+            stepMode: "instance",
+            attributes: [{
+              shaderLocation: 0,
+              offset: 0,
+              format: "float32x2"
+            }, {
+              shaderLocation: 1,
+              offset: 8,
+              format: "float32x2"
+            }, {
+              shaderLocation: 2,
+              offset: 16,
+              format: "float32x4"
+            }, {
+              shaderLocation: 3,
+              offset: 32,
+              format: "float32x2"
+            }]
+          }, {
+            arrayStride: 80,
+            stepMode: "instance",
+            attributes: [{
+              shaderLocation: 4,
+              offset: 0,
+              format: "float32x2"
+            }, {
+              shaderLocation: 5,
+              offset: 8,
+              format: "float32x2"
+            }, {
+              shaderLocation: 6,
+              offset: 16,
+              format: "float32x4"
+            }, {
+              shaderLocation: 7,
+              offset: 32,
+              format: "float32x2"
+            }, {
+              shaderLocation: 8,
+              offset: 40,
+              format: "float32x2"
+            }, {
+              shaderLocation: 9,
+              offset: 48,
+              format: "float32x2"
+            }, {
+              shaderLocation: 10,
+              offset: 56,
+              format: "float32"
+            }, {
+              shaderLocation: 11,
+              offset: 60,
+              format: "float32x2"
+            }]
+          }]
+        },
+        fragment: {
+          module: shaderModule,
+          entryPoint: "fragmentMain",
+          targets: [{
+            format: this.format
+          }]
+        },
+        primitive: {
+          topology: "triangle-list"
+        }
+      });
+      this.bindGroup = this.device.createBindGroup({
+        layout: this.pipeline.getBindGroupLayout(0),
+        entries: [{
+          binding: 0,
+          resource: {
+            buffer: this.uniformBuffer
+          }
+        }]
+      });
+    }
+  }, {
+    key: "toNumber",
+    value: function toNumber(value) {
+      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var number = typeof value === "string" ? parseFloat(value) : Number(value);
+      return Number.isFinite(number) ? number : defaultValue;
+    }
+  }, {
+    key: "getBackgroundColor",
+    value: function getBackgroundColor(value) {
+      if (Array.isArray(value)) {
+        return [this.toNumber(value[0], 1), this.toNumber(value[1], 1), this.toNumber(value[2], 1), this.toNumber(value[3], 1)];
+      }
+      var color = ColorUtil.color2Integers(value !== null && value !== void 0 ? value : "#fff");
+      if (!color) {
+        return [1, 1, 1, 1];
+      }
+      var alpha = this.toNumber(color[3], 1);
+      if (alpha > 1) {
+        alpha /= 255;
+      }
+      return [this.toNumber(color[0], 255) / 255, this.toNumber(color[1], 255) / 255, this.toNumber(color[2], 255) / 255, alpha];
+    }
+  }, {
+    key: "getTargetStep",
+    value: function getTargetStep(steps, key) {
+      if (!steps || !Object.prototype.hasOwnProperty.call(steps, key)) {
+        return -1;
+      }
+      return Math.max(0, this.toNumber(steps[key], 0));
+    }
+  }, {
+    key: "createParticleData",
+    value: function createParticleData(values, targetSteps) {
+      var particleData = new Float32Array(values.length * 20);
+      for (var i = 0; i < values.length; i++) {
+        var child = values[i] || {};
+        var steps = targetSteps === null || targetSteps === void 0 ? void 0 : targetSteps[i];
+        var backgroundColor = this.getBackgroundColor(child.backgroundColor);
+        var offset = i * 20;
+        particleData[offset] = this.toNumber(child.x, 0);
+        particleData[offset + 1] = this.toNumber(child.y, 0);
+        particleData[offset + 2] = this.toNumber(child.width, 0);
+        particleData[offset + 3] = this.toNumber(child.height, 0);
+        particleData[offset + 4] = backgroundColor[0];
+        particleData[offset + 5] = backgroundColor[1];
+        particleData[offset + 6] = backgroundColor[2];
+        particleData[offset + 7] = backgroundColor[3];
+        particleData[offset + 8] = Math.max(0, this.toNumber(child.borderRadius, 0));
+        particleData[offset + 9] = this.toNumber(child.rotate, 0);
+        particleData[offset + 10] = this.getTargetStep(steps, "x");
+        particleData[offset + 11] = this.getTargetStep(steps, "y");
+        particleData[offset + 12] = this.getTargetStep(steps, "width");
+        particleData[offset + 13] = this.getTargetStep(steps, "height");
+        particleData[offset + 14] = this.getTargetStep(steps, "backgroundColor");
+        particleData[offset + 15] = this.getTargetStep(steps, "borderRadius");
+        particleData[offset + 16] = this.getTargetStep(steps, "rotate");
+      }
+      return particleData;
+    }
+  }, {
+    key: "uploadParticleBuffer",
+    value: function uploadParticleBuffer(buffer, particleData) {
+      if (!particleData.length) {
+        var _buffer;
+        (_buffer = buffer) === null || _buffer === void 0 || _buffer.destroy();
+        return undefined;
+      }
+      if (!buffer || buffer.size !== particleData.byteLength) {
+        var _buffer2;
+        (_buffer2 = buffer) === null || _buffer2 === void 0 || _buffer2.destroy();
+        buffer = this.device.createBuffer({
+          size: particleData.byteLength,
+          usage: globalThis.GPUBufferUsage.VERTEX | globalThis.GPUBufferUsage.COPY_DST
+        });
+      }
+      this.device.queue.writeBuffer(buffer, 0, particleData);
+      return buffer;
+    }
+  }, {
+    key: "setParticles",
+    value: function () {
+      var _setParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(values) {
+        var initialized, particleData;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              values = Array.isArray(values) ? values : [values];
+              _context3.next = 3;
+              return this.init();
+            case 3:
+              initialized = _context3.sent;
+              if (initialized) {
+                _context3.next = 6;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 6:
+              particleData = this.createParticleData(values);
+              this.particleCount = values.length;
+              this.particleBuffer = this.uploadParticleBuffer(this.particleBuffer, particleData);
+              this.targetParticleBuffer = this.uploadParticleBuffer(this.targetParticleBuffer, particleData);
+              this.transitionStep = 0;
+              this.transitionActive = false;
+              this.render();
+            case 13:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function setParticles(_x) {
+        return _setParticles.apply(this, arguments);
+      }
+      return setParticles;
+    }()
+  }, {
+    key: "updateParticles",
+    value: function () {
+      var _updateParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(values) {
+        var initialized, particleData;
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              values = Array.isArray(values) ? values : [values];
+              _context4.next = 3;
+              return this.init();
+            case 3:
+              initialized = _context4.sent;
+              if (initialized) {
+                _context4.next = 6;
+                break;
+              }
+              return _context4.abrupt("return");
+            case 6:
+              particleData = this.createParticleData(values);
+              this.particleCount = values.length;
+              this.particleBuffer = this.uploadParticleBuffer(this.particleBuffer, particleData);
+              if (!this.transitionActive) {
+                this.targetParticleBuffer = this.uploadParticleBuffer(this.targetParticleBuffer, particleData);
+              }
+              this.render();
+            case 11:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function updateParticles(_x2) {
+        return _updateParticles.apply(this, arguments);
+      }
+      return updateParticles;
+    }()
+  }, {
+    key: "setTargetParticles",
+    value: function () {
+      var _setTargetParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(values, steps) {
+        var initialized, particleData;
+        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              values = Array.isArray(values) ? values : [values];
+              _context5.next = 3;
+              return this.init();
+            case 3:
+              initialized = _context5.sent;
+              if (initialized) {
+                _context5.next = 6;
+                break;
+              }
+              return _context5.abrupt("return");
+            case 6:
+              if (!(this.particleCount && values.length !== this.particleCount)) {
+                _context5.next = 8;
+                break;
+              }
+              throw new Error("GPU child transition count ".concat(values.length, " does not match current child count ").concat(this.particleCount, "."));
+            case 8:
+              particleData = this.createParticleData(values, steps);
+              this.targetParticleBuffer = this.uploadParticleBuffer(this.targetParticleBuffer, particleData);
+              this.transitionStep = 0;
+              this.transitionActive = true;
+              this.render();
+            case 13:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5, this);
+      }));
+      function setTargetParticles(_x3, _x4) {
+        return _setTargetParticles.apply(this, arguments);
+      }
+      return setTargetParticles;
+    }()
+  }, {
+    key: "setTransitionStep",
+    value: function setTransitionStep(step) {
+      this.transitionStep = Math.max(0, this.toNumber(step, 0));
+      this.render();
+    }
+  }, {
+    key: "getRenderWidth",
+    value: function getRenderWidth() {
+      var modelWidth = Number(this.tmodel.getWidth()) || 1;
+      var parentWidth = Number(this.tmodel.getParent().getWidth()) || window.innerWidth || 1;
+      return Math.max(1, Math.min(modelWidth, parentWidth));
+    }
+  }, {
+    key: "getRenderHeight",
+    value: function getRenderHeight() {
+      var _this$tmodel$getParen;
+      var modelHeight = Number(this.tmodel.getHeight()) || 1;
+      var parentHeight = Number((_this$tmodel$getParen = this.tmodel.getParent()) === null || _this$tmodel$getParen === void 0 ? void 0 : _this$tmodel$getParen.getHeight()) || window.innerHeight || 1;
+      return Math.max(1, Math.min(modelHeight, parentHeight));
+    }
+  }, {
+    key: "resizeCanvas",
+    value: function resizeCanvas() {
+      var _this$device$limits;
+      if (!this.canvas || !this.device) {
+        return;
+      }
+      var width = this.getRenderWidth();
+      var height = this.getRenderHeight();
+      var requestedPixelRatio = window.devicePixelRatio || 1;
+      var maxTextureDimension = ((_this$device$limits = this.device.limits) === null || _this$device$limits === void 0 ? void 0 : _this$device$limits.maxTextureDimension2D) || 8192;
+      var pixelRatio = Math.min(requestedPixelRatio, maxTextureDimension / width, maxTextureDimension / height);
+      var pixelWidth = Math.max(1, Math.round(width * pixelRatio));
+      var pixelHeight = Math.max(1, Math.round(height * pixelRatio));
+      var cssWidth = "".concat(width, "px");
+      var cssHeight = "".concat(height, "px");
+      if (this.canvas.style.width !== cssWidth) {
+        this.canvas.style.width = cssWidth;
+      }
+      if (this.canvas.style.height !== cssHeight) {
+        this.canvas.style.height = cssHeight;
+      }
+      if (this.canvas.width !== pixelWidth) {
+        this.canvas.width = pixelWidth;
+      }
+      if (this.canvas.height !== pixelHeight) {
+        this.canvas.height = pixelHeight;
+      }
+    }
+  }, {
+    key: "updateUniforms",
+    value: function updateUniforms() {
+      var width = this.getRenderWidth();
+      var height = this.getRenderHeight();
+      var scrollLeft = this.tmodel.getRenderScrollLeft();
+      var scrollTop = this.tmodel.getRenderScrollTop();
+      this.device.queue.writeBuffer(this.uniformBuffer, 0, new Float32Array([width, height, scrollLeft, scrollTop, this.transitionStep, this.transitionActive ? 1 : 0, 0, 0]));
+    }
+  }, {
+    key: "waitForPresentedFrame",
+    value: function () {
+      var _waitForPresentedFrame = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
+            case 0:
+              if (!this.device) {
+                _context6.next = 3;
+                break;
+              }
+              _context6.next = 3;
+              return this.device.queue.onSubmittedWorkDone();
+            case 3:
+              _context6.next = 5;
+              return new Promise(function (resolve) {
+                requestAnimationFrame(function () {
+                  requestAnimationFrame(resolve);
+                });
+              });
+            case 5:
+            case "end":
+              return _context6.stop();
+          }
+        }, _callee6, this);
+      }));
+      function waitForPresentedFrame() {
+        return _waitForPresentedFrame.apply(this, arguments);
+      }
+      return waitForPresentedFrame;
+    }()
+  }, {
+    key: "render",
+    value: function render() {
+      if (!this.device || !this.context || !this.pipeline || !this.particleBuffer || !this.targetParticleBuffer || this.particleCount === 0) {
+        return;
+      }
+      this.resizeCanvas();
+      this.updateUniforms();
+      var commandEncoder = this.device.createCommandEncoder();
+      var renderPass = commandEncoder.beginRenderPass({
+        colorAttachments: [{
+          view: this.context.getCurrentTexture().createView(),
+          clearValue: {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 0
+          },
+          loadOp: "clear",
+          storeOp: "store"
+        }]
+      });
+      renderPass.setPipeline(this.pipeline);
+      renderPass.setBindGroup(0, this.bindGroup);
+      renderPass.setVertexBuffer(0, this.particleBuffer);
+      renderPass.setVertexBuffer(1, this.targetParticleBuffer);
+      renderPass.draw(6, this.particleCount);
+      renderPass.end();
+      this.device.queue.submit([commandEncoder.finish()]);
+    }
+  }, {
+    key: "completeTransition",
+    value: function completeTransition() {
+      if (!this.targetParticleBuffer || !this.transitionActive) {
+        return;
+      }
+      var previousBuffer = this.particleBuffer;
+      this.particleBuffer = this.targetParticleBuffer;
+      this.targetParticleBuffer = previousBuffer;
+      this.transitionStep = 0;
+      this.transitionActive = false;
+      this.render();
+    }
+  }, {
+    key: "captureBitmap",
+    value: function captureBitmap() {
+      if (!this.canvas || !this.device) {
+        return;
+      }
+      this.render();
+      return createImageBitmap(this.canvas);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$particleBuffer, _this$targetParticleB, _this$uniformBuffer, _this$context, _this$canvasLayer;
+      (_this$particleBuffer = this.particleBuffer) === null || _this$particleBuffer === void 0 || _this$particleBuffer.destroy();
+      (_this$targetParticleB = this.targetParticleBuffer) === null || _this$targetParticleB === void 0 || _this$targetParticleB.destroy();
+      (_this$uniformBuffer = this.uniformBuffer) === null || _this$uniformBuffer === void 0 || _this$uniformBuffer.destroy();
+      (_this$context = this.context) === null || _this$context === void 0 || _this$context.unconfigure();
+      (_this$canvasLayer = this.canvasLayer) === null || _this$canvasLayer === void 0 || _this$canvasLayer.remove();
+      this.particleBuffer = undefined;
+      this.targetParticleBuffer = undefined;
+      this.uniformBuffer = undefined;
+      this.bindGroup = undefined;
+      this.pipeline = undefined;
+      this.context = undefined;
+      this.device = undefined;
+      this.canvasLayer = undefined;
+      this.canvas = undefined;
+      this.format = undefined;
+      this.transitionStep = 0;
+      this.transitionActive = false;
+      this.particleCount = 0;
+      this.initializationPromise = undefined;
+    }
+  }]);
+}();
+export { ParticleRenderer };