@plcmp/pl-virtual-scroll 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@plcmp/pl-virtual-scroll",
-    "version": "0.1.12",
+    "version": "0.1.14",
     "description": "Component for lazy list render.",
     "main": "pl-virtual-scroll.js",
     "repository": {

package/pl-virtual-scroll.js

@@ -22,7 +22,7 @@ class PlVirtualScroll extends PlElement {
         renderedStart: { type: Number, value: 0 },
         renderedCount: { type: Number, value: 0 },
         phyItems: { type: Array, value: () => [] },
-        canvas: { type: Object },
+        canvas: { type: Object }
     }
     static template = html`
         <style>
@@ -74,19 +74,20 @@ class PlVirtualScroll extends PlElement {
         let [, index, ...rest] = normalizePath(mutation.path);
         switch (mutation.action) {
             case 'upd':
-                if(Array.isArray(mutation.value) && Array.isArray(mutation.oldValue) && mutation.oldValue.length == mutation.value.length) {
+                if(mutation.path == 'items' && Array.isArray(mutation.value) && Array.isArray(mutation.oldValue)) {
                     this.phyPool.forEach(i => {
-                        i.ctx.replace(this.items[i.index]);
-                        i.ctx.applyEffects();
-                        i.ctx._ti.applyBinds();
+                        if (i.index !== null && i.index < this.items.length) {
+                            if (this.items[i.index] instanceof PlaceHolder) this.items.load?.(this.items[i.index]);
+
+                            i.ctx.replace(this.items[i.index]);
+                            i.ctx.applyEffects();
+                            i.ctx._ti.applyBinds();
+                        } else if (i.index >= this.items.length) {
+                            i.index = null;
+                        }
                     });
                 }
 
-                // Временный решение, занулям физический пулл в случаях когда значения массива приходят внутри объектов 
-                // Исправить в будущем на более умную замену значений
-                if(Array.isArray(mutation.value) && Array.isArray(mutation.oldValue) && mutation.oldValue.length != mutation.value.length) {
-                    this.phyPool = [];
-                }
                 if (index !== undefined && +index >= 0) {
                     let el = this.phyPool.find(i => i.index === +index);
                     if (el && rest.length > 0) {
@@ -146,8 +147,8 @@ class PlVirtualScroll extends PlElement {
         /*let first = Math.floor(offset / this.elementHeight);
         let last = Math.ceil((offset+height) / this.elementHeight);*/
         // Reset scroll position if update data smaller than current visible index
-        if (!scroll && this.items.length < (offset + height * 1.5) / this.elementHeight) {
-            canvas.parentNode.scrollTop = 0;
+        if (!scroll && this.items.length < Math.floor((offset + height) / this.elementHeight)) {
+            canvas.parentNode.scrollTop = this.items.length * this.elementHeight - height;
         }
         let shadowEnd = Math.min(this.items.length, Math.ceil((offset + height * 1.5) / this.elementHeight));
         let shadowBegin = Math.max(0, Math.floor(Math.min((offset - height / 2) / this.elementHeight, shadowEnd - height * 2 / this.elementHeight)));
@@ -231,7 +232,7 @@ class PlVirtualScroll extends PlElement {
             if (n.style) {
                 n.style.transform = `translateY(${target.offset}px)`;
                 n.style.position = 'absolute';
-                n.setAttribute('virtualOffser', target.offset);
+                n.setAttribute('virtualOffset', target.offset);
             }
         });
         return target;