feat: upgrade toolbox for v1.2.1
This commit is contained in:
@@ -185,11 +185,18 @@ button { color: inherit; }
|
||||
.match-history-item.result-loss { border-left-color: #c05245; }.match-history-item.result-draw { border-left-color: #9a8455; }
|
||||
.match-history-item > div, .match-history-item b, .match-history-item span, .match-history-item strong { display: block; }
|
||||
.match-history-item > div:last-child { text-align: right; }.match-history-item span { margin-top: 5px; color: var(--muted); font-size: 11px; }.match-history-item strong { color: var(--green); }
|
||||
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 22px; }
|
||||
.tool-groups { display: grid; grid-template-columns: 1.15fr 1fr .78fr; gap: 14px; margin-bottom: 24px; align-items: stretch; }
|
||||
.tool-group { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,252,.52); }
|
||||
.tool-group > header { display: flex; align-items: center; gap: 12px; min-height: 52px; margin-bottom: 14px; }
|
||||
.tool-group > header > span { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border-radius: 11px; background: var(--ink); color: var(--lime); font: 11px Georgia, serif; }
|
||||
.tool-group > header b, .tool-group > header small { display: block; }.tool-group > header b { font: 18px Georgia, serif; }.tool-group > header small { margin-top: 4px; color: var(--muted); font-size: 10px; }
|
||||
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 22px; }
|
||||
.tool-group .tool-grid { height: calc(100% - 66px); margin-bottom: 0; }
|
||||
.tool-card {
|
||||
min-height: 165px; border: 1px solid var(--line); border-radius: 18px; padding: 22px;
|
||||
background: rgba(255,255,252,.7); text-align: left; cursor: pointer; transition: .2s ease;
|
||||
}
|
||||
.tool-group .tool-card { min-height: 148px; padding: 18px; }
|
||||
.tool-card:hover, .tool-card.active { transform: translateY(-3px); border-color: rgba(25,101,72,.48); box-shadow: 0 16px 35px rgba(38,48,40,.08); }
|
||||
.tool-card.active { background: var(--ink); color: white; }
|
||||
.tool-card > span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: rgba(25,101,72,.08); color: var(--green); font: 700 17px Georgia, serif; }
|
||||
@@ -201,26 +208,48 @@ button { color: inherit; }
|
||||
.workspace-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 25px; }
|
||||
.workspace-heading h2 { margin: 7px 0 0; font: 31px Georgia, serif; }.workspace-heading p { max-width: 480px; color: var(--muted); font-size: 13px; }
|
||||
.calculator-shell { max-width: 980px; margin: auto; }
|
||||
.advanced-calculator { max-width: 1120px; }
|
||||
.calc-category-tabs { display: flex; gap: 5px; margin-bottom: 16px; padding: 5px; border-radius: 13px; background: #e9ede7; overflow-x: auto; scrollbar-width: thin; }
|
||||
.calc-category-tabs button { flex: 1 0 max-content; border: 0; border-radius: 9px; padding: 10px 14px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 650; }
|
||||
.calc-category-tabs button.active { background: var(--ink); color: white; box-shadow: 0 5px 14px rgba(23,33,27,.13); }
|
||||
.calculator-display { min-height: 145px; border-radius: 18px; padding: 25px; background: var(--ink); color: white; display: flex; flex-direction: column; justify-content: space-between; text-align: right; }
|
||||
.calculator-display small { color: #9eaaa2; }.calculator-display output { color: var(--lime); font: 48px/1 Georgia, serif; overflow-wrap: anywhere; }
|
||||
.formula-input, .search-input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: white; outline-color: var(--green); }
|
||||
.calculator-shell > .formula-input { margin: 14px 0; font: 18px "SFMono-Regular", Consolas, monospace; }
|
||||
.calculator-actions { display: flex; flex-wrap: wrap; gap: 8px; }.calculator-actions button { border: 1px solid var(--line); border-radius: 10px; padding: 11px 15px; background: white; cursor: pointer; }.calculator-actions .primary-button { margin-left: auto; color: white; background: var(--green); border: 0; }
|
||||
.calculator-controls { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }.calculator-controls label, .calculator-expression-label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; }.calculator-controls select, .calculator-controls input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px; background: white; }
|
||||
.advanced-calculator .calculator-controls > label:first-child { grid-column: span 2; }
|
||||
.calculator-controls [hidden] { display: none !important; }
|
||||
.calculator-expression-label textarea { min-height: 92px; margin: 0 0 12px; resize: vertical; font: 17px/1.6 "SFMono-Regular", Consolas, monospace; }
|
||||
.calc-hint { margin: -4px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.65; }
|
||||
.calculator-result { margin-top: 17px; }.calc-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }.calc-result-grid > div { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: white; }.calc-result-grid span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }.calc-result-grid code { display: block; margin-top: 8px; overflow-wrap: anywhere; color: var(--green); }
|
||||
.calc-steps { margin: 13px 0 0; padding: 14px 14px 14px 34px; border-radius: 12px; background: #eef1eb; color: var(--muted); font-size: 12px; line-height: 1.8; }.calc-steps:empty { display: none; }
|
||||
.search-input { width: min(370px, 100%); }
|
||||
.symbol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
|
||||
.symbol-card { border: 1px solid var(--line); border-radius: 15px; padding: 18px; background: white; cursor: pointer; text-align: left; }
|
||||
.symbol-card strong { display: block; color: var(--green); font: 29px Georgia, serif; }.symbol-card b { display: block; margin-top: 10px; }.symbol-card small { display: block; margin-top: 5px; color: var(--muted); }.symbol-card code { display: inline-block; margin-top: 12px; padding: 4px 7px; border-radius: 6px; background: #f0f1eb; color: #405048; }
|
||||
.graph-shell { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 20px; }
|
||||
.graph-controls { display: flex; flex-direction: column; gap: 17px; }.graph-controls label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; }.graph-controls p { color: #b84136; font-size: 12px; }.graph-controls textarea { min-height: 100px; resize: vertical; font: 13px/1.6 "SFMono-Regular", Consolas, monospace; }
|
||||
.graph-shell { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }
|
||||
.graph-controls { display: flex; min-width: 0; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: rgba(247,248,243,.86); }.graph-controls label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; }.graph-controls > p { min-height: 17px; margin: 0; color: #b84136; font-size: 12px; }
|
||||
.function-syntax-help { border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; background: #f5f7f1; }.function-syntax-help summary { color: var(--green); font-weight: 700; cursor: pointer; }.function-syntax-help p { margin: 9px 0 0; color: var(--muted); line-height: 1.7; }.function-syntax-help code { color: var(--ink); }
|
||||
.check-row { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px !important; }.check-row input { margin: 0; }
|
||||
.graph-analysis { padding: 11px; border-radius: 10px; background: #eef1eb; color: var(--muted); font-size: 11px; line-height: 1.6; }
|
||||
#graph-canvas { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 17px; background: #fbfbf7; }
|
||||
.graph-functions-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.graph-functions-heading b { font-size: 13px; }.graph-functions-heading button, .graph-actions button { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: white; color: var(--green); cursor: pointer; font-size: 11px; font-weight: 650; }
|
||||
.graph-function-list { display: grid; gap: 8px; }
|
||||
.graph-function-row { display: grid; grid-template-columns: 18px 29px auto minmax(70px, 1fr) 29px; gap: 7px; align-items: center; min-width: 0; }
|
||||
.graph-function-row > input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
|
||||
.graph-function-row > input[type="color"] { width: 29px; height: 29px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; }
|
||||
.graph-function-row > span { color: var(--muted); font: 11px "SFMono-Regular", Consolas, monospace; white-space: nowrap; }
|
||||
.graph-function-row .formula-input { min-width: 0; padding: 9px 10px; border-radius: 9px; font: 12px "SFMono-Regular", Consolas, monospace; }
|
||||
.graph-function-row > button { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 8px; background: white; color: #a5443b; cursor: pointer; font-size: 18px; line-height: 1; }.graph-function-row > button:disabled { color: #b8beb9; cursor: not-allowed; }
|
||||
.graph-parameter-control { display: grid; gap: 8px; padding-top: 3px; }.graph-parameter-control label { display: flex; justify-content: space-between; }.graph-parameter-control output { color: var(--green); font-weight: 700; }
|
||||
.graph-viewport-controls { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }.graph-viewport-controls summary { color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; }.graph-viewport-controls > .check-row { margin-top: 12px; }
|
||||
.graph-range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }.graph-range-grid label { gap: 5px; font-size: 10px; }.graph-range-grid input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: white; color: var(--ink); }
|
||||
.graph-option-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
|
||||
.graph-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.graph-actions .primary-button { grid-column: 1 / -1; border-color: var(--green); background: var(--green); color: white; }
|
||||
.graph-stage { position: relative; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,252,.72); overflow: hidden; }
|
||||
.graph-legend { min-height: 29px; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 3px 9px; }.graph-legend span { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 8px; border-radius: 99px; background: #eef1eb; color: var(--muted); font: 10px "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }.graph-legend i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; }
|
||||
.graph-analysis { margin-top: 9px; padding: 11px; border-radius: 10px; background: #eef1eb; color: var(--muted); font-size: 11px; line-height: 1.6; }
|
||||
.graph-stage-hint { padding: 8px 4px 0; color: #8b958e; font-size: 10px; text-align: center; }
|
||||
#graph-canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 14px; background: #fbfbf7; cursor: grab; touch-action: none; user-select: none; }#graph-canvas.dragging { cursor: grabbing; }
|
||||
.drawing-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }.drawing-toolbar button, .drawing-toolbar label { border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; background: white; color: var(--muted); cursor: pointer; }.drawing-toolbar button.active { border-color: var(--ink); background: var(--ink); color: white; }.drawing-toolbar .primary-button { margin-left: auto; border: 0; background: var(--green); color: white; }.drawing-toolbar label { display: flex; align-items: center; gap: 7px; font-size: 11px; }.drawing-toolbar input[type=color] { width: 28px; height: 24px; padding: 0; border: 0; background: transparent; }
|
||||
.toolbar-text-input { flex: 1 1 190px; min-width: 150px; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: white; }.drawing-toolbar .file-tool input { display: none; }
|
||||
.canvas-stage { width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }.canvas-stage canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }.geometry-stage { background: #fbfbf7; }.canvas-hint { color: var(--muted); font-size: 11px; text-align: center; }
|
||||
@@ -296,7 +325,7 @@ dialog::backdrop { background: rgba(17,25,20,.55); backdrop-filter: blur(5px); }
|
||||
.app-shell { grid-template-columns: 80px 1fr; }.sidebar { padding: 25px 13px; }.brand span:last-child, .nav-item:not(.active) span, .nav-item { font-size: 0; }
|
||||
.nav-item { text-align: center; }.nav-item span { width: auto; font-size: 11px !important; }.sidebar-foot { display: none; }
|
||||
.hero-grid { grid-template-columns: 1fr; }.daily-card { min-height: 350px; }.spirit-grid { grid-template-columns: 1fr 1fr; }.content-grid { grid-template-columns: 1fr 1fr; }
|
||||
.tool-grid { grid-template-columns: repeat(3, 1fr); }.symbol-grid { grid-template-columns: repeat(3, 1fr); }.video-grid { grid-template-columns: 1fr 1fr; }.calculator-controls { grid-template-columns: repeat(2, 1fr); }
|
||||
.tool-groups, .graph-shell { grid-template-columns: 1fr; }.tool-group .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tool-grid { grid-template-columns: repeat(3, 1fr); }.symbol-grid { grid-template-columns: repeat(3, 1fr); }.video-grid { grid-template-columns: 1fr 1fr; }.calculator-controls { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.app-shell { display: block; }.sidebar { position: fixed; top: auto; bottom: 0; width: 100%; height: 68px; z-index: 10; border: 0; border-top: 1px solid var(--line); padding: 8px; }
|
||||
@@ -310,7 +339,7 @@ dialog::backdrop { background: rgba(17,25,20,.55); backdrop-filter: blur(5px); }
|
||||
.board-online-panel { grid-template-columns: 1fr; }.board-online-panel > div, .board-online-panel form { display: grid; grid-template-columns: 1fr; }.board-online-panel p, .board-online-panel > strong { grid-column: 1; }
|
||||
.story-experience { padding: 14px 14px 40px; }.story-experience-header { align-items: flex-start; }.story-experience-header .ghost-button { width: auto; padding: 9px 11px; font-size: 10px; }.story-chapter-bar, .story-experience-layout { grid-template-columns: 1fr; }.story-scene-panel { min-height: 0; padding: 25px 20px; }.story-scene-panel .scene { min-height: 120px; }.story-mark-panel { position: static; }.story-domain-counts { grid-template-columns: repeat(2, 1fr); }
|
||||
.wechat-entry { align-items: flex-start; flex-direction: column; padding: 24px; }.wechat-entry-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }.wechat-entry-actions > * { justify-content: center; text-align: center; }
|
||||
.tool-card { min-height: 125px; }.workspace-heading, .map-heading { display: block; }.workspace-heading p { margin-top: 12px; }.tool-workspace { padding: 16px; }.calculator-controls { grid-template-columns: 1fr 1fr; }.calculator-display { min-height: 120px; padding: 18px; }.calculator-display output { font-size: 34px; }.calc-examples .primary-button { width: 100%; margin-left: 0; }.drawing-toolbar { align-items: stretch; }.drawing-toolbar .primary-button { width: 100%; margin-left: 0; }.canvas-stage canvas { width: 100%; min-width: 0; }
|
||||
.tool-group { padding: 14px; }.tool-group .tool-grid { grid-template-columns: 1fr; }.tool-card { min-height: 125px; }.workspace-heading, .map-heading { display: block; }.workspace-heading p { margin-top: 12px; }.tool-workspace { padding: 16px; }.calculator-controls { grid-template-columns: 1fr 1fr; }.advanced-calculator .calculator-controls > label:first-child { grid-column: 1 / -1; }.calculator-display { min-height: 120px; padding: 18px; }.calculator-display output { font-size: 34px; }.calc-examples .primary-button { width: 100%; margin-left: 0; }.graph-controls { padding: 14px; }.graph-function-row { grid-template-columns: 17px 27px auto minmax(60px, 1fr) 27px; gap: 5px; }.graph-function-row > input[type="color"], .graph-function-row > button { width: 27px; height: 27px; }.graph-range-grid { grid-template-columns: 1fr 1fr; }#graph-canvas { aspect-ratio: 4 / 3; }.drawing-toolbar { align-items: stretch; }.drawing-toolbar .primary-button { width: 100%; margin-left: 0; }.canvas-stage canvas { width: 100%; min-width: 0; }
|
||||
.math-games-section { margin-top: 45px; }.game-card { min-height: 260px; padding: 21px; }.game-card-controls { align-items: stretch; }.game-card-controls .primary-button { flex: 1; }.twenty-four-numbers { gap: 7px; }.twenty-four-numbers button { border-radius: 13px; font-size: 28px; }.sudoku-board input { font-size: clamp(13px, 4.5vw, 20px); }.sudoku-actions { display: grid; grid-template-columns: 1fr 1fr; }.game-keypad { gap: 5px; }
|
||||
.challenge-panel { grid-template-columns: 1fr; padding: 20px; }.challenge-actions form { grid-template-columns: 1fr; }.challenge-actions .dark-button { width: 100%; }.challenge-code { width: 100%; padding: 14px 10px; font-size: 27px; }.realtime-status-line { display: grid; }.realtime-progress-panel { grid-template-columns: 1fr 1fr; }
|
||||
.map-stage { height: 480px; transform: scale(.92); }.ability-node { width: 108px; height: 94px; }.node-vision { left: calc(50% - 54px); }.node-humanities { left: 0; top: 100px; }.node-connection { right: 0; top: 100px; }.node-detection { left: 2%; bottom: 30px; }.node-modeling { right: 2%; bottom: 30px; }.pet-node { top: 190px; }
|
||||
|
||||
@@ -1109,18 +1109,6 @@ function evaluateExpression(source, variables = {}) {
|
||||
return value;
|
||||
}
|
||||
|
||||
function runCalculator() {
|
||||
const input = $("#calc-input").value;
|
||||
try {
|
||||
const result = evaluateExpression(input);
|
||||
$("#calc-history").textContent = input;
|
||||
$("#calc-output").textContent = Number(result.toPrecision(12)).toString();
|
||||
} catch (error) {
|
||||
$("#calc-history").textContent = error.message;
|
||||
$("#calc-output").textContent = "错误";
|
||||
}
|
||||
}
|
||||
|
||||
function renderSymbols(query = "") {
|
||||
const keyword = query.trim().toLowerCase();
|
||||
const matches = MATH_SYMBOLS.filter((symbol) =>
|
||||
@@ -1152,70 +1140,7 @@ function renderSymbols(query = "") {
|
||||
);
|
||||
}
|
||||
|
||||
function drawGraph() {
|
||||
const canvas = $("#graph-canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
const expression = $("#graph-expression").value;
|
||||
const range = Number($("#graph-range").value);
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
$("#graph-range-label").textContent = `−${range} 到 ${range}`;
|
||||
$("#graph-error").textContent = "";
|
||||
context.clearRect(0, 0, width, height);
|
||||
context.fillStyle = "#fbfbf7";
|
||||
context.fillRect(0, 0, width, height);
|
||||
|
||||
const toX = (x) => ((x + range) / (range * 2)) * width;
|
||||
const toY = (y) => height / 2 - (y / range) * (height / 2);
|
||||
context.strokeStyle = "#e4e5df";
|
||||
context.lineWidth = 1;
|
||||
for (let value = -range; value <= range; value += 1) {
|
||||
context.beginPath();
|
||||
context.moveTo(toX(value), 0);
|
||||
context.lineTo(toX(value), height);
|
||||
context.stroke();
|
||||
context.beginPath();
|
||||
context.moveTo(0, toY(value));
|
||||
context.lineTo(width, toY(value));
|
||||
context.stroke();
|
||||
}
|
||||
context.strokeStyle = "#718078";
|
||||
context.lineWidth = 2;
|
||||
context.beginPath();
|
||||
context.moveTo(0, height / 2);
|
||||
context.lineTo(width, height / 2);
|
||||
context.moveTo(width / 2, 0);
|
||||
context.lineTo(width / 2, height);
|
||||
context.stroke();
|
||||
|
||||
context.strokeStyle = "#196548";
|
||||
context.lineWidth = 3;
|
||||
context.beginPath();
|
||||
let drawing = false;
|
||||
try {
|
||||
for (let pixel = 0; pixel <= width; pixel += 2) {
|
||||
const x = (pixel / width) * range * 2 - range;
|
||||
const y = evaluateExpression(expression, { x });
|
||||
const screenY = toY(y);
|
||||
if (screenY < -height * 2 || screenY > height * 3) {
|
||||
drawing = false;
|
||||
continue;
|
||||
}
|
||||
if (!drawing) context.moveTo(pixel, screenY);
|
||||
else context.lineTo(pixel, screenY);
|
||||
drawing = true;
|
||||
}
|
||||
context.stroke();
|
||||
} catch (error) {
|
||||
$("#graph-error").textContent = error.message;
|
||||
}
|
||||
}
|
||||
|
||||
function switchTool(tool) {
|
||||
if (tool === "mental") {
|
||||
navigate("contest");
|
||||
return;
|
||||
}
|
||||
$$(".tool-card").forEach((card) => {
|
||||
card.classList.toggle("active", card.dataset.tool === tool);
|
||||
});
|
||||
|
||||
@@ -0,0 +1,525 @@
|
||||
(function () {
|
||||
const $graph = (selector, root = document) => root.querySelector(selector);
|
||||
const COLORS = [
|
||||
"#196548",
|
||||
"#d86f45",
|
||||
"#5d73e8",
|
||||
"#8667b5",
|
||||
"#c44f83",
|
||||
"#198b9a",
|
||||
"#b07b24",
|
||||
"#3d4852",
|
||||
];
|
||||
const graph = {
|
||||
functions: [],
|
||||
nextId: 1,
|
||||
viewport: { xMin: -10, xMax: 10, yMin: -6, yMax: 6 },
|
||||
dragging: null,
|
||||
frame: null,
|
||||
initialized: false,
|
||||
observer: null,
|
||||
};
|
||||
|
||||
function schedule() {
|
||||
if (graph.frame) window.cancelAnimationFrame(graph.frame);
|
||||
graph.frame = window.requestAnimationFrame(() => {
|
||||
graph.frame = null;
|
||||
draw();
|
||||
});
|
||||
}
|
||||
|
||||
function activeFunctions() {
|
||||
return graph.functions.filter(
|
||||
(item) => item.visible && item.expression.trim(),
|
||||
);
|
||||
}
|
||||
|
||||
function addFunction(expression = "", color) {
|
||||
if (graph.functions.length >= 8) {
|
||||
showToast("最多同时绘制 8 条曲线");
|
||||
return;
|
||||
}
|
||||
graph.functions.push({
|
||||
id: graph.nextId,
|
||||
expression,
|
||||
color: color || COLORS[(graph.nextId - 1) % COLORS.length],
|
||||
visible: true,
|
||||
});
|
||||
graph.nextId += 1;
|
||||
renderFunctionList();
|
||||
schedule();
|
||||
}
|
||||
|
||||
function renderFunctionList() {
|
||||
const root = $graph("#graph-function-list");
|
||||
root.replaceChildren(
|
||||
...graph.functions.map((item, index) => {
|
||||
const row = document.createElement("div");
|
||||
row.className = "graph-function-row";
|
||||
const visible = document.createElement("input");
|
||||
visible.type = "checkbox";
|
||||
visible.checked = item.visible;
|
||||
visible.setAttribute("aria-label", `显示曲线 ${index + 1}`);
|
||||
visible.addEventListener("change", () => {
|
||||
item.visible = visible.checked;
|
||||
schedule();
|
||||
});
|
||||
const color = document.createElement("input");
|
||||
color.type = "color";
|
||||
color.value = item.color;
|
||||
color.setAttribute("aria-label", `曲线 ${index + 1} 颜色`);
|
||||
color.addEventListener("input", () => {
|
||||
item.color = color.value;
|
||||
schedule();
|
||||
});
|
||||
const prefix = document.createElement("span");
|
||||
prefix.textContent = `f${index + 1}(x)`;
|
||||
const input = document.createElement("input");
|
||||
input.className = "formula-input";
|
||||
input.value = item.expression;
|
||||
input.placeholder = "例如 sin(x)";
|
||||
input.setAttribute("aria-label", `函数 ${index + 1}`);
|
||||
input.addEventListener("input", () => {
|
||||
item.expression = input.value;
|
||||
schedule();
|
||||
});
|
||||
const remove = document.createElement("button");
|
||||
remove.type = "button";
|
||||
remove.textContent = "×";
|
||||
remove.title = "删除曲线";
|
||||
remove.disabled = graph.functions.length === 1;
|
||||
remove.addEventListener("click", () => {
|
||||
graph.functions = graph.functions.filter(
|
||||
(candidate) => candidate.id !== item.id,
|
||||
);
|
||||
renderFunctionList();
|
||||
schedule();
|
||||
});
|
||||
row.append(visible, color, prefix, input, remove);
|
||||
return row;
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function readViewport() {
|
||||
const viewport = {
|
||||
xMin: Number($graph("#graph-x-min").value),
|
||||
xMax: Number($graph("#graph-x-max").value),
|
||||
yMin: Number($graph("#graph-y-min").value),
|
||||
yMax: Number($graph("#graph-y-max").value),
|
||||
};
|
||||
if (
|
||||
!Object.values(viewport).every(Number.isFinite) ||
|
||||
viewport.xMin >= viewport.xMax ||
|
||||
viewport.yMin >= viewport.yMax ||
|
||||
viewport.xMax - viewport.xMin > 1_000_000 ||
|
||||
viewport.yMax - viewport.yMin > 1_000_000
|
||||
) {
|
||||
throw new Error("坐标范围必须有限、最小值小于最大值，跨度不超过 1,000,000");
|
||||
}
|
||||
return viewport;
|
||||
}
|
||||
|
||||
function writeViewport(viewport = graph.viewport) {
|
||||
$graph("#graph-x-min").value = Number(viewport.xMin.toPrecision(8));
|
||||
$graph("#graph-x-max").value = Number(viewport.xMax.toPrecision(8));
|
||||
$graph("#graph-y-min").value = Number(viewport.yMin.toPrecision(8));
|
||||
$graph("#graph-y-max").value = Number(viewport.yMax.toPrecision(8));
|
||||
}
|
||||
|
||||
function sampleFunction(item, viewport, count) {
|
||||
const parameter = Number($graph("#graph-parameter").value);
|
||||
const samples = [];
|
||||
let lastError = null;
|
||||
for (let index = 0; index <= count; index += 1) {
|
||||
const x =
|
||||
viewport.xMin +
|
||||
(index / count) * (viewport.xMax - viewport.xMin);
|
||||
let y = Number.NaN;
|
||||
try {
|
||||
y = evaluateExpression(item.expression, { x, a: parameter });
|
||||
} catch (error) {
|
||||
lastError = error;
|
||||
}
|
||||
samples.push({ x, y: Number.isFinite(y) ? y : Number.NaN });
|
||||
}
|
||||
if (!samples.some((point) => Number.isFinite(point.y))) {
|
||||
throw lastError || new Error(`函数 ${item.expression} 在当前视窗没有有效值`);
|
||||
}
|
||||
return samples;
|
||||
}
|
||||
|
||||
function autoY(functions, viewport) {
|
||||
const values = functions
|
||||
.flatMap((item) => sampleFunction(item, viewport, 500))
|
||||
.map((item) => item.y)
|
||||
.filter(Number.isFinite)
|
||||
.sort((left, right) => left - right);
|
||||
if (!values.length) return { ...viewport, yMin: -6, yMax: 6 };
|
||||
const low = values[Math.floor(values.length * 0.02)];
|
||||
const high = values[Math.min(values.length - 1, Math.ceil(values.length * 0.98))];
|
||||
const span = Math.max(high - low, Math.abs(high) * 0.1, 2);
|
||||
return {
|
||||
...viewport,
|
||||
yMin: low - span * 0.12,
|
||||
yMax: high + span * 0.12,
|
||||
};
|
||||
}
|
||||
|
||||
function niceStep(span, target = 9) {
|
||||
const rough = span / target;
|
||||
const power = 10 ** Math.floor(Math.log10(rough));
|
||||
const fraction = rough / power;
|
||||
return (fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 5 ? 5 : 10) * power;
|
||||
}
|
||||
|
||||
function tickLabel(value, step) {
|
||||
if (Math.abs(value) < step * 0.001) return "0";
|
||||
if (Math.abs(value) >= 10000 || Math.abs(value) < 0.001) {
|
||||
return value.toExponential(1);
|
||||
}
|
||||
return value.toFixed(Math.min(6, Math.max(0, -Math.floor(Math.log10(step)))));
|
||||
}
|
||||
|
||||
function canvasSize() {
|
||||
const canvas = $graph("#graph-canvas");
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const ratio = Math.min(window.devicePixelRatio || 1, 2);
|
||||
const width = Math.max(320, Math.round(rect.width));
|
||||
const height = Math.max(320, Math.round(rect.height));
|
||||
if (
|
||||
canvas.width !== Math.round(width * ratio) ||
|
||||
canvas.height !== Math.round(height * ratio)
|
||||
) {
|
||||
canvas.width = Math.round(width * ratio);
|
||||
canvas.height = Math.round(height * ratio);
|
||||
}
|
||||
const context = canvas.getContext("2d");
|
||||
context.setTransform(ratio, 0, 0, ratio, 0, 0);
|
||||
return { context, width, height };
|
||||
}
|
||||
|
||||
function drawGrid(context, viewport, width, height, toX, toY) {
|
||||
context.fillStyle = "#fcfcf8";
|
||||
context.fillRect(0, 0, width, height);
|
||||
if (!$graph("#graph-grid").checked) return;
|
||||
const xStep = niceStep(viewport.xMax - viewport.xMin);
|
||||
const yStep = niceStep(viewport.yMax - viewport.yMin);
|
||||
context.font = "11px system-ui, sans-serif";
|
||||
context.lineWidth = 1;
|
||||
context.strokeStyle = "#e1e6e0";
|
||||
context.fillStyle = "#6d796f";
|
||||
context.textAlign = "center";
|
||||
context.textBaseline = "top";
|
||||
for (
|
||||
let value = Math.ceil(viewport.xMin / xStep) * xStep;
|
||||
value <= viewport.xMax + xStep * 0.001;
|
||||
value += xStep
|
||||
) {
|
||||
const x = toX(value);
|
||||
context.beginPath();
|
||||
context.moveTo(x, 0);
|
||||
context.lineTo(x, height);
|
||||
context.stroke();
|
||||
const labelY =
|
||||
viewport.yMin <= 0 && viewport.yMax >= 0
|
||||
? Math.min(height - 18, Math.max(4, toY(0) + 6))
|
||||
: height - 18;
|
||||
context.fillText(tickLabel(value, xStep), x, labelY);
|
||||
}
|
||||
context.textAlign = "left";
|
||||
context.textBaseline = "middle";
|
||||
for (
|
||||
let value = Math.ceil(viewport.yMin / yStep) * yStep;
|
||||
value <= viewport.yMax + yStep * 0.001;
|
||||
value += yStep
|
||||
) {
|
||||
const y = toY(value);
|
||||
context.beginPath();
|
||||
context.moveTo(0, y);
|
||||
context.lineTo(width, y);
|
||||
context.stroke();
|
||||
const labelX =
|
||||
viewport.xMin <= 0 && viewport.xMax >= 0
|
||||
? Math.min(width - 50, Math.max(6, toX(0) + 7))
|
||||
: 7;
|
||||
context.fillText(tickLabel(value, yStep), labelX, y);
|
||||
}
|
||||
}
|
||||
|
||||
function drawAxes(context, viewport, width, height, toX, toY) {
|
||||
context.strokeStyle = "#263b30";
|
||||
context.fillStyle = "#263b30";
|
||||
context.lineWidth = 2;
|
||||
context.beginPath();
|
||||
if (viewport.yMin <= 0 && viewport.yMax >= 0) {
|
||||
const y = toY(0);
|
||||
context.moveTo(0, y);
|
||||
context.lineTo(width, y);
|
||||
context.moveTo(width - 9, y - 5);
|
||||
context.lineTo(width, y);
|
||||
context.lineTo(width - 9, y + 5);
|
||||
}
|
||||
if (viewport.xMin <= 0 && viewport.xMax >= 0) {
|
||||
const x = toX(0);
|
||||
context.moveTo(x, height);
|
||||
context.lineTo(x, 0);
|
||||
context.moveTo(x - 5, 9);
|
||||
context.lineTo(x, 0);
|
||||
context.lineTo(x + 5, 9);
|
||||
}
|
||||
context.stroke();
|
||||
context.font = "700 12px system-ui, sans-serif";
|
||||
context.fillText("x", width - 16, Math.min(height - 16, Math.max(14, toY(0) - 15)));
|
||||
context.fillText("y", Math.min(width - 18, Math.max(10, toX(0) + 10)), 14);
|
||||
}
|
||||
|
||||
function drawPath(context, samples, color, viewport, toX, toY) {
|
||||
const ySpan = viewport.yMax - viewport.yMin;
|
||||
context.strokeStyle = color;
|
||||
context.lineWidth = 2.6;
|
||||
context.lineJoin = "round";
|
||||
context.beginPath();
|
||||
let drawing = false;
|
||||
let previous;
|
||||
samples.forEach((item) => {
|
||||
const discontinuity =
|
||||
previous &&
|
||||
Number.isFinite(previous.y) &&
|
||||
Number.isFinite(item.y) &&
|
||||
Math.abs(item.y - previous.y) > ySpan * 3;
|
||||
if (
|
||||
!Number.isFinite(item.y) ||
|
||||
item.y < viewport.yMin - ySpan ||
|
||||
item.y > viewport.yMax + ySpan ||
|
||||
discontinuity
|
||||
) {
|
||||
drawing = false;
|
||||
} else if (!drawing) {
|
||||
context.moveTo(toX(item.x), toY(item.y));
|
||||
drawing = true;
|
||||
} else {
|
||||
context.lineTo(toX(item.x), toY(item.y));
|
||||
}
|
||||
previous = item;
|
||||
});
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
function analyze(samples, xSpan) {
|
||||
const roots = [];
|
||||
let extrema = 0;
|
||||
for (let index = 1; index < samples.length; index += 1) {
|
||||
const before = samples[index - 1];
|
||||
const current = samples[index];
|
||||
if (!Number.isFinite(before.y) || !Number.isFinite(current.y)) continue;
|
||||
if (before.y === 0 || before.y * current.y < 0) {
|
||||
const root = (before.x + current.x) / 2;
|
||||
if (!roots.length || Math.abs(root - roots.at(-1)) > xSpan / 300) {
|
||||
roots.push(root);
|
||||
}
|
||||
}
|
||||
if (index > 1) {
|
||||
const older = samples[index - 2];
|
||||
if (!Number.isFinite(older.y)) continue;
|
||||
if ((before.y - older.y) * (current.y - before.y) < 0) extrema += 1;
|
||||
}
|
||||
}
|
||||
return { roots: roots.slice(0, 8), extrema };
|
||||
}
|
||||
|
||||
function renderLegend(functions) {
|
||||
$graph("#graph-legend").replaceChildren(
|
||||
...functions.map((item) => {
|
||||
const badge = document.createElement("span");
|
||||
const dot = document.createElement("i");
|
||||
dot.style.background = item.color;
|
||||
badge.append(dot, document.createTextNode(item.expression));
|
||||
return badge;
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const canvas = $graph("#graph-canvas");
|
||||
if (!canvas) return;
|
||||
const functions = activeFunctions();
|
||||
const { context, width, height } = canvasSize();
|
||||
$graph("#graph-error").textContent = "";
|
||||
$graph("#graph-parameter-label").textContent =
|
||||
Number($graph("#graph-parameter").value).toFixed(1);
|
||||
try {
|
||||
let viewport = readViewport();
|
||||
if ($graph("#graph-auto-y").checked && functions.length) {
|
||||
viewport = autoY(functions, viewport);
|
||||
$graph("#graph-y-min").value = Number(viewport.yMin.toPrecision(7));
|
||||
$graph("#graph-y-max").value = Number(viewport.yMax.toPrecision(7));
|
||||
}
|
||||
graph.viewport = viewport;
|
||||
const toX = (x) =>
|
||||
((x - viewport.xMin) / (viewport.xMax - viewport.xMin)) * width;
|
||||
const toY = (y) =>
|
||||
height - ((y - viewport.yMin) / (viewport.yMax - viewport.yMin)) * height;
|
||||
drawGrid(context, viewport, width, height, toX, toY);
|
||||
drawAxes(context, viewport, width, height, toX, toY);
|
||||
if (!functions.length) {
|
||||
$graph("#graph-error").textContent = "请至少输入并启用一个函数";
|
||||
renderLegend([]);
|
||||
return;
|
||||
}
|
||||
const count = Math.max(500, Math.min(1600, Math.round(width * 1.5)));
|
||||
const sampled = functions.map((item) => ({
|
||||
item,
|
||||
samples: sampleFunction(item, viewport, count),
|
||||
}));
|
||||
const first = sampled[0].samples;
|
||||
if ($graph("#graph-integral").checked) {
|
||||
context.fillStyle = `${functions[0].color}22`;
|
||||
context.beginPath();
|
||||
context.moveTo(toX(viewport.xMin), toY(0));
|
||||
first.forEach((point) => {
|
||||
if (Number.isFinite(point.y)) context.lineTo(toX(point.x), toY(point.y));
|
||||
});
|
||||
context.lineTo(toX(viewport.xMax), toY(0));
|
||||
context.closePath();
|
||||
context.fill();
|
||||
}
|
||||
sampled.forEach(({ item, samples }) => {
|
||||
drawPath(context, samples, item.color, viewport, toX, toY);
|
||||
});
|
||||
if ($graph("#graph-derivative").checked) {
|
||||
const derivative = first.slice(1, -1).map((point, index) => {
|
||||
const before = first[index];
|
||||
const after = first[index + 2];
|
||||
return { x: point.x, y: (after.y - before.y) / (after.x - before.x) };
|
||||
});
|
||||
context.setLineDash([8, 6]);
|
||||
drawPath(context, derivative, "#111827", viewport, toX, toY);
|
||||
context.setLineDash([]);
|
||||
}
|
||||
const analysis = analyze(first, viewport.xMax - viewport.xMin);
|
||||
const rootText = analysis.roots.length
|
||||
? analysis.roots.map((item) => item.toPrecision(4)).join("、")
|
||||
: "当前视窗未发现";
|
||||
$graph("#graph-analysis").textContent =
|
||||
`第一条曲线：近似零点 ${rootText}；检测到 ${analysis.extrema} 个极值转折。`;
|
||||
renderLegend(functions);
|
||||
} catch (error) {
|
||||
context.clearRect(0, 0, width, height);
|
||||
$graph("#graph-error").textContent = error.message;
|
||||
}
|
||||
}
|
||||
|
||||
function setViewport(viewport, disableAutoY = true) {
|
||||
graph.viewport = viewport;
|
||||
if (disableAutoY) $graph("#graph-auto-y").checked = false;
|
||||
writeViewport(viewport);
|
||||
schedule();
|
||||
}
|
||||
|
||||
function resetViewport() {
|
||||
$graph("#graph-auto-y").checked = true;
|
||||
setViewport({ xMin: -10, xMax: 10, yMin: -6, yMax: 6 }, false);
|
||||
}
|
||||
|
||||
function autoFit() {
|
||||
$graph("#graph-auto-y").checked = true;
|
||||
schedule();
|
||||
}
|
||||
|
||||
function bindCanvasNavigation() {
|
||||
const canvas = $graph("#graph-canvas");
|
||||
canvas.addEventListener("pointerdown", (event) => {
|
||||
if (event.button !== 0) return;
|
||||
graph.dragging = {
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
viewport: { ...graph.viewport },
|
||||
};
|
||||
canvas.setPointerCapture(event.pointerId);
|
||||
canvas.classList.add("dragging");
|
||||
});
|
||||
canvas.addEventListener("pointermove", (event) => {
|
||||
if (!graph.dragging) return;
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const start = graph.dragging;
|
||||
const dx =
|
||||
((event.clientX - start.x) / rect.width) *
|
||||
(start.viewport.xMax - start.viewport.xMin);
|
||||
const dy =
|
||||
((event.clientY - start.y) / rect.height) *
|
||||
(start.viewport.yMax - start.viewport.yMin);
|
||||
setViewport({
|
||||
xMin: start.viewport.xMin - dx,
|
||||
xMax: start.viewport.xMax - dx,
|
||||
yMin: start.viewport.yMin + dy,
|
||||
yMax: start.viewport.yMax + dy,
|
||||
});
|
||||
});
|
||||
const stopDragging = () => {
|
||||
graph.dragging = null;
|
||||
canvas.classList.remove("dragging");
|
||||
};
|
||||
canvas.addEventListener("pointerup", stopDragging);
|
||||
canvas.addEventListener("pointercancel", stopDragging);
|
||||
canvas.addEventListener(
|
||||
"wheel",
|
||||
(event) => {
|
||||
event.preventDefault();
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const viewport = graph.viewport;
|
||||
const xRatio = (event.clientX - rect.left) / rect.width;
|
||||
const yRatio = 1 - (event.clientY - rect.top) / rect.height;
|
||||
const centerX = viewport.xMin + xRatio * (viewport.xMax - viewport.xMin);
|
||||
const centerY = viewport.yMin + yRatio * (viewport.yMax - viewport.yMin);
|
||||
const factor = event.deltaY > 0 ? 1.14 : 0.88;
|
||||
setViewport({
|
||||
xMin: centerX + (viewport.xMin - centerX) * factor,
|
||||
xMax: centerX + (viewport.xMax - centerX) * factor,
|
||||
yMin: centerY + (viewport.yMin - centerY) * factor,
|
||||
yMax: centerY + (viewport.yMax - centerY) * factor,
|
||||
});
|
||||
},
|
||||
{ passive: false },
|
||||
);
|
||||
canvas.addEventListener("dblclick", autoFit);
|
||||
}
|
||||
|
||||
function init() {
|
||||
if (graph.initialized) return;
|
||||
graph.initialized = true;
|
||||
addFunction("sin(x) + a*x/3", COLORS[0]);
|
||||
addFunction("0.08*x^2 - 2", COLORS[1]);
|
||||
$graph("#graph-add-function").addEventListener("click", () => addFunction());
|
||||
$graph("#graph-run").addEventListener("click", draw);
|
||||
$graph("#graph-auto-fit").addEventListener("click", autoFit);
|
||||
$graph("#graph-reset-view").addEventListener("click", resetViewport);
|
||||
[
|
||||
"#graph-parameter",
|
||||
"#graph-x-min",
|
||||
"#graph-x-max",
|
||||
"#graph-auto-y",
|
||||
"#graph-grid",
|
||||
"#graph-derivative",
|
||||
"#graph-integral",
|
||||
].forEach((selector) => {
|
||||
$graph(selector).addEventListener("input", schedule);
|
||||
});
|
||||
["#graph-y-min", "#graph-y-max"].forEach((selector) => {
|
||||
$graph(selector).addEventListener("input", () => {
|
||||
$graph("#graph-auto-y").checked = false;
|
||||
schedule();
|
||||
});
|
||||
});
|
||||
bindCanvasNavigation();
|
||||
if ("ResizeObserver" in window) {
|
||||
graph.observer = new ResizeObserver(schedule);
|
||||
graph.observer.observe($graph(".graph-stage"));
|
||||
} else {
|
||||
window.addEventListener("resize", schedule);
|
||||
}
|
||||
schedule();
|
||||
}
|
||||
|
||||
window.HuluGraph = { init, draw, resize: schedule, addFunction };
|
||||
})();
|
||||
+123
-192
@@ -5,25 +5,107 @@
|
||||
const CALC_FIELDS = {
|
||||
derivative: ["order"],
|
||||
integral: ["bounds"],
|
||||
limit: ["point"],
|
||||
limit: ["point", "direction"],
|
||||
series: ["point", "order"],
|
||||
solve_system: ["variables"],
|
||||
gradient: ["variables"],
|
||||
hessian: ["variables"],
|
||||
base: ["base"],
|
||||
unit: ["unit"],
|
||||
};
|
||||
|
||||
function formatCalculatorResult(result) {
|
||||
if (Array.isArray(result)) {
|
||||
return {
|
||||
exact: result.map((item) => item.exact).join(", "),
|
||||
decimal: result.map((item) => item.decimal).join(", "),
|
||||
latex: result.map((item) => item.latex).join(", "),
|
||||
};
|
||||
const CALC_OPERATION_META = {
|
||||
statistics: {
|
||||
placeholder: "12, 15, 18, 21, 24",
|
||||
hint: "使用逗号分隔数据，返回四分位数、方差、标准差、极差等统计量。",
|
||||
},
|
||||
base: {
|
||||
placeholder: "FF",
|
||||
hint: "输入不带前缀的整数，原进制与目标进制均支持 2 到 36。",
|
||||
},
|
||||
solve: {
|
||||
placeholder: "x^2 - 5*x + 6 = 0",
|
||||
hint: "可省略等号右侧；通过“变量”指定要求解的未知量。",
|
||||
},
|
||||
solve_system: {
|
||||
placeholder: "x + y = 5; x - y = 1",
|
||||
hint: "使用分号分隔方程，通过“变量列表”指定未知量，最多 4 个变量、6 个方程。",
|
||||
},
|
||||
polynomial_roots: {
|
||||
placeholder: "x^5 - x + 1 = 0",
|
||||
hint: "返回至多 12 次单变量多项式的全部高精度数值根，包括复根。",
|
||||
},
|
||||
series: {
|
||||
placeholder: "exp(x) * cos(x)",
|
||||
hint: "在指定点附近展开；“阶数 6”表示保留到 5 阶并显示余项。",
|
||||
order: 6,
|
||||
},
|
||||
gradient: {
|
||||
placeholder: "x^2*y + sin(y)",
|
||||
hint: "变量列表示例：x,y。结果按该顺序组成梯度列向量。",
|
||||
},
|
||||
hessian: {
|
||||
placeholder: "x^2 + x*y + y^2",
|
||||
hint: "变量列表示例：x,y。结果为二阶偏导组成的 Hessian 矩阵。",
|
||||
},
|
||||
matrix_det: { placeholder: "1,2;3,4", hint: "逗号分列、分号分行，最多 36 个元素。" },
|
||||
matrix_inverse: { placeholder: "1,2;3,4", hint: "逆矩阵要求方阵且行列式非零。" },
|
||||
matrix_rref: { placeholder: "1,2,3;2,4,6", hint: "返回矩阵的行最简形。" },
|
||||
matrix_transpose: { placeholder: "1,2,3;4,5,6", hint: "交换矩阵的行与列。" },
|
||||
matrix_rank: { placeholder: "1,2,3;2,4,6", hint: "通过精确行变换计算矩阵秩。" },
|
||||
matrix_nullspace: { placeholder: "1,2;2,4", hint: "返回齐次方程组对应零空间的一组基。" },
|
||||
matrix_eigenvalues: { placeholder: "2,1;1,2", hint: "要求方阵，返回特征值及其代数重数。" },
|
||||
};
|
||||
|
||||
function calculatorCategoryFor(operation) {
|
||||
const option = [...$tool("#calc-operation").options].find(
|
||||
(item) => item.value === operation,
|
||||
);
|
||||
return option?.parentElement?.dataset.calcCategoryOptions || "algebra";
|
||||
}
|
||||
|
||||
function setCalculatorCategory(category, selectFirst = true) {
|
||||
const select = $tool("#calc-operation");
|
||||
$$tool("[data-calc-category-options]").forEach((group) => {
|
||||
const active = group.dataset.calcCategoryOptions === category;
|
||||
group.hidden = !active;
|
||||
group.disabled = !active;
|
||||
});
|
||||
$$tool("[data-calc-category]").forEach((button) => {
|
||||
button.classList.toggle(
|
||||
"active",
|
||||
button.dataset.calcCategory === category,
|
||||
);
|
||||
});
|
||||
if (selectFirst) {
|
||||
const group = $tool(
|
||||
`[data-calc-category-options="${category}"]`,
|
||||
);
|
||||
if (group?.querySelector("option")) {
|
||||
select.value = group.querySelector("option").value;
|
||||
}
|
||||
}
|
||||
if (result && typeof result === "object" && "exact" in result) return result;
|
||||
const entries = Object.entries(result || {});
|
||||
updateCalculatorFields();
|
||||
}
|
||||
|
||||
function resultText(value, field = "exact") {
|
||||
if (Array.isArray(value)) {
|
||||
return value.map((item) => resultText(item, field)).join("； ");
|
||||
}
|
||||
if (value && typeof value === "object") {
|
||||
if ("exact" in value) return value[field] || value.exact;
|
||||
return Object.entries(value)
|
||||
.map(([key, item]) => `${key}: ${resultText(item, field)}`)
|
||||
.join("； ");
|
||||
}
|
||||
return String(value ?? "");
|
||||
}
|
||||
|
||||
function formatCalculatorResult(result) {
|
||||
return {
|
||||
exact: entries.map(([key, value]) => `${key}: ${value}`).join(" · "),
|
||||
decimal: entries.map(([key, value]) => `${key}: ${value}`).join(" · "),
|
||||
latex: entries.map(([key, value]) => `${key}=${value}`).join(", "),
|
||||
exact: resultText(result, "exact"),
|
||||
decimal: resultText(result, "decimal"),
|
||||
latex: resultText(result, "latex"),
|
||||
};
|
||||
}
|
||||
|
||||
@@ -33,17 +115,13 @@
|
||||
$$tool("[data-calc-field]").forEach((field) => {
|
||||
field.hidden = !visible.has(field.dataset.calcField);
|
||||
});
|
||||
const input = $tool("#calc-input");
|
||||
const placeholders = {
|
||||
statistics: "12, 15, 18, 21, 24",
|
||||
base: "FF",
|
||||
matrix_det: "1,2;3,4",
|
||||
matrix_inverse: "1,2;3,4",
|
||||
matrix_rref: "1,2,3;2,4,6",
|
||||
matrix_transpose: "1,2,3;4,5,6",
|
||||
solve: "x^2 - 5*x + 6 = 0",
|
||||
};
|
||||
input.placeholder = placeholders[operation] || "例如：sqrt(2) + 1/3";
|
||||
const meta = CALC_OPERATION_META[operation] || {};
|
||||
$tool("#calc-input").placeholder = meta.placeholder || "例如：sqrt(2) + 1/3";
|
||||
$tool("#calc-hint").textContent =
|
||||
meta.hint || "支持精确常量、受限数学函数和变量；按 Command/Ctrl + Enter 运行。";
|
||||
$tool("#calc-order").max = operation === "derivative" ? 5 : 12;
|
||||
if (meta.order) $tool("#calc-order").value = meta.order;
|
||||
else if (operation === "derivative") $tool("#calc-order").value = 1;
|
||||
}
|
||||
|
||||
async function runCalculator() {
|
||||
@@ -59,10 +137,12 @@
|
||||
operation,
|
||||
expression,
|
||||
variable: $tool("#calc-variable").value,
|
||||
variables: $tool("#calc-variables").value,
|
||||
order: $tool("#calc-order").value,
|
||||
lower: $tool("#calc-lower").value,
|
||||
upper: $tool("#calc-upper").value,
|
||||
point: $tool("#calc-point").value,
|
||||
direction: $tool("#calc-direction").value,
|
||||
from_base: $tool("#calc-from-base").value,
|
||||
to_base: $tool("#calc-to-base").value,
|
||||
from_unit: $tool("#calc-from-unit").value,
|
||||
@@ -92,163 +172,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
const GRAPH_COLORS = ["#196548", "#d86f45", "#5d73e8", "#8667b5"];
|
||||
|
||||
function drawFunctionPath(context, expression, variables, range, width, height, color) {
|
||||
const toY = (value) => height / 2 - (value / range) * (height / 2);
|
||||
context.strokeStyle = color;
|
||||
context.lineWidth = 3;
|
||||
context.beginPath();
|
||||
let drawing = false;
|
||||
const samples = [];
|
||||
for (let pixel = 0; pixel <= width; pixel += 2) {
|
||||
const x = (pixel / width) * range * 2 - range;
|
||||
let y;
|
||||
try {
|
||||
y = evaluateExpression(expression, { ...variables, x });
|
||||
} catch (error) {
|
||||
if (pixel === 0) throw error;
|
||||
drawing = false;
|
||||
continue;
|
||||
}
|
||||
samples.push({ x, y });
|
||||
const screenY = toY(y);
|
||||
if (!Number.isFinite(screenY) || screenY < -height * 2 || screenY > height * 3) {
|
||||
drawing = false;
|
||||
continue;
|
||||
}
|
||||
if (!drawing) context.moveTo(pixel, screenY);
|
||||
else context.lineTo(pixel, screenY);
|
||||
drawing = true;
|
||||
}
|
||||
context.stroke();
|
||||
return samples;
|
||||
}
|
||||
|
||||
function graphAnalysis(samples) {
|
||||
const roots = [];
|
||||
let extrema = 0;
|
||||
for (let index = 1; index < samples.length; index += 1) {
|
||||
const before = samples[index - 1];
|
||||
const current = samples[index];
|
||||
if (before.y === 0 || before.y * current.y < 0) {
|
||||
const root = (before.x + current.x) / 2;
|
||||
if (!roots.length || Math.abs(root - roots.at(-1)) > 0.15) roots.push(root);
|
||||
}
|
||||
if (index > 1) {
|
||||
const previousSlope = before.y - samples[index - 2].y;
|
||||
const currentSlope = current.y - before.y;
|
||||
if (previousSlope * currentSlope < 0) extrema += 1;
|
||||
}
|
||||
}
|
||||
return { roots: roots.slice(0, 8), extrema };
|
||||
}
|
||||
|
||||
function drawGraph() {
|
||||
const canvas = $tool("#graph-canvas");
|
||||
const context = canvas.getContext("2d");
|
||||
const expressions = $tool("#graph-expression").value
|
||||
.split("\n")
|
||||
.map((item) => item.trim())
|
||||
.filter(Boolean)
|
||||
.slice(0, 4);
|
||||
const range = Number($tool("#graph-range").value);
|
||||
const parameter = Number($tool("#graph-parameter").value);
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
$tool("#graph-range-label").textContent = `−${range} 到 ${range}`;
|
||||
$tool("#graph-parameter-label").textContent = `a = ${parameter}`;
|
||||
$tool("#graph-error").textContent = "";
|
||||
context.clearRect(0, 0, width, height);
|
||||
context.fillStyle = "#fbfbf7";
|
||||
context.fillRect(0, 0, width, height);
|
||||
const toX = (x) => ((x + range) / (range * 2)) * width;
|
||||
const toY = (y) => height / 2 - (y / range) * (height / 2);
|
||||
|
||||
context.strokeStyle = "#e4e5df";
|
||||
context.lineWidth = 1;
|
||||
for (let value = -range; value <= range; value += 1) {
|
||||
context.beginPath();
|
||||
context.moveTo(toX(value), 0);
|
||||
context.lineTo(toX(value), height);
|
||||
context.moveTo(0, toY(value));
|
||||
context.lineTo(width, toY(value));
|
||||
context.stroke();
|
||||
}
|
||||
context.strokeStyle = "#718078";
|
||||
context.lineWidth = 2;
|
||||
context.beginPath();
|
||||
context.moveTo(0, height / 2);
|
||||
context.lineTo(width, height / 2);
|
||||
context.moveTo(width / 2, 0);
|
||||
context.lineTo(width / 2, height);
|
||||
context.stroke();
|
||||
|
||||
if (!expressions.length) {
|
||||
$tool("#graph-error").textContent = "请至少输入一个函数";
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const firstSamples = drawFunctionPath(
|
||||
context,
|
||||
expressions[0],
|
||||
{ a: parameter },
|
||||
range,
|
||||
width,
|
||||
height,
|
||||
GRAPH_COLORS[0],
|
||||
);
|
||||
expressions.slice(1).forEach((expression, index) => {
|
||||
drawFunctionPath(
|
||||
context,
|
||||
expression,
|
||||
{ a: parameter },
|
||||
range,
|
||||
width,
|
||||
height,
|
||||
GRAPH_COLORS[index + 1],
|
||||
);
|
||||
});
|
||||
|
||||
if ($tool("#graph-integral").checked) {
|
||||
context.fillStyle = "rgba(25, 101, 72, .13)";
|
||||
context.beginPath();
|
||||
context.moveTo(0, height / 2);
|
||||
firstSamples.forEach((item) => context.lineTo(toX(item.x), toY(item.y)));
|
||||
context.lineTo(width, height / 2);
|
||||
context.closePath();
|
||||
context.fill();
|
||||
}
|
||||
if ($tool("#graph-derivative").checked) {
|
||||
const derivative = firstSamples.slice(1, -1).map((item, index) => {
|
||||
const before = firstSamples[index];
|
||||
const after = firstSamples[index + 2];
|
||||
return { x: item.x, y: (after.y - before.y) / (after.x - before.x) };
|
||||
});
|
||||
context.strokeStyle = "#111827";
|
||||
context.lineWidth = 2;
|
||||
context.setLineDash([9, 7]);
|
||||
context.beginPath();
|
||||
derivative.forEach((item, index) => {
|
||||
const x = toX(item.x);
|
||||
const y = toY(item.y);
|
||||
if (index === 0) context.moveTo(x, y);
|
||||
else context.lineTo(x, y);
|
||||
});
|
||||
context.stroke();
|
||||
context.setLineDash([]);
|
||||
}
|
||||
const analysis = graphAnalysis(firstSamples);
|
||||
const rootText = analysis.roots.length
|
||||
? analysis.roots.map((item) => item.toFixed(2)).join("、")
|
||||
: "当前范围未发现";
|
||||
$tool("#graph-analysis").textContent =
|
||||
`第一条曲线：近似零点 ${rootText}；检测到 ${analysis.extrema} 个极值转折。`;
|
||||
} catch (error) {
|
||||
$tool("#graph-error").textContent = error.message;
|
||||
}
|
||||
}
|
||||
|
||||
function canvasPoint(canvas, event) {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
return {
|
||||
@@ -930,7 +853,17 @@
|
||||
}
|
||||
|
||||
function init() {
|
||||
$tool("#calc-operation").addEventListener("change", updateCalculatorFields);
|
||||
$tool("#calc-operation").addEventListener("change", () => {
|
||||
setCalculatorCategory(
|
||||
calculatorCategoryFor($tool("#calc-operation").value),
|
||||
false,
|
||||
);
|
||||
});
|
||||
$$tool("[data-calc-category]").forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
setCalculatorCategory(button.dataset.calcCategory);
|
||||
});
|
||||
});
|
||||
$tool("#calc-run").addEventListener("click", runCalculator);
|
||||
$tool("#calc-input").addEventListener("keydown", (event) => {
|
||||
if ((event.metaKey || event.ctrlKey) && event.key === "Enter") runCalculator();
|
||||
@@ -939,24 +872,22 @@
|
||||
button.addEventListener("click", () => {
|
||||
$tool("#calc-operation").value = button.dataset.calcOperation;
|
||||
$tool("#calc-input").value = button.dataset.calcExample;
|
||||
updateCalculatorFields();
|
||||
setCalculatorCategory(
|
||||
calculatorCategoryFor(button.dataset.calcOperation),
|
||||
false,
|
||||
);
|
||||
runCalculator();
|
||||
});
|
||||
});
|
||||
["#graph-run", "#graph-range", "#graph-parameter", "#graph-derivative", "#graph-integral"]
|
||||
.forEach((selector) => $tool(selector).addEventListener("input", drawGraph));
|
||||
$tool("#graph-expression").addEventListener("keydown", (event) => {
|
||||
if ((event.metaKey || event.ctrlKey) && event.key === "Enter") drawGraph();
|
||||
});
|
||||
initDrawingTools();
|
||||
updateCalculatorFields();
|
||||
drawGraph();
|
||||
setCalculatorCategory("algebra", false);
|
||||
window.HuluGraph?.init();
|
||||
}
|
||||
|
||||
function activate(tool) {
|
||||
if (tool === "graph") window.setTimeout(drawGraph, 30);
|
||||
if (tool === "graph") window.setTimeout(() => window.HuluGraph?.resize(), 30);
|
||||
if (tool === "whiteboard") window.setTimeout(() => geometry.draw(), 30);
|
||||
}
|
||||
|
||||
window.HuluToolbox = { init, activate, runCalculator, drawGraph };
|
||||
window.HuluToolbox = { init, activate, runCalculator };
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user