@soei/flyweight 0.0.1

package/README.md

@@ -0,0 +1,33 @@
+## 享元模式
+
+### 安装
+
+```
+npm i @soei/flyweight
+
+```
+
+### 引用
+
+```javascript
+// 引入方式 vue2
+import Flyweight from "@soei/flyweight/src/Flyweight.vue";
+// 引入方式 vue3
+import { Flyweight } from "@soei/flyweight";
+```
+
+### 使用
+
+```html
+<Flyweight
+  :index="0"
+  :view="{id: Number, picker: 'id'}"
+  :flys="list|Array"
+  :width="80"
+  :height="130"
+  :offset="[0, 30]"
+  @onend="Function"
+>
+  <template #default="{data, index}"> ...todo </template>
+</Flyweight>
+```

package/dist/Flyweight.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@soei/util"),s=require("vue");const p=(t,e)=>{const h=t.__vccOpts||t;for(const[r,i]of e)h[r]=i;return h};let m=(...t)=>{console.info("::::FLYWEIGHT",...t)};const _={props:{flys:{type:Array,default:()=>[]},width:{type:Number,default:0},height:{type:Number,default:100},offset:{type:Array,default:()=>[0,0]},lazy:{type:Number,default:100},view:{type:Object,default:()=>({picker:"id"})},index:{type:Number,default:0}},computed:{flyweight(){return this.$refs.flyweight}},data(){return{flyweights:[],actice:!1,H:null,column:1,row:1,fwheight:10,count:0}},watch:{flys(t){this.count=t.length,this.re()},view(t){let e=a.each(this.flys,(h,r,i,n)=>{if(r[i]==n)return h},t.picker,t.id);this.$emit("update:index",e)},index(t){let e=t/this.column>>0;(this.flyweight.scrollTop/this.fwheight>>0)+this.row-e-1>0||(this.flyweight.scrollTop=e*this.fwheight)}},mounted(){this.flyweights=[];try{new ResizeObserver(()=>{this.re(),this.$emit("resize")}).observe(this.flyweight)}catch(t){m(t)}},methods:{lazyrun(t,e){clearTimeout(this.time),this.time=setTimeout(()=>{a.runer(t)},e||this.lazy)},run(t){let e=a.picker(t.target,"scrollTop=>top");a.each(this.flyweights,(h,r,i,n,l,o,c,u)=>{if(i=h/l>>0,c=i+n*(+(i<o%n)+(o/n>>0)),u=c*l+h%l,u>=this.count)return!0;r.index=c,r.top=r.index*this.fwheight,r.data=this.flys[u]},null,this.row,this.column,e.top/this.fwheight>>0)&&this.lazyrun(()=>this.$emit("onend",!0))},scroll(t){this.run(t)},re(){let t=this.flyweight,e=a.picker(t,"clientHeight=>height,clientWidth=>width");this.$nextTick(()=>{let[h,r]=this.offset,i=this.width;i==0&&(i=e.width);let n=i+h,l=this.height+r,o=e.width/n>>0,c=e.height/l>>0;this.row=c+2,this.column=o,this.fwheight=l,this.H=this.count/o*l;let u=e.width%n/(o-1)>>0,y=Math.min(this.count,o*this.row),d=y-1,f,g;for(;y-- >0;)f=d-y,g=this.flys[f],t=this.flyweights[f],this.$set(this.flyweights,f,{data:g,top:(f/o>>0)*l,left:f%o*(n+u),index:f/o>>0});this.flyweights.length=d+1,this.scroll({target:this.flyweight})})}}};function x(t,e,h,r,i,n){return s.openBlock(),s.createElementBlock("div",{ref:"flyweight",class:s.normalizeClass(["flyweight",{"flyweight-active":i.actice}]),style:s.normalizeStyle({"--width":h.width?h.width+"px":"100%","--height":h.height+"px"}),onScroll:e[0]||(e[0]=(...l)=>n.scroll&&n.scroll(...l))},[s.createElementVNode("div",{class:"flyweight-all",style:s.normalizeStyle({"--flyweight-height":i.H+30+"px"})},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(i.flyweights,(l,o)=>(s.openBlock(),s.createElementBlock("div",{key:o,style:s.normalizeStyle({top:l.top+"px",left:l.left+"px"})},[s.renderSlot(t.$slots,"default",{data:l.data,index:l.index},void 0,!0)],4))),128))],4)],38)}const w=p(_,[["render",x],["__scopeId","data-v-77fef7f4"]]),v=[w],k={install(t){v.forEach(e=>{t.component("s-"+e.__name.toLowerCase(),e)})}};exports.Flyweight=w;exports.default=k;

package/dist/Flyweight.js

@@ -0,0 +1,174 @@
+import { each as p, runer as _, picker as m } from "@soei/util";
+import { openBlock as a, createElementBlock as d, normalizeClass as x, normalizeStyle as y, createElementVNode as v, Fragment as z, renderList as b, renderSlot as k } from "vue";
+const T = (t, e) => {
+  const l = t.__vccOpts || t;
+  for (const [s, i] of e)
+    l[s] = i;
+  return l;
+};
+let H = (...t) => {
+  console.info("::::FLYWEIGHT", ...t);
+};
+const N = {
+  props: {
+    flys: {
+      type: Array,
+      default: () => []
+    },
+    width: {
+      type: Number,
+      default: 0
+    },
+    height: {
+      type: Number,
+      default: 100
+    },
+    offset: {
+      type: Array,
+      default: () => [0, 0]
+    },
+    lazy: {
+      type: Number,
+      default: 100
+    },
+    view: {
+      type: Object,
+      default: () => ({ picker: "id" })
+    },
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    flyweight() {
+      return this.$refs.flyweight;
+    }
+  },
+  data() {
+    return {
+      flyweights: [],
+      actice: !1,
+      H: null,
+      column: 1,
+      row: 1,
+      fwheight: 10,
+      count: 0
+    };
+  },
+  watch: {
+    flys(t) {
+      this.count = t.length, this.re();
+    },
+    view(t) {
+      let e = p(this.flys, (l, s, i, r) => {
+        if (s[i] == r)
+          return l;
+      }, t.picker, t.id);
+      this.$emit("update:index", e);
+    },
+    index(t) {
+      let e = t / this.column >> 0;
+      (this.flyweight.scrollTop / this.fwheight >> 0) + this.row - e - 1 > 0 || (this.flyweight.scrollTop = e * this.fwheight);
+    }
+  },
+  mounted() {
+    this.flyweights = [];
+    try {
+      new ResizeObserver(() => {
+        this.re(), this.$emit("resize");
+      }).observe(this.flyweight);
+    } catch (t) {
+      H(t);
+    }
+  },
+  methods: {
+    lazyrun(t, e) {
+      clearTimeout(this.time), this.time = setTimeout(() => {
+        _(t);
+      }, e || this.lazy);
+    },
+    run(t) {
+      let e = m(t.target, "scrollTop=>top");
+      p(
+        this.flyweights,
+        (l, s, i, r, h, n, f, c) => {
+          if (i = l / h >> 0, f = i + r * /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
+          (+(i < n % r) + (n / r >> 0)), c = f * h + l % h, c >= this.count)
+            return !0;
+          s.index = f, s.top = s.index * this.fwheight, s.data = this.flys[c];
+        },
+        null,
+        this.row,
+        this.column,
+        /* 显示区域第一行的索引 */
+        e.top / this.fwheight >> 0
+      ) && this.lazyrun(() => this.$emit("onend", !0));
+    },
+    scroll(t) {
+      this.run(t);
+    },
+    re() {
+      let t = this.flyweight, e = m(t, "clientHeight=>height,clientWidth=>width");
+      this.$nextTick(() => {
+        let [l, s] = this.offset, i = this.width;
+        i == 0 && (i = e.width);
+        let r = i + l, h = this.height + s, n = e.width / r >> 0, f = e.height / h >> 0;
+        this.row = f + 2, this.column = n, this.fwheight = h, this.H = this.count / n * h;
+        let c = e.width % r / (n - 1) >> 0, u = Math.min(this.count, n * this.row), w = u - 1, o, g;
+        for (; u-- > 0; )
+          o = w - u, g = this.flys[o], t = this.flyweights[o], this.$set(this.flyweights, o, {
+            data: g,
+            top: (o / n >> 0) * h,
+            left: o % n * (r + c),
+            index: o / n >> 0
+          });
+        this.flyweights.length = w + 1, this.scroll({ target: this.flyweight });
+      });
+    }
+  }
+};
+function O(t, e, l, s, i, r) {
+  return a(), d("div", {
+    ref: "flyweight",
+    class: x(["flyweight", {
+      "flyweight-active": i.actice
+    }]),
+    style: y({
+      "--width": l.width ? l.width + "px" : "100%",
+      "--height": l.height + "px"
+    }),
+    onScroll: e[0] || (e[0] = (...h) => r.scroll && r.scroll(...h))
+  }, [
+    v("div", {
+      class: "flyweight-all",
+      style: y({
+        "--flyweight-height": i.H + 30 + "px"
+      })
+    }, [
+      (a(!0), d(z, null, b(i.flyweights, (h, n) => (a(), d("div", {
+        key: n,
+        style: y({
+          top: h.top + "px",
+          left: h.left + "px"
+        })
+      }, [
+        k(t.$slots, "default", {
+          data: h.data,
+          index: h.index
+        }, void 0, !0)
+      ], 4))), 128))
+    ], 4)
+  ], 38);
+}
+const E = /* @__PURE__ */ T(N, [["render", O], ["__scopeId", "data-v-77fef7f4"]]), F = [E], S = {
+  install(t) {
+    F.forEach((e) => {
+      t.component("s-" + e.__name.toLowerCase(), e);
+    });
+  }
+};
+export {
+  E as Flyweight,
+  S as default
+};

package/dist/style.css

@@ -0,0 +1 @@
+.flyweight[data-v-77fef7f4]{height:100%;width:100%;overflow:auto;position:relative}.flyweight .flyweight-all[data-v-77fef7f4]{height:var(--flyweight-height)}.flyweight .flyweight-all[data-v-77fef7f4]>*{width:var(--width);height:var(--height);position:absolute}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@soei/flyweight",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/Flyweight.cjs",
+  "module": "dist/Flyweight.js",
+  "files": [
+    "dist",
+    "src/Flyweight.vue"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@soei/util": "^1.1.1",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "sass": "^1.69.5",
+    "scss": "^0.2.4",
+    "vite": "^4.4.5"
+  }
+}

package/src/Flyweight.vue

@@ -0,0 +1,213 @@
+<template>
+    <div ref="flyweight" class="flyweight" :class="{
+        'flyweight-active': actice
+    }" :style="{
+        '--width': width ? width + 'px' : '100%',
+        '--height': height + 'px'
+    }" @scroll="scroll">
+        <div class="flyweight-all" :style="{
+        '--flyweight-height': (H + 30) + 'px'
+    }">
+            <div v-for="(item, index) in flyweights" :key="index" :style="{
+        top: item.top + 'px',
+        left: item.left + 'px',
+    }">
+                <slot :data="item.data" :index="item.index"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { each, picker, runer } from '@soei/util';
+
+let Log = (...args) => {
+    console.info('::::FLYWEIGHT', ...args);
+}
+
+export default {
+    props: {
+        flys: {
+            type: Array,
+            default: () => []
+        },
+        width: {
+            type: Number,
+            default: 0
+        },
+        height: {
+            type: Number,
+            default: 100
+        },
+        offset: {
+            type: Array,
+            default: () => [0, 0]
+        },
+        lazy: {
+            type: Number,
+            default: 100
+        },
+        view: {
+            type: Object,
+            default: () => ({ picker: 'id' })
+        },
+        index: {
+            type: Number,
+            default: 0
+        }
+    },
+    computed: {
+        flyweight() {
+            return this.$refs.flyweight;
+        }
+    },
+    data() {
+        return {
+            flyweights: [],
+            actice: false,
+            H: null,
+            column: 1,
+            row: 1,
+            fwheight: 10,
+
+            count: 0
+        }
+    },
+    watch: {
+        flys(data) {
+            this.count = data.length;
+            this.re();
+        },
+        view(data) {
+            // Log('---------------')
+            let index = each(this.flys, (k, v, attr, value) => {
+                if(v[attr] == value) return k;
+            }, data.picker, data.id);
+            // runer('dispatchEvent', window, new Event('resize', { view: this.flyweight, bubbles: true, cancelable: true }));
+            this.$emit('update:index', index);
+        },
+        index(index) {
+            let line = index / this.column >> 0;
+            let first = this.flyweight.scrollTop / this.fwheight >> 0;
+            let offset = first + this.row - line - 1
+            // Log(data, first, line, offset);
+            if (offset > 0 ) return;
+            this.flyweight.scrollTop = line * this.fwheight;
+        }
+    },
+    mounted() {
+        this.flyweights = [];
+        try {
+            const resizeObserver = new ResizeObserver(() => {
+                this.re();
+                this.$emit('resize');
+                // runer('dispatchEvent', window, new Event('resize', { view: window, bubbles: true, cancelable: true }));
+            });
+            resizeObserver.observe(this.flyweight);
+        } catch (error) {
+            Log(error);
+        }
+    },
+    methods: {
+        lazyrun(back, time) {
+            clearTimeout(this.time);
+            this.time = setTimeout(() => {
+                runer(back);
+            }, time || this.lazy);
+        },
+        run(e) {
+            let position = picker(e.target, 'scrollTop=>top');
+            if (each(this.flyweights, (k, v, offset, row, column, first, index, i) => {
+                offset = k / column >> 0;
+                index = offset + row * (
+                    /* 偏移量, 如果超出顶部 + 1轮,排列到列队后, 否则保持在当前*/
+                    +(offset < first % row)
+                    /* 计算轮数, row的倍数 */
+                    + (first / row >> 0)
+                );
+                i = index * column + k % column;
+
+                // Log(k, i, index);
+                if (i >= this.count) {
+                    return true;
+                }
+                v.index = index;
+                v.top = v.index * this.fwheight;
+                v.data = this.flys[i];
+            },
+                null,
+                this.row,
+                this.column,
+                /* 显示区域第一行的索引 */
+                position.top / this.fwheight >> 0
+            )) {
+                this.lazyrun(() => this.$emit('onend', true))
+            }
+        },
+        scroll(e) {
+            this.run(e);
+        },
+        re() {
+            let flyweight = this.flyweight;
+            let wh = picker(flyweight, 'clientHeight=>height,clientWidth=>width');
+            // Log(wh, wh.width / this.width, wh.height / this.height);
+            this.$nextTick(() => {
+                let [x, y] = this.offset,
+                    W = this.width;
+                if (W == 0) {
+                    W = wh.width;
+                }
+                let width = W + x;
+                let height = this.height + y;
+                let column = wh.width / width >> 0,
+                    row = wh.height / height >> 0;
+                this.row = row + 2/* 上下各一行补位 */;
+                this.column = column;
+                this.fwheight = height;
+                /* 总高度 */
+                this.H = (this.count / column) * height;
+                /* 偏移量 */
+                let margin = (wh.width % width) / (column - 1) >> 0;
+                /* 计算数量 */
+                let count = Math.min(this.count, column * this.row),
+                    length = count - 1,
+                    index,
+                    fly;
+                while (count-- > 0) {
+                    index = length - count;
+                    fly = this.flys[index];
+                    flyweight = this.flyweights[index];
+                    this.$set(this.flyweights, index, {
+                        data: fly,
+                        top: (index / column >> 0) * height,
+                        left: (index % column) * (width + margin),
+                        index: index / column >> 0
+                    });
+                }
+                this.flyweights.length = length + 1;
+
+                this.scroll({ target: this.flyweight })
+            });
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.flyweight {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    position: relative;
+
+    .flyweight-all {
+        height: var(--flyweight-height);
+
+        &>* {
+            width: var(--width);
+            height: var(--height);
+            position: absolute;
+        }
+    }
+}
+</style>