graphics-debug 0.0.71 → 0.0.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-62J5EOWN.js → chunk-IOVKI3ZO.js} +2 -4
- package/dist/chunk-IOVKI3ZO.js.map +1 -0
- package/dist/{chunk-FDH2JDXE.js → chunk-LSB2D226.js} +2 -2
- package/dist/{chunk-TVUC4YPH.js → chunk-NPOHLW76.js} +2 -2
- package/dist/{chunk-CYAADASZ.js → chunk-RAMLGIXD.js} +2 -2
- package/dist/{chunk-ZV4UNKKF.js → chunk-T5KLVINH.js} +2 -2
- package/dist/chunk-T5KLVINH.js.map +1 -0
- package/dist/cli/cli.js +5 -5
- package/dist/lib/arrowHelpers.js +1 -1
- package/dist/lib/drawGraphicsToCanvas.js +2 -2
- package/dist/lib/getSvgFromGraphicsObject.js +2 -2
- package/dist/lib/index.js +5 -5
- package/dist/lib/matcher.js +2 -2
- package/dist/lib/react.js +48 -35
- package/dist/lib/react.js.map +1 -1
- package/dist/lib/stackGraphics.js +3 -3
- package/package.json +2 -2
- package/dist/chunk-62J5EOWN.js.map +0 -1
- package/dist/chunk-ZV4UNKKF.js.map +0 -1
- /package/dist/{chunk-FDH2JDXE.js.map → chunk-LSB2D226.js.map} +0 -0
- /package/dist/{chunk-TVUC4YPH.js.map → chunk-NPOHLW76.js.map} +0 -0
- /package/dist/{chunk-CYAADASZ.js.map → chunk-RAMLGIXD.js.map} +0 -0
|
@@ -55,9 +55,7 @@ function getArrowGeometry(arrow) {
|
|
|
55
55
|
x: end.x - ux * headLength,
|
|
56
56
|
y: end.y - uy * headLength
|
|
57
57
|
};
|
|
58
|
-
const heads = [
|
|
59
|
-
createHead(end, endHeadBase, headWidth)
|
|
60
|
-
];
|
|
58
|
+
const heads = [createHead(end, endHeadBase, headWidth)];
|
|
61
59
|
let shaftStart = { ...start };
|
|
62
60
|
const shaftEnd = { ...endHeadBase };
|
|
63
61
|
if (arrow.doubleSided) {
|
|
@@ -105,4 +103,4 @@ export {
|
|
|
105
103
|
getArrowGeometry,
|
|
106
104
|
getArrowBoundingBox
|
|
107
105
|
};
|
|
108
|
-
//# sourceMappingURL=chunk-
|
|
106
|
+
//# sourceMappingURL=chunk-IOVKI3ZO.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../lib/arrowHelpers.ts"],"sourcesContent":["import type { Arrow } from \"./types\"\n\nconst DEFAULT_ARROW_SHAFT_WIDTH = 2\nconst DEFAULT_ARROW_HEAD_WIDTH = 12\nconst DEFAULT_ARROW_HEAD_LENGTH = 12\n\nexport type ArrowHeadGeometry = {\n tip: { x: number; y: number }\n base: { x: number; y: number }\n leftWing: { x: number; y: number }\n rightWing: { x: number; y: number }\n}\n\nexport type ArrowGeometry = {\n shaftStart: { x: number; y: number }\n shaftEnd: { x: number; y: number }\n heads: ArrowHeadGeometry[]\n shaftWidth: number\n headLength: number\n headWidth: number\n length: number\n}\n\nconst createDegenerateHead = (point: {\n x: number\n y: number\n}): ArrowHeadGeometry => ({\n tip: { ...point },\n base: { ...point },\n leftWing: { ...point },\n rightWing: { ...point },\n})\n\nconst createHead = (\n tip: { x: number; y: number },\n base: { x: number; y: number },\n headWidth: number,\n): ArrowHeadGeometry => {\n const dirX = tip.x - base.x\n const dirY = tip.y - base.y\n const length = Math.hypot(dirX, dirY)\n\n if (length === 0) {\n return createDegenerateHead(tip)\n }\n\n const dirUnitX = dirX / length\n const dirUnitY = dirY / length\n const perpX = -dirUnitY * (headWidth / 2)\n const perpY = dirUnitX * (headWidth / 2)\n\n return {\n tip: { ...tip },\n base: { ...base },\n leftWing: { x: base.x + perpX, y: base.y + perpY },\n rightWing: { x: base.x - perpX, y: base.y - perpY },\n }\n}\n\nexport function getArrowGeometry(arrow: Arrow): ArrowGeometry {\n const { start, end } = arrow\n\n const vx = end.x - start.x\n const vy = end.y - start.y\n const length = Math.hypot(vx, vy)\n\n const shaftWidth = DEFAULT_ARROW_SHAFT_WIDTH\n const headWidth = DEFAULT_ARROW_HEAD_WIDTH\n\n if (length === 0) {\n const heads = arrow.doubleSided\n ? [createDegenerateHead(start), createDegenerateHead(start)]\n : [createDegenerateHead(start)]\n return {\n shaftStart: { ...start },\n shaftEnd: { ...start },\n heads,\n shaftWidth,\n headLength: 0,\n headWidth,\n length,\n }\n }\n\n const ux = vx / length\n const uy = vy / length\n\n const baseHeadLength = Math.min(DEFAULT_ARROW_HEAD_LENGTH, length * 0.5)\n const desiredHeadLength = Math.max(baseHeadLength, shaftWidth * 2)\n const maxHeadLength = arrow.doubleSided ? length / 2 : length\n const headLength = Math.min(desiredHeadLength, maxHeadLength)\n\n const endHeadBase = {\n x: end.x - ux * headLength,\n y: end.y - uy * headLength,\n }\n\n const heads: ArrowHeadGeometry[] = [createHead(end, endHeadBase, headWidth)]\n\n let shaftStart = { ...start }\n const shaftEnd = { ...endHeadBase }\n\n if (arrow.doubleSided) {\n const startHeadBase = {\n x: start.x + ux * headLength,\n y: start.y + uy * headLength,\n }\n\n heads.unshift(createHead(start, startHeadBase, headWidth))\n shaftStart = startHeadBase\n }\n\n return {\n shaftStart,\n shaftEnd,\n heads,\n shaftWidth,\n headLength,\n headWidth,\n length,\n }\n}\n\nexport function getArrowBoundingBox(arrow: Arrow) {\n const geometry = getArrowGeometry(arrow)\n const points = [\n geometry.shaftStart,\n geometry.shaftEnd,\n ...geometry.heads.flatMap((head) => [\n head.tip,\n head.base,\n head.leftWing,\n head.rightWing,\n ]),\n ]\n\n return points.reduce(\n (acc, point) => ({\n minX: Math.min(acc.minX, point.x),\n maxX: Math.max(acc.maxX, point.x),\n minY: Math.min(acc.minY, point.y),\n maxY: Math.max(acc.maxY, point.y),\n }),\n { minX: Infinity, maxX: -Infinity, minY: Infinity, maxY: -Infinity },\n )\n}\n"],"mappings":"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","names":["heads"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
getArrowBoundingBox,
|
|
3
3
|
getArrowGeometry
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-IOVKI3ZO.js";
|
|
5
5
|
import {
|
|
6
6
|
FONT_SIZE_HEIGHT_RATIO,
|
|
7
7
|
FONT_SIZE_WIDTH_RATIO
|
|
@@ -510,4 +510,4 @@ function getSvgFromGraphicsObject(graphics, {
|
|
|
510
510
|
export {
|
|
511
511
|
getSvgFromGraphicsObject
|
|
512
512
|
};
|
|
513
|
-
//# sourceMappingURL=chunk-
|
|
513
|
+
//# sourceMappingURL=chunk-LSB2D226.js.map
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
} from "./chunk-WFPC5ZH3.js";
|
|
7
7
|
import {
|
|
8
8
|
getBounds
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-T5KLVINH.js";
|
|
10
10
|
|
|
11
11
|
// lib/stackGraphics.ts
|
|
12
12
|
function stackGraphicsHorizontally(graphicsList, opts = {}) {
|
|
@@ -118,4 +118,4 @@ export {
|
|
|
118
118
|
stackGraphicsVertically,
|
|
119
119
|
createGraphicsGrid
|
|
120
120
|
};
|
|
121
|
-
//# sourceMappingURL=chunk-
|
|
121
|
+
//# sourceMappingURL=chunk-NPOHLW76.js.map
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
} from "./chunk-NG6H63SM.js";
|
|
4
4
|
import {
|
|
5
5
|
getSvgFromGraphicsObject
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-LSB2D226.js";
|
|
7
7
|
|
|
8
8
|
// lib/index.ts
|
|
9
9
|
function getSvgFromLogString(logString) {
|
|
@@ -53,4 +53,4 @@ export {
|
|
|
53
53
|
getHtmlFromLogString,
|
|
54
54
|
getSvgsFromLogString
|
|
55
55
|
};
|
|
56
|
-
//# sourceMappingURL=chunk-
|
|
56
|
+
//# sourceMappingURL=chunk-RAMLGIXD.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
getArrowBoundingBox,
|
|
3
3
|
getArrowGeometry
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-IOVKI3ZO.js";
|
|
5
5
|
import {
|
|
6
6
|
FONT_SIZE_HEIGHT_RATIO,
|
|
7
7
|
FONT_SIZE_WIDTH_RATIO
|
|
@@ -351,4 +351,4 @@ export {
|
|
|
351
351
|
getBounds,
|
|
352
352
|
drawGraphicsToCanvas
|
|
353
353
|
};
|
|
354
|
-
//# sourceMappingURL=chunk-
|
|
354
|
+
//# sourceMappingURL=chunk-T5KLVINH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../lib/drawGraphicsToCanvas.ts","../site/components/InteractiveGraphics/defaultColors.ts"],"sourcesContent":["import {\n compose,\n scale,\n translate,\n applyToPoint,\n type Matrix,\n} from \"transformation-matrix\"\nimport type {\n GraphicsObject,\n Viewbox,\n CenterViewbox,\n TransformOptions,\n} from \"./types\"\nimport { defaultColors } from \"site/components/InteractiveGraphics/defaultColors\"\nimport { FONT_SIZE_WIDTH_RATIO, FONT_SIZE_HEIGHT_RATIO } from \"./constants\"\nimport { getArrowBoundingBox, getArrowGeometry } from \"./arrowHelpers\"\n\n/**\n * Computes a transformation matrix based on a provided viewbox\n * Handles both min/max style viewboxes and center/width/height style viewboxes\n */\nexport function computeTransformFromViewbox(\n viewbox: Viewbox | CenterViewbox,\n canvasWidth: number,\n canvasHeight: number,\n options: { padding?: number; yFlip?: boolean } = {},\n): Matrix {\n const padding = options.padding ?? 40\n const yFlip = options.yFlip ?? false\n\n // Convert CenterViewbox to Viewbox if needed\n let bounds: Viewbox\n if (\"center\" in viewbox) {\n const halfWidth = viewbox.width / 2\n const halfHeight = viewbox.height / 2\n bounds = {\n minX: viewbox.center.x - halfWidth,\n maxX: viewbox.center.x + halfWidth,\n minY: viewbox.center.y - halfHeight,\n maxY: viewbox.center.y + halfHeight,\n }\n } else {\n bounds = viewbox\n }\n\n const width = bounds.maxX - bounds.minX || 1\n const height = bounds.maxY - bounds.minY || 1\n\n const scale_factor = Math.min(\n (canvasWidth - 2 * padding) / width,\n (canvasHeight - 2 * padding) / height,\n )\n\n return compose(\n translate(canvasWidth / 2, canvasHeight / 2),\n scale(scale_factor, yFlip ? -scale_factor : scale_factor),\n translate(-(bounds.minX + width / 2), -(bounds.minY + height / 2)),\n )\n}\n\n/**\n * Computes bounds for a graphics object\n */\nexport function getBounds(graphics: GraphicsObject): Viewbox {\n const points = [\n ...(graphics.points || []),\n ...(graphics.lines || []).flatMap((line) => line.points),\n ...(graphics.rects || []).flatMap((rect) => {\n const halfWidth = rect.width / 2\n const halfHeight = rect.height / 2\n return [\n { x: rect.center.x - halfWidth, y: rect.center.y - halfHeight },\n { x: rect.center.x + halfWidth, y: rect.center.y - halfHeight },\n { x: rect.center.x - halfWidth, y: rect.center.y + halfHeight },\n { x: rect.center.x + halfWidth, y: rect.center.y + halfHeight },\n ]\n }),\n ...(graphics.circles || []).flatMap((circle) => [\n { x: circle.center.x - circle.radius, y: circle.center.y }, // left\n { x: circle.center.x + circle.radius, y: circle.center.y }, // right\n { x: circle.center.x, y: circle.center.y - circle.radius }, // top\n { x: circle.center.x, y: circle.center.y + circle.radius }, // bottom\n ]),\n ...(graphics.arrows || []).flatMap((arrow) => {\n const bounds = getArrowBoundingBox(arrow)\n return [\n { x: bounds.minX, y: bounds.minY },\n { x: bounds.maxX, y: bounds.maxY },\n ]\n }),\n ...(graphics.texts || []).flatMap((text) => {\n const fontSize = text.fontSize ?? 12\n const width = text.text.length * fontSize * FONT_SIZE_WIDTH_RATIO\n const height = fontSize * FONT_SIZE_HEIGHT_RATIO\n const anchor = text.anchorSide ?? \"center\"\n const offsetMap: Record<string, { dx: number; dy: number }> = {\n top_left: { dx: 0, dy: 0 },\n top_center: { dx: -width / 2, dy: 0 },\n top_right: { dx: -width, dy: 0 },\n center_left: { dx: 0, dy: -height / 2 },\n center: { dx: -width / 2, dy: -height / 2 },\n center_right: { dx: -width, dy: -height / 2 },\n bottom_left: { dx: 0, dy: -height },\n bottom_center: { dx: -width / 2, dy: -height },\n bottom_right: { dx: -width, dy: -height },\n }\n const { dx, dy } = offsetMap[anchor]\n const x0 = text.x + dx\n const y0 = text.y + dy\n return [\n { x: x0, y: y0 },\n { x: x0 + width, y: y0 + height },\n ]\n }),\n ]\n\n if (points.length === 0) {\n return { minX: -1, maxX: 1, minY: -1, maxY: 1 }\n }\n\n return points.reduce(\n (bounds, point) => ({\n minX: Math.min(bounds.minX, point.x),\n maxX: Math.max(bounds.maxX, point.x),\n minY: Math.min(bounds.minY, point.y),\n maxY: Math.max(bounds.maxY, point.y),\n }),\n { minX: Infinity, maxX: -Infinity, minY: Infinity, maxY: -Infinity },\n )\n}\n\n/**\n * Draws a graphics object onto a canvas or context\n * @param graphics - The graphics object to draw\n * @param target - The canvas element or 2D context to draw on\n * @param options - Options for controlling the transform and rendering\n */\nexport function drawGraphicsToCanvas(\n graphics: GraphicsObject,\n target: HTMLCanvasElement | CanvasRenderingContext2D,\n options: TransformOptions = {},\n): void {\n // Get the context\n const ctx =\n target instanceof HTMLCanvasElement ? target.getContext(\"2d\") : target\n\n if (!ctx) {\n throw new Error(\"Could not get 2D context from canvas\")\n }\n\n // Get canvas dimensions\n const canvasWidth =\n target instanceof HTMLCanvasElement ? target.width : target.canvas.width\n\n const canvasHeight =\n target instanceof HTMLCanvasElement ? target.height : target.canvas.height\n\n // Get or compute the transform matrix\n let matrix: Matrix\n\n if (options.transform) {\n matrix = options.transform\n } else if (options.viewbox) {\n matrix = computeTransformFromViewbox(\n options.viewbox,\n canvasWidth,\n canvasHeight,\n {\n padding: options.padding,\n yFlip: options.yFlip,\n },\n )\n } else {\n // Auto-compute bounds and transform if not provided\n const bounds = getBounds(graphics)\n const yFlip = graphics.coordinateSystem === \"cartesian\"\n matrix = computeTransformFromViewbox(bounds, canvasWidth, canvasHeight, {\n padding: options.padding ?? 40,\n yFlip,\n })\n }\n\n // Clear the canvas\n ctx.clearRect(0, 0, canvasWidth, canvasHeight)\n\n // Save the current transform state\n ctx.save()\n\n // Draw the graphics elements\n // Draw rectangles\n if (graphics.rects && graphics.rects.length > 0) {\n graphics.rects.forEach((rect) => {\n const halfWidth = rect.width / 2\n const halfHeight = rect.height / 2\n\n const topLeft = applyToPoint(matrix, {\n x: rect.center.x - halfWidth,\n y: rect.center.y - halfHeight,\n })\n\n const bottomRight = applyToPoint(matrix, {\n x: rect.center.x + halfWidth,\n y: rect.center.y + halfHeight,\n })\n\n const width = Math.abs(bottomRight.x - topLeft.x)\n const height = Math.abs(bottomRight.y - topLeft.y)\n\n ctx.beginPath()\n ctx.rect(\n Math.min(topLeft.x, bottomRight.x),\n Math.min(topLeft.y, bottomRight.y),\n width,\n height,\n )\n\n if (rect.fill) {\n ctx.fillStyle = rect.fill\n ctx.fill()\n }\n\n if (rect.stroke) {\n ctx.strokeStyle = rect.stroke\n ctx.stroke()\n }\n })\n }\n\n // Draw circles\n if (graphics.circles && graphics.circles.length > 0) {\n graphics.circles.forEach((circle) => {\n const projected = applyToPoint(matrix, circle.center)\n const scaledRadius = circle.radius * Math.abs(matrix.a) // Use matrix scale factor\n\n ctx.beginPath()\n ctx.arc(projected.x, projected.y, scaledRadius, 0, 2 * Math.PI)\n\n if (circle.fill) {\n ctx.fillStyle = circle.fill\n ctx.fill()\n }\n\n if (circle.stroke) {\n ctx.strokeStyle = circle.stroke ?? \"transparent\"\n ctx.stroke()\n }\n })\n }\n\n if (graphics.arrows && graphics.arrows.length > 0) {\n graphics.arrows.forEach((arrow, arrowIndex) => {\n const geometry = getArrowGeometry(arrow)\n const shaftStart = applyToPoint(matrix, geometry.shaftStart)\n const shaftEnd = applyToPoint(matrix, geometry.shaftEnd)\n\n const color =\n arrow.color || defaultColors[arrowIndex % defaultColors.length]\n const scaleFactor = Math.hypot(matrix.a, matrix.b)\n\n ctx.strokeStyle = color\n ctx.fillStyle = color\n ctx.lineWidth = geometry.shaftWidth * (scaleFactor || 1)\n ctx.lineCap = \"round\"\n ctx.setLineDash([])\n\n ctx.beginPath()\n ctx.moveTo(shaftStart.x, shaftStart.y)\n ctx.lineTo(shaftEnd.x, shaftEnd.y)\n ctx.stroke()\n\n geometry.heads.forEach((head) => {\n const tip = applyToPoint(matrix, head.tip)\n const leftWing = applyToPoint(matrix, head.leftWing)\n const rightWing = applyToPoint(matrix, head.rightWing)\n\n ctx.beginPath()\n ctx.moveTo(tip.x, tip.y)\n ctx.lineTo(leftWing.x, leftWing.y)\n ctx.lineTo(rightWing.x, rightWing.y)\n ctx.closePath()\n ctx.fill()\n })\n })\n }\n\n // Draw lines\n if (graphics.lines && graphics.lines.length > 0) {\n graphics.lines.forEach((line, lineIndex) => {\n if (line.points.length === 0) return\n\n ctx.beginPath()\n\n const firstPoint = applyToPoint(matrix, line.points[0])\n ctx.moveTo(firstPoint.x, firstPoint.y)\n\n for (let i = 1; i < line.points.length; i++) {\n const projected = applyToPoint(matrix, line.points[i])\n ctx.lineTo(projected.x, projected.y)\n }\n\n ctx.strokeStyle =\n line.strokeColor || defaultColors[lineIndex % defaultColors.length]\n if (line.strokeWidth) {\n ctx.lineWidth = line.strokeWidth * matrix.a\n } else {\n ctx.lineWidth = 2\n }\n ctx.lineCap = \"round\"\n\n if (line.strokeDash) {\n if (typeof line.strokeDash === \"string\") {\n // Convert string to array of numbers, handling single values properly\n let dashArray: number[]\n\n // If the string contains commas, split and convert to numbers\n if (line.strokeDash.includes(\",\")) {\n dashArray = line.strokeDash\n .split(\",\")\n .map((s) => parseFloat(s.trim()))\n .filter((n) => !Number.isNaN(n))\n } else {\n // Handle single value case\n const value = parseFloat(line.strokeDash.trim())\n dashArray = !Number.isNaN(value) ? [value] : []\n }\n\n // Scale dash values based on transform matrix\n ctx.setLineDash(dashArray)\n } else {\n // Handle array format\n ctx.setLineDash(line.strokeDash.map((n) => n * Math.abs(matrix.a)))\n }\n } else {\n ctx.setLineDash([])\n }\n\n ctx.stroke()\n })\n }\n\n // Draw points\n if (graphics.points && graphics.points.length > 0) {\n graphics.points.forEach((point, pointIndex) => {\n const projected = applyToPoint(matrix, point)\n\n // Draw point as a small circle\n ctx.beginPath()\n ctx.arc(projected.x, projected.y, 3, 0, 2 * Math.PI)\n ctx.fillStyle =\n point.color || defaultColors[pointIndex % defaultColors.length]\n ctx.fill()\n\n // Draw label if present and labels aren't disabled\n if (point.label && !options.disableLabels) {\n ctx.fillStyle = point.color || \"black\"\n ctx.font = \"12px sans-serif\"\n ctx.fillText(point.label, projected.x + 5, projected.y - 5)\n }\n })\n }\n\n // Draw texts\n if (graphics.texts && graphics.texts.length > 0) {\n graphics.texts.forEach((text) => {\n const projected = applyToPoint(matrix, { x: text.x, y: text.y })\n ctx.fillStyle = text.color || \"black\"\n ctx.font = `${(text.fontSize ?? 12) * Math.abs(matrix.a)}px sans-serif`\n\n const anchor = text.anchorSide ?? \"center\"\n const alignMap: Record<string, CanvasTextAlign> = {\n top_left: \"left\",\n center_left: \"left\",\n bottom_left: \"left\",\n top_center: \"center\",\n center: \"center\",\n bottom_center: \"center\",\n top_right: \"right\",\n center_right: \"right\",\n bottom_right: \"right\",\n }\n const baselineMap: Record<string, CanvasTextBaseline> = {\n top_left: \"top\",\n top_center: \"top\",\n top_right: \"top\",\n center_left: \"middle\",\n center: \"middle\",\n center_right: \"middle\",\n bottom_left: \"bottom\",\n bottom_center: \"bottom\",\n bottom_right: \"bottom\",\n }\n ctx.textAlign = alignMap[anchor]\n ctx.textBaseline = baselineMap[anchor]\n\n ctx.fillText(text.text, projected.x, projected.y)\n })\n }\n\n // Restore the original transform\n ctx.restore()\n}\n","// These are default colors if no color is provided\n// colors are made based on the index of the item in the array\n\nexport const defaultColors = [\n \"rgba(239, 68, 68, 0.8)\", // red-300\n \"rgba(249, 115, 22, 0.8)\", // orange-300\n \"rgba(245, 158, 11, 0.8)\", // amber-300\n \"rgba(234, 179, 8, 0.8)\", // yellow-300\n \"rgba(132, 204, 22, 0.8)\", // lime-300\n \"rgba(34, 197, 94, 0.8)\", // green-300\n \"rgba(16, 185, 129, 0.8)\", // emerald-300\n \"rgba(20, 184, 166, 0.8)\", // teal-300\n \"rgba(6, 182, 212, 0.8)\", // cyan-300\n \"rgba(14, 165, 233, 0.8)\", // sky-300\n \"rgba(59, 130, 246, 0.8)\", // blue-300\n \"rgba(99, 102, 241, 0.8)\", // indigo-300\n \"rgba(139, 92, 246, 0.8)\", // violet-300\n \"rgba(168, 85, 247, 0.8)\", // purple-300\n \"rgba(217, 70, 239, 0.8)\", // fuchsia-300\n \"rgba(236, 72, 153, 0.8)\", // pink-300\n \"rgba(249, 168, 212, 0.8)\", // rose-300\n \"rgba(161, 161, 170, 0.8)\", // zinc-300\n]\n"],"mappings":"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","names":[]}
|
package/dist/cli/cli.js
CHANGED
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
import {
|
|
3
3
|
getHtmlFromLogString,
|
|
4
4
|
getSvgsFromLogString
|
|
5
|
-
} from "../chunk-
|
|
6
|
-
import "../chunk-
|
|
5
|
+
} from "../chunk-RAMLGIXD.js";
|
|
6
|
+
import "../chunk-NPOHLW76.js";
|
|
7
7
|
import "../chunk-B2WYIXWQ.js";
|
|
8
8
|
import "../chunk-WFPC5ZH3.js";
|
|
9
|
-
import "../chunk-
|
|
9
|
+
import "../chunk-T5KLVINH.js";
|
|
10
10
|
import {
|
|
11
11
|
getGraphicsObjectsFromLogString
|
|
12
12
|
} from "../chunk-NG6H63SM.js";
|
|
13
|
-
import "../chunk-
|
|
14
|
-
import "../chunk-
|
|
13
|
+
import "../chunk-LSB2D226.js";
|
|
14
|
+
import "../chunk-IOVKI3ZO.js";
|
|
15
15
|
import "../chunk-ZGI74PYD.js";
|
|
16
16
|
|
|
17
17
|
// cli/cli.ts
|
package/dist/lib/arrowHelpers.js
CHANGED
|
@@ -2,8 +2,8 @@ import {
|
|
|
2
2
|
computeTransformFromViewbox,
|
|
3
3
|
drawGraphicsToCanvas,
|
|
4
4
|
getBounds
|
|
5
|
-
} from "../chunk-
|
|
6
|
-
import "../chunk-
|
|
5
|
+
} from "../chunk-T5KLVINH.js";
|
|
6
|
+
import "../chunk-IOVKI3ZO.js";
|
|
7
7
|
import "../chunk-ZGI74PYD.js";
|
|
8
8
|
export {
|
|
9
9
|
computeTransformFromViewbox,
|
package/dist/lib/index.js
CHANGED
|
@@ -2,12 +2,12 @@ import {
|
|
|
2
2
|
getHtmlFromLogString,
|
|
3
3
|
getSvgFromLogString,
|
|
4
4
|
getSvgsFromLogString
|
|
5
|
-
} from "../chunk-
|
|
5
|
+
} from "../chunk-RAMLGIXD.js";
|
|
6
6
|
import {
|
|
7
7
|
createGraphicsGrid,
|
|
8
8
|
stackGraphicsHorizontally,
|
|
9
9
|
stackGraphicsVertically
|
|
10
|
-
} from "../chunk-
|
|
10
|
+
} from "../chunk-NPOHLW76.js";
|
|
11
11
|
import {
|
|
12
12
|
mergeGraphics
|
|
13
13
|
} from "../chunk-B2WYIXWQ.js";
|
|
@@ -18,14 +18,14 @@ import {
|
|
|
18
18
|
computeTransformFromViewbox,
|
|
19
19
|
drawGraphicsToCanvas,
|
|
20
20
|
getBounds
|
|
21
|
-
} from "../chunk-
|
|
21
|
+
} from "../chunk-T5KLVINH.js";
|
|
22
22
|
import {
|
|
23
23
|
getGraphicsObjectsFromLogString
|
|
24
24
|
} from "../chunk-NG6H63SM.js";
|
|
25
25
|
import {
|
|
26
26
|
getSvgFromGraphicsObject
|
|
27
|
-
} from "../chunk-
|
|
28
|
-
import "../chunk-
|
|
27
|
+
} from "../chunk-LSB2D226.js";
|
|
28
|
+
import "../chunk-IOVKI3ZO.js";
|
|
29
29
|
import {
|
|
30
30
|
FONT_SIZE_HEIGHT_RATIO,
|
|
31
31
|
FONT_SIZE_WIDTH_RATIO
|
package/dist/lib/matcher.js
CHANGED
package/dist/lib/react.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import "../chunk-
|
|
2
|
-
import "../chunk-
|
|
1
|
+
import "../chunk-RAMLGIXD.js";
|
|
2
|
+
import "../chunk-NPOHLW76.js";
|
|
3
3
|
import "../chunk-B2WYIXWQ.js";
|
|
4
4
|
import "../chunk-WFPC5ZH3.js";
|
|
5
5
|
import {
|
|
6
6
|
defaultColors,
|
|
7
7
|
drawGraphicsToCanvas,
|
|
8
8
|
getBounds
|
|
9
|
-
} from "../chunk-
|
|
9
|
+
} from "../chunk-T5KLVINH.js";
|
|
10
10
|
import "../chunk-NG6H63SM.js";
|
|
11
|
-
import "../chunk-
|
|
11
|
+
import "../chunk-LSB2D226.js";
|
|
12
12
|
import {
|
|
13
13
|
getArrowBoundingBox,
|
|
14
14
|
getArrowGeometry
|
|
15
|
-
} from "../chunk-
|
|
15
|
+
} from "../chunk-IOVKI3ZO.js";
|
|
16
16
|
import "../chunk-ZGI74PYD.js";
|
|
17
17
|
|
|
18
18
|
// site/components/InteractiveGraphics/InteractiveGraphics.tsx
|
|
@@ -30,7 +30,7 @@ import useResizeObserver from "@react-hook/resize-observer";
|
|
|
30
30
|
|
|
31
31
|
// site/components/InteractiveGraphics/Line.tsx
|
|
32
32
|
import { applyToPoint } from "transformation-matrix";
|
|
33
|
-
import { useState } from "react";
|
|
33
|
+
import { useRef, useState } from "react";
|
|
34
34
|
|
|
35
35
|
// site/components/InteractiveGraphics/Tooltip.tsx
|
|
36
36
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -112,6 +112,7 @@ var Line = ({
|
|
|
112
112
|
} = line;
|
|
113
113
|
const [isHovered, setIsHovered] = useState(false);
|
|
114
114
|
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
|
|
115
|
+
const svgRef = useRef(null);
|
|
115
116
|
const screenPoints = points.map((p) => applyToPoint(realToScreen, p));
|
|
116
117
|
const xs = screenPoints.map((p) => p.x);
|
|
117
118
|
const ys = screenPoints.map((p) => p.y);
|
|
@@ -130,7 +131,8 @@ var Line = ({
|
|
|
130
131
|
y: p.y - svgTop
|
|
131
132
|
}));
|
|
132
133
|
const handleMouseMove = (e) => {
|
|
133
|
-
const rect = e.currentTarget.getBoundingClientRect();
|
|
134
|
+
const rect = svgRef.current?.getBoundingClientRect() ?? e.currentTarget.ownerSVGElement?.getBoundingClientRect();
|
|
135
|
+
if (!rect) return;
|
|
134
136
|
const localX = e.clientX - rect.left;
|
|
135
137
|
const localY = e.clientY - rect.top;
|
|
136
138
|
const mouseX = localX + svgLeft;
|
|
@@ -157,21 +159,34 @@ var Line = ({
|
|
|
157
159
|
return /* @__PURE__ */ jsxs(
|
|
158
160
|
"svg",
|
|
159
161
|
{
|
|
162
|
+
ref: svgRef,
|
|
160
163
|
style: {
|
|
161
164
|
position: "absolute",
|
|
162
165
|
top: svgTop,
|
|
163
166
|
left: svgLeft,
|
|
164
167
|
width: svgWidth,
|
|
165
|
-
height: svgHeight
|
|
168
|
+
height: svgHeight,
|
|
169
|
+
pointerEvents: "none"
|
|
166
170
|
},
|
|
167
|
-
onMouseMove: handleMouseMove,
|
|
168
|
-
onMouseLeave: () => setIsHovered(false),
|
|
169
|
-
onClick: isHovered ? () => onObjectClicked?.({
|
|
170
|
-
type: "line",
|
|
171
|
-
index,
|
|
172
|
-
object: line
|
|
173
|
-
}) : void 0,
|
|
174
171
|
children: [
|
|
172
|
+
/* @__PURE__ */ jsx2(
|
|
173
|
+
"polyline",
|
|
174
|
+
{
|
|
175
|
+
points: localPoints.map((p) => `${p.x},${p.y}`).join(" "),
|
|
176
|
+
stroke: "transparent",
|
|
177
|
+
fill: "none",
|
|
178
|
+
strokeWidth: strokeWidth * realToScreen.a + hoverThreshold * 2,
|
|
179
|
+
strokeLinecap: "round",
|
|
180
|
+
pointerEvents: "stroke",
|
|
181
|
+
onMouseMove: handleMouseMove,
|
|
182
|
+
onMouseLeave: () => setIsHovered(false),
|
|
183
|
+
onClick: isHovered ? () => onObjectClicked?.({
|
|
184
|
+
type: "line",
|
|
185
|
+
index,
|
|
186
|
+
object: line
|
|
187
|
+
}) : void 0
|
|
188
|
+
}
|
|
189
|
+
),
|
|
175
190
|
/* @__PURE__ */ jsx2(
|
|
176
191
|
"polyline",
|
|
177
192
|
{
|
|
@@ -180,7 +195,8 @@ var Line = ({
|
|
|
180
195
|
fill: "none",
|
|
181
196
|
strokeWidth: strokeWidth * realToScreen.a,
|
|
182
197
|
strokeDasharray: !strokeDash ? void 0 : typeof strokeDash === "string" ? strokeDash : `${strokeDash[0] * realToScreen.a}, ${strokeDash[1] * realToScreen.a}`,
|
|
183
|
-
strokeLinecap: "round"
|
|
198
|
+
strokeLinecap: "round",
|
|
199
|
+
pointerEvents: "none"
|
|
184
200
|
}
|
|
185
201
|
),
|
|
186
202
|
isHovered && line.label && /* @__PURE__ */ jsx2(
|
|
@@ -757,7 +773,7 @@ var useFilterArrows = (isPointOnScreen, doesLineIntersectViewport) => {
|
|
|
757
773
|
};
|
|
758
774
|
|
|
759
775
|
// site/components/DimensionOverlay.tsx
|
|
760
|
-
import { useEffect, useRef, useState as useState6 } from "react";
|
|
776
|
+
import { useEffect, useRef as useRef2, useState as useState6 } from "react";
|
|
761
777
|
import { applyToPoint as applyToPoint10, identity, inverse } from "transformation-matrix";
|
|
762
778
|
import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
763
779
|
var DimensionOverlay = ({ children, transform }) => {
|
|
@@ -766,8 +782,8 @@ var DimensionOverlay = ({ children, transform }) => {
|
|
|
766
782
|
const [dimensionToolStretching, setDimensionToolStretching] = useState6(false);
|
|
767
783
|
const [dStart, setDStart] = useState6({ x: 0, y: 0 });
|
|
768
784
|
const [dEnd, setDEnd] = useState6({ x: 0, y: 0 });
|
|
769
|
-
const mousePosRef =
|
|
770
|
-
const containerRef =
|
|
785
|
+
const mousePosRef = useRef2({ x: 0, y: 0 });
|
|
786
|
+
const containerRef = useRef2(null);
|
|
771
787
|
const container = containerRef.current;
|
|
772
788
|
const containerBounds = container?.getBoundingClientRect();
|
|
773
789
|
const bindKeys = () => {
|
|
@@ -1041,7 +1057,7 @@ function getMaxStep(graphics) {
|
|
|
1041
1057
|
}
|
|
1042
1058
|
|
|
1043
1059
|
// site/components/InteractiveGraphics/ContextMenu.tsx
|
|
1044
|
-
import { useEffect as useEffect2, useRef as
|
|
1060
|
+
import { useEffect as useEffect2, useRef as useRef3 } from "react";
|
|
1045
1061
|
import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1046
1062
|
var ContextMenu = ({
|
|
1047
1063
|
x,
|
|
@@ -1053,7 +1069,7 @@ var ContextMenu = ({
|
|
|
1053
1069
|
onClearMarks,
|
|
1054
1070
|
onClose
|
|
1055
1071
|
}) => {
|
|
1056
|
-
const menuRef =
|
|
1072
|
+
const menuRef = useRef3(null);
|
|
1057
1073
|
useEffect2(() => {
|
|
1058
1074
|
const handleClickOutside = (event) => {
|
|
1059
1075
|
if (menuRef.current && !menuRef.current.contains(event.target)) {
|
|
@@ -1238,10 +1254,7 @@ var InteractiveGraphics = ({
|
|
|
1238
1254
|
graphicsBoundsWithPadding.maxY - graphicsBoundsWithPadding.minY,
|
|
1239
1255
|
1
|
|
1240
1256
|
);
|
|
1241
|
-
const scaleFactor = Math.min(
|
|
1242
|
-
size.width / width,
|
|
1243
|
-
size.height / height
|
|
1244
|
-
);
|
|
1257
|
+
const scaleFactor = Math.min(size.width / width, size.height / height);
|
|
1245
1258
|
return compose(
|
|
1246
1259
|
translate(size.width / 2, size.height / 2),
|
|
1247
1260
|
scale(scaleFactor, -scaleFactor),
|
|
@@ -1637,7 +1650,7 @@ var InteractiveGraphics = ({
|
|
|
1637
1650
|
};
|
|
1638
1651
|
|
|
1639
1652
|
// site/components/InteractiveGraphicsCanvas.tsx
|
|
1640
|
-
import { useRef as
|
|
1653
|
+
import { useRef as useRef4, useEffect as useEffect4, useState as useState8 } from "react";
|
|
1641
1654
|
import useMouseMatrixTransform2 from "use-mouse-matrix-transform";
|
|
1642
1655
|
import { compose as compose2, scale as scale2, translate as translate2 } from "transformation-matrix";
|
|
1643
1656
|
import useResizeObserver2 from "@react-hook/resize-observer";
|
|
@@ -1695,8 +1708,8 @@ function InteractiveGraphicsCanvas({
|
|
|
1695
1708
|
height = 500,
|
|
1696
1709
|
width = "100%"
|
|
1697
1710
|
}) {
|
|
1698
|
-
const canvasRef =
|
|
1699
|
-
const containerRef =
|
|
1711
|
+
const canvasRef = useRef4(null);
|
|
1712
|
+
const containerRef = useRef4(null);
|
|
1700
1713
|
const [size, setSize] = useState8({ width: 600, height: 600 });
|
|
1701
1714
|
const [activeStep, setActiveStep] = useState8(null);
|
|
1702
1715
|
const [showLabels, setShowLabels] = useState8(showLabelsByDefault);
|
|
@@ -1894,7 +1907,7 @@ function InteractiveGraphicsCanvas({
|
|
|
1894
1907
|
}
|
|
1895
1908
|
|
|
1896
1909
|
// site/components/CanvasGraphics/CanvasGraphics.tsx
|
|
1897
|
-
import
|
|
1910
|
+
import React2, { useRef as useRef5, useEffect as useEffect5, useState as useState9 } from "react";
|
|
1898
1911
|
import useMouseMatrixTransform3 from "use-mouse-matrix-transform";
|
|
1899
1912
|
import { compose as compose3, scale as scale3, translate as translate3 } from "transformation-matrix";
|
|
1900
1913
|
import useResizeObserver3 from "@react-hook/resize-observer";
|
|
@@ -1931,11 +1944,11 @@ var CanvasGraphics = ({
|
|
|
1931
1944
|
disableLabels = false,
|
|
1932
1945
|
initialTransform
|
|
1933
1946
|
}) => {
|
|
1934
|
-
const canvasRef =
|
|
1935
|
-
const containerRef =
|
|
1947
|
+
const canvasRef = useRef5(null);
|
|
1948
|
+
const containerRef = useRef5(null);
|
|
1936
1949
|
const [size, setSize] = useState9({ width, height });
|
|
1937
1950
|
const [currentTransform, setCurrentTransform] = useState9(null);
|
|
1938
|
-
const graphicsBoundsWithPadding =
|
|
1951
|
+
const graphicsBoundsWithPadding = React2.useMemo(() => {
|
|
1939
1952
|
const bounds = getBounds(graphics);
|
|
1940
1953
|
const bWidth = bounds.maxX - bounds.minX;
|
|
1941
1954
|
const bHeight = bounds.maxY - bounds.minY;
|
|
@@ -1946,7 +1959,7 @@ var CanvasGraphics = ({
|
|
|
1946
1959
|
maxY: bounds.maxY + bHeight / 10
|
|
1947
1960
|
};
|
|
1948
1961
|
}, [graphics]);
|
|
1949
|
-
const computedInitialTransform =
|
|
1962
|
+
const computedInitialTransform = React2.useMemo(() => {
|
|
1950
1963
|
if (initialTransform) return initialTransform;
|
|
1951
1964
|
const yFlip = graphics.coordinateSystem === "cartesian";
|
|
1952
1965
|
return compose3(
|
|
@@ -1970,7 +1983,7 @@ var CanvasGraphics = ({
|
|
|
1970
1983
|
)
|
|
1971
1984
|
);
|
|
1972
1985
|
}, [graphics, graphicsBoundsWithPadding, initialTransform, size]);
|
|
1973
|
-
const handleTransformChange =
|
|
1986
|
+
const handleTransformChange = React2.useCallback((transform) => {
|
|
1974
1987
|
setCurrentTransform(transform);
|
|
1975
1988
|
}, []);
|
|
1976
1989
|
useResizeObserver3(containerRef, (entry) => {
|
|
@@ -1979,7 +1992,7 @@ var CanvasGraphics = ({
|
|
|
1979
1992
|
height: entry.contentRect.height
|
|
1980
1993
|
});
|
|
1981
1994
|
});
|
|
1982
|
-
const drawCanvas =
|
|
1995
|
+
const drawCanvas = React2.useCallback(() => {
|
|
1983
1996
|
if (!canvasRef.current || !currentTransform) return;
|
|
1984
1997
|
canvasRef.current.width = size.width;
|
|
1985
1998
|
canvasRef.current.height = size.height;
|