abstract class %ZEN.SVGComponent.svgComponent
extends %ZEN.Component.object
Base class for SVG components.
Unlike HTML components, SVG components are completely dynamic;
all rendering is done using client-side JavaScript.
Every component is rendered within its own enclosing group (g) element.
parameter DEFAULTASPECT;
Subclasses can set this to change the default value for the preserveAspectRatio/ property for a component.
parameter DEFAULTBOUNDLESS = 0;
Subclasses can set this to change the default value for the boundless property for a component.
parameter DEFAULTHEIGHT = 100;
Default height of this component.
parameter DEFAULTHIDDEN = 0;
Subclasses can set this to change the default value for the hidden property for a component.
parameter DEFAULTVIEWBOXHEIGHT;
Default viewBoxHeight of this component.
parameter DEFAULTVIEWBOXWIDTH;
Default viewBoxWidth of this component.
parameter DEFAULTVISIBLE = 1;
Subclasses can set this to change default visibilty for a component.
parameter DEFAULTWIDTH = 100;
Default width of this component.
parameter POSTCOMPILEACTIONS = "schema,SVG";
Internal parameter.
property boundless
as %ZEN.Datatype.boolean(ZENSETTING=0) [ InitialExpression = ..#DEFAULTBOUNDLESS ];
If true, this component is boundless. That is, it's enclosing
svg element is a simple group (g) instead of the usual svg element.
property document
as %ZEN.Datatype.string(XMLPROJECTION="none",ZENCLIENTONLY=1,ZENSETTING=0);
Client-side property that points to SVG document this component is rendered on.
property height
as %ZEN.Datatype.length [ InitialExpression = ..#DEFAULTHEIGHT ];
Width of this component.
This value is used for layout purposes.
The actual effect of setting this is up the specific component implementation.
property hidden
as %ZEN.Datatype.boolean [ InitialExpression = ..#DEFAULTHIDDEN ];
If true, this component is hidden. That is, it's enclosing
group's display style is set to "none".
property onclick
as %ZEN.Datatype.eventHandler;
onclick event handler:
This event is fired when the mouse is clicked on the shape.
This is the default onclick event for svg components; subclasses
may implement more specialized events (such as click on a specific part of the component).
property position
as %ZEN.Datatype.string(VALUELIST=",fixed,relative",ZENSETTING=0) [ InitialExpression = "relative" ];
If position is "fixed", then this shape will not scroll with its canvas
nor can it be dragged with the mouse.
This is used for placing fixed controller over the rest of an SVG canvas.
property preserveAspectRatio
as %ZEN.Datatype.string [ InitialExpression = ..#DEFAULTASPECT ];
Value to apply for this component's enclosing svg element's
preserveAspectRatio attribute.
Set this to "none" if you do not want the SVG Engine to preserve the aspect
ratio (height relative to width) for this component.
property svgComponent
as %ZEN.Datatype.boolean(XMLPROJECTION="none",ZENCLIENTONLY=1,ZENSETTING=0) [ InitialExpression = 1 ];
Client-side property used to determine if a component is an SVG component.
property svgGroup
as %ZEN.Datatype.string(XMLPROJECTION="none",ZENCLIENTONLY=1,ZENSETTING=0);
Client-side property that points to the enclosing SVG group element for this component.
property viewBoxHeight
as %ZEN.Datatype.integer [ InitialExpression = ..#DEFAULTVIEWBOXHEIGHT ];
If defined, this is used to calculate the height of the
viewBox attribute of the enclosing svg element.
property viewBoxWidth
as %ZEN.Datatype.integer [ InitialExpression = ..#DEFAULTVIEWBOXWIDTH ];
If defined, this is used to calculate the width of the
viewBox attribute of the enclosing svg element.
property width
as %ZEN.Datatype.length [ InitialExpression = ..#DEFAULTWIDTH ];
Width of this component.
This value is used for layout purposes.
The actual effect of setting this is up the specific component implementation.
property x
as %ZEN.Datatype.length [ InitialExpression = 0 ];
x position of this component's enclosing group.
The actual position of the component depends on the
layout applied by its containing svgGroup.
property y
as %ZEN.Datatype.length [ InitialExpression = 0 ];
y position of this component's enclosing group.
The actual position of the component depends on the
layout applied by its containing svgGroup.
final method %DrawHTML()
Do not allow HTML methods for SVG components.
method beginWaitState()
[ Language = javascript ]
Begin a wait state for this component.
This will display a waiting graphic in the center of this component.
The wait state is ended with a call to endWaitState.
method calculateViewBox()
[ Language = javascript ]
Calculate the value of the viewBox attribute of this
component's enclosing svg element.
Subclasses can override this, should they need to provide
a different behavior.
The default behavior is to use the width and height of this component
to come up with a 1 to 1 coordinate mapping; If the component
provides values for the viewboxWidth and
viewboxHeight properties, then these are used to
calculate the viewBox (and thus define a fixed coordinate system for the component).
method clickHandler(evt)
[ Language = javascript ]
Default mouse click handler.
method endWaitState()
[ Language = javascript ]
End the current wait state for this component.
final method findSVGElement(subid)
[ Language = javascript ]
Client-side utility method that finds an SVG element with a
component-specific id.
method getFrame()
[ Language = javascript ]
Return the svgFrame object this component belongs to.
method getSizeAbsolute()
[ Language = javascript ]
Return an object containing (as x,y,width, and height properties)
the absolute size and position (relative to the svg
canvas) of this component.
final method refreshContents()
[ Language = javascript ]
This is not supported for SVG components
method renderContents()
[ Language = javascript ]
Render the inner SVG contents of this component.
This is implemented by subclasses.
final method renderSVG(document, parent)
[ Language = javascript ]
Render the outer SVG enclosing group for this component
as well as its inner contents.
This is called by the svgFrame when the component
is first loaded or created.
parent is the parent SVG object this component should be added to.
method setOverlayMode(mode)
[ Language = javascript ]
Display an overlay for this component to trap mouse events
and/or support dragging/resizing with the mouse.
mode is the overlay mode:
0: turn off overlay.
1: turn on overlay.
2: turn on overlay, show indication that this component
is selected.
3: turn on overlay, show indication that this component
can be dragged.
method setPosition(x, y)
[ Language = javascript ]
Set the x,y position of this component.
Applications should not call this method.
abstract method setPositionHandler()
[ Language = javascript ]
Notification that this component has been moved.
This can be implemented by subclasses.
method setProperty(property, value, value2)
[ Language = javascript ]
Set the value of a named property.
method setSize(w, h)
[ Language = javascript ]
Set the size (width and height) of this component.
Applications should not call this method.
abstract method setSizeHandler()
[ Language = javascript ]
Notification that this component has been resized.
This can be implemented by subclasses.
method setTextNode(id, str)
[ Language = javascript ]
Utility method:
Find the svg text element with id id
and replace its text with str.
method sizingMouseDownHandler(evt, which)
[ Language = javascript ]
Internal: sizing handle mouse down handler.
method unrender()
[ Language = javascript ]
Remove the inner SVG for this component.
method wrapMethod(methodName)
[ Language = javascript ]
Utility method:
Construct a wrapper around an instance method of this object
that can be used as an event listener.