Class jsgl.elements.AbstractElement

In JSGL API, jsgl.elements.AbstractElement is a base class from which all the elements (graphic primitives) are inherited.

Following JSGL elements inherit from and hence implement the methods of jsgl.elements.AbstractElement:

• Line Element (jsgl.elements.LineElement),
• Rectangle Element (jsgl.elements.RectangleElement),
• Circle Element (jsgl.elements.CircleElement),
• Ellipse Element (jsgl.elements.EllipseElement),
• Polyline Element (jsgl.elements.PolylineElement),
• Polygon Element (jsgl.elements.PolygonElement),
• Image Element (jsgl.elements.ImageElement),
• Label Element (jsgl.elements.LabelElement),
• Bezièr Curve Element (jsgl.elements.CurveElement),
• Shape Element (jsgl.elements.ShapeElement), and
• Group Element (jsgl.elements.GroupElement).

The methods centralized in jsgl.elements.AbstractElement cover:

• z-index positioning of the elements,
• mouse events handling, allowing the application to add interactivity.

Sets the new Z-axis index of the element. This allows you to specify the order in which the elements will be painted.

Set the Z-axis index of myElement to 5:

myElement.setZIndex(5);

You can see how the z-index positioning works on the following demonstration:

version 1.0 (correction done in version 2.0)

Gets the curent Z-axis index of the element.

Number

Increase the myElement's z-index by one:

myElement.setZIndex(myElement.getZIndex()+1);

version 1.0

Sets the new mouse cursor for the element.

Set various cursors:

myCircle.setCursor(jsgl.Cursor.POINTER);
myPolygon.setCursor(jsgl.Cursor.CROSSHAIR);
myRect.setCursor(jsgl.Cursor.HELP);

The above code can be used to produce the following result. Move your mouse over the elements!

version 2.0

Gets the current mouse cursor of the element.

jsgl.Cursor

Set the cursor of myRect be the same as of myCircle:

myRect.setCursor(myCircle.getCursor());

version 2.0

Adds a listener function for handling mouse move events on the element.

If the listener should be executed as a method of some specific object, jsgl.util.delegate(obj, function(eventArgs) {…}) can be used.

Move the circle whenever the mouse is moved over the Bezièr curve:

myCurve.addMouseMoveListener(function(eventArgs) {
    myCircle.setCenterLocation(eventArgs.getLocation());
  });

The above code can be used to produce the following result:

Removes a listener function from the pool of mouse move event listeners.

Move the circle whenever the mouse is moved over the Bezièr curve (see above), but stop doing so when the panel is clicked:

var moveHandler = function(eventArgs) {
  myCircle.setCenterLocation(eventArgs.getLocation());
}
myCurve.addMouseMoveListener(moveHandler);
myPanel.addClickListener(function(eventArgs) {
    myCurve.getStroke().setColor('black');
    myCurve.removeMouseMoveListener(moveHandler);
  });

The above code can be used to produce the following result:

version 2.0

Adds a listener function for handling mouse down events on the element.

If the listener should be executed as a method of some specific object, jsgl.util.delegate(obj, function(eventArgs) {…}) can be used.

Move the circle whenever the mouse is pushed down on the rectangle:

myRect.addMouseDownListener(function(eventArgs) {
    myCircle.setCenterLocation(eventArgs.getLocation());
  });

The above code can be used to produce the following rectangle:

version 2.0

Removes a listener function from the pool of mouse down event listeners.

Move the circle whenever the mouse is pushed down on the rectangle (see above), but stop doing so when the panel is clicked outside of the rectangle:

function downHandler(eventArgs) {
  myCircle.setCenterLocation(eventArgs.getLocation());
}
myRect.addMouseDownListener(downHandler);
myPanel.addClickListener(function(eventArgs) {
    if(eventArgs.getSourceElement() == null) {
      myRect.getFill().setColor('black');
      myRect.removeMouseDownListener(downHandler);
    }
  });

The above code can be used to produce the following result:

version 2.0