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 https://github.com/reymond-group/smilesDrawer/issues/157#issuecomment-1484825796

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 };
    }
}