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.

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.

Syntax

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

Parameters

options: Object

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

ignoreMapError — When true, errors that occur while updating the map in the diagram will be ignored. When a map update error occurs and this option is enabled, the stored diagram will not include the map.
The default value is false.

image — When true, a Base64 encoded image of the current diagram will be generated along with the diagram SVG string. This image will be returned via the onSuccess callback along with the SVG string.
The default is false.

If image is true, these properties apply:

format — Specifies the image format. 'image/jpeg' (JPEG) and 'image/png' (PNG) are supported.
If not specified, the corresponding value in the exportOptions property in userSettings will be used.

imageQuality — This value sets the quality level for a JPEG export. Acceptable values are between 0.0 and 1.0. For best quality specify 1.0. A quality setting of 0.75 provides good image quality and compression. Lower quality settings provide greater image compression. This option is ignored for PNG images.
If not specified, the corresponding value in the exportOptions property in userSettings will be used.

trim — This option, when set to true, trims the white space so the resulting image has the same aspect ratio as the diagram.
The default is false.

resolutionPixels - The number of pixels per output resolution unit. This value and the value of resolutionUnit define the output resolution. Output resolution is always resolutionPixels / 1 resolutionUnit. For example, if resolutionUnit is 'inch' and resolutionPixels is 300, the output resolution will be 300px/inch.
If not specified, the corresponding value in the exportOptions property in userSettings will be used.

Note: Output resolution is important for two reasons. First, it is used to convert output sizes (width, height, margin) expressed as linear measurements to pixels. Second, some diagram features are sized based on output resolution. Items on the measurement layer and structure dimension lines are examples of this behavior. The sizes of these items are defined in points (1/72") and the output resolution is used to calculate their output size in pixels.

resolutionUnit — A standard linear unit of measure like 'inch' or 'cm' that is combined with resolutionPixels to define output resolution.
If not specified, the corresponding value in the exportOptions property in userSettings will be used.

width — The image width in pixels or expressed as a linear measurement like '7.5"' or '20cm'. When width is expressed as a linear measurement it will be converted to pixels based on the output resolution. For example if width is '7.5"' and output resolution is 300px/inch, the resulting width will be 2250px.
If not specified, the corresponding value in the exportOptions property in userSettings will be used.

height — The image height in pixels or expressed as a linear measurement like '10"' or '5cm'. When height is expressed as a linear measurement it will be converted to pixels based on the output resolution. For example if height is '10"' and output resolution is 300px/inch, the resulting height will be 3000px.
If not specified, the corresponding value in the exportOptions property in userSettings will be used.

margin — The image margin width in pixels or expressed as a linear measurement like '0.25"' or '0.5cm'. When margin is expressed as a linear measurement it will be converted to pixels based on the output resolution. For example if margin is '0.5"' and output resolution is 300px/inch, the resulting margin will be 150px.
If not specified, the corresponding value in the exportOptions property in userSettings will be used.

includePrefix — When set to true adds a data: URL prefix to the exported string. This image can then be used directly in the browser.
The default is true.

Note: Although the exported image may be used directly in this manner, keep in mind that the SVG passed into the onSuccess function can be easily displayed in your page. Using the SVG is more efficient than exporting the image and provides greater fidelity.

viewKey — The key of the view to be output as an image.
The default is 0 which is the key of the main diagram.

includeFieldMeasurements — When set to true, shapes from the measurement layer will be included in the stored SVG and the generated image -- a JSON formatted string that contains the data values from the measurement layer will also be returned in the "diagram info" hash which is the second argument passed to the onSuccess callback.
If not specified, the corresponding value defined in userSettings will be used.

includeAttachments — When set to true, attachments will be visible in the stored diagram.
If not specified, the corresponding value defined in userSettings will be used.

includeViews — When set to true, views will be included in the stored diagram.
The default is true.

skipIfBusy — When true, the store will be skipped if the user is in the middle of a diagram update operation; I.E., drawing a shape, dragging in a new shape, moving shaped, etc. When the store is skipped, undefined will be returned via the onSuccess callback function instead of a diagram SVG string and information about the diagram. When false, any diagram update in progress will be aborted before saving the diagram.
The default is false.

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.
    • location: When a location defined for the diagram, an object containing the geographic center of the diagram. This is an object specifying a geographic location with the following properties:

      latitude: Number +/-90

      longitude: Number +/-180

    • vehicleData: an object containing information about the vehicle symbols in the diagram with attached metadata. Vehicles have attached metadata when they are defined via the editor property vehicleData. Metadata can be entered for vehicles symbols through the symbol property dialog. Here is an example of vehicle data:
      [
          {
              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);
	}
);