Make a few consistency/documentation improvements

Author: tpunt

README.md

@@ -2,6 +2,20 @@
 
 This plugin adds enables for arbitrary shapes to be drawn on the chart. It requires LWC version `5.0.0` or greater.
 
+Shape features:
+ - Border styling: colour, width, style, visibility
+ - Fill styling: colour, opacity
+ - Ability to drag corners of shapes, or the whole shape
+ - Mutability: *true* (default) for interactivity (hovering/dragging), *false* for simply displaying the shape
+ - Hovering: change border width, change fill opacity, show a custom shape on the corners (square or circle) and set its size, detect when hovering over the fill and/or the borders of a shape
+ - Show/hide the time/price axis labels of the unique corners of a shape, including changing label/text colours and price/time formatters
+
+See the `ShapeDrawingOptions` interface in `./src/options.ts` for setting these properties.
+
+## Visual Demo
+
+![shape-drawing-demo](https://github.com/user-attachments/assets/e5b28fdf-548a-4e3e-80f6-fb957e99bf71)
+
 ## Running Locally
 
 ```shell
@@ -11,7 +25,7 @@ npm run dev
 
 Visit `localhost:5173` in the browser.
 
-## Example:
+## Code Example
 
 ```js
 // Draw a triangle

src/example/classes.ts

@@ -8,7 +8,7 @@ export const defaultShapeOptions: Partial<ShapeDrawingOptions> = {
 	borderColor: '#f0f',
 	borderWidth: 2,
 	borderStyle: LineStyle.Dashed,
-	hoveredEdgeWidth: 4,
+	hoveredBorderWidth: 4,
 	hoveredFillOpacity: 0.6,
 };
 

src/example/example.ts

@@ -24,7 +24,7 @@ const shape1 = new ShapeDrawing(
 		showPriceAxisLabels: true,
 		labelColor: '#aaa',
 		labelTextColor: '#000',
-		hoveredEdgeWidth: 8,
+		hoveredBorderWidth: 8,
 		hoveredFillOpacity: 0.6,
 	},
 );

src/example/helpers.ts

@@ -1,22 +1,39 @@
 import { Logical, MouseEventParams, Time } from "lightweight-charts";
 import { defaultShapeOptions, Point } from "./classes";
-import { chart, fillOpacityElement, lineSeries, seriesPricePrecision, state } from "./data";
+import { chart, fillOpacityElement, lineSeries, seriesPricePrecision, shapeDrawingSelectionElement, state } from "./data";
 import { HoveredObject, ShapeDrawing } from "../shape-drawing";
 
+const selectedButtonColor = '#aaa';
+const deselectedButtonColor = '#ccc';
+
 export function shapeDrawingSelection(event: MouseEvent) {
 	if (!(event.target instanceof HTMLButtonElement)) {
 		return;
 	}
 
+	if (state.currentlySelectedShape) {
+		selectShape(null);
+	}
+
 	if (state.shapeToDraw === event.target.textContent) { // Deselect it
-		event.target.style.backgroundColor = '#ccc';
+		event.target.style.backgroundColor = deselectedButtonColor;
 		state.shapeToDraw = '';
 		state.edgeCount = 0;
 		state.shapeOptions = defaultShapeOptions;
 		return;
 	}
 
-	event.target.style.backgroundColor = '#aaa';
+	if (state.shapeToDraw !== '') {
+		// Fetch the shapeToDraw button by iterating through all buttons and finding the one with the same textContent
+		const shapeToDrawButton = Array.from(shapeDrawingSelectionElement.children).find(
+			button => (button as HTMLButtonElement).textContent === state.shapeToDraw
+		);
+		if (shapeToDrawButton) {
+			(shapeToDrawButton as HTMLButtonElement).style.backgroundColor = deselectedButtonColor;
+		}
+	}
+
+	event.target.style.backgroundColor = selectedButtonColor;
 
 	state.shapeToDraw = event.target.textContent!;
 
@@ -195,6 +212,17 @@ export function chartCrosshairMoveEvent(event:  MouseEventParams<Time>) {
 export function keyUpEvent(event: KeyboardEvent) {
 	switch (event.key) {
 	case 'Escape':
+		if (state.shapeToDraw !== '') {
+			// Fetch the shapeToDraw button by iterating through all buttons and finding the one with the same textContent
+			const shapeToDrawButton = Array.from(shapeDrawingSelectionElement.children).find(
+				button => (button as HTMLButtonElement).textContent === state.shapeToDraw
+			);
+			if (shapeToDrawButton) {
+				(shapeToDrawButton as HTMLButtonElement).style.backgroundColor = deselectedButtonColor;
+			}
+			state.shapeToDraw = '';
+		}
+
 		if (state.currentlySelectedShape) {
 			selectShape(null);
 		}

src/example/index.html

@@ -33,6 +33,7 @@
 			#shapeDrawingSelection > button {
 				font-size: 2em;
 				display: block;
+				background-color: #ccc;
 			}
 
 			#shapeDrawingSelection > button:hover {
@@ -54,6 +55,10 @@
 			#shapeDrawingOptions > label {
 				display: block;
 			}
+
+			#shapeDrawingOptions > label > input {
+				display: block;
+			}
 		</style>
 	</head>
 	<body style="background-color: #555">

src/options.ts

@@ -19,8 +19,8 @@ export interface ShapeDrawingOptions {
 	hoveredFillDetection: boolean; // Allows for hovering over the middle of a shape. Always off if joinFirstToLastCorner = false
 	hoveredCornerShape: HoveredCornerShape | null; // The fill is the same as the border color
 	hoveredCornerSize: number; // The size of the corner in pixels
-	hoveredEdgeWidth: number;
-	hoveredEdgeDetection: boolean;
+	hoveredBorderWidth: number;
+	hoveredBorderDetection: boolean;
 
 	// Axis options
 	showTimeAxisLabels: boolean;
@@ -42,12 +42,12 @@ export const defaultOptions: ShapeDrawingOptions = {
 	joinFirstToLastCorner: true,
 
 	mutable: true,
-	hoveredEdgeWidth: 2,
+	hoveredBorderWidth: 2,
 	hoveredFillOpacity: 0.7,
 	hoveredCornerShape: HoveredCornerShape.Square,
 	hoveredCornerSize: 20,
 	hoveredFillDetection: true,
-	hoveredEdgeDetection: true,
+	hoveredBorderDetection: true,
 
 	showTimeAxisLabels: false,
 	showPriceAxisLabels: false,

src/shape-drawing.ts

@@ -156,8 +156,8 @@ export class ShapeDrawing
 
 	private _setHovered(yes: boolean) {
 		if (yes) {
-			if (this._options.borderWidth !== this._options.hoveredEdgeWidth) {
-				this._options.borderWidth = this._options.hoveredEdgeWidth;
+			if (this._options.borderWidth !== this._options.hoveredBorderWidth) {
+				this._options.borderWidth = this._options.hoveredBorderWidth;
 				this._options.fillOpacity = this._options.hoveredFillOpacity;
 				this._highlightCorners = true;
 				this.requestUpdate();
@@ -197,12 +197,12 @@ export class ShapeDrawing
 			// For lines (2 points), check if cursor is near the line segment
 			// For polygons (3+ points), check if cursor is inside the shape
 			if (points.length === 2) {
-				if (this._options.hoveredEdgeDetection && this._isPointNearLine(x, y, points[0], points[1])) {
+				if (this._options.hoveredBorderDetection && this._isPointNearLine(x, y, points[0], points[1])) {
 					hovered = true;
 				}
 			} else if (points.length >= 3) {
 				if (!this._options.hoveredFillDetection || !this._options.joinFirstToLastCorner) { // Border hovering only
-					if (this._options.hoveredEdgeDetection) {
+					if (this._options.hoveredBorderDetection) {
 						for (let i = 1; i < points.length; i++) {
 							if (this._isPointNearLine(x, y, points[i - 1], points[i])) {
 								hovered = true;
@@ -306,7 +306,7 @@ export class ShapeDrawing
 			return false;
 		}
 
-		const hitRadius = this._options.hoveredEdgeWidth / devicePixelRatio;
+		const hitRadius = this._options.hoveredBorderWidth / devicePixelRatio;
 
 		// Calculate the distance from point (x, y) to line segment (p1, p2)
 		const A = x - p1.x;