XTF tags

Basic XTF element Interfaces

[scriptable, uuid(39e595c6-c566-40ad-bc4c-92fc4352cffd)]
interface nsIXTFGenericElement : nsIXTFElement
{
  void onCreated(in nsIXTFGenericElementWrapper wrapper);
};

[scriptable, uuid(6e051a6a-9ac3-4f3a-b701-d794761c47d9)]
interface nsIXTFSVGVisual : nsIXTFElement
{
  void onCreated(in nsIXTFSVGVisualWrapper wrapper);

  readonly attribute nsISupportsArray visualContent;
};

[scriptable, uuid(f6e8a067-a3ec-450f-b1e1-3f14ac2b369e)]
interface nsIXTFXMLVisual : nsIXTFElement
{
  void onCreated(in nsIXTFXMLVisualWrapper wrapper);

  readonly attribute nsISupportsArray visualContent;
};

[scriptable, uuid(f0617ed1-db6a-4704-ac4b-67bf15a77788)]
interface nsIXTFElement : nsISupports
{
  void onDestroyed();

  const unsigned long ELEMENT_TYPE_GENERIC_ELEMENT     = 0;
  const unsigned long ELEMENT_TYPE_SVG_VISUAL          = 1;
  const unsigned long ELEMENT_TYPE_XML_VISUAL          = 2;
  
  readonly attribute unsigned long elementType;
  
  void getScriptingInterfaces(out unsigned long count,
                              [array, size_is(count), retval] out nsIIDPtr array);

  void willChangeDocument(in nsISupports newDoc);
  void documentChanged(in nsISupports newDoc);
  
  void willInsertChild(in nsISupports child, in unsigned long index);
  void childInserted(in nsISupports child, in unsigned long index);

  ...
};

Sample implementation:

//----------------------------------------------------------------------
// smiley element

function xtfSmiley() {
  this.fragment =
    Components.classes["@mozilla.org/xtf/xml-contentfragment;1"]
              .createInstance(Components.interfaces.nsIXMLContentFragment);
  this.g = this.fragment.beginElement(SVG_NS, "g");
      this.fragment.attrib("style", "fill:yellow;");
    this.fragment.beginElement(SVG_NS, "circle");
      this.fragment.attrib("cx", "100");
      this.fragment.attrib("cy", "100");
      this.fragment.attrib("r", "120");
    this.fragment.endElement();
    this.fragment.beginElement(SVG_NS, "circle");
      this.fragment.attrib("cx", "50");
      this.fragment.attrib("cy", "50");
      this.fragment.attrib("r", "10");
      this.fragment.attrib("style", "fill:black;");
    this.fragment.endElement();
    this.fragment.beginElement(SVG_NS, "circle");
      this.fragment.attrib("cx", "150");
      this.fragment.attrib("cy", "50");
      this.fragment.attrib("r", "10");
      this.fragment.attrib("style", "fill:black;");
    this.fragment.endElement();
    this.mouth = this.fragment.beginElement(SVG_NS, "path");
      this.fragment.attrib("d", "M50,150 Q100,200 150,150");
      this.fragment.attrib("style", "fill:none;stroke:black;stroke-width:10;");
    this.fragment.endElement();
  this.fragment.endElement();

  var instance = this;
  this.g.addEventListener("mousedown", function(){instance.makeSad()}, true);
}

xtfSmiley.prototype = {
  // nsISupports implementation:
  QueryInterface: function(iid) {
    if (!iid.equals(Components.interfaces.nsIXTFSVGVisual) &&
        !iid.equals(Components.interfaces.nsIXTFElement) &&
        !iid.equals(Components.interfaces.nsISupports)) {
      throw Components.results.NS_ERROR_NO_INTERFACE;
    }
    return this;
  },
  
  // nsIXTFElement implementation:
  get elementType() {
    return Components.interfaces.nsIXTFElement.ELEMENT_TYPE_SVG_VISUAL;
  },
  AttributeSet: function(name, newValue) {
    // let our 'g' element inherit all attribs:
    this.g.setAttribute(name, newValue);
  },
  
  // nsIXTFSVGVisual implementation:
  get visualContent() {
    return this.fragment.content;
  },

  // implementation helpers:
  makeSad: function(evt) {
    // move controlpoint of quadratic bezier element:
    var quad = this.mouth.pathSegList.getItem(1);
    quad.y1 -= 10;
  }
};

Sample doc:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <smiley xmlns="urn:mozilla:xtf:tests:shapes"
          transform="translate(120,150)"/>
  <smiley xmlns="urn:mozilla:xtf:tests:shapes"
          style="fill:red;"
          transform="translate(100) rotate(30) scale(0.5)"/>
  <smiley xmlns="urn:mozilla:xtf:tests:shapes"
          style="fill:green;"
          transform="translate(200,50) rotate(-30) scale(0.5)"/>
</svg>

... and it looks like this: