Initial commit

Author: tpunt

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+typings
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,46 @@
+# Shape Drawing - Lightweight Charts™ Plugin
+
+This plugin adds enables for arbitrary shapes to be drawn on the chart. It requires LWC version `5.0.0` or greater.
+
+## Running Locally
+
+```shell
+npm install
+npm run dev
+```
+
+Visit `localhost:5173` in the browser.
+
+## Example:
+
+```js
+// Draw a triangle
+const shape1 = new ShapeDrawing(
+	[
+		{ price: 100, time: 1755856347 },
+		{ price: 100, time: 1755856347 },
+		{ price: 500, time: 1755846347 },
+	],
+	{
+		fillColor: '#ff0',
+		fillOpacity: 0.5,
+		borderColor: '#0ff',
+		borderWidth: 5,
+		borderStyle: LineStyle.Dashed,
+		showTimeAxisLabels: true,
+		showPriceAxisLabels: true,
+		labelColor: '#aaa',
+		labelTextColor: '#000',
+	},
+);
+
+lineSeries.attachPrimitive(shape1);
+```
+
+In `./src/example/example.ts`, the following is shown:
+
+<img width="1002" height="503" alt="demo screenshot" src="https://github.com/user-attachments/assets/cd751349-9a9f-4f4c-858d-6d650419ea9f" />
+
+The file also shows an implementation of interactive drawing via clicking on the chart. E.g.
+
+https://github.com/user-attachments/assets/97dc1993-6dd6-4c50-b951-a008db28c577

compile.mjs

@@ -0,0 +1,116 @@
+import { dirname, resolve } from 'node:path';
+import { copyFileSync, existsSync, mkdirSync, writeFileSync } from 'node:fs';
+import { build, defineConfig } from 'vite';
+import { fileURLToPath } from 'url';
+import { generateDtsBundle } from 'dts-bundle-generator';
+
+function buildPackageJson(packageName) {
+	/*
+	 Define the contents of the package's package.json here.
+	 */
+	return {
+		name: packageName,
+		version: '1.0.0',
+		keywords: ['lwc-plugin', 'lightweight-charts'],
+		type: 'module',
+		main: `./${packageName}.umd.cjs`,
+		module: `./${packageName}.js`,
+		types: `./${packageName}.d.ts`,
+		exports: {
+			import: {
+				types: `./${packageName}.d.ts`,
+				default: `./${packageName}.js`,
+			},
+			require: {
+				types: `./${packageName}.d.cts`,
+				default: `./${packageName}.umd.cjs`,
+			},
+		},
+	};
+}
+
+const __filename = fileURLToPath(import.meta.url);
+const currentDir = dirname(__filename);
+
+const pluginFileName = 'shape-drawing';
+const pluginFile = resolve(currentDir, 'src', `${pluginFileName}.ts`);
+
+const pluginsToBuild = [
+	{
+		filepath: pluginFile,
+		exportName: 'lwc-plugin-shape-drawing',
+		name: 'ShapeDrawing',
+	},
+];
+
+const compiledFolder = resolve(currentDir, 'dist');
+if (!existsSync(compiledFolder)) {
+	mkdirSync(compiledFolder);
+}
+
+const buildConfig = ({
+	filepath,
+	name,
+	exportName,
+	formats = ['es', 'umd'],
+}) => {
+	return defineConfig({
+		publicDir: false,
+		build: {
+			outDir: `dist`,
+			emptyOutDir: true,
+			copyPublicDir: false,
+			lib: {
+				entry: filepath,
+				name,
+				formats,
+				fileName: exportName,
+			},
+			rollupOptions: {
+				external: ['lightweight-charts', 'fancy-canvas'],
+				output: {
+					globals: {
+						'lightweight-charts': 'LightweightCharts',
+					},
+				},
+			},
+		},
+	});
+};
+
+const startTime = Date.now().valueOf();
+console.log('⚡️ Starting');
+console.log('Bundling the plugin...');
+const promises = pluginsToBuild.map(file => {
+	return build(buildConfig(file));
+});
+await Promise.all(promises);
+console.log('Generating the package.json file...');
+pluginsToBuild.forEach(file => {
+	const packagePath = resolve(compiledFolder, 'package.json');
+	const content = JSON.stringify(
+		buildPackageJson(file.exportName),
+		undefined,
+		4
+	);
+	writeFileSync(packagePath, content, { encoding: 'utf-8' });
+});
+console.log('Generating the typings files...');
+pluginsToBuild.forEach(file => {
+	try {
+		const esModuleTyping = generateDtsBundle([
+			{
+				filePath: `./typings/${pluginFileName}.d.ts`,
+			},
+		]);
+		const typingFilePath = resolve(compiledFolder, `${file.exportName}.d.ts`);
+		writeFileSync(typingFilePath, esModuleTyping.join('\n'), {
+			encoding: 'utf-8',
+		});
+		copyFileSync(typingFilePath, resolve(compiledFolder, `${file.exportName}.d.cts`));
+	} catch (e) {
+		console.error('Error generating typings for: ', file.exportName);
+	}
+});
+const endTime = Date.now().valueOf();
+console.log(`🎉 Done (${endTime - startTime}ms)`);

index.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+	<head>
+        <!-- redirect to example page -->
+		<meta http-equiv="refresh" content="0; URL=src/example/" />
+	</head>
+</html>