class %ZEN.SVGComponent.svgFrame
extends %ZEN.Component.component, %ZEN.SVGComponent.abstractSVGGroup
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.
• parameter DEFAULTHEIGHT = 100;
Default height of frame in parent page.
• parameter DEFAULTWIDTH = 300;
Default width of frame in parent page.
• parameter POSTCOMPILEACTIONS = "schema,SVG";
Internal parameter.
This is a list of which post-compile actions this component
is registered for.
• 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.
• property document
as %ZEN.Datatype.string(XMLPROJECTION="none",ZENCLIENTONLY=1,ZENSETTING=0);
Client-side property that points to SVG document embedded within this element.
• 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.
• 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.
• property frameStyle
as %ZEN.Datatype.style;
User defined style used for the svgFrame.
• property gridX
as %ZEN.Datatype.integer [ InitialExpression = 25 ];
If snapToGrid is true, this defines the width
of each cell in the sizing grid.
• property gridY
as %ZEN.Datatype.integer [ InitialExpression = 25 ];
If snapToGrid is true, this defines the height
of each cell in the sizing grid.
• 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.
• 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.
• 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.
• 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.
• 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.
• 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.
• 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.
• property onzoom
as %ZEN.Datatype.eventHandler;
onzoom event handler:
This event is fired whenever the zoom level for this frame is changed.
• 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.
• 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.
• property selectedItems
as list of %ZEN.SVGComponent.svgComponent(XMLPROJECTION="NONE",ZENSETTING=0);
Set of currently selected svg components within this frame.
• 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.
• 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.
• property svgGroup
as %ZEN.Datatype.string(XMLPROJECTION="none",ZENCLIENTONLY=1,ZENSETTING=0);
Client-side property that points to the enclosing SVG group element.
• 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.
• 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.
• 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).
• 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.
• 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.
• property zoom
as %ZEN.Datatype.float(MINVAL=1) [ InitialExpression = 100 ];
Zoom level as a percentage (100 equals no zoom).
• 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.
• 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).
• method %DrawHTML()
Static HTML display method: draw the BODY of this component
as HTML.
Subclasses implement this in order to render the static HTML
contents of a component.
• method %OnAddToPageAfter()
as %Status
Called just after this form is added to the page.
Make sure that the page's useSVG flag is set.
• method canDragShapes()
[ Language = javascript ]
Return true if shapes can be dragged on this frame.
• method getSVGDocument()
[ Language = javascript ]
Return the embedded SVG document object.
• method 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).
• method getSelectedItems()
[ Language = javascript ]
Return the set of currently selected items within this frame
as an array of components.
• method getZoomIndex(x)
[ Language = javascript ]
Return current zoom index of this frame.
• method isSelected(item)
[ Language = javascript ]
Test if given item is selected.
• method mousedownHandler(evt)
[ Language = javascript ]
Mouse down handler for this frame.
• method mousemoveHandler(evt)
[ Language = javascript ]
Mouse move handler for frame.
• method mouseupHandler(evt)
[ Language = javascript ]
Mouse up handler for frame.
• method mousewheelHandler(evt)
[ Language = javascript ]
Mouse wheel event handler for this frame.
• method moveItem(item, dx, dy)
[ Language = javascript ]
Move the given component to a new position (depending on its parent's layout options).
• method onloadHandler()
[ Language = javascript ]
This client event, if present, is fired when the page is loaded.
• method 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.
• abstract method selectItemHandler(item, add)
[ 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.
• method setEditMode(mode)
[ Language = javascript ]
Set the edit mode of the frame.
• method 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.
• method setProperty(property, value, value2)
[ Language = javascript ]
Set the value of a named property.
• method setZoom(value)
[ Language = javascript ]
Set the zoom level of this frame to given percentage value.
• method 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.
• method startDragCanvas(evt)
[ Language = javascript ]
Start of drag canvas operation.
• method startMove(evt, shape)
[ Language = javascript ]
Start of move shape(s) operation.
• method startResize(evt, shape, which)
[ Language = javascript ]
Start of resize operation.
• method svgLoadHandler(win)
[ Language = javascript ]
Notification that the embedded SVG page is loaded.
• method 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.
• method 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.
