ttabs-svelte
Version:
A flexible layout management system with draggable, resizable tiles and tabs for Svelte applications. Like in VSCode
123 lines (122 loc) • 3.78 kB
JavaScript
/**
* Compare two SizeInfo objects for equality
*/
function areSizeInfoEqual(a, b) {
return a.value === b.value && a.unit === b.unit;
}
/**
* Compare two arrays for equality
*/
function areArraysEqual(a, b) {
if (a.length !== b.length)
return false;
return a.every((item, index) => item === b[index]);
}
/**
* Compare two data objects for equality
*/
function areDataEqual(a, b) {
if (a === b)
return true;
if (!a || !b)
return false;
const keysA = Object.keys(a);
const keysB = Object.keys(b);
if (keysA.length !== keysB.length)
return false;
return keysA.every(key => {
if (!keysB.includes(key))
return false;
const valA = a[key];
const valB = b[key];
if (typeof valA !== typeof valB)
return false;
if (valA === null || valB === null)
return valA === valB;
if (typeof valA === 'object') {
if (Array.isArray(valA) && Array.isArray(valB)) {
return areArraysEqual(valA, valB);
}
return areDataEqual(valA, valB);
}
return valA === valB;
});
}
/**
* Compare two tile objects for equality based on their properties
* @param a First tile to compare
* @param b Second tile to compare
* @returns True if tiles have the same properties, false otherwise
*/
export function areTilesEqual(a, b) {
// Handle null/undefined cases
if (a === b)
return true;
if (!a || !b)
return false;
// Compare base properties
if (a.type !== b.type || a.parent !== b.parent)
return false;
// Type-specific comparisons
switch (a.type) {
case 'grid': {
const gridA = a;
const gridB = b;
return areArraysEqual(gridA.rows, gridB.rows);
}
case 'row': {
const rowA = a;
const rowB = b;
return areArraysEqual(rowA.columns, rowB.columns) &&
areSizeInfoEqual(rowA.height, rowB.height) &&
rowA.computedSize === rowB.computedSize &&
rowA.originalHeight === rowB.originalHeight;
}
case 'column': {
const colA = a;
const colB = b;
return colA.child === colB.child &&
areSizeInfoEqual(colA.width, colB.width) &&
colA.computedSize === colB.computedSize &&
colA.originalWidth === colB.originalWidth;
}
case 'panel': {
const panelA = a;
const panelB = b;
return areArraysEqual(panelA.tabs, panelB.tabs) &&
panelA.activeTab === panelB.activeTab;
}
case 'tab': {
const tabA = a;
const tabB = b;
return tabA.name === tabB.name &&
tabA.content === tabB.content &&
tabA.isLazy === tabB.isLazy;
}
case 'content': {
const contentA = a;
const contentB = b;
return contentA.componentId === contentB.componentId &&
areDataEqual(contentA.data, contentB.data);
}
default:
return false;
}
}
/**
* Compare two arrays of tiles for equality
* @param a First array of tiles to compare
* @param b Second array of tiles to compare
* @returns True if arrays contain tiles with the same properties in the same order, false otherwise
*/
export function areTileArraysEqual(a, b) {
// Handle null/undefined cases
if (a === b)
return true;
if (!a || !b)
return false;
if (a.length !== b.length)
return false;
// Compare each tile in the arrays
return a.every((tileA, index) => areTilesEqual(tileA, b[index]));
}