TypeScript & Custom tools

[Michal Kaczmarek]

Awesome tool.

I'm using it in TypeScript. It would be really cool if some wrote LiterallyCanvas typings, but it's not a huge deal.

I'm trying to create a custom tool. That's what I came up with (it's a simple line from the examples):

    class CraneTool {

        public LC;

        public name: string = "CraneTool";

        public strokeWidth = 4;

        public optionsStyle = "stroke-width";

        public usesSimpleAPI = true;

        public currentShape: any;

        public begin(x, y, lc) {

            this.currentShape = lc.createShape('Line', {

                x1: x, y1: y, x2: x, y2: y,

                strokeWidth: this.strokeWidth, color: this.LC.getColor('primary')

            });

        }

        public continue(x, y, lc) {

            this.currentShape.x2 = x;

            this.currentShape.y2 = y;

            this.LC.setShapesInProgress([this.currentShape]);

        }

        public end(x, y, lc) {

            this.LC.saveShape(this.currentShape);

        }

        public willBecomeInactive (lc) { }

        public didBecomeActive(lc) { }

        constructor(lc: any) {

            this.LC = lc;

        }

    }

And that's how I initialize LiterallyCanvas:

        let lc = (<any>window).LC;

        let planCanvas = lc.init(document.getElementsByClassName('plan-canvas')[0], { defaultStrokeWidth: 4, backgroundColor: '#fff', toolbarPosition: 'bottom' });

        let craneTool: CraneTool = new CraneTool(planCanvas);

        let tools = [

            { inst: this, name: 'pencil', el: $("#tool-pencil").parent()[0], tool: new lc.tools.Pencil(planCanvas) },

            { inst: this, name: 'eraser', el: $("#tool-eraser").parent()[0], tool: new lc.tools.Eraser(planCanvas) },

            { inst: this, name: 'rectangle', el: $("#tool-rectangle").parent()[0], tool: new lc.tools.Rectangle(planCanvas) },

            { inst: this, name: 'line', el: $("#tool-line").parent()[0], tool: new lc.tools.Line(planCanvas), },

            { inst: this, name: 'ellipse', el: $("#tool-ellipse").parent()[0], tool: new lc.tools.Ellipse(planCanvas), },

            { inst: this, name: 'text', el: $("#tool-text").parent()[0], tool: new lc.tools.Text(planCanvas), },

            { inst: this, name: 'CraneTool', el: $("#tool-crane").parent()[0], tool: craneTool }

        ];

        var activateTool = (t) => {

            planCanvas.setTool(t.tool);

        }

        tools.forEach((t) => {

            t.el.style.cursor = "pointer";

            t.el.onclick = (e) => {

                e.preventDefault();

                activateTool(t);

            };

        });

        activateTool(tools[0]);

Unfortunately, after clicking the crane tool icon, nothing happens - no errors, but nothing can be drawn. Any ideas how this can be done in TypeScript? Maybe somebody implemented LiterallyCanvas in TypeScript in a different way?

[Steve Johnson]

I'm really sorry, but I don't have time to investigate this. My only advice is to put `debugger` statements in your begin/continue/etc methods to make sure they're getting called, and if not, maybe see if TypeScript sets up the prototype chain in an unusual way.

--

You received this message because you are subscribed to the Google Groups "Literally Canvas" group.

To unsubscribe from this group and stop receiving emails from it, send an email to literallycanv...@googlegroups.com.

To post to this group, send email to literal...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/literallycanvas/5355ca5b-136c-4aec-9722-47a066800849%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Michal Kaczmarek]

I figured it out, maybe someone will find it useful:

export class MyTool {

        public LC: any;

        public name: string = "CraneTool";

        public strokeWidth = 4;

        public optionsStyle = "stroke-width";

        public usesSimpleAPI = false;

        public unsubscribeFuncs = [];

        public currentShape: any;

        constructor(lc: any) {

            this.LC = lc;

        }

        public didBecomeActive(lc) {

            let onPointerDown = (pt) => {

                this.currentShape = (<any>window).LC.createShape('Line', {

                    x1: pt.x, y1: pt.y, x2: pt.x, y2: pt.y,

                    strokeWidth: this.strokeWidth, color: this.LC.getColor('primary')

                });

                this.LC.setShapesInProgress([this.currentShape]);

                this.LC.repaintLayer('main');

            };

            let onPointerDrag = (pt) => {

                this.currentShape.x2 = pt.x;

                this.currentShape.y2 = pt.y;

                this.LC.setShapesInProgress([this.currentShape]);

                this.LC.repaintLayer('main');

            };

            let onPointerUp = (pt) => {

                this.currentShape.x2 = pt.x;

                this.currentShape.y2 = pt.y;

                this.LC.setShapesInProgress([]);

                this.LC.saveShape(this.currentShape);

                this.LC.repaintLayer('main');

            };

            let onPointerMove = (pt) => {

                console.log("Mouse moved to", pt);

            };

            this.unsubscribeFuncs = [

                this.LC.on('lc-pointerdown', onPointerDown),

                this.LC.on('lc-pointerdrag', onPointerDrag),

                this.LC.on('lc-pointerup', onPointerUp),

                this.LC.on('lc-pointermove', onPointerMove)

            ];

        }

        public willBecomeInactive(lc) {

            // call all the unsubscribe functions

            this.unsubscribeFuncs.map(function (f) { f() });

        }

    }

[Ramya gonchi]

Hi Michal Kaczmarek,

Thanks for your post, I too trying to implement LiterallyCanvas in TypeScript. I'm following ur way. But at  the starting position itself i got struct .  Could u tell me how did u import lc . For now (without knowledge) i'm implementing like this --- import * as LC  from 'literallycanvas' . 

  

[Michal Kaczmarek]

Hi Ramya,

Sorry for the late response. LiterallyCanvas assigns itself to the window object, so, as long as the LiterallyCanvas core library is referenced in the page, you can do:

let lc = (<any>window).LC;

Michal

[Ramya gonchi]

Thanks Michal.