masonry-blade 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +37 -0
- package/build/index.js +37 -0
- package/package.json +3 -2
- package/build/appendToMatrix.worker.js +0 -36
- package/build/masonry-blade.mjs +0 -1
package/build/index.d.ts
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
//#region src/utils/MasonryMatrix/lib/masonryEngine/types.d.ts
|
|
2
|
+
interface ImageItem {
|
|
3
|
+
id: number | string;
|
|
4
|
+
src: string;
|
|
5
|
+
width: number;
|
|
6
|
+
height: number;
|
|
7
|
+
}
|
|
8
|
+
interface MasonryItem {
|
|
9
|
+
id: string | number;
|
|
10
|
+
src: string;
|
|
11
|
+
height: number;
|
|
12
|
+
width: number;
|
|
13
|
+
}
|
|
14
|
+
//#endregion
|
|
15
|
+
//#region src/utils/MasonryMatrix/masonryMatrix.d.ts
|
|
16
|
+
/**
|
|
17
|
+
* Concurrent calls to appendItems/recreateMatrix are not allowed.
|
|
18
|
+
* The caller must serialize access.
|
|
19
|
+
*
|
|
20
|
+
* appendToMatrix mutates the passed state.
|
|
21
|
+
* Returned columns must be treated as read-only by the caller.
|
|
22
|
+
*/
|
|
23
|
+
declare class MasonryMatrix {
|
|
24
|
+
private _worker?;
|
|
25
|
+
private _workerTerminatedSignal?;
|
|
26
|
+
private _state;
|
|
27
|
+
private _rawItems;
|
|
28
|
+
constructor(rootWidth: number, count?: number);
|
|
29
|
+
private _updateState;
|
|
30
|
+
private _appendToRawItems;
|
|
31
|
+
private _createWorker;
|
|
32
|
+
terminateWorker(): void;
|
|
33
|
+
appendItems(items: readonly ImageItem[]): Promise<readonly MasonryItem[][]>;
|
|
34
|
+
recreateMatrix(rootWidth: number, count?: number): Promise<readonly MasonryItem[][]>;
|
|
35
|
+
}
|
|
36
|
+
//#endregion
|
|
37
|
+
export { type ImageItem, type MasonryItem, MasonryMatrix };
|
package/build/index.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
const e=(e,t)=>{let{count:n,width:r,heights:i,order:a,columns:o}=e;if(n<=0||t.length===0)return e;for(let e=0,s=t.length;e<s;e++){let s=t[e];if(s.width<=0||s.height<=0)continue;let[c]=a,l=Math.floor(s.height*r/s.width);o[c].push({height:l,id:s.id,src:s.src,width:r});let u=i[c]+l;i[c]=u;let d=1;for(;d<n;){let e=a[d];if(i[e]>u)break;a[d-1]=e,d++}a[d-1]=c}return e},t=(e,t=1)=>{let n=new Int32Array(t),r=new Int16Array(t),i=Array.from({length:t},()=>[]);for(let e=0;e<t;e++)r[e]=e;return{columns:i,count:t,heights:n,order:r,width:t===0?0:Math.floor(e/t)}},n=typeof self<`u`&&self.Blob&&new Blob([`URL.revokeObjectURL(import.meta.url);`,`//#region src/utils/MasonryMatrix/lib/masonryEngine/appendToMatrix.ts
|
|
2
|
+
const appendToMatrix = (state, items) => {
|
|
3
|
+
const { count, width, heights, order, columns } = state;
|
|
4
|
+
if (count <= 0 || items.length === 0) return state;
|
|
5
|
+
for (let i = 0, len = items.length; i < len; i++) {
|
|
6
|
+
const item = items[i];
|
|
7
|
+
if (item.width <= 0 || item.height <= 0) continue;
|
|
8
|
+
const [shortest] = order;
|
|
9
|
+
const height = Math.floor(item.height * width / item.width);
|
|
10
|
+
columns[shortest].push({
|
|
11
|
+
height,
|
|
12
|
+
id: item.id,
|
|
13
|
+
src: item.src,
|
|
14
|
+
width
|
|
15
|
+
});
|
|
16
|
+
const newColumnHeight = heights[shortest] + height;
|
|
17
|
+
heights[shortest] = newColumnHeight;
|
|
18
|
+
let pos = 1;
|
|
19
|
+
while (pos < count) {
|
|
20
|
+
const next = order[pos];
|
|
21
|
+
if (heights[next] > newColumnHeight) break;
|
|
22
|
+
order[pos - 1] = next;
|
|
23
|
+
pos++;
|
|
24
|
+
}
|
|
25
|
+
order[pos - 1] = shortest;
|
|
26
|
+
}
|
|
27
|
+
return state;
|
|
28
|
+
};
|
|
29
|
+
//#endregion
|
|
30
|
+
//#region src/utils/MasonryMatrix/lib/masonryEngine/appendToMatrix.worker.ts
|
|
31
|
+
self.onmessage = (event) => {
|
|
32
|
+
const { state, batchItems } = event.data;
|
|
33
|
+
const result = appendToMatrix(state, batchItems);
|
|
34
|
+
self.postMessage(result);
|
|
35
|
+
};
|
|
36
|
+
//#endregion
|
|
37
|
+
`],{type:`text/javascript;charset=utf-8`});function r(e){let t;try{if(t=n&&(self.URL||self.webkitURL).createObjectURL(n),!t)throw``;let r=new Worker(t,{type:`module`,name:e?.name});return r.addEventListener(`error`,()=>{(self.URL||self.webkitURL).revokeObjectURL(t)}),r}catch{return new Worker(`data:text/javascript;charset=utf-8,%2F%2F%23region%20src%2Futils%2FMasonryMatrix%2Flib%2FmasonryEngine%2FappendToMatrix.ts%0Aconst%20appendToMatrix%20%3D%20(state%2C%20items)%20%3D%3E%20%7B%0A%09const%20%7B%20count%2C%20width%2C%20heights%2C%20order%2C%20columns%20%7D%20%3D%20state%3B%0A%09if%20(count%20%3C%3D%200%20%7C%7C%20items.length%20%3D%3D%3D%200)%20return%20state%3B%0A%09for%20(let%20i%20%3D%200%2C%20len%20%3D%20items.length%3B%20i%20%3C%20len%3B%20i%2B%2B)%20%7B%0A%09%09const%20item%20%3D%20items%5Bi%5D%3B%0A%09%09if%20(item.width%20%3C%3D%200%20%7C%7C%20item.height%20%3C%3D%200)%20continue%3B%0A%09%09const%20%5Bshortest%5D%20%3D%20order%3B%0A%09%09const%20height%20%3D%20Math.floor(item.height%20*%20width%20%2F%20item.width)%3B%0A%09%09columns%5Bshortest%5D.push(%7B%0A%09%09%09height%2C%0A%09%09%09id%3A%20item.id%2C%0A%09%09%09src%3A%20item.src%2C%0A%09%09%09width%0A%09%09%7D)%3B%0A%09%09const%20newColumnHeight%20%3D%20heights%5Bshortest%5D%20%2B%20height%3B%0A%09%09heights%5Bshortest%5D%20%3D%20newColumnHeight%3B%0A%09%09let%20pos%20%3D%201%3B%0A%09%09while%20(pos%20%3C%20count)%20%7B%0A%09%09%09const%20next%20%3D%20order%5Bpos%5D%3B%0A%09%09%09if%20(heights%5Bnext%5D%20%3E%20newColumnHeight)%20break%3B%0A%09%09%09order%5Bpos%20-%201%5D%20%3D%20next%3B%0A%09%09%09pos%2B%2B%3B%0A%09%09%7D%0A%09%09order%5Bpos%20-%201%5D%20%3D%20shortest%3B%0A%09%7D%0A%09return%20state%3B%0A%7D%3B%0A%2F%2F%23endregion%0A%2F%2F%23region%20src%2Futils%2FMasonryMatrix%2Flib%2FmasonryEngine%2FappendToMatrix.worker.ts%0Aself.onmessage%20%3D%20(event)%20%3D%3E%20%7B%0A%09const%20%7B%20state%2C%20batchItems%20%7D%20%3D%20event.data%3B%0A%09const%20result%20%3D%20appendToMatrix(state%2C%20batchItems)%3B%0A%09self.postMessage(result)%3B%0A%7D%3B%0A%2F%2F%23endregion%0A`,{type:`module`,name:e?.name})}}var i=class{_worker;_workerTerminatedSignal;_state;_rawItems;constructor(e,n){this._state=t(e,n),this._rawItems=[]}async _updateState(t,n){try{return this._worker??this._createWorker(),this._worker==null?e(t,n):await new Promise((e,r)=>{this._workerTerminatedSignal=r,this._worker.onmessage=t=>{this._workerTerminatedSignal=void 0,e(t.data)},this._worker.onmessageerror=()=>{this._workerTerminatedSignal=void 0,r(Error(`[MasonryMatrix] Error receiving message from worker`))},this._worker.onerror=e=>{this._workerTerminatedSignal=void 0,r(Error(`[MasonryMatrix] Error while worker: ${e.message}`))},this._worker.postMessage({batchItems:n,state:t})})}catch(e){throw console.error(`[MasonryMatrix] Error while update internal state: ${e}`),e}}_appendToRawItems(e){let t=this._rawItems.length,n=e.length;this._rawItems.length=t+n;for(let r=0;r<n;r++)this._rawItems[t+r]=e[r]}_createWorker(){globalThis&&`Worker`in globalThis&&(this._worker=new r)}terminateWorker(){this._workerTerminatedSignal?.(Error(`[MasonryMatrix] Worker terminated`)),this._worker?.terminate(),this._workerTerminatedSignal=void 0,this._worker=void 0}async appendItems(e){try{return this._state=await this._updateState(this._state,e),this._appendToRawItems(e),this._state.columns}catch(e){throw console.error(`[MasonryMatrix] Error while append items to matrix: ${e}`),e}}async recreateMatrix(e,n){try{return this._state=t(e,n),this._state=await this._updateState(this._state,this._rawItems),this._state.columns}catch(e){throw console.error(`[MasonryMatrix] Error while recreate matrix: ${e}`),e}}};export{i as MasonryMatrix};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "masonry-blade",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Algo-oriented lib for create masonry grid",
|
|
6
6
|
"keywords": [
|
|
@@ -30,7 +30,8 @@
|
|
|
30
30
|
"win32"
|
|
31
31
|
],
|
|
32
32
|
"type": "module",
|
|
33
|
-
"main": "./build/
|
|
33
|
+
"main": "./build/index.js",
|
|
34
|
+
"types": "./build/index.d.ts",
|
|
34
35
|
"scripts": {
|
|
35
36
|
"build": "genversion lib/version.js --esm --strict && tsdown --minify --log-level error",
|
|
36
37
|
"build:watch": "genversion lib/version.js --esm --strict && tsdown --sourcemap --watch",
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
//#region src/utils/MasonryMatrix/lib/masonryEngine/appendToMatrix.ts
|
|
2
|
-
const appendToMatrix = (state, items) => {
|
|
3
|
-
const { count, width, heights, order, columns } = state;
|
|
4
|
-
if (count <= 0 || items.length === 0) return state;
|
|
5
|
-
for (let i = 0, len = items.length; i < len; i++) {
|
|
6
|
-
const item = items[i];
|
|
7
|
-
if (item.width <= 0 || item.height <= 0) continue;
|
|
8
|
-
const [shortest] = order;
|
|
9
|
-
const height = Math.floor(item.height * width / item.width);
|
|
10
|
-
columns[shortest].push({
|
|
11
|
-
height,
|
|
12
|
-
id: item.id,
|
|
13
|
-
src: item.src,
|
|
14
|
-
width
|
|
15
|
-
});
|
|
16
|
-
const newColumnHeight = heights[shortest] + height;
|
|
17
|
-
heights[shortest] = newColumnHeight;
|
|
18
|
-
let pos = 1;
|
|
19
|
-
while (pos < count) {
|
|
20
|
-
const next = order[pos];
|
|
21
|
-
if (heights[next] > newColumnHeight) break;
|
|
22
|
-
order[pos - 1] = next;
|
|
23
|
-
pos++;
|
|
24
|
-
}
|
|
25
|
-
order[pos - 1] = shortest;
|
|
26
|
-
}
|
|
27
|
-
return state;
|
|
28
|
-
};
|
|
29
|
-
//#endregion
|
|
30
|
-
//#region src/utils/MasonryMatrix/lib/masonryEngine/appendToMatrix.worker.ts
|
|
31
|
-
self.onmessage = (event) => {
|
|
32
|
-
const { state, batchItems } = event.data;
|
|
33
|
-
const result = appendToMatrix(state, batchItems);
|
|
34
|
-
self.postMessage(result);
|
|
35
|
-
};
|
|
36
|
-
//#endregion
|
package/build/masonry-blade.mjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
const e=(e,t)=>{let{count:n,width:r,heights:i,order:a,columns:o}=e;if(n<=0||t.length===0)return e;for(let e=0,s=t.length;e<s;e++){let s=t[e];if(s.width<=0||s.height<=0)continue;let[c]=a,l=Math.floor(s.height*r/s.width);o[c].push({height:l,id:s.id,src:s.src,width:r});let u=i[c]+l;i[c]=u;let d=1;for(;d<n;){let e=a[d];if(i[e]>u)break;a[d-1]=e,d++}a[d-1]=c}return e},t=(e,t=1)=>{let n=new Int32Array(t),r=new Int16Array(t),i=Array.from({length:t},()=>[]);for(let e=0;e<t;e++)r[e]=e;return{columns:i,count:t,heights:n,order:r,width:t===0?0:Math.floor(e/t)}};function n(e){return new Worker(new URL(`appendToMatrix.worker.js`,import.meta.url),{type:`module`,name:e?.name})}var r=class{_worker;_workerTerminatedSignal;_state;_rawItems;constructor(e,n){this._state=t(e,n),this._rawItems=[]}async _updateState(t,n){try{return this._worker??this._createWorker(),this._worker==null?e(t,n):await new Promise((e,r)=>{this._workerTerminatedSignal=r,this._worker.onmessage=t=>{this._workerTerminatedSignal=void 0,e(t.data)},this._worker.onmessageerror=()=>{this._workerTerminatedSignal=void 0,r(Error(`[MasonryMatrix] Error receiving message from worker`))},this._worker.onerror=e=>{this._workerTerminatedSignal=void 0,r(Error(`[MasonryMatrix] Error while worker: ${e.message}`))},this._worker.postMessage({batchItems:n,state:t})})}catch(e){throw console.error(`[MasonryMatrix] Error while update internal state: ${e}`),e}}_appendToRawItems(e){let t=this._rawItems.length,n=e.length;this._rawItems.length=t+n;for(let r=0;r<n;r++)this._rawItems[t+r]=e[r]}_createWorker(){globalThis&&`Worker`in globalThis&&(this._worker=new n)}terminateWorker(){this._workerTerminatedSignal?.(Error(`[MasonryMatrix] Worker terminated`)),this._worker?.terminate(),this._workerTerminatedSignal=void 0,this._worker=void 0}async appendItems(e){try{return this._state=await this._updateState(this._state,e),this._appendToRawItems(e),this._state.columns}catch(e){throw console.error(`[MasonryMatrix] Error while append items to matrix: ${e}`),e}}async recreateMatrix(e,n){try{return this._state=t(e,n),this._state=await this._updateState(this._state,this._rawItems),this._state.columns}catch(e){throw console.error(`[MasonryMatrix] Error while recreate matrix: ${e}`),e}}};export{r as MasonryMatrix};
|