11 lines
11 KiB
JSON
11 lines
11 KiB
JSON
|
{
|
||
|
|
"extension": ".js",
|
||
|
|
"source": "import { DEFAULT_PRECISION } from \"./_constants\"\nimport { convertPathToNode } from \"./_utils\"\nimport Sample from \"./Sample\"\nimport Segment from \"./Segment\"\n\n// The main function responsible for getting data\n// This will take a path, number of samples, number of samples, and a precision value\n// It will return an array of Segments, which in turn contains an array of Samples\n// This can later be used to generate a stroked path, converted to outlines for a filled path, or flattened for plotting SVG circles\nexport const getData = ({\n path,\n segments,\n samples,\n precision = DEFAULT_PRECISION,\n}) => {\n // Convert the given path to a DOM node if it isn't already one\n path = convertPathToNode(path)\n\n // We decrement the number of samples per segment because when we group them later we will add on the first sample of the following segment\n if (samples > 1) samples--\n\n // Get total length of path, total number of samples we will be generating, and two blank arrays to hold samples and segments\n const pathLength = path.getTotalLength(),\n totalSamples = segments * samples,\n allSamples = [],\n allSegments = []\n\n // For the number of total samples, get the x, y, and progress values for each sample along the path\n for (let sample = 0; sample <= totalSamples; sample++) {\n const progress = sample / totalSamples\n\n let { x, y } = path.getPointAtLength(progress * pathLength)\n\n // If the user asks to round our x and y values, do so\n if (precision) {\n x = +x.toFixed(precision)\n y = +y.toFixed(precision)\n }\n\n // Create a new Sample and push it onto the allSamples array\n allSamples.push(new Sample({ x, y, progress }))\n }\n\n // Out of all the samples gathered previously, sort them into groups of segments\n // Each group includes the samples of the current segment, with the last sample being first sample from the next segment\n for (let segment = 0; segment < segments; segment++) {\n const currentStart = segment * samples,\n nextStart = currentStart + samples,\n segmentSamples = []\n\n // Push all current samples onto segmentSamples\n for (let samInSeg = 0; samInSeg < samples; samInSeg++) {\n segmentSamples.push(allSamples[currentStart + samInSeg])\n }\n\n // Push the first sample from the next segment onto segmentSamples\n segmentSamples.push(allSamples[nextStart])\n\n // Create a new Segment with the samples from segmentSamples\n allSegments.push(new Segment({ samples: segmentSamples }))\n }\n\n // Return our group of segments\n return allSegments\n}\n\n// The function responsible for converting strokable data (from getData()) into fillable data\n// This allows any SVG path to be filled instead of just stroked, allowing for the user to fill and stroke paths simultaneously\n// We start by outlining the stroked data given a specified width and the we average together the edges where adjacent segments touch\nexport const strokeToFill = (data, width, precision, pathClosed) => {\n const outlinedStrokes = outlineStrokes(data, width, precision),\n averagedSegmentJoins = averageSegmentJoins(\n outlinedStrokes,\n precision,\n pathClosed\n )\n\n return averagedSegmentJoins\n}\n\n// An internal function for outlining stroked data\nconst outlineStrokes = (data, width, precision) => {\n // We need to get the points perpendicular to a startPoint, given an angle, radius, and precision\n const getPerpSamples = (angle, radius, precision, startPoint) => {\n const p0 = new Sample({\n ...startPoint,\n x: Math.sin(angle) * radius + startPoint.x,\n y: -Math.cos(angle) * radius + startPoint.y,\n }),\n p1 = new Sample({\n ...startPoint,\n x: -Math.sin(angle) * radius + startPoint.x,\n y: Math.cos(angle) * radius + startPoint.y,\n })\n\n // If the user asks to round our x and y values, do so\n if (precision) {\n p0.x = +p0.x.toFixed(precision)\n p0.y = +p0.y.toFixed(precision)\n p1.x = +p1.x.toFixed(precisio
|
||
|
|
"review": "# 7\n\n## Bugs\n- No validation of input parameters like `path`, which could lead to potential runtime errors if incorrect data types are provided.\n- Possibility of division by zero in `getData` if `segments` or `samples` is zero, which could raise an exception.\n- Assumes `path` has defined methods like `getTotalLength` without checking if they exist or handling errors if they're not available.\n- In `averageSegmentJoins`, there's potential risk of accessing undefined array elements if `outlinedData` length is less than expected, particularly in loop iterations.\n\n## Optimizations\n- Consider adding validation checks for input parameters (e.g., ensuring `segments` and `samples` are positive numbers).\n- Avoid unnecessary calculations by short-circuiting conditions when precision is not needed.\n- Use `Object.assign()` or spread operator to clone objects instead of JSON stringification and parsing for better performance.\n- Reduce redundancy by extracting repetitive logic, such as rounding and averaging, into separate utility functions.\n- Consider using more descriptive parameter names to enhance code readability.\n\n## Good points\n- Implements a clear transformation of path data to samples and segments, showing a logical step-by-step process.\n- Attempts to handle precision in the calculations, offering flexibility to the caller.\n- Thoroughly comments the purpose and process of each function and code block, aiding in comprehension.\n\n## Summary\nThe code effectively maps path data into segmented samples with an option for precision. It demonstrates consistent approach in processing data, maintaining modularity with separate functions for distinct tasks. However, this implementation lacks input validation, which can cause runtime issues with unexpected inputs. By addressing potential errors, optimizing code redundancy, and ensuring input validity, the solution can be made more robust and efficient.\n\n## Open source alternatives\n- Snap.svg: A JavaScript library for modern SVG graphics focusing on delivering faster performance and better optimization.\n- D3.js: While primarily focused on data visualization, it includes powerful utilities for manipulating documents based on data, including path generation and modification.",
|
||
|
|
"filename": "_data.js",
|
||
|
|
"path": "remix/app/gp/_data.js",
|
||
|
|
"directory": "gp",
|
||
|
|
"grade": 7,
|
||
|
|
"size": 8782,
|
||
|
|
"line_count": 220
|
||
|
|
}
|