From be726719f97543811e6cf6721cf301b7c95059cd Mon Sep 17 00:00:00 2001 From: Duane Nykamp Date: Thu, 16 Mar 2023 19:14:48 +0000 Subject: [PATCH] Adjust jsxgraph layers so points on same DoenetML layer are on top --- src/Viewer/renderers/angle.jsx | 2 +- src/Viewer/renderers/cobwebPolyline.jsx | 4 ++-- src/Viewer/renderers/curve.jsx | 22 +++++++++---------- src/Viewer/renderers/line.jsx | 4 ++-- src/Viewer/renderers/lineSegment.jsx | 6 ++--- src/Viewer/renderers/point.jsx | 1 + src/Viewer/renderers/polygon.jsx | 8 +++---- src/Viewer/renderers/polyline.jsx | 6 ++--- src/Viewer/renderers/ray.jsx | 4 ++-- .../renderers/regionBetweenCurveXAxis.jsx | 6 ++--- src/Viewer/renderers/vector.jsx | 4 ++-- 11 files changed, 34 insertions(+), 33 deletions(-) diff --git a/src/Viewer/renderers/angle.jsx b/src/Viewer/renderers/angle.jsx index 322cbcf6c7..f03a62f472 100644 --- a/src/Viewer/renderers/angle.jsx +++ b/src/Viewer/renderers/angle.jsx @@ -51,7 +51,7 @@ export default React.memo(function Angle(props) { visible: !SVs.hidden, withLabel: SVs.showLabel && SVs.labelForGraph !== "", fixed: true,//SVs.draggable !== true, - layer: 10 * SVs.layer + 7, + layer: 10 * SVs.layer + 5, radius: SVs.numericalRadius, fillColor: SVs.selectedStyle.fillColor, strokeColor: SVs.selectedStyle.lineColor, diff --git a/src/Viewer/renderers/cobwebPolyline.jsx b/src/Viewer/renderers/cobwebPolyline.jsx index 90e47ccf88..02beb25e8c 100644 --- a/src/Viewer/renderers/cobwebPolyline.jsx +++ b/src/Viewer/renderers/cobwebPolyline.jsx @@ -92,7 +92,7 @@ export default React.memo(function CobwebPolyline(props) { visible: !SVs.hidden && validCoords, withLabel: SVs.showLabel && SVs.labelForGraph !== "", fixed: true, - layer: 10 * SVs.layer + 7, + layer: 10 * SVs.layer + 5, strokeColor: SVs.selectedStyle.lineColor, highlightStrokeColor: SVs.selectedStyle.lineColor, strokeWidth: SVs.selectedStyle.lineWidth, @@ -112,7 +112,7 @@ export default React.memo(function CobwebPolyline(props) { visible: !SVs.hidden && validCoords && SVs.draggable, withLabel: true, name: "A", - layer: 10 * SVs.layer + 9, + layer: 10 * SVs.layer + 7, fillColor: SVs.selectedStyle.markerColor, strokeColor: SVs.selectedStyle.markerColor, size: SVs.selectedStyle.markerSize, diff --git a/src/Viewer/renderers/curve.jsx b/src/Viewer/renderers/curve.jsx index 41065effdf..989f4a0d3f 100644 --- a/src/Viewer/renderers/curve.jsx +++ b/src/Viewer/renderers/curve.jsx @@ -220,7 +220,7 @@ export default React.memo(function Curve(props) { fixed: true, strokeColor: 'var(--mainGray)', highlightStrokeColor: 'var(--mainGray)', - layer: 10 * SVs.layer + 7, + layer: 10 * SVs.layer + 6, strokeWidth: 1, highlightStrokeWidth: 1, }; @@ -234,7 +234,7 @@ export default React.memo(function Curve(props) { highlightStrokeColor: 'var(--mainGray)', strokeWidth: 1, highlightStrokeWidth: 1, - layer: 10 * SVs.layer + 7, + layer: 10 * SVs.layer + 6, size: 3, }; throughPointAlwaysVisible.current = { @@ -256,7 +256,7 @@ export default React.memo(function Curve(props) { highlightStrokeColor: 'var(--mainGray)', strokeWidth: 1, highlightStrokeWidth: 1, - layer: 10 * SVs.layer + 8, + layer: 10 * SVs.layer + 7, size: 2, }; @@ -616,9 +616,9 @@ export default React.memo(function Curve(props) { if (layerChanged) { curveJXG.current.setAttribute({ layer: curveLayer }); - segmentAttributes.current.layer = curveLayer + 2; - throughPointAttributes.current.layer = curveLayer + 2; - controlPointAttributes.current.layer = curveLayer + 3; + segmentAttributes.current.layer = curveLayer + 1; + throughPointAttributes.current.layer = curveLayer + 1; + controlPointAttributes.current.layer = curveLayer + 2; } if (curveJXG.current.visProp.strokecolor !== SVs.selectedStyle.lineColor) { @@ -811,11 +811,11 @@ export default React.memo(function Curve(props) { } if (layerChanged) { - throughPointsJXG.current[i].setAttribute({ layer: curveLayer + 2 }); - segmentsJXG.current[i][0].setAttribute({ layer: curveLayer + 2 }); - controlPointsJXG.current[i][0].setAttribute({ layer: curveLayer + 3 }); - segmentsJXG.current[i][1].setAttribute({ layer: curveLayer + 2 }); - controlPointsJXG.current[i][1].setAttribute({ layer: curveLayer + 3 }); + throughPointsJXG.current[i].setAttribute({ layer: curveLayer + 1 }); + segmentsJXG.current[i][0].setAttribute({ layer: curveLayer + 1 }); + controlPointsJXG.current[i][0].setAttribute({ layer: curveLayer + 2 }); + segmentsJXG.current[i][1].setAttribute({ layer: curveLayer + 1 }); + controlPointsJXG.current[i][1].setAttribute({ layer: curveLayer + 2 }); } throughPointsJXG.current[i].coords.setCoordinates(JXG.COORDS_BY_USER, [...SVs.numericalThroughPoints[i]]); diff --git a/src/Viewer/renderers/line.jsx b/src/Viewer/renderers/line.jsx index af07266550..5b29b7da19 100644 --- a/src/Viewer/renderers/line.jsx +++ b/src/Viewer/renderers/line.jsx @@ -57,7 +57,7 @@ export default React.memo(function Line(props) { visible: !SVs.hidden, withlabel, fixed, - layer: 10 * SVs.layer + 7, + layer: 10 * SVs.layer + 5, strokeColor: SVs.selectedStyle.lineColor, strokeOpacity: SVs.selectedStyle.lineOpacity, highlightStrokeColor: SVs.selectedStyle.lineColor, @@ -271,7 +271,7 @@ export default React.memo(function Line(props) { lineJXG.current.visProp.fixed = fixed; lineJXG.current.visProp.highlight = !fixed; - let layer = 10 * SVs.layer + 7; + let layer = 10 * SVs.layer + 5; let layerChanged = lineJXG.current.visProp.layer !== layer; if (layerChanged) { diff --git a/src/Viewer/renderers/lineSegment.jsx b/src/Viewer/renderers/lineSegment.jsx index 7845d2fbcd..915b7f0906 100644 --- a/src/Viewer/renderers/lineSegment.jsx +++ b/src/Viewer/renderers/lineSegment.jsx @@ -58,7 +58,7 @@ export default React.memo(function LineSegment(props) { visible: !SVs.hidden, withlabel, fixed, - layer: 10 * SVs.layer + 7, + layer: 10 * SVs.layer + 5, strokeColor: SVs.selectedStyle.lineColor, strokeOpacity: SVs.selectedStyle.lineOpacity, highlightStrokeColor: SVs.selectedStyle.lineColor, @@ -128,7 +128,7 @@ export default React.memo(function LineSegment(props) { strokeColor: 'none', highlightStrokeColor: 'none', highlightFillColor: getComputedStyle(document.documentElement).getPropertyValue("--mainGray"), - layer: 10 * SVs.layer + 8, + layer: 10 * SVs.layer + 6, showInfoBox: SVs.showCoordsWhenDragging, visible: endpointsVisible }); @@ -405,7 +405,7 @@ export default React.memo(function LineSegment(props) { lineSegmentJXG.current.visProp.fixed = fixed; lineSegmentJXG.current.visProp.highlight = !fixed; - let layer = 10 * SVs.layer + 7; + let layer = 10 * SVs.layer + 5; let layerChanged = lineSegmentJXG.current.visProp.layer !== layer; if (layerChanged) { diff --git a/src/Viewer/renderers/point.jsx b/src/Viewer/renderers/point.jsx index 0f69c5ae8b..8a11c66e8f 100644 --- a/src/Viewer/renderers/point.jsx +++ b/src/Viewer/renderers/point.jsx @@ -314,6 +314,7 @@ export default React.memo(function Point(props) { if (layerChanged) { pointJXG.current.setAttribute({ layer }); + shadowPointJXG.current.setAttribute({ layer: layer - 1 }); } let fixed = !SVs.draggable || SVs.fixed; diff --git a/src/Viewer/renderers/polygon.jsx b/src/Viewer/renderers/polygon.jsx index 25eb540df0..d821f48b9b 100644 --- a/src/Viewer/renderers/polygon.jsx +++ b/src/Viewer/renderers/polygon.jsx @@ -54,14 +54,14 @@ export default React.memo(function Polygon(props) { highlightFillColor: getComputedStyle(document.documentElement).getPropertyValue("--mainGray"), visible: !verticesFixed && !SVs.hidden, withLabel: false, - layer: 10 * SVs.layer + 9, + layer: 10 * SVs.layer + 7, highlight: true, }; let jsxBorderAttributes = { highlight: false, visible: !SVs.hidden, - layer: 10 * SVs.layer + 8, + layer: 10 * SVs.layer + 6, fixed: true, strokeColor: SVs.selectedStyle.lineColor, strokeOpacity: SVs.selectedStyle.lineOpacity, @@ -79,7 +79,7 @@ export default React.memo(function Polygon(props) { visible: !SVs.hidden, withLabel: SVs.showLabel && SVs.labelForGraph !== "", fixed, - layer: 10 * SVs.layer + 7, + layer: 10 * SVs.layer + 5, //specific to polygon fillColor, @@ -354,7 +354,7 @@ export default React.memo(function Polygon(props) { polygonJXG.current.visPropCalc["visible"] = visibleNow; // polygonJXG.current.setAttribute({visible: visibleNow}) - let polygonLayer = 10 * SVs.layer + 7; + let polygonLayer = 10 * SVs.layer + 5; let layerChanged = polygonJXG.current.visProp.layer !== polygonLayer; if (layerChanged) { diff --git a/src/Viewer/renderers/polyline.jsx b/src/Viewer/renderers/polyline.jsx index 0735d67ebc..676033b2f3 100644 --- a/src/Viewer/renderers/polyline.jsx +++ b/src/Viewer/renderers/polyline.jsx @@ -65,7 +65,7 @@ export default React.memo(function Polyline(props) { name: SVs.labelForGraph, visible: !SVs.hidden && validCoords, withLabel: SVs.showLabel && SVs.labelForGraph !== "", - layer: 10 * SVs.layer + 7, + layer: 10 * SVs.layer + 5, fixed, strokeColor: SVs.selectedStyle.lineColor, strokeOpacity: SVs.selectedStyle.lineOpacity, @@ -89,7 +89,7 @@ export default React.memo(function Polyline(props) { strokeColor: 'none', highlightStrokeColor: 'none', highlightFillColor: getComputedStyle(document.documentElement).getPropertyValue("--mainGray"), - layer: 10 * SVs.layer + 9, + layer: 10 * SVs.layer + 7, }); if (verticesFixed || SVs.hidden || !validCoords) { jsxPointAttributes.current.visible = false; @@ -301,7 +301,7 @@ export default React.memo(function Polyline(props) { polylineJXG.current.visProp.fixed = fixed; polylineJXG.current.visProp.highlight = !fixed; - let polylineLayer = 10 * SVs.layer + 7; + let polylineLayer = 10 * SVs.layer + 5; let layerChanged = polylineJXG.current.visProp.layer !== polylineLayer; if (layerChanged) { diff --git a/src/Viewer/renderers/ray.jsx b/src/Viewer/renderers/ray.jsx index 37925f8e90..f0c7b42799 100644 --- a/src/Viewer/renderers/ray.jsx +++ b/src/Viewer/renderers/ray.jsx @@ -54,7 +54,7 @@ export default React.memo(function Ray(props) { name: SVs.labelForGraph, visible: !SVs.hidden, withLabel: SVs.showLabel && SVs.labelForGraph !== "", - layer: 10 * SVs.layer + 7, + layer: 10 * SVs.layer + 5, fixed, strokeColor: SVs.selectedStyle.lineColor, strokeOpacity: SVs.selectedStyle.lineOpacity, @@ -228,7 +228,7 @@ export default React.memo(function Ray(props) { rayJXG.current.visProp.fixed = fixed; rayJXG.current.visProp.highlight = !fixed; - let layer = 10 * SVs.layer + 7; + let layer = 10 * SVs.layer + 5; let layerChanged = rayJXG.current.visProp.layer !== layer; if (layerChanged) { diff --git a/src/Viewer/renderers/regionBetweenCurveXAxis.jsx b/src/Viewer/renderers/regionBetweenCurveXAxis.jsx index 33d45e7088..699fe5e22e 100644 --- a/src/Viewer/renderers/regionBetweenCurveXAxis.jsx +++ b/src/Viewer/renderers/regionBetweenCurveXAxis.jsx @@ -46,7 +46,7 @@ export default React.memo(function RegionBetweenCurveXAxis(props) { visible: !SVs.hidden, withLabel: SVs.showLabel && SVs.labelForGraph !== "", fixed: true, - layer: 10 * SVs.layer + 7, + layer: 10 * SVs.layer + 5, fillColor, fillOpacity: SVs.selectedStyle.fillOpacity, @@ -105,7 +105,7 @@ export default React.memo(function RegionBetweenCurveXAxis(props) { integralJXG.current.curveLeft.coords.setCoordinates(JXG.COORDS_BY_USER, [x1, y1]); integralJXG.current.curveRight.coords.setCoordinates(JXG.COORDS_BY_USER, [x2, y2]); - let layer = 10 * SVs.layer + 7; + let layer = 10 * SVs.layer + 5; let layerChanged = integralJXG.current.visProp.layer !== layer; if (layerChanged) { @@ -136,7 +136,7 @@ export default React.memo(function RegionBetweenCurveXAxis(props) { integralJXG.current.needsUpdate = true; integralJXG.current.curveLeft.update(); integralJXG.current.fullUpdate(); - + board.update(); board.fullUpdate(); diff --git a/src/Viewer/renderers/vector.jsx b/src/Viewer/renderers/vector.jsx index fe88b8d91c..71c06102ea 100644 --- a/src/Viewer/renderers/vector.jsx +++ b/src/Viewer/renderers/vector.jsx @@ -54,7 +54,7 @@ export default React.memo(function Vector(props) { } - let layer = 10 * SVs.layer + 7; + let layer = 10 * SVs.layer + 5; let fixed = !SVs.draggable || SVs.fixed; //things to be passed to JSXGraph as attributes @@ -358,7 +358,7 @@ export default React.memo(function Vector(props) { } - let layer = 10 * SVs.layer + 7; + let layer = 10 * SVs.layer + 5; let layerChanged = vectorJXG.current.visProp.layer !== layer; if (layerChanged) {