Add connecting line between existing shapes

Automation OmniGraffle Automation
#1

Knowing the ‘Name’ of two existing objects, I need to draw a line between them.

line = cnvs.connect(deviceStart,deviceEnd) seems to be the way to do this but how can I assign deviceStart and deviceEnd to be the two shapes for which I know the Names.

Secondary question…is there a single source manual for all things OmniJS related?

Thanks in advance,

Peter

#2

Greetings Peter. Thanks for asking.

A good place for information about Omni Automation (OmniJS) is https://omni-automation.com

Here’s a page on connections:

https://omni-automation.com/omnigraffle/graphics-02.html

Let me see if I can gin up the example you asked about.

– SAL

1 Like
#3

Here you go:

cnvs = document.windows[0].selection.canvas
deviceStart = cnvs.graphicWithName(‘deviceStart’)
deviceEnd = cnvs.graphicWithName(‘deviceEnd’)
line = cnvs.connect(deviceStart,deviceEnd)
line.lineType = LineType.Curved

Information about lines can be found here: https://omni-automation.com/omnigraffle/lines-00.html

#4

And the .connect method returns a reference to the created Line, to which you can then add formatting properties.

This version calls the omniJS code from Script Editor:

(() => {
    'use strict';


    // MAIN -------------------------------------------------------------------
    const ogJSContext = () => {

        // connectNamedShapesLR :: OGCanvas ->
        //          String -> String -> Either Message OGLine
        const connectNamedShapesLR = (cnv, name1, name2) => {
            const shp1 = cnv.graphicWithName(name1);
            return bindLR(
                shp1 === null ? (
                    Left('Shape not found: ' + name1)
                ) : Right(shp1),
                shp => {
                    const shp2 = cnv.graphicWithName(name2);
                    return shp2 === null ? (
                        Left('Shape not found: ' + name2)
                    ) : Right(cnv.connect(shp, shp2));
                }
            );
        };

        // main :: IO ()
        const main = () => {
            const
                cnv = document.portfolio.canvases[0],
                lrLine = bindLR(
                    connectNamedShapesLR(
                        cnv, 'deviceStart', 'deviceEnd'
                    ),
                    oLine => Right(
                        Object.assign(
                            oLine, {
                                strokeThickness: 2,
                                headType: 'FilledArrow',
                                strokeColor: Color.RGB(1, 0, 0)
                            }
                        )
                    )
                );
            return lrLine.Left || showJSON(lrLine.Right);
        };

        // GENERIC FUNCTIONS ------------------------------------------

        // Left :: a -> Either a b
        const Left = x => ({
            type: 'Either',
            Left: x
        });

        // Right :: b -> Either a b
        const Right = x => ({
            type: 'Either',
            Right: x
        });

        // bindLR (>>=) :: Either a -> (a -> Either b) -> Either b
        const bindLR = (m, mf) =>
            m.Right !== undefined ? (
                mf(m.Right)
            ) : m;

        // showJSON :: a -> String
        const showJSON = x => JSON.stringify(x, null, 2);

        // MAIN -------------------------------------------
        return main();
    };

    return Application('OmniGraffle')
        .evaluateJavascript(
            '(' + ogJSContext + ')()'
        );
})();
#5

Many thanks to you both - I shall investigate your suggestions.

Relatively new to JS, so I’m sure I’ll have a bunch more requests. This particular project is about integration with FileMaker so I’d be delighted to be introduced to anyone here with experience of such.

#6

There’s a whole section on https://omni-automation.com on FileMaker!

https://omni-automation.com/omnigraffle/filemaker/index.html