e-virt-table
Version:
A powerful data table based on canvas. You can use it as data grid、Microsoft Excel or Google sheets. It supports virtual scroll、cell edit etc.
202 lines • 23.6 kB
JavaScript
const expandSvg = `<svg t="1724122015492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4237" width="32" height="32"><path d="M401.472 316.992l159.04 217.664L591.488 512l-30.976-22.656-159.04 217.728q-2.24 3.008-3.84 6.464-1.6 3.456-2.496 7.104-0.896 3.648-1.024 7.424-0.192 3.84 0.384 7.552 0.64 3.712 1.92 7.296 1.28 3.52 3.2 6.784 1.984 3.2 4.544 6.016 2.56 2.752 5.632 4.992 3.072 2.24 6.464 3.84 3.456 1.6 7.168 2.496 3.648 0.896 7.424 1.024 3.776 0.192 7.488-0.448 3.776-0.576 7.296-1.856 3.584-1.28 6.784-3.264 3.2-1.92 6.016-4.48 2.816-2.56 5.056-5.632l159.04-217.728q3.584-4.928 5.504-10.752 1.92-5.76 1.92-11.904 0-6.08-1.92-11.904-1.92-5.76-5.504-10.752L463.488 271.68q-2.24-3.072-5.056-5.632-2.752-2.56-6.016-4.48-3.2-1.984-6.784-3.328-3.52-1.28-7.296-1.856-3.712-0.576-7.488-0.448-3.84 0.192-7.424 1.088-3.712 0.896-7.168 2.496-3.392 1.6-6.4 3.84-3.136 2.176-5.696 4.992-2.56 2.752-4.48 6.016-1.984 3.2-3.264 6.784-1.28 3.52-1.92 7.296-0.576 3.712-0.384 7.488 0.128 3.84 1.024 7.488 0.896 3.648 2.496 7.04 1.6 3.456 3.84 6.528z m30.976-61.056q-3.776 0-7.488 0.704-3.712 0.768-7.168 2.24-3.52 1.408-6.656 3.52-3.2 2.112-5.824 4.8-2.688 2.624-4.8 5.76-2.112 3.2-3.52 6.656-1.472 3.52-2.176 7.232-0.768 3.712-0.768 7.488 0 3.776 0.768 7.488 0.704 3.712 2.176 7.232 1.408 3.456 3.52 6.592 2.112 3.2 4.8 5.824 2.688 2.688 5.76 4.8 3.2 2.112 6.72 3.52 3.456 1.472 7.168 2.176 3.712 0.768 7.488 0.768 3.84 0 7.488-0.768 3.712-0.704 7.232-2.176 3.456-1.408 6.592-3.52 3.2-2.112 5.824-4.8 2.688-2.688 4.8-5.76 2.112-3.2 3.52-6.656 1.472-3.52 2.24-7.232 0.704-3.712 0.704-7.488 0-3.84-0.704-7.488-0.768-3.712-2.24-7.232-1.408-3.456-3.52-6.592-2.112-3.2-4.8-5.824-2.624-2.688-5.76-4.8-3.2-2.112-6.656-3.52-3.52-1.472-7.232-2.24Q436.224 256 432.448 256z m0 435.392q-3.776 0-7.488 0.704-3.712 0.768-7.168 2.176-3.52 1.472-6.656 3.584-3.2 2.112-5.824 4.736-2.688 2.688-4.8 5.824-2.112 3.2-3.52 6.656-1.472 3.52-2.176 7.232-0.768 3.712-0.768 7.488 0 3.776 0.768 7.488 0.704 3.712 2.176 7.168 1.408 3.52 3.52 6.656 2.112 3.2 4.8 5.76 2.688 2.752 5.76 4.8 3.2 2.112 6.72 3.584 3.456 1.472 7.168 2.176 3.712 0.768 7.488 0.768 3.84 0 7.488-0.768 3.712-0.704 7.232-2.176 3.456-1.472 6.592-3.584 3.2-2.048 5.824-4.736 2.688-2.688 4.8-5.824 2.112-3.2 3.52-6.656 1.472-3.456 2.24-7.168 0.704-3.712 0.704-7.488 0-3.84-0.704-7.488-0.768-3.712-2.24-7.232-1.408-3.52-3.52-6.656-2.112-3.136-4.8-5.76-2.624-2.688-5.76-4.8-3.2-2.112-6.656-3.584-3.52-1.408-7.232-2.176-3.712-0.704-7.488-0.704z" p-id="4238"></path></svg>`;
const svgcheckboxCheck = `<svg t="1722595535853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4551" width="32" height="32"><path d="M640 128H384c-170.496 0-256 85.504-256 256v256c0 170.496 85.504 256 256 256h256c170.496 0 256-85.504 256-256V384c0-170.496-85.504-256-256-256z m67.584 302.592c-2.048 4.608-4.608 8.704-8.192 12.288L506.88 634.88c-3.584 3.584-7.68 6.144-12.288 8.192-4.608 2.048-9.728 3.072-14.848 3.072s-10.24-1.024-14.848-3.072c-4.608-2.048-8.704-4.608-12.288-8.192l-96.256-96.256c-3.584-3.584-6.144-7.68-8.192-12.288-2.048-4.608-3.072-9.728-3.072-14.848 0-2.56 0-5.12 1.024-7.68 0.512-2.56 1.024-5.12 2.048-7.168 1.024-2.56 2.048-4.608 3.584-6.656 1.536-2.048 3.072-4.096 4.608-5.632 1.536-2.048 3.584-3.584 5.632-4.608 2.048-1.536 4.096-2.56 6.656-3.584 2.56-1.024 4.608-1.536 7.168-2.048 2.56-0.512 5.12-0.512 7.68-0.512 5.12 0 10.24 1.024 14.848 3.072 4.608 2.048 8.704 4.608 12.288 8.192l69.12 68.608L645.12 389.12c3.584-3.584 7.68-6.144 12.288-8.192 4.608-2.048 9.728-3.072 14.848-3.072 2.56 0 5.12 0 7.68 0.512s5.12 1.024 7.168 2.048c2.56 1.024 4.608 2.048 6.656 3.584 2.048 1.536 4.096 3.072 5.632 4.608 1.536 1.536 3.584 3.584 4.608 5.632 1.536 2.048 2.56 4.096 3.584 6.656 1.024 2.56 1.536 4.608 2.048 7.168 0.512 2.56 1.024 5.12 1.024 7.68 0 5.12-1.024 10.24-3.072 14.848z" p-id="4552"></path></svg>`;
const svgSelect = '<svg t="1724122044148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4551" width="32" height="32"><path d="M707.648 401.28L489.28 560.704l22.656 30.976 22.656-30.976L316.16 401.216q-3.072-2.24-6.464-3.84-3.456-1.536-7.104-2.432-3.712-0.896-7.488-1.088-3.776-0.128-7.488 0.448-3.776 0.64-7.296 1.92-3.584 1.28-6.784 3.2-3.2 1.984-6.016 4.544-2.816 2.56-5.056 5.632-2.176 3.072-3.84 6.464-1.536 3.456-2.432 7.104-0.896 3.712-1.088 7.488-0.128 3.776 0.448 7.488 0.64 3.776 1.92 7.296 1.28 3.584 3.2 6.784 1.984 3.2 4.544 6.016 2.56 2.752 5.632 4.992l218.368 159.552q4.928 3.584 10.752 5.504 5.76 1.92 11.904 1.92 6.08 0 11.904-1.92 5.76-1.92 10.752-5.504l218.368-159.552q3.008-2.24 5.568-4.992 2.56-2.816 4.544-6.016 1.92-3.2 3.264-6.784 1.28-3.52 1.92-7.296 0.576-3.712 0.384-7.488-0.128-3.84-1.024-7.488-0.896-3.648-2.496-7.04-1.6-3.456-3.84-6.528-2.24-3.072-4.992-5.632-2.816-2.56-6.016-4.48-3.2-1.984-6.784-3.328-3.584-1.28-7.296-1.856-3.712-0.64-7.488-0.448-3.84 0.192-7.488 1.088-3.648 0.896-7.04 2.496-3.456 1.536-6.528 3.84z m61.056 30.976q0-3.84-0.768-7.488-0.704-3.712-2.176-7.232-1.472-3.456-3.52-6.656-2.112-3.136-4.8-5.76-2.688-2.688-5.76-4.8-3.2-2.112-6.72-3.584-3.456-1.408-7.168-2.176-3.712-0.704-7.488-0.704-3.84 0-7.488 0.704-3.712 0.768-7.232 2.176-3.456 1.472-6.656 3.584-3.136 2.112-5.76 4.8-2.688 2.624-4.8 5.76-2.112 3.2-3.584 6.656-1.408 3.52-2.176 7.232-0.704 3.712-0.704 7.488 0 3.776 0.704 7.488 0.768 3.712 2.176 7.168 1.472 3.52 3.584 6.656 2.112 3.2 4.8 5.824 2.624 2.688 5.76 4.8 3.2 2.112 6.656 3.52 3.52 1.472 7.232 2.176 3.712 0.768 7.488 0.768 3.776 0 7.488-0.768 3.712-0.704 7.168-2.176 3.52-1.408 6.656-3.52 3.2-2.112 5.824-4.8 2.688-2.688 4.8-5.76 2.048-3.2 3.52-6.72 1.472-3.456 2.176-7.168 0.768-3.712 0.768-7.488z m-436.736 0q0-3.84-0.768-7.488-0.704-3.712-2.176-7.232-1.408-3.456-3.52-6.656-2.112-3.136-4.8-5.76-2.688-2.688-5.76-4.8-3.2-2.112-6.656-3.584-3.52-1.408-7.232-2.176-3.712-0.704-7.488-0.704-3.84 0-7.488 0.704-3.712 0.768-7.232 2.176-3.456 1.472-6.592 3.584-3.2 2.112-5.824 4.8-2.688 2.624-4.8 5.76-2.112 3.2-3.52 6.656-1.472 3.52-2.24 7.232-0.704 3.712-0.704 7.488 0 3.776 0.704 7.488 0.768 3.712 2.24 7.168 1.408 3.52 3.52 6.656 2.112 3.2 4.8 5.824 2.624 2.688 5.76 4.8 3.2 2.112 6.656 3.52 3.52 1.472 7.232 2.176 3.712 0.768 7.488 0.768 3.776 0 7.488-0.768 3.712-0.704 7.232-2.176 3.456-1.408 6.592-3.52 3.2-2.112 5.824-4.8 2.688-2.688 4.8-5.76 2.112-3.2 3.52-6.72 1.472-3.456 2.176-7.168 0.768-3.712 0.768-7.488z" p-id="4552"></path></svg>';
const svgSortable = `<svg t="1755138507987" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5079" width="200" height="200"><path d="M512 938.688a42.688 42.688 0 0 1-35.072-18.432l-192-277.312A42.56 42.56 0 0 1 320 576h384a42.752 42.752 0 0 1 35.072 66.944l-192 277.312a42.688 42.688 0 0 1-35.072 18.432" fill="currentColor" p-id="2016"></path><path d="M704 448H320a42.752 42.752 0 0 1-35.072-66.944l192-277.312c16-23.04 54.208-23.04 70.144 0l192 277.312A42.56 42.56 0 0 1 704 448" fill="currentColor" p-id="2015"></path></svg>`;
const svgSortAsc = svgSortable.replace(`fill="currentColor" p-id="2016"`, `fill="#bec4c7" p-id="2016"`);
const svgSortDesc = svgSortable.replace(`fill="currentColor" p-id="2015"`, `fill="#bec4c7" p-id="2015"`);
const svgLoading = `<svg t="1724133395728" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2893" width="32" height="32"><path d="M512 226.8476541a19.82487759 19.82487759 0 0 1 14.66497778 5.70304692c3.80203107 3.82918865 5.70304692 8.71751457 5.70304693 14.66497779v122.20814825a19.82487759 19.82487759 0 0 1-5.70304693 14.66497778 19.82487759 19.82487759 0 0 1-14.66497778 5.70304691 19.82487759 19.82487759 0 0 1-14.66497778-5.70304691 19.82487759 19.82487759 0 0 1-5.70304693-14.66497778v-122.20814825a19.82487759 19.82487759 0 0 1 5.70304693-14.66497779 19.82487759 19.82487759 0 0 1 14.66497778-5.70304692z m0 407.36049415a19.82487759 19.82487759 0 0 1 14.66497778 5.70304691c3.80203107 3.82918865 5.70304692 8.71751457 5.70304693 14.66497778v122.20814827a19.82487759 19.82487759 0 0 1-5.70304693 14.66497776 19.82487759 19.82487759 0 0 1-14.66497778 5.70304693 19.82487759 19.82487759 0 0 1-14.66497778-5.70304693 19.82487759 19.82487759 0 0 1-5.70304693-14.66497776v-122.20814827a19.82487759 19.82487759 0 0 1 5.70304693-14.66497778 19.82487759 19.82487759 0 0 1 14.66497778-5.70304691zM797.1523459 512a19.82487759 19.82487759 0 0 1-5.70304692 14.66497778 19.82487759 19.82487759 0 0 1-14.66497779 5.70304693h-122.20814825a19.82487759 19.82487759 0 0 1-14.66497778-5.70304693 19.82487759 19.82487759 0 0 1-5.70304691-14.66497778 19.82487759 19.82487759 0 0 1 5.70304691-14.66497778 19.82487759 19.82487759 0 0 1 14.66497778-5.70304693h122.20814825a19.82487759 19.82487759 0 0 1 14.66497779 5.70304693c3.80203107 3.82918865 5.70304692 8.71751457 5.70304692 14.66497778z m-407.36049415 0a19.82487759 19.82487759 0 0 1-5.70304691 14.66497778 19.82487759 19.82487759 0 0 1-14.66497778 5.70304693h-122.20814827a19.82487759 19.82487759 0 0 1-14.66497776-5.70304693 19.82487759 19.82487759 0 0 1-5.70304693-14.66497778 19.82487759 19.82487759 0 0 1 5.70304693-14.66497778 19.82487759 19.82487759 0 0 1 14.66497776-5.70304693h122.20814827a19.82487759 19.82487759 0 0 1 14.66497778 5.70304693c3.80203107 3.82918865 5.70304692 8.71751457 5.70304691 14.66497778zM310.22076878 310.22076878a21.29137537 21.29137537 0 0 1 14.66497779-5.70304693c5.51294514 0 10.18401235 1.90101585 14.01320099 5.70304693l86.55052591 86.57768347a20.91117183 20.91117183 0 0 1 5.73020449 14.31193182 19.28172983 19.28172983 0 0 1-6.05609289 14.013201 19.11878565 19.11878565 0 0 1-14.013201 6.05609289 20.96548698 20.96548698 0 0 1-14.31193182-5.70304692L310.22076878 338.87178998a19.06447114 19.06447114 0 0 1-5.70304693-14.01320099c0-5.54010272 1.90101585-10.42842865 5.70304693-14.66497778z m288.32975775 288.32975775a19.79772001 19.79772001 0 0 1 14.3390894-6.35482371c5.29568642 0 10.04822572 2.11827457 14.31193182 6.38198066l86.57768347 86.55052651c3.80203107 3.80203107 5.70304692 8.47309828 5.70304691 14.01320102a19.55330372 19.55330372 0 0 1-6.05609225 14.31193182 19.66193339 19.66193339 0 0 1-14.31193245 6.05609288 19.01015661 19.01015661 0 0 1-14.01320099-5.70304692l-86.55052591-86.57768347a19.79772001 19.79772001 0 0 1-6.38198129-14.31193245c0-5.29568642 2.11827457-10.07538268 6.38198129-14.33908939zM713.77923122 310.22076878c3.80203107 4.26370672 5.70304692 9.15203265 5.70304693 14.66497779s-1.90101585 10.18401235-5.70304693 14.01320099l-86.57768347 86.55052591a20.91117183 20.91117183 0 0 1-14.31193182 5.73020449 19.28172983 19.28172983 0 0 1-14.013201-6.05609289 19.11878565 19.11878565 0 0 1-6.05609289-14.013201c0-5.29568642 1.90101585-10.07538268 5.70304692-14.31193182l86.57768348-86.57768347c3.80203107-3.80203107 8.50025585-5.70304692 14.01320099-5.70304693 5.54010272 0 10.40127108 1.90101585 14.66497779 5.70304693zM425.44947347 598.57768347a19.79772001 19.79772001 0 0 1 6.35482371 14.33908939c0 5.29568642-2.11827457 10.04822572-6.38198066 14.31193245L338.89894756 713.77923122a19.06447114 19.06447114 0 0 1-14.01320099 5.70304693 19.55330372 19.55330372 0 0 1-14.31193245-6.05609227 19.68909035 19.68909035 0 0 1-6.05609227-14.31193245 19.01015661 19.01015661 0 0 1 5.70304693-14.01320099l86.57768347-86.55052591a19.79772001 19.79772001 0 0 1 14.31193182-6.38198129c5.29568642 0 10.07538268 2.11827457 14.3390894 6.38198129z" fill="#000000" fill-opacity=".65" p-id="2894"></path></svg>`;
export { expandSvg, svgcheckboxCheck, svgSelect, svgSortable, svgSortAsc, svgSortDesc, svgLoading };
export default class Icons {
constructor(ctx) {
Object.defineProperty(this, "ctx", {
enumerable: true,
configurable: true,
writable: true,
value: void 0
});
Object.defineProperty(this, "list", {
enumerable: true,
configurable: true,
writable: true,
value: [
{
name: 'loading',
configName: 'LOADING_ICON_SVG',
configColorName: 'LOADING_ICON_COLOR',
svg: svgLoading,
color: '#4E5969',
},
{
name: 'expand',
configName: 'EXPAND_ICON_SVG',
configColorName: 'EXPAND_ICON_COLOR',
svg: expandSvg,
color: '#4E5969',
},
{
name: 'shrink',
configName: 'SHRINK_ICON_SVG',
configColorName: 'SHRINK_ICON_COLOR',
svg: svgSelect,
color: '#4E5969',
},
{
name: 'checkbox-uncheck',
configName: 'CHECKBOX_UNCHECK_SVG',
configColorName: 'CHECKBOX_UNCHECK_COLOR',
svg: '<svg t="1722595639920" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4708" width="32" height="32"><path d="M128 640V384a256 256 0 0 1 256-256h256a256 256 0 0 1 256 256v256a256 256 0 0 1-256 256H384a256 256 0 0 1-256-256z m64 0q0 79.552 56.256 135.744Q304.448 832 384 832h256q79.552 0 135.744-56.256Q832 719.552 832 640V384q0-79.552-56.256-135.744Q719.552 192 640 192H384q-79.552 0-135.744 56.256Q192 304.448 192 384v256z" p-id="4709"></path></svg>',
color: '',
},
{
name: 'checkbox-check',
configName: 'CHECKBOX_CHECK_SVG',
configColorName: 'CHECKBOX_COLOR',
svg: svgcheckboxCheck,
color: 'rgb(82,146,247)',
},
{
name: 'checkbox-indeterminate',
configName: 'CHECKBOX_INDETERMINATE_SVG',
configColorName: 'CHECKBOX_COLOR',
svg: '<svg t="1722595280953" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4394" width="32" height="32"><path d="M128 384v256q0 12.608 1.28 25.088 1.216 12.544 3.648 24.832 2.432 12.352 6.08 24.384t8.448 23.68q4.864 11.584 10.752 22.72 5.952 11.072 12.928 21.504 7.04 10.496 14.976 20.224 8 9.728 16.896 18.56 8.896 8.96 18.56 16.896 9.728 8 20.224 14.976 10.432 7.04 21.504 12.928 11.136 5.888 22.72 10.688 11.648 4.864 23.68 8.512 12.032 3.648 24.32 6.08 12.352 2.432 24.896 3.712Q371.392 896 384 896h256q12.608 0 25.088-1.28 12.544-1.216 24.832-3.648 12.352-2.432 24.384-6.08t23.68-8.512q11.584-4.8 22.72-10.688 11.072-5.952 21.504-12.928 10.496-7.04 20.224-14.976 9.728-8 18.56-16.896 8.96-8.832 16.896-18.56 8-9.728 14.976-20.224 7.04-10.432 12.928-21.504 5.888-11.136 10.688-22.72 4.864-11.648 8.512-23.68 3.648-12.032 6.08-24.32 2.432-12.352 3.712-24.896Q896 652.608 896 640V384q0-12.608-1.28-25.088-1.216-12.544-3.648-24.832-2.432-12.352-6.08-24.384t-8.512-23.68q-4.8-11.584-10.688-22.72-5.952-11.072-12.928-21.504-7.04-10.496-14.976-20.224-8-9.664-16.896-18.56-8.832-8.96-18.56-16.896-9.728-8-20.224-14.976-10.432-7.04-21.504-12.928-11.136-5.888-22.72-10.752-11.648-4.8-23.68-8.448-12.032-3.648-24.32-6.08-12.352-2.432-24.896-3.712Q652.608 128 640 128H384q-12.608 0-25.088 1.28-12.544 1.216-24.832 3.648-12.352 2.432-24.384 6.08t-23.68 8.448q-11.584 4.864-22.72 10.752-11.072 5.952-21.504 12.928-10.496 7.04-20.224 14.976-9.664 8-18.56 16.896-8.96 8.896-16.896 18.56-8 9.728-14.976 20.224-7.04 10.432-12.928 21.504-5.888 11.136-10.752 22.72-4.8 11.648-8.448 23.68-3.648 12.032-6.08 24.32-2.432 12.352-3.712 24.896Q128 371.392 128 384z m566.016 166.336H330.112a38.4 38.4 0 0 1 0-76.8h363.904a38.4 38.4 0 0 1 0 76.8z" p-id="4395"></path></svg>',
color: 'rgb(82,146,247)',
},
{
name: 'checkbox-check-disabled',
configName: 'CHECKBOX_CHECK_DISABLED_SVG',
svg: svgcheckboxCheck,
color: '#DDE0EA',
},
{
name: 'checkbox-disabled',
configName: 'CHECKBOX_DISABLED_SVG',
configColorName: 'CHECKBOX_DISABLED_COLOR',
svg: '<svg t="1722595946663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4865" width="32" height="32"><path d="M128 640V384a256 256 0 0 1 256-256h256a256 256 0 0 1 256 256v256a256 256 0 0 1-256 256H384a256 256 0 0 1-256-256z" p-id="4866"></path><path d="M128 640V384a256 256 0 0 1 256-256h256a256 256 0 0 1 256 256v256a256 256 0 0 1-256 256H384a256 256 0 0 1-256-256z m64 0q0 79.552 56.256 135.744Q304.448 832 384 832h256q79.552 0 135.744-56.256Q832 719.552 832 640V384q0-79.552-56.256-135.744Q719.552 192 640 192H384q-79.552 0-135.744 56.256Q192 304.448 192 384v256z" fill="#DDE0EA" p-id="4867"></path></svg>',
color: '#F1F2F4',
},
{
name: 'icon-edit',
configName: 'ICON_EDIT_SVG',
configColorName: 'ICON_EDIT_COLOR',
svg: '<svg t="1744798692576" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6606" width="200" height="200"><path d="M855.296 894.528H168.768v-76.8h686.528v76.8z m38.4-38.4q0 3.84-0.768 7.488-0.704 3.712-2.176 7.232-1.472 3.52-3.52 6.656-2.112 3.136-4.8 5.76-2.688 2.688-5.824 4.8-3.2 2.112-6.656 3.584-3.456 1.408-7.168 2.176-3.712 0.704-7.488 0.704-3.84 0-7.488-0.704-3.712-0.768-7.232-2.176-3.52-1.472-6.656-3.584-3.136-2.112-5.76-4.736-2.688-2.688-4.8-5.824-2.112-3.2-3.584-6.656-1.408-3.52-2.176-7.232-0.704-3.648-0.704-7.488 0-3.776 0.704-7.488 0.768-3.712 2.176-7.168 1.472-3.52 3.584-6.656 2.112-3.136 4.736-5.76 2.688-2.752 5.824-4.8 3.2-2.112 6.656-3.584 3.52-1.472 7.232-2.176 3.712-0.768 7.488-0.768 3.776 0 7.488 0.768 3.712 0.704 7.168 2.176 3.52 1.472 6.656 3.584 3.2 2.048 5.76 4.736 2.752 2.688 4.864 5.824 2.048 3.2 3.52 6.656 1.472 3.456 2.176 7.168 0.768 3.712 0.768 7.488z m-686.528 0q0 3.84-0.768 7.488-0.704 3.712-2.176 7.232-1.472 3.52-3.52 6.656-2.112 3.136-4.8 5.76-2.688 2.688-5.76 4.8-3.2 2.112-6.72 3.584-3.456 1.408-7.168 2.176-3.712 0.704-7.488 0.704-3.84 0-7.488-0.704-3.712-0.768-7.232-2.176-3.456-1.472-6.656-3.584-3.136-2.112-5.76-4.736-2.688-2.688-4.8-5.824-2.112-3.2-3.584-6.656-1.408-3.52-2.176-7.232-0.704-3.648-0.704-7.488 0-3.776 0.704-7.488 0.768-3.712 2.176-7.168 1.472-3.52 3.584-6.656 2.112-3.136 4.736-5.76 2.688-2.752 5.824-4.8 3.2-2.112 6.656-3.584 3.52-1.472 7.232-2.176 3.712-0.768 7.488-0.768 3.776 0 7.488 0.768 3.712 0.704 7.168 2.176 3.52 1.472 6.656 3.584 3.2 2.048 5.824 4.736 2.688 2.688 4.8 5.824 2.048 3.2 3.52 6.656 1.472 3.456 2.176 7.168 0.768 3.712 0.768 7.488zM652.032 211.2l-369.92 370.368v89.344h90.048l369.664-369.856L652.032 211.2z m-54.4-54.272q22.528-22.528 54.4-22.528 31.808 0 54.336 22.528l89.792 89.856q22.464 22.464 22.464 54.272t-22.464 54.272l-369.664 369.856q-22.464 22.528-54.336 22.528H282.24q-31.808 0-54.336-22.528-22.464-22.464-22.464-54.272V581.568q0-31.808 22.4-54.272l369.92-370.368z" p-id="6607"></path></svg>',
color: '#4E5969',
},
{
name: 'icon-select',
configName: 'ICON_SELECT_SVG',
configColorName: 'ICON_SELECT_COLOR',
svg: svgSelect,
color: '#4E5969',
},
{
name: 'sort-asc',
configName: 'SORT_ASC_ICON_SVG',
configColorName: 'SORT_ICON_COLOR',
svg: svgSortAsc,
color: 'rgb(82,146,247)',
},
{
name: 'sort-desc',
configName: 'SORT_DESC_ICON_SVG',
configColorName: 'SORT_ICON_COLOR',
svg: svgSortDesc,
color: 'rgb(82,146,247)',
},
{
name: 'sort-default',
configName: 'SORTABLE_ICON_SVG',
svg: svgSortable,
color: '#bec4c7',
},
]
});
Object.defineProperty(this, "icons", {
enumerable: true,
configurable: true,
writable: true,
value: new Map()
});
this.ctx = ctx;
this.init();
}
async init() {
const promises = [];
for (let i = 0; i < this.list.length; i++) {
const item = this.list[i];
let color = item.color;
let svg = item.svg;
if (item.configColorName) {
// 从配置中获取颜色
const configColor = this.ctx.config[item.configColorName];
if (configColor) {
color = configColor;
}
}
// 替换svg
if (item.configName) {
const configSvg = this.ctx.config[item.configName];
if (configSvg) {
svg = configSvg;
}
}
// 将异步操作推入 promises 数组
const promise = this.createImageFromSVG(svg, color).then((icon) => {
this.icons.set(item.name, icon);
});
promises.push(promise);
}
// 额外的图标
for (let i = 0; i < this.ctx.config.ICONS.length; i++) {
const item = this.ctx.config.ICONS[i];
let color = item.color;
// 将异步操作推入 promises 数组
const promise = this.createImageFromSVG(item.svg, color, item.isBlob).then((icon) => {
this.icons.set(item.name, icon);
});
promises.push(promise);
}
// 并行执行所有异步操作
await Promise.all(promises);
// 加载完成后触发绘制
this.ctx.emit('draw');
}
async createImageFromSVG(svgContent, fill, isBlob = false) {
const parser = new DOMParser();
const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml');
const svg = svgDoc.documentElement;
if (fill) {
// 控制填充颜色
svg.querySelectorAll('*').forEach((element) => {
const attrValue = element.getAttribute('fill');
if (attrValue === 'currentColor' || attrValue === null) {
element.setAttribute('fill', fill);
}
});
}
const img = new Image();
let url = '';
if (isBlob) {
const svgBlob = new Blob([new XMLSerializer().serializeToString(svg)], {
type: 'image/svg+xml',
});
url = URL.createObjectURL(svgBlob);
}
else {
url = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(new XMLSerializer().serializeToString(svg));
}
img.src = url;
return new Promise((resolve, reject) => {
img.onerror = () => reject(new Error('Failed to load image:' + svgContent));
img.onload = () => {
resolve(img);
};
});
}
get(name) {
return this.icons.get(name);
}
getSvg(name) {
return this.list.find((item) => item.name === name);
}
}
//# sourceMappingURL=Icons.js.map