Content.js

Inherits from: Pane.js

1 ) function: open
2 ) function: setBkColor
3 ) function: setWidth
4 ) function: setHeight
5 ) function: close
6 ) function: addAsText
7 ) function: addAsSVG
8 ) function: addAsObj
9 ) function: refresh
10 ) function: rotate
11 ) function: scaleUpH
12 ) function: scaleUpV
13 ) function: scaleDownH
14 ) function: scaleDownV
15 ) function: transRight
16 ) function: transLeft
17 ) function: transHTo
18 ) function: transVTo
19 ) function: transUp
20 ) function: transDown
21 ) function: relativeContentX
22 ) function: relativeContentY


Object: Content

Object Description:
Example:
Inherits from: Pane


Constructor: Content
  • Parameter
    : context - document context to use
transform - transform object associated with this content
x - x coordinate for this object
y - y coordinate for this object
width - width of this object
height - height of this object


Method: open
Description:
- Adds a group to the SVG.
- SVG displayed in this content pane will be added to this group.
- Makes the rect from Pane white, causing content panes to have a
white background.


Method: setBkColor
Description: Set the backround color of this contentPane


  • Parameter
    : iColor - the svg color, can be any valid svg color format
Added - Chris Peto


Method: setWidth
Description: Set the width of this contentPane
Doing this scales the content proportionally

  • Parameter
    : width - the width


Method: setHeight
Description: Set the height of this contentPane
Doing this scales the content proportionally

  • Parameter
    : height - the height


Method: close
Description: close this content pane
- removes this pane from the panes parent


Method: addAsText
Description: Add SVG content to this contentPane which is
XML encoded.

  • Parameter
    : text - the xml encoded content to add

Example:
Given a varaible text with the following xml string:

text = "";

Adding it to a contentPane called contentPane1 like so:

contentpane1.addAsText (text);

Would result in a 10x10 square being added to the the
content pane at position x=10, y=10


Method: addAsSVG
Description: Add SVG content to the content pane which is
already an SVG
Object.

  • Parameter
    : node - the SVG node to add

Example:
The following pseudocode creates a rectangle, and adds it
to the content pane

r = document.createElement ("rect");
r.setAttribute ("x", 10);
r.setAttribute ("y", 10);
r.setAttribute ("width", 10);
r.setAttribute ("height", 10);
contentPane1.addAsSVG (r);

This has the same effect as adding the xml string in the
addAsText example above.


Method: addAsObj
Description: Add CGUI based object to the content pane which is
already an SVG
Object.

  • Parameter
    : obj - the CGUI based object to add

Example:
The following pseudocode creates a CGUI based Slider, and adds it
to the content pane

redslider = new Slider(
14, 13, 239,18, 0,null,
changeRedColor
);

contentPane1.addAsObj (redslider);

This has the same effect as adding the xml string in the
addAsText example above.


Method: refresh
Description: Set the transform on the SVG object to the
transform contained in the jscript object.
This will refresh the display so it reflects
any changes made to the jscript.

Example:
Having changed the transform on this object directly in the
code - make sure you know what you're doing - you now want
to see the change in the contentPane. Thus:

contentPane1.someHowChangeTransform (x=20);
contentPane1.refresh();

Will result in the content shifting 20 to the right (assuming
the previous value of x was 0).


Method: rotate
Description: rotate the content
  • Parameter
    : angle - how many degrees to rotate the content
  • Parameter
    : new_zero_x - the new zero coordinate on the x axis
relative to the rotation

Example:
I use this method in the Bioviz genome browser to flip
content 180 degrees. It's probably not generic enough
to be here. Rotating something other than 180 degrees
with a random number for the new_zero_x has an interesting
effect on scaling and translating the content.
I would probably recommend that people not use this function
unless they're prepared to fix it. :)


Method: scaleUpH
Description: Zoom in on the content in the horizontal direction
  • Parameter
    : factor - by what factor should I scale the content

Example:


Method: scaleUpV
Description: Zoom in on the content in the vertical direction
  • Parameter
    : factor - by what factor should I scale the content

Example:


Method: scaleDownH
Description: zoom out in the horizontal direction
  • Parameter
    : factor - by what factor should I scale the content

Example:


Method: scaleDownV
Description: zoom out in the vertical direction
  • Parameter
    : factor - by what factor should I scale the content

Example:


Method: transRight
Description: translate the content to the right which gives
the appearance that the content pane is moving left.

  • Parameter
    : amount - the amount to move


Method: transLeft
Description: translate the content to the left which gives
the appearance that the content pane is moving right.

  • Parameter
    : amount - the amount to move


Method: setAnchor
Description: Set this anchor.
  • Parameter
    : target - the object to anchor to.
  • Parameter
    : ax - "left" "center" "right", the horizontal anchor position
  • Parameter
    : offsetx - the offset ('+':right '-':left) from the ax position
  • Parameter
    : ay - "top" "center" "bottom", the vertical anchor position
  • Parameter
    : offsety - the offset ('+':down '-':up) from the ay position

Example:
Continuing the setAnchor (frame, "left", "15", "bottom", "-15")
would anchor the object(the button)
Added - Chris Peto

There is documentation/code mismatch


Method: setAnchor

There is invalid Documentation present

Description: Set this anchor.
  • Parameter
    : target - the object to anchor to.
  • Parameter
    : ax - "left" "center" "right", the horizontal anchor position
  • Parameter
    : offsetx - the offset ('+':right '-':left) from the ax position
  • Parameter
    : ay - "top" "center" "bottom", the vertical anchor position
  • Parameter
    : offsety - the offset ('+':down '-':up) from the ay position

Example:
Continuing the setAnchor (frame, "left", "15", "bottom", "-15")
would anchor the object(the button)
Added - Chris Peto

There is documentation/code mismatch


Method: transUp
Description: translate the content up which gives the
appearance that the content pane is moving down.

  • Parameter
    : amount - the amount to move


Method: transDown
Description: translate the content down which gives the
appearance that the content pane is moving up.

  • Parameter
    : amount - the amount to move


Method: relativeContentX
Description: Give the mouse coordinate relative to the
Content. Note that this is distinct from the
relativeMouseX which doesn't take into account
the scale and translate applied to the Content.
  • Parameter
    :


Method: relativeContentY
Description: Give the mouse coordinate relative to the
Content. Note that this is distinct from the
relativeMouseY which doesn't take into account
the scale and translate applied to the Content.
  • Parameter
    :