From 13e3cb341ad501f97d648d534a148112ddedd8e0 Mon Sep 17 00:00:00 2001 From: Glenn Rice Date: Fri, 6 Dec 2024 11:11:54 -0600 Subject: [PATCH] Add a way for a graph object to add to the help. A graph object can only add to the help when it is selected. The help is also updated when focus moves within the object to different defining points. So the graph object can give a different message depending on which point is focused. The sine wave tool uses this to let the user know restrictions on how the focused point can move. --- htdocs/js/GraphTool/graphtool.js | 14 +++++++++++++- htdocs/js/GraphTool/sinewavetool.js | 7 +++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/htdocs/js/GraphTool/graphtool.js b/htdocs/js/GraphTool/graphtool.js index 3021b43a7..d0baff166 100644 --- a/htdocs/js/GraphTool/graphtool.js +++ b/htdocs/js/GraphTool/graphtool.js @@ -629,6 +629,7 @@ window.graphTool = (containerId, options) => { gt.setMessageText( gt.tools .map((tool) => (typeof tool.helpText === 'function' ? tool.helpText() : tool.helpText || '')) + .concat([gt.selectedObj?.helpText()]) .filter((helpText) => !!helpText) ); }; @@ -846,6 +847,8 @@ window.graphTool = (containerId, options) => { return this.definingPts.some((point) => point.rendNode === e.target); } + helpText() {} + update() {} fillCmp(/* point */) { @@ -1305,6 +1308,11 @@ window.graphTool = (containerId, options) => { return false; } + helpText() { + if ('helpText' in graphObject) return graphObject.helpText.call(this, gt); + else if (parentObject) return super.helpText(); + } + update() { if ('update' in graphObject) graphObject.update.call(this, gt); else if (parentObject) super.update(); @@ -1519,6 +1527,7 @@ window.graphTool = (containerId, options) => { lastSelected = gt.selectedObj; } else { focusPoint?.rendNode.focus(); + gt.updateHelp(); return; } } @@ -1566,7 +1575,10 @@ window.graphTool = (containerId, options) => { } // Attach a focusin handler to all points to update the coordinates display. - point.focusInHandler = () => gt.setTextCoords(point.X(), point.Y()); + point.focusInHandler = () => { + gt.setTextCoords(point.X(), point.Y()); + setTimeout(() => gt.updateHelp()); + }; point.rendNode.addEventListener('focusin', point.focusInHandler); }); } diff --git a/htdocs/js/GraphTool/sinewavetool.js b/htdocs/js/GraphTool/sinewavetool.js index ba38a872c..31fb0f132 100644 --- a/htdocs/js/GraphTool/sinewavetool.js +++ b/htdocs/js/GraphTool/sinewavetool.js @@ -75,6 +75,13 @@ return new gt.graphObjectTypes.sineWave(shiftPoint, periodPoint, amplitudePoint, /solid/.test(string)); }, + helpText(_gt) { + if (this.focusPoint == this.definingPts[1]) + return 'Note that the selected point can only be moved left and right.'; + else if (this.focusPoint == this.definingPts[2]) + return 'Note that the selected point can only be moved up and down.'; + }, + helperMethods: { createSineWave(gt, point, period, amplitude, solid, color) { return gt.board.create(