SVG State Variable Reference

Related documents

• State Variables Overview
• StateVar Reference
• Output SV Type Reference
• Input SV Type Reference
• SVG Drawing Module Reference

Table of contents

• Introduction
• Constructor
• Instance methods
  • Inherited methods
• Instance properties
  • Inherited properties
• DOM element properties

Introduction

SVG state variables represent SVG drawing outputs.

The value of an SVG state variable is a function with the following signature:

svgFn (node)

where node is a persistent wrapper element. The state variable is considered changed every time it is assigned. Once changed, every Component rendering the state variable will call the function with the Component's wrapper node. The function typically builds the drawing with an SvgScene and assigns the result to the node's innerHTML:

io.wb_diagram.value = (node) => {
	const scene = new SvgScene({viewBox:[width, height]});
	...
	node.innerHTML = scene.toString();
};

The wrapper node persists across redraws, so event listeners attached through the events property survive; events on the SVG children bubble up to the wrapper.

The rendered <svg> fills the wrapper, which has no intrinsic size of its own; size the wrapper with CSS, typically a width or height plus an aspect-ratio matching the drawing's viewBox.

Constructor

• Type string: 'svg', class: SvgSvCmp

Syntax

ctl.createPage({
	...,
	stateVarInfo:[
		{type:'svg', ...},
	],
})

Parameters

• info
  An object containing the state variable properties. The info object can contain the following properties, but subclasses of StateVar may have additional properties:
  • StateVar info properties.
  • Model SV type info properties.
  • Output SV type info properties.

Instance methods

Inherited methods

• StateVar methods
• ModelValueSv methods
• OutputSv methods

Note: The component() method returns an SvgSvCmp.

Instance properties

Inherited properties

• StateVar properties
• ModelValueSv properties
• OutputSv properties

DOM element properties

• Standard DOM element properties
• The DOM will contain a <span> wrapper element holding the rendered <svg>.
• The DOM element will have a className that contains 'svIo_svgOutput'