Showcase: Use standalone Smiles Drawer in a typescript project

[Acylation]

https://github.com/Acylation/obsidian-chem

Run npm install smiles-drawer, and then declare it in the global.d.ts using the line declare module 'smiles-drawer';, then you'll have the smiles-drawer included in your project.

To call the module, you can use this to import import SmilesDrawer from 'smiles-drawer';

[Omer1Yuval1]

Thanks! Can you please post a minimal example that shows how to use this in React.js?

[Acylation]

I did try combining React with my project, https://github.com/Acylation/obsidian-chem-indev, in which it successfully identify the package while no actual rendering example had I implemented.

Maybe you can try this #157 (comment)

The quoted example calls SVGDrawer API, however, a rather wrapped-up class SmiDrawer would be easier to use (available for the latest version 2.1.7). Here's the rough type defs. JS Fiddle Pure JS demo for SmiDrawer()

declare module 'smiles-drawer' {
	class SmiDrawer {
		constructor(moleculeOptions?: object, reactionOptions?: object);
		static apply(
			moleculeOptions?: object,
			reactionOptions?: object,
			attribute?: string | undefined,
			theme?: string,
			successCallback?: CallableFunction,
			errorCallback?: CallableFunction
		): void;
		apply(
			attribute?: string,
			theme?: string,
			successCallback?: CallableFunction,
			errorCallback?: CallableFunction
		): void;
		draw(
			smiles: string,
			target:
				| HTMLElement
				| SVGElement
				| HTMLImageElement
				| string
				| 'svg'
				| 'canvas'
				| 'img'
				| null,
			theme?: string,
			successCallback?: CallableFunction,
			errorCallback?: CallableFunction,
			weights?: number[] | object
		): void;
		drawMolecule(
			smiles: string,
			target:
				| HTMLElement
				| SVGElement
				| HTMLImageElement
				| string
				| 'svg'
				| 'canvas'
				| 'img'
				| null,
			theme: string,
			weights: number[] | object,
			callback: CallableFunction
		): void;
		drawReaction(
			smiles: string,
			target:
				| HTMLElement
				| SVGElement
				| HTMLImageElement
				| string
				| 'svg'
				| 'canvas'
				| 'img'
				| null,
			theme: string,
			settings: object, // reaction settings
			weights: number[] | object,
			callback: CallableFunction
		): void;
		svgToCanvas(
			svg: SVGElement,
			canvas?: HTMLCanvasElement
		): HTMLCanvasElement;
		svgToImg(svg: SVGElement, img?: HTMLImageElement): HTMLImageElement;
		getDimensions(
			element: HTMLImageElement | HTMLCanvasElement | SVGElement,
			svg: SVGElement
		): { w: number; h: number };
	}
}