cbvirtua 1.0.2 → 1.0.4

package/core/resizer.js

@@ -1,6 +1,13 @@
 import { getCurrentDocument, getCurrentWindow } from "./environment";
 import { ACTION_ITEM_RESIZE, ACTION_VIEWPORT_RESIZE, } from "./store";
 import { exists, max } from "./utils";
+// const _ResizeObserver = window.ResizeObserver;
+// window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
+//     constructor(callback) {
+//         callback = debounce(callback, 20);
+//         super(callback);
+//     }
+// }
 const createResizeObserver = (cb) => {
     let ro;
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbvirtua",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "main": "index.js",
   "scripts": {

package/vue2/ListItem.js

@@ -0,0 +1,46 @@
+import { isRTLDocument } from "../core/environment";
+
+export default {
+    props: {
+        children: { type: Object, required: true },
+        resizer: { type: Function, required: true },
+        index: { type: Number, required: true },
+        offset: { type: Number, required: true },
+        hide: { type: Boolean },
+        isHorizontal: { type: Boolean },
+        element: { type: String, required: true },
+    },
+    watch: {
+        index(_index) {
+            this.$nextTick(() => {
+                this.cleanupObserver = null;
+                const root = this.$refs.root;
+                this.cleanupObserver = this.resizer(root, _index);
+            })
+        }
+    },
+    mounted() {
+        const root = this.$refs.root;
+        this.cleanupObserver = this.resizer(root, this.index);
+    },
+    render() {
+        const { children, offset, hide, element: Element, isHorizontal, } = this;
+        console.log(hide)
+        const style = {
+            margin: 0,
+            padding: 0,
+            position: "absolute",
+            [isHorizontal ? "height" : "width"]: "100%",
+            [isHorizontal ? "top" : "left"]: "0px",
+            [isHorizontal ? (isRTLDocument() ? "right" : "left") : "top"]: offset + "px",
+            visibility: hide ? "hidden" : "visible",
+        };
+
+        if (isHorizontal) {
+            style.display = "flex";
+        }
+        return (<Element ref={"root"} style={style}>
+            {children}
+        </Element>);
+    }
+}

package/vue2/VList.js

@@ -0,0 +1,161 @@
+import { SCROLL_IDLE, UPDATE_SCROLL_STATE, UPDATE_SCROLL_EVENT, UPDATE_SCROLL_END_EVENT, UPDATE_SIZE_STATE, overscanEndIndex, overscanStartIndex, createVirtualStore, ACTION_ITEMS_LENGTH_CHANGE, getScrollSize, getMinContainerSize, } from "../core/store";
+import { createResizer } from "../core/resizer";
+import { createScroller } from "../core/scroller";
+import { default as ListItem } from "./ListItem";
+import { exists } from "../core/utils";
+const props = {
+    data: { type: Array, required: true },
+    overscan: { type: Number, default: 4 },
+    itemSize: Number,
+    shift: Boolean,
+    horizontal: Boolean,
+};
+export default {
+    props: props,
+    data() {
+        return {
+            store: {},
+            rerender: [],
+            JumpCount: 0,
+            range: []
+        }
+    },
+    watch: {
+        data(_data) {
+            const count = _data.length;
+            this.store._update(ACTION_ITEMS_LENGTH_CHANGE, [count, this.shift]);
+        },
+        JumpCount(count, prevCount) {
+            this.$nextTick(() => {
+                if (count === prevCount)
+                    return;
+                const jump = this.store._flushJump();
+                if (!jump)
+                    return;
+                this.scroller._fixScrollJump(jump);
+            })
+        },
+        range([start, end], [prevStart, prevEnd]) {
+            this.$nextTick(() => {
+                if (prevStart === start && prevEnd === end)
+                    return;
+                this.$emit("rangeChange", start, end);
+            })
+        }
+
+    },
+    created() {
+        const isHorizontal = this.horizontal;
+        const store = this.store = createVirtualStore(
+            this.data.length,
+            this.itemSize ?? 40,
+            undefined,
+            undefined,
+            !this.itemSize
+        );
+        const resizer = this.resizer = createResizer(store, isHorizontal);
+        const scroller = this.scroller = createScroller(store, isHorizontal);
+        this.scrollToIndex = scroller._scrollToIndex;
+        this.scrollTo = scroller._scrollTo;
+        this.scrollBy = scroller._scrollBy;
+        const rerender = store._getStateVersion();
+        const unsubscribeStore = this.unsubscribeStore = store._subscribe(UPDATE_SCROLL_STATE + UPDATE_SIZE_STATE, () => {
+            this.rerender = store._getStateVersion();
+            this.JumpCount = store._getJumpCount();
+        });
+        const unsubscribeOnScroll = this.unsubscribeOnScroll = store._subscribe(UPDATE_SCROLL_EVENT, () => {
+            this.$emit("scroll", store._getScrollOffset());
+        });
+        const unsubscribeOnScrollEnd = this.unsubscribeOnScrollEnd = store._subscribe(UPDATE_SCROLL_END_EVENT, () => {
+            this.$emit("scrollEnd");
+        });
+    },
+    mounted() {
+        const root = this.$refs.root;
+        if (!root)
+            return;
+        this.resizer._observeRoot(root);
+        this.scroller._observe(root);
+
+    },
+    methods: {
+        scrollOffset() {
+            return this.store._getScrollOffset();
+        },
+        scrollSize() {
+            return this.getScrollSize(store);
+        },
+        viewportSize() {
+            return this.store._getViewportSize();
+        },
+        scrollToIndex() { },
+        scrollTo() { },
+        scrollBy() { }
+    },
+    render() {
+        this.rerender;
+        const count = this.data.length;
+        const store = this.store;
+        const isHorizontal = this.horizontal;
+        const [startIndex, endIndex] = this.store._getRange();
+        const scrollDirection = store._getScrollDirection();
+        const totalSize = store._getTotalSize();
+        // https://github.com/inokawa/virtua/issues/252#issuecomment-1822861368
+        const minSize = getMinContainerSize(store);
+
+        const items = [];
+        for (let i = overscanStartIndex(startIndex, this.overscan, scrollDirection), j = overscanEndIndex(endIndex, this.overscan, scrollDirection, count); i <= j; i++) {
+            const e = this.$scopedSlots.default(this.data[i])[0];
+            const key = e.key;
+            items.push(
+                <ListItem
+                    key={exists(key) ? key : "_" + i}
+                    resizer={this.resizer._observeItem}
+                    index={i}
+                    offset={store._getItemOffset(i)}
+                    hide={store._isUnmeasuredItem(i)}
+                    element="div"
+                    children={e}
+                    isHorizontal={isHorizontal}
+                />
+            );
+        }
+
+        return (
+            <div
+                ref={"root"}
+                style={{
+                    display: isHorizontal ? "inline-block" : "block",
+                    [isHorizontal ? "overflowX" : "overflowY"]: "auto",
+                    overflowAnchor: "none",
+                    contain: "strict",
+                    width: "100%",
+                    height: "100%",
+                }}
+            >
+                <div
+                    style={{
+                        // contain: "content",
+                        overflowAnchor: "none", // opt out browser's scroll anchoring because it will conflict to scroll anchoring of virtualizer
+                        flex: "none", // flex style on parent can break layout
+                        position: "relative",
+                        visibility: "hidden",
+                        width: isHorizontal ? totalSize + "px" : "100%",
+                        height: isHorizontal ? "100%" : totalSize + "px",
+                        [isHorizontal ? "minWidth" : "minHeight"]: minSize + "px",
+                        pointerEvents: scrollDirection !== SCROLL_IDLE ? "none" : "auto",
+                    }}
+                >
+                    {items}
+                </div>
+            </div>
+        );
+    },
+    destoryed() {
+        this.unsubscribeStore();
+        this.unsubscribeOnScroll();
+        this.unsubscribeOnScrollEnd();
+        this.resizer._dispose();
+        this.scroller._dispose();
+    },
+}