You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							170 lines
						
					
					
						
							5.8 KiB
						
					
					
				
			
		
		
	
	
							170 lines
						
					
					
						
							5.8 KiB
						
					
					
				'use strict'; | 
						|
 | 
						|
/** | 
						|
 * @typedef {import('../lib/types').PathDataItem} PathDataItem | 
						|
 */ | 
						|
 | 
						|
const { stringifyPathData } = require('../lib/path.js'); | 
						|
const { detachNodeFromParent } = require('../lib/xast.js'); | 
						|
 | 
						|
exports.name = 'convertShapeToPath'; | 
						|
exports.description = 'converts basic shapes to more compact path form'; | 
						|
 | 
						|
const regNumber = /[-+]?(?:\d*\.\d+|\d+\.?)(?:[eE][-+]?\d+)?/g; | 
						|
 | 
						|
/** | 
						|
 * Converts basic shape to more compact path. | 
						|
 * It also allows further optimizations like | 
						|
 * combining paths with similar attributes. | 
						|
 * | 
						|
 * @see https://www.w3.org/TR/SVG11/shapes.html | 
						|
 * | 
						|
 * @author Lev Solntsev | 
						|
 * | 
						|
 * @type {import('./plugins-types').Plugin<'convertShapeToPath'>} | 
						|
 */ | 
						|
exports.fn = (root, params) => { | 
						|
  const { convertArcs = false, floatPrecision: precision } = params; | 
						|
 | 
						|
  return { | 
						|
    element: { | 
						|
      enter: (node, parentNode) => { | 
						|
        // convert rect to path | 
						|
        if ( | 
						|
          node.name === 'rect' && | 
						|
          node.attributes.width != null && | 
						|
          node.attributes.height != null && | 
						|
          node.attributes.rx == null && | 
						|
          node.attributes.ry == null | 
						|
        ) { | 
						|
          const x = Number(node.attributes.x || '0'); | 
						|
          const y = Number(node.attributes.y || '0'); | 
						|
          const width = Number(node.attributes.width); | 
						|
          const height = Number(node.attributes.height); | 
						|
          // Values like '100%' compute to NaN, thus running after | 
						|
          // cleanupNumericValues when 'px' units has already been removed. | 
						|
          // TODO: Calculate sizes from % and non-px units if possible. | 
						|
          if (Number.isNaN(x - y + width - height)) return; | 
						|
          /** | 
						|
           * @type {Array<PathDataItem>} | 
						|
           */ | 
						|
          const pathData = [ | 
						|
            { command: 'M', args: [x, y] }, | 
						|
            { command: 'H', args: [x + width] }, | 
						|
            { command: 'V', args: [y + height] }, | 
						|
            { command: 'H', args: [x] }, | 
						|
            { command: 'z', args: [] }, | 
						|
          ]; | 
						|
          node.name = 'path'; | 
						|
          node.attributes.d = stringifyPathData({ pathData, precision }); | 
						|
          delete node.attributes.x; | 
						|
          delete node.attributes.y; | 
						|
          delete node.attributes.width; | 
						|
          delete node.attributes.height; | 
						|
        } | 
						|
 | 
						|
        // convert line to path | 
						|
        if (node.name === 'line') { | 
						|
          const x1 = Number(node.attributes.x1 || '0'); | 
						|
          const y1 = Number(node.attributes.y1 || '0'); | 
						|
          const x2 = Number(node.attributes.x2 || '0'); | 
						|
          const y2 = Number(node.attributes.y2 || '0'); | 
						|
          if (Number.isNaN(x1 - y1 + x2 - y2)) return; | 
						|
          /** | 
						|
           * @type {Array<PathDataItem>} | 
						|
           */ | 
						|
          const pathData = [ | 
						|
            { command: 'M', args: [x1, y1] }, | 
						|
            { command: 'L', args: [x2, y2] }, | 
						|
          ]; | 
						|
          node.name = 'path'; | 
						|
          node.attributes.d = stringifyPathData({ pathData, precision }); | 
						|
          delete node.attributes.x1; | 
						|
          delete node.attributes.y1; | 
						|
          delete node.attributes.x2; | 
						|
          delete node.attributes.y2; | 
						|
        } | 
						|
 | 
						|
        // convert polyline and polygon to path | 
						|
        if ( | 
						|
          (node.name === 'polyline' || node.name === 'polygon') && | 
						|
          node.attributes.points != null | 
						|
        ) { | 
						|
          const coords = (node.attributes.points.match(regNumber) || []).map( | 
						|
            Number | 
						|
          ); | 
						|
          if (coords.length < 4) { | 
						|
            detachNodeFromParent(node, parentNode); | 
						|
            return; | 
						|
          } | 
						|
          /** | 
						|
           * @type {Array<PathDataItem>} | 
						|
           */ | 
						|
          const pathData = []; | 
						|
          for (let i = 0; i < coords.length; i += 2) { | 
						|
            pathData.push({ | 
						|
              command: i === 0 ? 'M' : 'L', | 
						|
              args: coords.slice(i, i + 2), | 
						|
            }); | 
						|
          } | 
						|
          if (node.name === 'polygon') { | 
						|
            pathData.push({ command: 'z', args: [] }); | 
						|
          } | 
						|
          node.name = 'path'; | 
						|
          node.attributes.d = stringifyPathData({ pathData, precision }); | 
						|
          delete node.attributes.points; | 
						|
        } | 
						|
 | 
						|
        //  optionally convert circle | 
						|
        if (node.name === 'circle' && convertArcs) { | 
						|
          const cx = Number(node.attributes.cx || '0'); | 
						|
          const cy = Number(node.attributes.cy || '0'); | 
						|
          const r = Number(node.attributes.r || '0'); | 
						|
          if (Number.isNaN(cx - cy + r)) { | 
						|
            return; | 
						|
          } | 
						|
          /** | 
						|
           * @type {Array<PathDataItem>} | 
						|
           */ | 
						|
          const pathData = [ | 
						|
            { command: 'M', args: [cx, cy - r] }, | 
						|
            { command: 'A', args: [r, r, 0, 1, 0, cx, cy + r] }, | 
						|
            { command: 'A', args: [r, r, 0, 1, 0, cx, cy - r] }, | 
						|
            { command: 'z', args: [] }, | 
						|
          ]; | 
						|
          node.name = 'path'; | 
						|
          node.attributes.d = stringifyPathData({ pathData, precision }); | 
						|
          delete node.attributes.cx; | 
						|
          delete node.attributes.cy; | 
						|
          delete node.attributes.r; | 
						|
        } | 
						|
 | 
						|
        // optionally covert ellipse | 
						|
        if (node.name === 'ellipse' && convertArcs) { | 
						|
          const ecx = Number(node.attributes.cx || '0'); | 
						|
          const ecy = Number(node.attributes.cy || '0'); | 
						|
          const rx = Number(node.attributes.rx || '0'); | 
						|
          const ry = Number(node.attributes.ry || '0'); | 
						|
          if (Number.isNaN(ecx - ecy + rx - ry)) { | 
						|
            return; | 
						|
          } | 
						|
          /** | 
						|
           * @type {Array<PathDataItem>} | 
						|
           */ | 
						|
          const pathData = [ | 
						|
            { command: 'M', args: [ecx, ecy - ry] }, | 
						|
            { command: 'A', args: [rx, ry, 0, 1, 0, ecx, ecy + ry] }, | 
						|
            { command: 'A', args: [rx, ry, 0, 1, 0, ecx, ecy - ry] }, | 
						|
            { command: 'z', args: [] }, | 
						|
          ]; | 
						|
          node.name = 'path'; | 
						|
          node.attributes.d = stringifyPathData({ pathData, precision }); | 
						|
          delete node.attributes.cx; | 
						|
          delete node.attributes.cy; | 
						|
          delete node.attributes.rx; | 
						|
          delete node.attributes.ry; | 
						|
        } | 
						|
      }, | 
						|
    }, | 
						|
  }; | 
						|
};
 | 
						|
 |