targetj 1.0.260 → 1.1.0

package/build/ParticleRenderer.js

@@ -1,4 +1,11 @@
 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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 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); }); }; }
@@ -8,6 +15,7 @@ function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r),
 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";
+import { TUtil } from "./TUtil.js";
 
 /**
  * It renders GPU-backed children using WebGPU.
@@ -29,6 +37,8 @@ var ParticleRenderer = /*#__PURE__*/function () {
     this.transitionActive = false;
     this.particleCount = 0;
     this.canvasLayer = undefined;
+    this.canvasX = 0;
+    this.canvasY = 0;
     this.initializationPromise = undefined;
   }
   return _createClass(ParticleRenderer, [{
@@ -137,7 +147,10 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "createCanvas",
     value: function createCanvas() {
-      var _this$tmodel$$dom;
+      var _this$tmodel$$dom,
+        _this2 = this,
+        _this$tmodel$$dom2,
+        _this$tmodel$getParen;
       if (this.canvas) {
         return;
       }
@@ -163,7 +176,7 @@ var ParticleRenderer = /*#__PURE__*/function () {
       this.canvas = document.createElement("canvas");
       this.canvas.setAttribute("data-targetjs-gpu-children", "true");
       Object.assign(this.canvas.style, {
-        position: "sticky",
+        position: "absolute",
         left: "0px",
         top: "0px",
         width: "1px",
@@ -173,6 +186,24 @@ var ParticleRenderer = /*#__PURE__*/function () {
       });
       this.canvasLayer.appendChild(this.canvas);
       parent.prepend(this.canvasLayer);
+      this.onScroll = function () {
+        return _this2.tmodel.requestParticleRender();
+      };
+      this.scrollElements = _toConsumableArray(new Set([(_this$tmodel$$dom2 = this.tmodel.$dom) === null || _this$tmodel$$dom2 === void 0 ? void 0 : _this$tmodel$$dom2.element, (_this$tmodel$getParen = this.tmodel.getParent()) === null || _this$tmodel$getParen === void 0 || (_this$tmodel$getParen = _this$tmodel$getParen.$dom) === null || _this$tmodel$getParen === void 0 ? void 0 : _this$tmodel$getParen.element].filter(Boolean)));
+      var _iterator = _createForOfIteratorHelper(this.scrollElements),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var element = _step.value;
+          element.addEventListener("scroll", this.onScroll, {
+            passive: true
+          });
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
     }
   }, {
     key: "createUniformBuffer",
@@ -186,7 +217,7 @@ var ParticleRenderer = /*#__PURE__*/function () {
     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            "
+        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                    @location(12) childScale: f32,\n                    @location(13) targetScale: f32,\n                    @location(14) targetScaleSteps: f32,\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                    let scaleProgress = getProgress(uniforms.step, targetScaleSteps);\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 scale = mix(childScale, targetScale, scaleProgress);\n\n                    let localPosition = corners[vertexIndex];\n                    let localPixelPosition = localPosition * size * 0.5 * scale;\n\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                @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                    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                    let aa = max(fwidth(distance), 0.0001);\n\n                    if (radius <= 0.0) {\n                        return input.backgroundColor;\n                    }\n\n                    let coverage = 1.0 - smoothstep(-aa, aa, distance);\n\n                    if (coverage <= 0.0) {\n                        discard;\n                    }\n\n                    let alpha = input.backgroundColor.a * coverage;\n\n                    return vec4f(input.backgroundColor.rgb * alpha, alpha);\n                }\n            "
       });
       this.pipeline = this.device.createRenderPipeline({
         layout: "auto",
@@ -212,6 +243,10 @@ var ParticleRenderer = /*#__PURE__*/function () {
               shaderLocation: 3,
               offset: 32,
               format: "float32x2"
+            }, {
+              shaderLocation: 12,
+              offset: 68,
+              format: "float32"
             }]
           }, {
             arrayStride: 80,
@@ -248,6 +283,14 @@ var ParticleRenderer = /*#__PURE__*/function () {
               shaderLocation: 11,
               offset: 60,
               format: "float32x2"
+            }, {
+              shaderLocation: 13,
+              offset: 68,
+              format: "float32"
+            }, {
+              shaderLocation: 14,
+              offset: 72,
+              format: "float32"
             }]
           }]
         },
@@ -255,7 +298,19 @@ var ParticleRenderer = /*#__PURE__*/function () {
           module: shaderModule,
           entryPoint: "fragmentMain",
           targets: [{
-            format: this.format
+            format: this.format,
+            blend: {
+              color: {
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add"
+              },
+              alpha: {
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha",
+                operation: "add"
+              }
+            }
           }]
         },
         primitive: {
@@ -282,18 +337,21 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "getBackgroundColor",
     value: function getBackgroundColor(value) {
+      if (!TUtil.isDefined(value)) {
+        return [0, 0, 0, 0];
+      }
       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)];
+        return [this.toNumber(value[0], 0), this.toNumber(value[1], 0), this.toNumber(value[2], 0), this.toNumber(value[3], 0)];
       }
-      var color = ColorUtil.color2Integers(value !== null && value !== void 0 ? value : "#fff");
+      var color = ColorUtil.color2Integers(value);
       if (!color) {
-        return [1, 1, 1, 1];
+        return [0, 0, 0, 0];
       }
       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];
+      return [this.toNumber(color[0], 0) / 255, this.toNumber(color[1], 0) / 255, this.toNumber(color[2], 0) / 255, alpha];
     }
   }, {
     key: "getTargetStep",
@@ -303,32 +361,61 @@ var ParticleRenderer = /*#__PURE__*/function () {
       }
       return Math.max(0, this.toNumber(steps[key], 0));
     }
+  }, {
+    key: "writeParticleData",
+    value: function writeParticleData(particleData, offset, values, steps) {
+      var _values, _values2;
+      var x = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : (_values = values) === null || _values === void 0 ? void 0 : _values.x;
+      var y = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : (_values2 = values) === null || _values2 === void 0 ? void 0 : _values2.y;
+      values || (values = {});
+      var backgroundColor = this.getBackgroundColor(values.backgroundColor);
+      var opacity = Math.max(0, Math.min(1, this.toNumber(values.opacity, 1)));
+      particleData[offset] = this.toNumber(x, 0);
+      particleData[offset + 1] = this.toNumber(y, 0);
+      particleData[offset + 2] = this.toNumber(values.width, 0);
+      particleData[offset + 3] = this.toNumber(values.height, 0);
+      particleData[offset + 4] = backgroundColor[0];
+      particleData[offset + 5] = backgroundColor[1];
+      particleData[offset + 6] = backgroundColor[2];
+      particleData[offset + 7] = backgroundColor[3] * opacity;
+      particleData[offset + 8] = Math.max(0, this.toNumber(values.borderRadius, 0));
+      particleData[offset + 9] = this.toNumber(values.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");
+      var backgroundColorSteps = this.getTargetStep(steps, "backgroundColor");
+      var opacitySteps = this.getTargetStep(steps, "opacity");
+      particleData[offset + 14] = opacitySteps >= 0 ? opacitySteps : backgroundColorSteps;
+      particleData[offset + 15] = this.getTargetStep(steps, "borderRadius");
+      particleData[offset + 16] = this.getTargetStep(steps, "rotate");
+      particleData[offset + 17] = this.toNumber(values.scale, 1);
+      particleData[offset + 18] = this.getTargetStep(steps, "scale");
+    }
+  }, {
+    key: "createChildData",
+    value: function createChildData(children) {
+      var particleData = new Float32Array(children.length * 20);
+      for (var i = 0; i < children.length; i++) {
+        var child = children[i];
+        var values = child.actualValues;
+        var _this$getParticlePosi = this.getParticlePosition(child, values),
+          x = _this$getParticlePosi.x,
+          y = _this$getParticlePosi.y;
+        this.writeParticleData(particleData, i * 20, values, undefined, x, y);
+      }
+      return particleData;
+    }
   }, {
     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");
+        var child = this.tmodel.childHandles[i];
+        var _this$getParticlePosi2 = this.getParticlePosition(child, values[i]),
+          x = _this$getParticlePosi2.x,
+          y = _this$getParticlePosi2.y;
+        this.writeParticleData(particleData, i * 20, values[i], targetSteps === null || targetSteps === void 0 ? void 0 : targetSteps[i], x, y);
       }
       return particleData;
     }
@@ -354,12 +441,12 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "setParticles",
     value: function () {
-      var _setParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(values) {
+      var _setParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(children) {
         var initialized, particleData;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              values = Array.isArray(values) ? values : [values];
+              children = Array.isArray(children) ? children : [children];
               _context3.next = 3;
               return this.init();
             case 3:
@@ -368,16 +455,17 @@ var ParticleRenderer = /*#__PURE__*/function () {
                 _context3.next = 6;
                 break;
               }
-              return _context3.abrupt("return");
+              return _context3.abrupt("return", false);
             case 6:
-              particleData = this.createParticleData(values);
-              this.particleCount = values.length;
+              particleData = this.createChildData(children);
+              this.particleCount = children.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:
+              return _context3.abrupt("return", true);
+            case 14:
             case "end":
               return _context3.stop();
           }
@@ -391,12 +479,12 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "updateParticles",
     value: function () {
-      var _updateParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(values) {
+      var _updateParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(children) {
         var initialized, particleData;
         return _regeneratorRuntime().wrap(function _callee4$(_context4) {
           while (1) switch (_context4.prev = _context4.next) {
             case 0:
-              values = Array.isArray(values) ? values : [values];
+              children = Array.isArray(children) ? children : [children];
               _context4.next = 3;
               return this.init();
             case 3:
@@ -405,16 +493,21 @@ var ParticleRenderer = /*#__PURE__*/function () {
                 _context4.next = 6;
                 break;
               }
-              return _context4.abrupt("return");
+              return _context4.abrupt("return", false);
             case 6:
-              particleData = this.createParticleData(values);
-              this.particleCount = values.length;
+              particleData = this.createChildData(children);
+              this.particleCount = children.length;
               this.particleBuffer = this.uploadParticleBuffer(this.particleBuffer, particleData);
-              if (!this.transitionActive) {
+              if (!children.length || !this.transitionActive) {
                 this.targetParticleBuffer = this.uploadParticleBuffer(this.targetParticleBuffer, particleData);
               }
+              if (!children.length) {
+                this.transitionStep = 0;
+                this.transitionActive = false;
+              }
               this.render();
-            case 11:
+              return _context4.abrupt("return", true);
+            case 13:
             case "end":
               return _context4.stop();
           }
@@ -429,33 +522,46 @@ var ParticleRenderer = /*#__PURE__*/function () {
     key: "setTargetParticles",
     value: function () {
       var _setTargetParticles = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(values, steps) {
-        var initialized, particleData;
+        var generation,
+          initialized,
+          currentChildren,
+          currentParticleData,
+          particleData,
+          _args5 = arguments;
         return _regeneratorRuntime().wrap(function _callee5$(_context5) {
           while (1) switch (_context5.prev = _context5.next) {
             case 0:
+              generation = _args5.length > 2 && _args5[2] !== undefined ? _args5[2] : this.tmodel.childGeneration;
               values = Array.isArray(values) ? values : [values];
-              _context5.next = 3;
+              _context5.next = 4;
               return this.init();
-            case 3:
+            case 4:
               initialized = _context5.sent;
-              if (initialized) {
-                _context5.next = 6;
+              if (!(!initialized || generation !== this.tmodel.childGeneration)) {
+                _context5.next = 7;
                 break;
               }
-              return _context5.abrupt("return");
-            case 6:
-              if (!(this.particleCount && values.length !== this.particleCount)) {
-                _context5.next = 8;
+              return _context5.abrupt("return", false);
+            case 7:
+              currentChildren = this.tmodel.childHandles;
+              if (!(values.length !== currentChildren.length)) {
+                _context5.next = 10;
                 break;
               }
-              throw new Error("GPU child transition count ".concat(values.length, " does not match current child count ").concat(this.particleCount, "."));
-            case 8:
+              return _context5.abrupt("return", false);
+            case 10:
+              if (this.particleCount !== currentChildren.length || !this.particleBuffer) {
+                currentParticleData = this.createChildData(currentChildren);
+                this.particleCount = currentChildren.length;
+                this.particleBuffer = this.uploadParticleBuffer(this.particleBuffer, currentParticleData);
+              }
               particleData = this.createParticleData(values, steps);
               this.targetParticleBuffer = this.uploadParticleBuffer(this.targetParticleBuffer, particleData);
               this.transitionStep = 0;
               this.transitionActive = true;
               this.render();
-            case 13:
+              return _context5.abrupt("return", true);
+            case 17:
             case "end":
               return _context5.stop();
           }
@@ -469,7 +575,11 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "setTransitionStep",
     value: function setTransitionStep(step) {
-      this.transitionStep = Math.max(0, this.toNumber(step, 0));
+      step = Math.max(0, this.toNumber(step, 0));
+      if (step === this.transitionStep) {
+        return;
+      }
+      this.transitionStep = step;
       this.render();
     }
   }, {
@@ -482,11 +592,28 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "getRenderHeight",
     value: function getRenderHeight() {
-      var _this$tmodel$getParen;
+      var _this$tmodel$getParen2;
       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;
+      var parentHeight = Number((_this$tmodel$getParen2 = this.tmodel.getParent()) === null || _this$tmodel$getParen2 === void 0 ? void 0 : _this$tmodel$getParen2.getHeight()) || window.innerHeight || 1;
       return Math.max(1, Math.min(modelHeight, parentHeight));
     }
+  }, {
+    key: "updateCanvasLayerWidthHeight",
+    value: function updateCanvasLayerWidthHeight() {
+      if (!this.canvasLayer) {
+        return;
+      }
+      var height = Math.max(this.getRenderHeight(), Number(this.tmodel.getContentHeight()) || 0);
+      var width = Math.max(this.getRenderWidth(), Number(this.tmodel.getContentWidth()) || 0);
+      var cssHeight = "".concat(height, "px");
+      var cssWidth = "".concat(width, "px");
+      if (this.canvasLayer.style.height !== cssHeight) {
+        this.canvasLayer.style.height = cssHeight;
+      }
+      if (this.canvasLayer.style.width !== cssWidth) {
+        this.canvasLayer.style.width = cssWidth;
+      }
+    }
   }, {
     key: "resizeCanvas",
     value: function resizeCanvas() {
@@ -515,15 +642,49 @@ var ParticleRenderer = /*#__PURE__*/function () {
       if (this.canvas.height !== pixelHeight) {
         this.canvas.height = pixelHeight;
       }
+      this.updateCanvasLayerWidthHeight();
+    }
+  }, {
+    key: "repositionCanvas",
+    value: function repositionCanvas() {
+      var _parent$$dom, _parent$$dom2;
+      if (!this.canvas || !this.canvasLayer || !this.tmodel.hasDom()) {
+        return false;
+      }
+      var tmodel = this.tmodel;
+      var parent = tmodel.getParent();
+      var domScrollLeft = (parent === null || parent === void 0 || (_parent$$dom = parent.$dom) === null || _parent$$dom === void 0 ? void 0 : _parent$$dom.getScrollLeft()) || tmodel.$dom.getScrollLeft() || 0;
+      var domScrollTop = (parent === null || parent === void 0 || (_parent$$dom2 = parent.$dom) === null || _parent$$dom2 === void 0 ? void 0 : _parent$$dom2.getScrollTop()) || tmodel.$dom.getScrollTop() || 0;
+      var scrollLeft = tmodel.getScrollLeft();
+      var scrollTop = tmodel.getScrollTop();
+      var x = domScrollLeft - tmodel.x;
+      var y = domScrollTop - tmodel.y;
+      this.canvasX = scrollLeft + x;
+      this.canvasY = scrollTop + y;
+      var transform = "translate3d(".concat(x, "px, ").concat(y, "px, 0px)");
+      if (this.canvas.style.transform !== transform) {
+        this.canvas.style.transform = transform;
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "getParticlePosition",
+    value: function getParticlePosition(child) {
+      var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : child === null || child === void 0 ? void 0 : child.actualValues;
+      var layoutScrollLeft = Number(this.tmodel.getScrollLeft()) || 0;
+      var layoutScrollTop = Number(this.tmodel.getScrollTop()) || 0;
+      return {
+        x: child.allTargetMap.x ? values.x : child.x + layoutScrollLeft,
+        y: child.allTargetMap.y ? values.y : child.y + layoutScrollTop
+      };
     }
   }, {
     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]));
+      this.device.queue.writeBuffer(this.uniformBuffer, 0, new Float32Array([width, height, this.canvasX, this.canvasY, this.transitionStep, this.transitionActive ? 1 : 0, 0, 0]));
     }
   }, {
     key: "waitForPresentedFrame",
@@ -559,11 +720,15 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render() {
-      if (!this.device || !this.context || !this.pipeline || !this.particleBuffer || !this.targetParticleBuffer || this.particleCount === 0) {
+      if (!this.device || !this.context) {
         return;
       }
       this.resizeCanvas();
-      this.updateUniforms();
+      this.repositionCanvas();
+      var canDraw = this.pipeline && this.bindGroup && this.particleBuffer && this.targetParticleBuffer && this.particleCount > 0;
+      if (canDraw) {
+        this.updateUniforms();
+      }
       var commandEncoder = this.device.createCommandEncoder();
       var renderPass = commandEncoder.beginRenderPass({
         colorAttachments: [{
@@ -578,11 +743,13 @@ var ParticleRenderer = /*#__PURE__*/function () {
           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);
+      if (canDraw) {
+        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()]);
     }
@@ -611,7 +778,21 @@ var ParticleRenderer = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this$particleBuffer, _this$targetParticleB, _this$uniformBuffer, _this$context, _this$canvasLayer;
+      var _this$particleBuffer, _this$targetParticleB, _this$uniformBuffer, _this$context, _this$canvasLayer, _this$scrollElements;
+      var _iterator2 = _createForOfIteratorHelper((_this$scrollElements = this.scrollElements) !== null && _this$scrollElements !== void 0 ? _this$scrollElements : []),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var element = _step2.value;
+          element.removeEventListener("scroll", this.onScroll);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      this.scrollElements = undefined;
+      this.onScroll = undefined;
       (_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();