Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

HTML
<div id="container">
    <div id="background"></div>
    
    <ul class="sections">
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              <h1 id="archer-runtime-guide">Archer runtimeRuntime guide<Guide</h1>

            </div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <h2 id="graphic-initialization">Graphic initialization</h2>

            </div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>Create a new graphic instance by calling <code>create</code> with a DOM element as argument.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> containerElement = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'container'</span>);

<span class="hljs-keyword">var</span> graphic = archer.create(containerElement);</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>You can load a graphic using the built-in AJAX loader by calling <code>loadUrl(svgFileUrl, configFileUrl)</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.loadUrl(<span class="hljs-string">'archer.graphic.svg'</span>, <span class="hljs-string">'archer.config.json'</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>Because <code>loadUrl</code> works asynchronously you can use the <code>ready</code> event to get notified when the graphic has finished loading.</p>
<p>You have to wait for this event before you start using other runtime features like changing variable values or creating DOM event listeners.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.on(<span class="hljs-string">'ready'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Graphic is ready'</span>);
});</pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>Use the <code>error</code> event to get notified in case the graphic files could not be loaded.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.on(<span class="hljs-string">'error'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Could not load graphic'</span>);
});</pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>If you want to load the SVG markup and config JSON manually or create them from scratch you can use <code>load(svgMarkup, configJson)</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> svgMarkup = <span class="hljs-string">'...'</span>;
<span class="hljs-keyword">var</span> configJson = <span class="hljs-string">'...'</span>;

graphic.load(svgMarkup, configJson);</pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p>Both <code>load</code> and <code>loadUrl</code> can be called multiple times, in case you want to change the graphic during runtime.</p>

            </div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>If your graphic is using assets you have to specify the path in which the asset files can be found using <code>setAssetRoot(baseUrl)</code>.
All asset files need to be in the same path.</p>
<p><strong>NOTE</strong>: This has to be called <em>before</em> loading the graphic using either <code>load</code> or <code>loadUrl</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.setAssetRoot(<span class="hljs-string">'assets'</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-10">&#182;</a>
              </div>
              <p>When you don’t need to the graphic anymore you can dispose of it by calling <code>destroy</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.destroy();</pre></div></div>
            
        </li>
        
        
        <li id="section-11">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-11">&#182;</a>
              </div>
              <h2 id="value-manipulation">Value manipulation</h2>

            </div>
            
        </li>
        
        
        <li id="section-12">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-12">&#182;</a>
              </div>
              <p>You can change a variable value using <code>setValue(variableName, value)</code>.
This method is used for all types of variables (number, text and boolean).</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.setValue(<span class="hljs-string">'speed'</span>, <span class="hljs-number">123</span>);
graphic.setValue(<span class="hljs-string">'status'</span>, <span class="hljs-string">'pending'</span>);
graphic.setValue(<span class="hljs-string">'visible'</span>, <span class="hljs-literal">false</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-13">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-13">&#182;</a>
              </div>
              <p>Optionally you can provide a pre-formatted value using a third parameter <code>formattedValue</code>.
This value is only used in <em>text</em> transformations and allows you to display a more user-friendly string instead of the raw input value.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> speed = <span class="hljs-number">123.456789</span>;
<span class="hljs-keyword">var</span> speedFormatted = speed.toFixed(<span class="hljs-number">2</span>);

graphic.setValue(<span class="hljs-string">'speed'</span>, speed, speedFormatted);</pre></div></div>
            
        </li>
        
        
        <li id="section-14">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-14">&#182;</a>
              </div>
              <p>To retrieve the current value of a variable use <code>getValue(variableName)</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> speedValue = graphic.getValue(<span class="hljs-string">'speed'</span>);

<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Speed: '</span> + speedValue);</pre></div></div>
            
        </li>
        
        
        <li id="section-15">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-15">&#182;</a>
              </div>
              <h2 id="events">Events</h2>

            </div>
            
        </li>
        
        
        <li id="section-16">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-16">&#182;</a>
              </div>
              <h4 id="dom-events">DOM events</h4>

            </div>
            
        </li>
        
        
        <li id="section-17">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-17">&#182;</a>
              </div>
              <p>You can listen for DOM events by using <code>on(eventType, callback)</code> on an <code>element</code> object.
The callback parameters are the native DOM element and DOM event.
You can listen for any native DOM event.</p>
<p><strong>NOTE</strong>: The <code>graphic.element</code> accessor only accepts an element ID and returns <code>null</code> if there is no element with the specified ID.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> element = graphic.element(<span class="hljs-string">'elementId'</span>);

element.on(<span class="hljs-string">'click'</span>, logDomEvent);
element.on(<span class="hljs-string">'mouseover'</span>, logDomEvent);
element.on(<span class="hljs-string">'mouseout'</span>, logDomEvent);
element.on(<span class="hljs-string">'mousemove'</span>, logDomEvent);

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">logDomEvent</span>(<span class="hljs-params">domElement, domEvent</span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Event: '</span> + domEvent.type + <span class="hljs-string">', Element: '</span> + domElement.id);
}</pre></div></div>
            
        </li>
        
        
        <li id="section-18">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-18">&#182;</a>
              </div>
              <p>You can also listen to all registered events of a type by creating a listener on the <code>graphic</code> object and using the static prefix <code>element</code> for the event type.
This listener is called when that event occurs in any element that has a listener for that event.
That includes events that were configured in the Archer Editor.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.element(<span class="hljs-string">'element1'</span>).on(<span class="hljs-string">'click'</span>, logDomEvent);
graphic.element(<span class="hljs-string">'element2'</span>).on(<span class="hljs-string">'click'</span>, logDomEvent);
graphic.element(<span class="hljs-string">'element3'</span>).on(<span class="hljs-string">'click'</span>, logDomEvent);

graphic.on(<span class="hljs-string">'element.click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">domElement</span>) </span>{
    <span class="hljs-built_in">console</span>.log([<span class="hljs-string">'element1'</span>, <span class="hljs-string">'element2'</span>, <span class="hljs-string">'element3'</span>].indexOf(domElement.id) &gt;= <span class="hljs-number">0</span>); <span class="hljs-comment">// true</span>
});</pre></div></div>
            
        </li>
        
        
        <li id="section-19">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-19">&#182;</a>
              </div>
              <p>All DOM events are enhanced with a <code>bbox</code> object that contains information about the size and position of the target element:</p>
<ul>
<li><code>x</code> Horizontal offset in pixels from the graphic container</li>
<li><code>y</code> Vertical offset in pixels from the graphic container</li>
<li><code>clientX</code> Horizontal offset in pixels from the browsers client area</li>
<li><code>clientY</code> Vertical offset in pixels from the browsers client area</li>
<li><code>pageX</code> Horizontal offset in pixels from the HTML document</li>
<li><code>pageY</code> Vertical offset in pixels from the HTML document</li>
<li><code>width</code> Width of the element in pixels</li>
<li><code>height</code> Height of the element in pixels</li>
</ul>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.element(<span class="hljs-string">'elementId'</span>).on(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">domElement, mouseEvent</span>) </span>{

    <span class="hljs-keyword">var</span> bbox = mouseEvent.bbox;

    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Offset to graphic container: '</span> + bbox.x + <span class="hljs-string">','</span> + bbox.y);
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Offset to client area: '</span> + bbox.clientX + <span class="hljs-string">','</span> + bbox.clientY);
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Offset to document: '</span> + bbox.pageX + <span class="hljs-string">','</span> + bbox.pageY);
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Size: '</span> + bbox.width + <span class="hljs-string">','</span> + bbox.height);
});</pre></div></div>
            
        </li>
        
        
        <li id="section-20">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-20">&#182;</a>
              </div>
              <p>To remove an event listener use <code>off(eventType, callback)</code>. Make sure that you pass the same function reference that you passed to <code>on</code>.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onClick</span>(<span class="hljs-params">domElement</span>) </span>{}

graphic.element(<span class="hljs-string">'elementId'</span>).on(<span class="hljs-string">'click'</span>, onClick);
graphic.element(<span class="hljs-string">'elementId'</span>).off(<span class="hljs-string">'click'</span>, onClick);</pre></div></div>
            
        </li>
        
        
        <li id="section-21">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-21">&#182;</a>
              </div>
              <p>Alternatively each created listener returns a function to remove that listener.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> removeListener = graphic.element(<span class="hljs-string">'elementId'</span>).on(<span class="hljs-string">'click'</span>, onClick);

removeListener();</pre></div></div>
            
        </li>
        
        
        <li id="section-22">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-22">&#182;</a>
              </div>
              <h4 id="runtime-events">Runtime events</h4>

            </div>
            
        </li>
        
        
        <li id="section-23">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-23">&#182;</a>
              </div>
              <p>Using the same API you can also listen for events that the runtime dispatches itself, such as when a variable changed or an element was rendered.</p>
<p>The following events are available:</p>
<ul>
<li><code>ready</code> The graphic was successfully loaded</li>
<li><code>error</code> The graphic could not be loaded</li>
<li><code>variable.change</code> A variable value has changed, causing a new update cycle</li>
<li><code>scheduler.start</code> A new update cycle has started</li>
<li><code>scheduler.transform</code> All transformations have recalculated during an update cycle</li>
<li><code>element.render</code> A single element was rendered during an update cycle</li>
<li><code>scheduler.render</code> All elements were rendered during an update cycle</li>
<li><code>scheduler.complete</code> Update cycle was completed</li>
</ul>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.on(<span class="hljs-string">'ready'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Graphic loaded successfully'</span>);
});

graphic.on(<span class="hljs-string">'error'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Graphic could not be loaded'</span>);
});

graphic.on(<span class="hljs-string">'variable.change'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">variable, value, formattedValue</span>) </span>{
    <span class="hljs-built_in">console</span>.log(variable.name + <span class="hljs-string">' changed: '</span> + value + <span class="hljs-string">','</span> + formattedValue);
});

graphic.on(<span class="hljs-string">'element.render'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">domElement</span>) </span>{
    <span class="hljs-built_in">console</span>.log(domElement.id + <span class="hljs-string">' updated'</span>);
});

graphic.on(<span class="hljs-string">'scheduler.complete'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'Graphic updated'</span>);
});</pre></div></div>
            
        </li>
        
        
        <li id="section-24">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-24">&#182;</a>
              </div>
              <h2 id="viewport">Viewport</h2>

            </div>
            
        </li>
        
        
        <li id="section-25">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-25">&#182;</a>
              </div>
              <h4 id="viewport-manipulation">Viewport manipulation</h4>

            </div>
            
        </li>
        
        
        <li id="section-26">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-26">&#182;</a>
              </div>
              <p>To move the viewport you can use <code>moveBy(dx, dy, animate)</code>. The <code>dx</code> and <code>dy</code> parameters specify the horizontal and vertical translation in SVG units.</p>
<p>The <code>animate</code> flag is an optional parameter that specifies whether the resulting viewport change should be animated. The default value is <code>false</code> in which case the change happens instantaneous. This parameter is used in many of the following operations and has always the same effect.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.view.moveBy(<span class="hljs-number">25</span>, <span class="hljs-number">50</span>, <span class="hljs-literal">true</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-27">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-27">&#182;</a>
              </div>
              <p>To center the viewport on a specific point you can use <code>centerAt(x, y, animate)</code> where <code>x</code> and <code>y</code> specify the horizontal and vertical center in SVG units.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.view.centerAt(<span class="hljs-number">100</span>, <span class="hljs-number">100</span>, <span class="hljs-literal">true</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-28">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-28">&#182;</a>
              </div>
              <p>There are several methods for changing the zoom level:</p>
<ul>
<li><code>zoomTo(zoomLevel, target, animate)</code> Set an explicit zoom level</li>
<li><code>zoomIn(factor, target, animate)</code> Increase zoom level by a specified factor</li>
<li><code>zoomOut(factor, target, animate)</code> Decrease zoom level by a specified factor</li>
</ul>
<p>The <code>target</code> is an optional parameter that you can use if you want to zoom in on a specific point. The parameter value must be an object with the shape <code>{x, y}</code> where <code>x</code> and <code>y</code> are specified in SVG units. By default, or by passing <code>null</code>, the center of the graphic container is used.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.view.zoomTo(<span class="hljs-number">2</span>); <span class="hljs-comment">// Set zoom to 200%</span>
graphic.view.zoomTo(<span class="hljs-number">0.5</span>, {x: <span class="hljs-number">50</span>, y: <span class="hljs-number">50</span>}, <span class="hljs-literal">true</span>); <span class="hljs-comment">// Set zoom to 50%</span>

graphic.view.zoomIn(<span class="hljs-number">1.25</span>); <span class="hljs-comment">// Increase zoom by 25%</span>
graphic.view.zoomOut(<span class="hljs-number">2</span>, {x: <span class="hljs-number">50</span>, y: <span class="hljs-number">50</span>}, <span class="hljs-literal">true</span>); <span class="hljs-comment">// Decrease zoom by 50%</span></pre></div></div>
            
        </li>
        
        
        <li id="section-29">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-29">&#182;</a>
              </div>
              <p>To reset the graphic to its original size you can use <code>zoomToOriginal(animate)</code>. The viewport will be centered on the center of the graphic.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.view.zoomToOriginal(<span class="hljs-literal">true</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-30">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-30">&#182;</a>
              </div>
              <p>You can also make the graphic fit its container bounds by using <code>zoomToFit(padding, animate)</code>. The <code>padding</code> parameter specifies the distance between the graphic bounds and the container bounds. The viewport will be centered on the center of the graphic.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.view.zoomToFit(<span class="hljs-number">10</span>, <span class="hljs-literal">true</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-31">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-31">&#182;</a>
              </div>
              <p>You can make the viewport surround an element’s bounding box by using <code>zoomToElements(elements, padding, animate)</code>. <code>elements</code> can either be a single DOM element or an Array of DOM elements. When using an Array the viewport encompasses the elements’ combined bounding box. The <code>padding</code> parameter specifies the distance between the elements’ combined bounding box and the graphic container.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.element(<span class="hljs-string">'elementId'</span>).on(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">domElement</span>) </span>{
    graphic.view.zoomToElements(domElement, <span class="hljs-number">10</span>, <span class="hljs-literal">true</span>);
});</pre></div></div>
            
        </li>
        
        
        <li id="section-32">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-32">&#182;</a>
              </div>
              <h4 id="user-interaction">User interaction</h4>

            </div>
            
        </li>
        
        
        <li id="section-33">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-33">&#182;</a>
              </div>
              <p>The runtime allows for changing the viewport using the mouse. To enable mouse interaction use <code>enableMouse(panEnabled, zoomEnabled)</code>.
If <code>panEnabled</code> is <code>true</code> then clicking and dragging the mouse will pan the viewport. If <code>zoomEnabled</code> is <code>true</code> then using the mouse wheel will zoom the viewport.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.view.enableMouse(<span class="hljs-literal">true</span>, <span class="hljs-literal">true</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-34">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-34">&#182;</a>
              </div>
              <p>Both features can be turned off at any time by passing <code>false</code> as parameters.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>graphic.view.enableMouse(<span class="hljs-literal">false</span>, <span class="hljs-literal">false</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-35">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-35">&#182;</a>
              </div>
              <h4 id="container-resizing">Container resizing</h4>

            </div>
            
        </li>
        
        
        <li id="section-36">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-36">&#182;</a>
              </div>
              <p>If the graphic container has resized then the runtime needs to be notified of that change. Use <code>resize</code> to reinitialize the view to the new container bounds.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>containerElement.style[<span class="hljs-string">'width'</span>] = <span class="hljs-string">'500px'</span>;
containerElement.style[<span class="hljs-string">'height'</span>] = <span class="hljs-string">'500px'</span>;

graphic.view.resize();</pre></div></div>
            
        </li>
        
        
        <li id="section-37">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-37">&#182;</a>
              </div>
              <p>This may be necessary when the window size changes or your layout uses resizable panels.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'resize'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    graphic.view.resize();
});</pre></div></div>
            
        </li>
        
    </ul>
  </div>