Skip to main content

%ZEN.SVGComponent.svgFrame

Class %ZEN.SVGComponent.svgFrame Extends (%ZEN.Component.component, %ZEN.SVGComponent.abstractSVGGroup) [ Deprecated, Inheritance = right, System = 3 ]

This is a specialized type of group that is used to place a set of SVG components within a page.
Only groups and SVG components can be places within an svgFrame. An error will occur if an HTML component is placed within an svgFrame.

Parameters​

DEFAULTWIDTH​

Parameter DEFAULTWIDTH = 300;

Default width of frame in parent page.

DEFAULTHEIGHT​

Parameter DEFAULTHEIGHT = 100;

Default height of frame in parent page.

POSTCOMPILEACTIONS​

Parameter POSTCOMPILEACTIONS = "schema,SVG";

Internal parameter. This is a list of which post-compile actions this component is registered for.

Properties​

frameStyle​

Property frameStyle As %ZEN.Datatype.style;

User defined style used for the svgFrame.

editMode​

Property editMode As %ZEN.Datatype.string(VALUELIST = ",none,select,drag") [ InitialExpression = "none" ];

Edit mode of this frame. This specifies how the pointer device (mouse) will interact with shapes on this frame.
"none" - no interaction.
"select" - a mouse click will select a shape.
"drag" - the mouse can select and move the shape.

svgAutoSize​

Property svgAutoSize As %ZEN.Datatype.boolean [ InitialExpression = 1 ];

If true, then the size of the svg canvas (the backing rectangle for this frame) will be automatically calculated (and updated) based on its contents.
The minimum size of the canvas is based on the values of svgWidth and svgHeight.
If false, the size is based on the values of svgWidth and svgHeight.
If the dragCanvas is true, then this property will be ignored.

dragCanvas​

Property dragCanvas As %ZEN.Datatype.boolean [ InitialExpression = 0 ];

If true, then the user can use the pointing device (mouse) to drag the canvas of this frame. This will update the values of the offsetX and offsetY properties and move the shapes on the canvas.

svgWidth​

Property svgWidth As %ZEN.Datatype.integer(MINVAL = 0);

Width (in pixels) of svg canvas. If not specified, then the width of the svg canvas will be the width of this frame.

svgHeight​

Property svgHeight As %ZEN.Datatype.integer(MINVAL = 0);

Height (in pixels) of svg canvas. If not specified, then the height of the svg canvas will be the height of this frame.

autoWidth​

Property autoWidth As %ZEN.Datatype.integer(MINVAL = 0, XMLPROJECTION = "none", ZENSETTING = 0) [ Internal ];

Internal property used to store the computed width of the svg canvas when auto-size is enabled.

autoHeight​

Property autoHeight As %ZEN.Datatype.integer(MINVAL = 0, XMLPROJECTION = "none", ZENSETTING = 0) [ Internal ];

Internal property used to store the computed height of the svg canvas when auto-size is enabled.

zoom​

Property zoom As %ZEN.Datatype.float(MINVAL = 1) [ InitialExpression = 100 ];

Zoom level as a percentage (100 equals no zoom).

zoomLevels​

Property zoomLevels As %ZEN.Datatype.csv [ InitialExpression = "10,25,50,75,100,125,150,175,200,300,400,500" ];

This is a comma-delimited list of suggested zoom levels.
These values are used by the zoomIn and zoomOut methods.

zoomWithWheel​

Property zoomWithWheel As %ZEN.Datatype.boolean [ InitialExpression = 0 ];

If true, then this frame will automatically zoom in and out in response to mouse wheel events (FireFox only).

svgRoot​

Property svgRoot As %ZEN.Datatype.string(XMLPROJECTION = "none", ZENCLIENTONLY = 1, ZENSETTING = 0);

Client-side property that points to the enclosing SVG root element (top svg element).

svgGroup​

Property svgGroup As %ZEN.Datatype.string(XMLPROJECTION = "none", ZENCLIENTONLY = 1, ZENSETTING = 0);

Client-side property that points to the enclosing SVG group element.

document​

Property document As %ZEN.Datatype.string(XMLPROJECTION = "none", ZENCLIENTONLY = 1, ZENSETTING = 0);

Client-side property that points to SVG document embedded within this element.

svgWindow​

Property svgWindow As %ZEN.Datatype.string(XMLPROJECTION = "none", ZENCLIENTONLY = 1, ZENSETTING = 0);

Client-side property that points to SVG window object embedded within this element.

backgroundStyle​

Property backgroundStyle As %ZEN.Datatype.svgStyle [ InitialExpression = "fill: white;" ];

CSS style used for the background of this frame.
Note: this background style must include a fill value or else mouse events within this frame will not work correctly.

selectedItem​

Property selectedItem As %ZEN.SVGComponent.svgComponent(XMLPROJECTION = "NONE", ZENSETTING = 0);

Primary selected svg component within this frame (if any).
If there are multiple selected items, this is the most recent selection.

selectedItems​

Property selectedItems As list Of %ZEN.SVGComponent.svgComponent(XMLPROJECTION = "NONE", ZENSETTING = 0);

Set of currently selected svg components within this frame.

onselectItem​

Property onselectItem As %ZEN.Datatype.eventHandler;

onselectItem event handler: This event is fired when the user changes the number of selected items on this frame (either by selecting or unselecting an item). A variable, item, is passed to this event handler and refers to the item most recently selected or unselected.

onmoveItem​

Property onmoveItem As %ZEN.Datatype.eventHandler;

onmoveItem event handler: This event is fired when this frame is in drag mode and the user moves one or more selected items.
Refer to the selectedItems property for the list of items.
A variable, done, is passed to this event handler and indicates if the if the operation is completed.

onresizeItem​

Property onresizeItem As %ZEN.Datatype.eventHandler;

onresizeItem event handler: This event is fired when this frame is in drag mode and the user resizes one or more selected items.
Refer to the selectedItems property for the list of items.
A variable, done, is passed to this event handler and indicates if the if the operation is completed.

ondragCanvas​

Property ondragCanvas As %ZEN.Datatype.eventHandler;

ondragCanvas event handler: This event is fired as the user drags the background canvas using a pointing device.
A variable, done, is passed to this event handler and indicates if the if the operation is completed.

onmouseWheel​

Property onmouseWheel As %ZEN.Datatype.eventHandler;

onmouseWheel event handler: This event is fired as the user moves the wheel on their mouse over the background rectangle of this frame.
Currently only available in FireFox.

onzoom​

Property onzoom As %ZEN.Datatype.eventHandler;

onzoom event handler: This event is fired whenever the zoom level for this frame is changed.

snapToGrid​

Property snapToGrid As %ZEN.Datatype.boolean [ InitialExpression = 0 ];

If true, all mouse operations (sizing and dragging) will be constrained to lie on the "grid" defined by gridX and gridY.

gridX​

Property gridX As %ZEN.Datatype.integer [ InitialExpression = 25 ];

If snapToGrid is true, this defines the width of each cell in the sizing grid.

gridY​

Property gridY As %ZEN.Datatype.integer [ InitialExpression = 25 ];

If snapToGrid is true, this defines the height of each cell in the sizing grid.

svgPage​

Property svgPage As %ZEN.Datatype.className(ZENSETTING = 0);

Optional. Specifies the name of the CSP page class (subclass of svgPage) that renders the SVG content wrapper within this svgFrame.

parameters​

Property parameters As array Of %ZEN.Auxiliary.parameter(XMLKEYNAME = "paramName", XMLNAME = "parameter", XMLPROJECTION = "ELEMENT");

User-defined list of parameters. These are passed on as URL parameters to the CSP Page class that renders the SVG contents.
Note: In early versions of Zen, the xml attribute used to identify items within this array was called "key"; it was later changed to "paramName" to be consistent with other components.

offsetX​

Property offsetX As %ZEN.Datatype.integer [ InitialExpression = 0 ];

This is the offset, along the x axis, of the coordinates of this frame from its upper, left-hand corner.

offsetY​

Property offsetY As %ZEN.Datatype.integer [ InitialExpression = 0 ];

This is the offset, along the y axis, of the coordinates of this frame from its upper, left-hand corner.

inlineSVG​

Property inlineSVG As %ZEN.Datatype.boolean(XMLPROJECTION = "none") [ InitialExpression = 0, Internal ];

Internal property used to indicate that this frame is using inline SVG.

XDatas​

Style​

XData Style

defines style sheet used by this component

Methods​

%OnAddToPageAfter​

Method %OnAddToPageAfter() As %Status

Called just after this form is added to the page.
Make sure that the page's useSVG flag is set.

%DrawHTML​

Method %DrawHTML()

getSVGDocument​

ClientMethod getSVGDocument() [ Language = javascript ]

Return the embedded SVG document object.

svgLoadHandler​

ClientMethod svgLoadHandler(win) [ Language = javascript ]

Notification that the embedded SVG page is loaded.

setBoundingBox​

ClientMethod setBoundingBox(width, height) [ Internal, Language = javascript ]

Set the size of the bounding box of this group.
This is called by the layout manager. Applications should not call this directly.

setEditMode​

ClientMethod setEditMode(mode) [ Language = javascript ]

Set the edit mode of the frame.

selectItem​

ClientMethod selectItem(item, add) [ Language = javascript ]

Select the specified item.
item must be a component within this frame.
If add is true, add (or remove if already selected) the item to the set of selected items, otherwise select only the item.
If item is null, unselect all items.

selectItemHandler​

ClientMethod selectItemHandler(item, add) [ Abstract, Language = javascript ]

Notification that an item has been selected. This can be implemented by a subclass. If this method is defined and returns false, the onselectItem callback will not be fired.

isSelected​

ClientMethod isSelected(item) [ Language = javascript ]

Test if given item is selected.

getSelectedItem​

ClientMethod getSelectedItem() [ Language = javascript ]

Return the current selected item within this frame. If no item is selected, return null. If more than one item is selected, return the primary selection (last item selected).

getSelectedItems​

ClientMethod getSelectedItems() [ Language = javascript ]

Return the set of currently selected items within this frame as an array of components.

canDragShapes​

ClientMethod canDragShapes() [ Language = javascript ]

Return true if shapes can be dragged on this frame.

mousewheelHandler​

ClientMethod mousewheelHandler(evt) [ Language = javascript ]

Mouse wheel event handler for this frame.

mousedownHandler​

ClientMethod mousedownHandler(evt) [ Language = javascript ]

Mouse down handler for this frame.

startMove​

ClientMethod startMove(evt, shape) [ Language = javascript ]

Start of move shape(s) operation.

startDragCanvas​

ClientMethod startDragCanvas(evt) [ Language = javascript ]

Start of drag canvas operation.

startResize​

ClientMethod startResize(evt, shape, which) [ Language = javascript ]

Start of resize operation.

mousemoveHandler​

ClientMethod mousemoveHandler(evt) [ Language = javascript ]

Mouse move handler for frame.

mouseupHandler​

ClientMethod mouseupHandler(evt) [ Language = javascript ]

Mouse up handler for frame.

moveItem​

ClientMethod moveItem(item, dx, dy) [ Language = javascript ]

Move the given component to a new position (depending on its parent's layout options).

setProperty​

ClientMethod setProperty(property, value, value2) [ Language = javascript ]

Set the value of a named property.

setFrameSize​

ClientMethod setFrameSize(w, h) [ Internal, Language = javascript ]

Internal method.
Set the width and height of this frame. Applications should use setProperty('width') or setProperty('height').
This method adjusts the size of the various coordinate-defining components that make up this frame: the div element used to house the frame on the web page; the embed element that contains the svg document; the top-level svg element, and the background (canvas) rectangle.

updateScalingGroup​

ClientMethod updateScalingGroup() [ Internal, Language = javascript ]

Internal method. Update transformation applied to the canvas scaling group.

setOffsets​

ClientMethod setOffsets(x, y) [ Language = javascript ]

Set the x and y offsets for this frame. This specifies how far the upper left corner of the frame is translated.

setZoom​

ClientMethod setZoom(value) [ Language = javascript ]

Set the zoom level of this frame to given percentage value.

zoomIn​

ClientMethod zoomIn(x, y) [ Language = javascript ]

Set the zoom level for this frame to the next higher value (as compared with the current level) in the zoomLevels list.
x and y, if defined, are the center point for the zoom. If not defined, the center of the frame is used.

zoomOut​

ClientMethod zoomOut(x, y) [ Language = javascript ]

Set the zoom level for this frame to the next lower value (as compared with the current level) in the zoomLevels list.
x and y, if defined, are the center point for the zoom. If not defined, the center of the frame is used.

setZoomIndex​

ClientMethod setZoomIndex(idx, x, y) [ Language = javascript ]

This will zoom this canvas to the (0-based) zoom index (i.e., entry in the zoomLevels array) specified by idx.
x and y, if defined, are the center point for the zoom. If not defined, the center of the frame is used.

getZoomIndex​

ClientMethod getZoomIndex(x) [ Language = javascript ]

Return current zoom index of this frame.

onloadHandler​

ClientMethod onloadHandler() [ Language = javascript ]

This client event, if present, is fired when the page is loaded.