Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | import { DrawingGraphModes } from "graph2d-react";
/**
* Full drawing-tool palette (same groups as GraphEditorStandalone / Storybook).
* Interactive-dot modes are separate — they live on their own chips in the editor.
*/
export const DRAWING_TOOL_GROUPS = [
{
group: "Points",
groupHint: "Markers and labels on the plane.",
tools: [
{ id: DrawingGraphModes.DOT, label: "Dot", icon: "●" },
{ id: DrawingGraphModes.LABEL_DOT, label: "Label Dot", icon: "L" },
{ id: DrawingGraphModes.CANVAS_TEXT, label: "Text", icon: "T" },
{ id: DrawingGraphModes.OPEN_DOT, label: "Open Dot", icon: "○" },
{ id: DrawingGraphModes.POINT_DOT, label: "Point Value", icon: "#" },
],
},
{
group: "Lines",
groupHint: "Two clicks define start and direction (where applicable).",
tools: [
{ id: DrawingGraphModes.LINE, label: "Line", icon: "∕" },
{ id: DrawingGraphModes.RAY, label: "Ray", icon: "→" },
{ id: DrawingGraphModes.LINE_SEGMENT, label: "Segment", icon: "—" },
{ id: DrawingGraphModes.VECTOR, label: "Vector", icon: "⇀" },
{ id: DrawingGraphModes.DOUBLE_ARROW_LINE, label: "Double Arrow", icon: "↔" },
],
},
{
group: "Curves",
groupHint: "Place control points; tool defines the curve family.",
tools: [
{ id: DrawingGraphModes.PARABOLA, label: "Parabola", icon: "⌒" },
{ id: DrawingGraphModes.HORIZ_PARABOLA, label: "Horiz. Parabola", icon: "⌓" },
{ id: DrawingGraphModes.HALF_PARABOLA, label: "Half Parabola", icon: "◠" },
{ id: DrawingGraphModes.CUBIC, label: "Cubic", icon: "∿" },
{ id: DrawingGraphModes.SQUARE_ROOT, label: "Square Root", icon: "√" },
{ id: DrawingGraphModes.CUBE_ROOT, label: "Cube Root", icon: "∛" },
],
},
{
group: "Shapes",
groupHint: "Outline only — bounding box or vertices, no fill.",
tools: [
{ id: DrawingGraphModes.CIRCLE, label: "Circle", icon: "○" },
{ id: DrawingGraphModes.ELLIPSE, label: "Ellipse", icon: "⬭" },
{ id: DrawingGraphModes.RECTANGLE, label: "Rectangle", icon: "▭" },
{ id: DrawingGraphModes.DIAMOND, label: "Diamond", icon: "◇" },
{ id: DrawingGraphModes.HEXAGON, label: "Hexagon", icon: "⬡" },
{ id: DrawingGraphModes.TRIANGLE, label: "Triangle", icon: "△" },
{ id: DrawingGraphModes.VERT_HYPERBOLA, label: "Vert. Hyperbola", icon: "⧓" },
{ id: DrawingGraphModes.HORIZ_HYPERBOLA, label: "Horiz. Hyperbola", icon: "⧒" },
],
},
{
group: "Shaded shapes",
groupHint: "Same gestures as outline shapes; interior is shaded.",
tools: [
{ id: DrawingGraphModes.SHADED_CIRCLE, label: "Shaded circle", icon: "●" },
{ id: DrawingGraphModes.SHADED_ELLIPSE, label: "Shaded ellipse", icon: "⬬" },
{ id: DrawingGraphModes.SHADED_RECTANGLE, label: "Shaded rectangle", icon: "▬" },
{ id: DrawingGraphModes.SHADED_DIAMOND, label: "Shaded diamond", icon: "◆" },
{ id: DrawingGraphModes.SHADED_HEXAGON, label: "Shaded hexagon", icon: "⬢" },
{ id: DrawingGraphModes.SHADED_TRIANGLE, label: "Shaded triangle", icon: "▽" },
],
},
{
group: "Functions",
groupHint: "Standard graphs with tool-specific control points.",
tools: [
{ id: DrawingGraphModes.ABS_VALUE, label: "Absolute Value", icon: "|x|" },
{ id: DrawingGraphModes.LINEAR_RATIONAL, label: "Rational", icon: "1/x" },
{ id: DrawingGraphModes.EXPONENTIAL, label: "Exponential", icon: "eˣ" },
{ id: DrawingGraphModes.LOG, label: "Logarithm", icon: "ln" },
{ id: DrawingGraphModes.EXPONENTIAL_SHIFTED, label: "Shifted Exp", icon: "eˣ+c" },
{ id: DrawingGraphModes.LOG_SHIFTED, label: "Shifted Log", icon: "ln+c" },
{ id: DrawingGraphModes.COSINE, label: "Cosine", icon: "cos" },
{ id: DrawingGraphModes.SINE, label: "Sine", icon: "sin" },
],
},
{
group: "Inequalities",
groupHint: "Linear: line + third point picks the shaded half-plane.",
tools: [
{ id: DrawingGraphModes.LINEAR_INEQ, label: "Linear (Solid)", icon: "≤" },
{ id: DrawingGraphModes.LINEAR_STRICT_INEQ, label: "Linear (Dashed)", icon: "<" },
{ id: DrawingGraphModes.QUADRATIC_INEQ, label: "Quadratic (Solid)", icon: "≤²" },
{ id: DrawingGraphModes.QUADRATIC_STRICT_INEQ, label: "Quadratic (Dashed)", icon: "<²" },
{ id: DrawingGraphModes.ABS_INEQ, label: "Absolute (Solid)", icon: "|≤|" },
{ id: DrawingGraphModes.ABS_STRICT_INEQ, label: "Absolute (Dashed)", icon: "|<|" },
],
},
];
export const INTERACTIVE_AUTHOR_MODES = [
{
id: DrawingGraphModes.INTERACTIVE_DOT,
label: "Place dots",
description: "Click empty canvas to place inactive dots. Drag to move; drag off to delete.",
},
{
id: DrawingGraphModes.MARK_CORRECT_INTERACTIVE_DOT,
label: "Mark correct",
description: "Click dots to mark the answer key (dashed green when active).",
},
];
export function isInteractiveAuthorMode(mode) {
return mode === DrawingGraphModes.INTERACTIVE_DOT || mode === DrawingGraphModes.MARK_CORRECT_INTERACTIVE_DOT;
}
export function findDrawingToolLabel(mode) {
for (const group of DRAWING_TOOL_GROUPS) {
const tool = group.tools.find((t) => t.id === mode);
if (tool) return tool.label;
}
return null;
}
|