Document application modes (development/debug/production) Add global file drop handler, order column normalization, SPA hash fix Serve CDN assets via /_vendor/ URLs instead of merging into bundles Add production minification with license preservation Improve JSON formatting for debugging and production optimization Add CDN asset caching with CSS URL inlining for production builds Add three-mode system (development, debug, production) Update Manifest CLAUDE.md to reflect helper class architecture Refactor Manifest.php into helper classes for better organization Pre-manifest-refactor checkpoint: Add app_mode documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
130 lines
3.8 KiB
JavaScript
Executable File
130 lines
3.8 KiB
JavaScript
Executable File
import { detachNodeFromParent } from '../lib/xast.js';
|
|
import { visitSkip } from '../lib/util/visit.js';
|
|
import { parsePathData } from '../lib/path.js';
|
|
import { intersects } from './_path.js';
|
|
|
|
export const name = 'removeOffCanvasPaths';
|
|
export const description =
|
|
'removes elements that are drawn outside of the viewBox (disabled by default)';
|
|
|
|
/**
|
|
* Remove elements that are drawn outside of the viewBox.
|
|
*
|
|
* @author JoshyPHP
|
|
*
|
|
* @type {import('../lib/types.js').Plugin}
|
|
*/
|
|
export const fn = () => {
|
|
/**
|
|
* @type {?{
|
|
* top: number,
|
|
* right: number,
|
|
* bottom: number,
|
|
* left: number,
|
|
* width: number,
|
|
* height: number
|
|
* }}
|
|
*/
|
|
let viewBoxData = null;
|
|
|
|
return {
|
|
element: {
|
|
enter: (node, parentNode) => {
|
|
if (node.name === 'svg' && parentNode.type === 'root') {
|
|
let viewBox = '';
|
|
// find viewBox
|
|
if (node.attributes.viewBox != null) {
|
|
// remove commas and plus signs, normalize and trim whitespace
|
|
viewBox = node.attributes.viewBox;
|
|
} else if (
|
|
node.attributes.height != null &&
|
|
node.attributes.width != null
|
|
) {
|
|
viewBox = `0 0 ${node.attributes.width} ${node.attributes.height}`;
|
|
}
|
|
|
|
// parse viewBox
|
|
// remove commas and plus signs, normalize and trim whitespace
|
|
viewBox = viewBox
|
|
.replace(/[,+]|px/g, ' ')
|
|
.replace(/\s+/g, ' ')
|
|
.replace(/^\s*|\s*$/g, '');
|
|
// ensure that the dimensions are 4 values separated by space
|
|
const m =
|
|
/^(-?\d*\.?\d+) (-?\d*\.?\d+) (\d*\.?\d+) (\d*\.?\d+)$/.exec(
|
|
viewBox,
|
|
);
|
|
if (m == null) {
|
|
return;
|
|
}
|
|
const left = Number.parseFloat(m[1]);
|
|
const top = Number.parseFloat(m[2]);
|
|
const width = Number.parseFloat(m[3]);
|
|
const height = Number.parseFloat(m[4]);
|
|
|
|
// store the viewBox boundaries
|
|
viewBoxData = {
|
|
left,
|
|
top,
|
|
right: left + width,
|
|
bottom: top + height,
|
|
width,
|
|
height,
|
|
};
|
|
}
|
|
|
|
// consider that any item with a transform attribute is visible
|
|
if (node.attributes.transform != null) {
|
|
return visitSkip;
|
|
}
|
|
|
|
if (
|
|
node.name === 'path' &&
|
|
node.attributes.d != null &&
|
|
viewBoxData != null
|
|
) {
|
|
const pathData = parsePathData(node.attributes.d);
|
|
|
|
// consider that an M command within the viewBox is visible
|
|
let visible = false;
|
|
for (const pathDataItem of pathData) {
|
|
if (pathDataItem.command === 'M') {
|
|
const [x, y] = pathDataItem.args;
|
|
if (
|
|
x >= viewBoxData.left &&
|
|
x <= viewBoxData.right &&
|
|
y >= viewBoxData.top &&
|
|
y <= viewBoxData.bottom
|
|
) {
|
|
visible = true;
|
|
}
|
|
}
|
|
}
|
|
if (visible) {
|
|
return;
|
|
}
|
|
|
|
if (pathData.length === 2) {
|
|
// close the path too short for intersects()
|
|
pathData.push({ command: 'z', args: [] });
|
|
}
|
|
|
|
const { left, top, width, height } = viewBoxData;
|
|
/** @type {ReadonlyArray<import('../lib/types.js').PathDataItem>} */
|
|
const viewBoxPathData = [
|
|
{ command: 'M', args: [left, top] },
|
|
{ command: 'h', args: [width] },
|
|
{ command: 'v', args: [height] },
|
|
{ command: 'H', args: [left] },
|
|
{ command: 'z', args: [] },
|
|
];
|
|
|
|
if (intersects(viewBoxPathData, pathData) === false) {
|
|
detachNodeFromParent(node, parentNode);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
};
|