☰
Navigation :

store

store Method

Description

Creates SVG data for the current diagram and passes this SVG data into the onSuccess function. Optionally, the method will return a Base64 encoded export of the diagram in png or jpeg format.

Important: When storing diagrams to your data store the diagram encoding must be preserved as UTF-8. Failure to do so may result in corrupted characters appearing in text in the diagram.

.store(/* Object */ options, /* Function */ onSuccess, /* Function */ onError)

Remarks

Creates valid SVG data for the current diagram and passes this SVG data into the onSuccess function which may be displayed in the browser or any other container that supports the SVG format. The diagram may also be loaded back into the drawing editor by passing it to the load method.

Parameters

options Object

An object with properties that control the store operation. These properties are:

onSuccess Function

This function will be called when diagram store completes successfully. It will be passed two parameters:

  1. The stored diagram SVG string.
  2. An object containing information related to the diagram. This object may include these properties:
    • image A string containing a Base64 encoded image of the stored diagram. This is present when the image option is true. The image will have the format specified by the format option.
    • fieldMeasurements An object containing the measurement data. This is present when the option includeFieldMeasurements is true. Here is an example of measurement data:
{
    units: "feetAndInches",
    stationLines: [
        {
            stationLineIncrement: 0,
            formattedStationLineIncrement: "0'",
            markers: [
                {
                    id: "1",
                    description: "Station Line One",
                    station: 10,
                    formattedStation: "10'",
                    distance: 10,
                    formattedDistance: "10'",
                    direction: "R"
                }
            ]
        }
    ],
    triangulationMeasurements: {
        markerPoints: [
            {
                id: "1",
                description: "Measurement Point One",
                refPt1: "A",
                refPt2: "B",
                distance1: 20,
                formattedDistance1: "20'",
                distance2: 20,
                formattedDistance2: "20'",
                direction: "L"
            }
        ]
    }
}

Note: the measurement layer data includes formatted and numeric versions of length and distance values.

  [
    {
        data: [
            {name "VIN", value: "1G1YW2DW0A1JB9MJ9"},
            {name "Type", value: "Coupe"},
            {name "Year", value: "2010"},
            {name "Make", value: "CHEVROLET"},
            {name "Model", value: "Corvette"},
            {name "Color", value: "green"}
        ],
        location: {
            latitude: 43.615789240432335, longitude: -116.20161872458031
        }
    },
    {
        data: [
            {name "VIN", value: "JN1BZ36D69L7HLX6H"},
            {name "Type", value: "Convertible/Cabriolet"},
            {name "Year", value: "2009"},
            {name "Make", value: "NISSAN"},
            {name "Model", value: "350Z"},
            {name "Color", value: "silver"}
        ],
        location: {
            latitude: 43.615790109279985, longitude: -116.20154530304812
        }
    },
    {
        data: [
            {name "VIN", value: "4S6CK58W12U4HNUEM"},
            {name "Type", value: "Sport Utility Vehicle (SUV)/M"},
            {name "Year", value: "2002"},
            {name "Make", value: "HONDA"},
            {name "Model", value: "Passport"},
            {name "Color", value: "black"}
        ],
        location: {
            latitude: 43.61579131999581, longitude: -116.20170057828369
        }
    }
]

onError Function

A function that accepts one parameter, an Error object. This function will be called if the store fails. The passed Error object indicates the nature of the failure. This function may return true to indicate that the error has been handled. If the function does not return true, the error will be passed on to the built-in error handler.

SVG Diagram and Image Consistency

When an image is requested as part of the store, the resulting SVG diagram and the image will be visually consistent. This implies that options that directly affect the exported image like width, height, and margin will impact the stored diagram as well. For example if an image is requested with width set to 800px, height set to 600px, and margin set to 40px, the stored diagram will have an aspect ratio of 4:3 with margin that is 5% of its width.

Example

editor = new window.__editor(undefined, document.getElementById('editor-node'));

/* set editor properties here */

editor.startup();

In code that runs after the editor is closed:

var diagramData = editor.store(
    {
        image: true,
        width: 300,
        height: 300,
        includeFieldMesurements: true,
        format: 'image/jpeg'
    },
    function (diagram, diagramInfo) {
        // The store was successful...
        // The parameter "diagram" is a string containing a copy of the
        // current diagram. The parameter "diagramInfo" contains
        // auxiliary information related the stored diagram. In
        // this case, diagramInfo.image will be a Base64 encoded
        // 300x300 JPEG image of the diagram as well as a json string
        // containing information about the field measurements in the
        // diagram.

        // Any operations that depend on the diagram copy or
        // the image must be done within the body of this callback
        // function.
    },
    function (error) {
        alert('Diagram store failed: ' + error.message);
    }
);