jointjs/docs/src/joint/api/dia/Cell/markup.html

JavaScript diagramming library

<pre class="docs-method-signature"><code>markup</code></pre>

<p>
    Either an XML string or JSON markup specifying an array of JSON elements.
    Used as a template to build DOM Elements on the fly when the associated cellView is rendered.
</p>

<h4 id="dia.Cell.markup.xml">XML String</h4>

<p>
    A valid XML string that contains either a single <code>tagName</code> or XML that can be parsed with <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/DOMParser"><code>DOMParser</code></a>.
</p>

<pre><code>markup: 'rect'
markup: '&lt;rect class="rectangle"/&gt;'
markup: '&lt;rect&gt;&lt;g&gt;&lt;circle/&gt;&lt;circle/&gt;&lt;/g&gt;'</code></pre>

<p>
    Note that defining Cell markup with XML strings is slower than defining it with JSON arrays, precisely because of the need for parsing.
    We strongly recommend you to use the <a href="#dia.Cell.markup.json">JSON markup</a> for your Cell definitions.
</p>

<h4 id="dia.Cell.markup.json">JSON Markup</h4>

<p>
    JSON markup is defined recursively as an array of <code>JSONElement</code>, where <code>JSONElement</code> is a plain object with the following properties:
</p>

<ul>
    <li><code>tagName</code> <i>(string)</i> <i>(required)</i> The type of element to be created.</li>
    <li><code>selector</code> <i>(string)</i> A unique selector for targeting the element within the <code>attr</code> cell attribute.</li>
    <li><code>groupSelector</code> <i>(string | string[])</i> A selector for targeting multiple elements within the <code>attr</code> cell attribute. The group selector name must not be the same as an existing selector name.</li>
    <li><code>namespaceURI</code> <i>(string)</i> The namespace URI of the element. It defaults to SVG namespace <a target="_blank" href="https://www.w3.org/2000/svg"><code>"http://www.w3.org/2000/svg"</code></a>.</li>
    <li><code>attributes</code> <i>(object with attributes name-value pairs)</i> Attributes of the element.</li>
    <li><code>style</code> <i>(object with CSS property-value pairs)</i> The <code>style</code> attribute of the element.</li>
    <li><code>className</code> <i>(string)</i> The <code>class</code> attribute of the element.</li>
    <li><code>children</code> <i>(JSONMarkup)</i> The children of the element.</li>
    <li><code>textContent</code> <i>(string)</i> The text content of the element.</li>
</ul>

<pre><code>// single DOM element
markup: [{ tagName: 'rect' }]

// multiple DOM elements
markup: [{
    tagName: 'rect',
    selector: 'body'
}, {
    tagName: 'text',
    selector: 'label',
    attributes: {
        'stroke': 'none'
    }
}]

// nested DOM elements
markup: [{
    tagName: 'g',
    children: [{
        tagName: 'circle',
        selector: 'circle1',
        groupSelector: 'circles'
    }, {
        tagName: 'circle',
        selector: 'circle2',
        groupSelector: 'circles'
    }]
}]</code></pre>

<h5>Setting attributes with selectors</h5>

Here are simple rules how SVG attributes are set on the nodes when one uses combination of <code>selector</code> and <code>groupSelector</code>.

<ul>
    <li><code>selector</code> is unique i.e. can target a single node only.</li>
    <li><code>selector</code> takes precedence over <code>groupSelector</code>.</li>
    <li><code>groupSelector</code> targeting <code>n</code> nodes takes precedence over <code>groupSelector</code> targeting <code>m</code> nodes for <code>n</code> &lt; <code>m</code>. When <code>n</code> === <code>m</code> the order how the attributes are applied is unspecified.</li>
</ul>

<p>In the example below, the circle with the selector <code>circle1</code> is filled with <code>"red"</code> color. All the other circles are filled with <code>"blue"</code> color.</p>

<pre><code>cell.attr({
    circle1: { fill: 'red' },
    circles: { fill: 'blue', stroke: 'black' }
});</code></pre>