1899 lines
72 KiB
HTML
1899 lines
72 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GoJS® TextBlock Class</title>
|
|
|
|
<script src="../../assets/js/jquery.min.js"></script>
|
|
<script src="../../assets/js/bootstrap.min.js"></script>
|
|
<script src="../../assets/js/highlight.js"></script>
|
|
<script src="../../assets/js/api.js"></script>
|
|
|
|
<link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
|
|
<!-- custom CSS after bootstrap -->
|
|
<link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/>
|
|
<link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>
|
|
<!--<link rel="stylesheet" href="../../assets/css/api.css" type="text/css" media="all" />-->
|
|
<link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<!-- non-fixed navbar -->
|
|
<nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
|
|
<a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a>
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="navbar" class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="../../index.html">Home</a></li>
|
|
<li><a href="../../learn/index.html">Learn</a></li>
|
|
<li><a href="../../samples/index.html">Samples</a></li>
|
|
<li><a href="../../intro/index.html">Intro</a></li>
|
|
<li><a href="../../api/index.html">API</a></li>
|
|
<li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
|
|
<li><a href="../../doc/download.html">Download</a></li>
|
|
<li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
|
|
<li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
|
|
<li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
|
|
<li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
|
|
</ul>
|
|
</div><!--/.nav-collapse -->
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
<!-- ============================== classes index ============================ -->
|
|
<div id="navindex" class="col-md-2">
|
|
<!-- begin publish.classesIndex -->
|
|
<!-- <div><a href="../index.html">GoJS Class Index</a></div> -->
|
|
|
|
<div class="sidebar-nav">
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Diagram Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
|
|
|
|
<li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
|
|
|
|
<li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li>
|
|
|
|
<li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li>
|
|
|
|
<li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li>
|
|
|
|
<li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Geometry Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
|
|
|
|
<li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li>
|
|
|
|
<li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li>
|
|
|
|
<li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Model Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Layout Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Tool Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
<li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
|
|
|
|
<li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
|
|
|
|
|
|
|
|
<li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
|
|
|
|
<li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
|
|
|
|
<li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
|
|
|
|
<li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
|
|
|
|
<li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
|
|
|
|
<li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
|
|
|
|
<li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li>
|
|
|
|
<li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Collection Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
|
|
|
|
<li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/List.html" class="linkConstructor">List</a></li>
|
|
|
|
<li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div> <!-- /class="sidebar-nav -->
|
|
|
|
|
|
|
|
|
|
<!-- end publish.classesIndex -->
|
|
</div>
|
|
|
|
<div id="contentBody" class="col-md-10">
|
|
<!-- ============================== header ================================= -->
|
|
<div id="header" class="fineprint mt30">
|
|
<b>GoJS</b>® Diagramming Components<br/>version 1.8.5 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
|
|
</div>
|
|
|
|
<!-- ============================== class title ============================ -->
|
|
<h2 class="classTitle mt30">
|
|
|
|
Class TextBlock
|
|
|
|
</h2>
|
|
|
|
<!-- ============================== class summary ========================== -->
|
|
<span class="hideshowall">
|
|
<span class="nodetails"><button id="buttonShow">Show Details</button></span>
|
|
<span class="details"><button id="buttonHide">Show Summaries</button></span>
|
|
</span>
|
|
|
|
<p class="classsummary">
|
|
|
|
<span class="extends"> Extends
|
|
<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.</span>
|
|
|
|
|
|
A TextBlock is a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that displays a <a href="../symbols/TextBlock.html#text" class="linkProperty">text</a> string in a given <a href="../symbols/TextBlock.html#font" class="linkProperty">font</a>.
|
|
<p>
|
|
The size and appearance of the text is specified by <a href="../symbols/TextBlock.html#font" class="linkProperty">font</a>,
|
|
which takes a well-formed CSS string as its value.
|
|
The order of the CSS properties given is important for cross-browser compatibility,
|
|
and should be given in this order:
|
|
<p>
|
|
<em>"font-style font-variant font-weight font-size font-family"</em>
|
|
<p>
|
|
For example, "Italic small-caps bold 32px Georgia, Serif" is a valid font string
|
|
using every CSS font property. Note that not all browsers may support every property.
|
|
<p>
|
|
Text is drawn using the <a href="../symbols/TextBlock.html#stroke" class="linkProperty">stroke</a> brush, which may be any CSS color string or a <a href="../symbols/Brush.html" class="linkConstructor">Brush</a>.
|
|
|
|
Some created TextBlocks:
|
|
<pre>var $ = go.GraphObject.make; // for conciseness in defining GraphObjects
|
|
|
|
// A TextBlock with text and stroke properties set:
|
|
$(go.TextBlock, { text: "Hello World", stroke: "gray" })
|
|
// Alternatively:
|
|
$(go.TextBlock, "Hello World", { stroke: "gray" })</pre>
|
|
|
|
<p>
|
|
TextBlocks typically receive a natural size based on their text and font strings,
|
|
but often a width is given in order to cause the text to wrap at a certain place.
|
|
In order for wrapping to occur, the <a href="../symbols/TextBlock.html#wrap" class="linkProperty">wrap</a> property must not be <a href="../symbols/TextBlock.html#None" class="linkConstant">TextBlock.None</a>.
|
|
<p>
|
|
TextBlocks can be edited by users using the <a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a>.
|
|
The HTML Element that a given TextBlock uses as its text editor can be customized
|
|
by setting the <a href="../symbols/TextBlock.html#textEditor" class="linkProperty">textEditor</a> property. For an example of custom text editing tool use,
|
|
see the <a href="../../samples/customTextEditingTool.html">Custom TextEditingTool Sample</a>.
|
|
<p class="boxread">
|
|
For examples of TextBlock possibilities and functionality,
|
|
see the <a href="../../intro/textBlocks.html">Introduction page on TextBlocks</a>.
|
|
</p>
|
|
|
|
<!-- ============================== constructor summary ==================== -->
|
|
|
|
<h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
|
|
<div class="table-responsive">
|
|
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class TextBlock.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="name" >
|
|
<div class="name">
|
|
TextBlock()
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>A newly constructed <a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a> has no string to show; if it did,
|
|
it would draw the text, wrapping if needed, in the default font using a black stroke.
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
<!-- ============================== properties summary ===================== -->
|
|
|
|
|
|
|
|
<h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
|
|
<div class="table-responsive">
|
|
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class TextBlock.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name, Value Type</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="choices" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
choices
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{Array.<string>|null}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the an array of possible choices for a custom <a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a>.<span class="nodetails" id="xpropchoices"><a class="morelink" onclick="hst('propchoices')">More...</a></span> <span class="details" id="propchoices">
|
|
The value must be an array of strings.
|
|
</span><div class="details" id="dpropchoices"><p>
|
|
The default value is null.
|
|
For example usage, see the <a href="../../samples/customTextEditingTool.html">Custom TextEditingTool Sample</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="editable" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
editable
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether or not this TextBlock allows in-place editing of the <a href="../symbols/TextBlock.html#text" class="linkProperty">text</a>
|
|
string by the user with the help of the <a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a>.<span class="nodetails" id="xpropeditable"><a class="morelink" onclick="hst('propeditable')">More...</a></span> <span class="details" id="propeditable">
|
|
The default is false.
|
|
</span><div class="details" id="dpropeditable"><p>
|
|
See also <a href="../symbols/Part.html#textEditable" class="linkProperty">Part.textEditable</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="errorFunction" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
errorFunction
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(TextEditingTool, string, string) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to call if a text edit made with the <a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a> is invalid.<span class="nodetails" id="xproperrorFunction"><a class="morelink" onclick="hst('properrorFunction')">More...</a></span> <span class="details" id="properrorFunction">
|
|
The default is null.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="font" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
font
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the current font settings.<span class="nodetails" id="xpropfont"><a class="morelink" onclick="hst('propfont')">More...</a></span> <span class="details" id="propfont">
|
|
The font property must be a valid CSS string describing a font.
|
|
The font string can accept several CSS properties but they must be
|
|
in a specific order in order to render correctly across all browsers:
|
|
</span><div class="details" id="dpropfont"><p>
|
|
<code>"font-style font-variant font-weight font-size font-family"</code>
|
|
<p>
|
|
For example, <code>"Italic small-caps bold 32px Georgia, Serif"</code> is a valid font string
|
|
using every CSS font property. Not every browser can render every font option.
|
|
For more information about CSS font syntax, see <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font">CSS fonts (mozilla.org)</a>.
|
|
<p>
|
|
The default font is "13px sans-serif".</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="graduatedEnd" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
graduatedEnd
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the fractional distance along the main shape of a "Graduated" <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> at which this kind of tick text should end.<span class="nodetails" id="xpropgraduatedEnd"><a class="morelink" onclick="hst('propgraduatedEnd')">More...</a></span> <span class="details" id="propgraduatedEnd">
|
|
The default is 1; the value should range from 0 to 1.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="graduatedFunction" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
graduatedFunction
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(number): string}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to convert from a value along a "Graduated" <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> to a string.<span class="nodetails" id="xpropgraduatedFunction"><a class="morelink" onclick="hst('propgraduatedFunction')">More...</a></span> <span class="details" id="propgraduatedFunction">
|
|
The default returns a string representing the value rounded to at most 2 decimals.
|
|
</span><div class="details" id="dpropgraduatedFunction"><p>
|
|
The function takes a number argument, a value between <a href="../symbols/Panel.html#graduatedMin" class="linkProperty">Panel.graduatedMin</a> and <a href="../symbols/Panel.html#graduatedMax" class="linkProperty">Panel.graduatedMax</a>.
|
|
The function will return a string, the text that will appear at the value of the argument.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="graduatedStart" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
graduatedStart
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the fractional distance along the main shape of a "Graduated" <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> at which this text should start.<span class="nodetails" id="xpropgraduatedStart"><a class="morelink" onclick="hst('propgraduatedStart')">More...</a></span> <span class="details" id="propgraduatedStart">
|
|
The default is 0; the value should range from 0 to 1.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="interval" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
interval
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets how frequently this text should be drawn within a "Graduated" <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>,
|
|
in multiples of the <a href="../symbols/Panel.html#graduatedTickUnit" class="linkProperty">Panel.graduatedTickUnit</a>.<span class="nodetails" id="xpropinterval"><a class="morelink" onclick="hst('propinterval')">More...</a></span> <span class="details" id="propinterval">
|
|
The default is 1. Any new value must be a positive integer.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isMultiline" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isMultiline
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether or not the text displays multiple lines or embedded newlines.<span class="nodetails" id="xpropisMultiline"><a class="morelink" onclick="hst('propisMultiline')">More...</a></span> <span class="details" id="propisMultiline">
|
|
If this is false, all characters including and after the first newline will be omitted.
|
|
The default is true.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/TextBlock.html#maxLines" class="linkProperty">maxLines</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isStrikethrough" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isStrikethrough
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
<span class="since" title="since">1.2</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether or not the text has a strikethrough line (line-through).<span class="nodetails" id="xpropisStrikethrough"><a class="morelink" onclick="hst('propisStrikethrough')">More...</a></span> <span class="details" id="propisStrikethrough">
|
|
The default is false.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/TextBlock.html#isUnderline" class="linkProperty">isUnderline</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isUnderline" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isUnderline
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
<span class="since" title="since">1.2</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether or not the text is underlined.<span class="nodetails" id="xpropisUnderline"><a class="morelink" onclick="hst('propisUnderline')">More...</a></span> <span class="details" id="propisUnderline">
|
|
The default is false.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/TextBlock.html#isStrikethrough" class="linkProperty">isStrikethrough</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="lineCount" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
lineCount
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns the total number of lines in this TextBlock, including lines created
|
|
from embedded newlines (<code>\n</code>), <a href="../symbols/TextBlock.html#wrap" class="linkProperty">wrap</a>ping, and <a href="../symbols/TextBlock.html#maxLines" class="linkProperty">maxLines</a>.<span class="nodetails" id="xproplineCount"><a class="morelink" onclick="hst('proplineCount')">More...</a></span> <span class="details" id="proplineCount">
|
|
</span><div class="details" id="dproplineCount"><p>
|
|
This value may be meaningless before the TextBlock is measured.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="maxLines" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
maxLines
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.5</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the maximum number of lines that this TextBlock can display.<span class="nodetails" id="xpropmaxLines"><a class="morelink" onclick="hst('propmaxLines')">More...</a></span> <span class="details" id="propmaxLines">
|
|
Value must be a greater than zero whole number or <code>Infinity</code>.
|
|
The default is <code>Infinity</code>.
|
|
</span><div class="details" id="dpropmaxLines"><p>
|
|
Modifying this value may modify the computed height of the TextBlock.
|
|
If maxLines is set, the value of <a href="../symbols/TextBlock.html#lineCount" class="linkProperty">lineCount</a> will never be larger than maxLines.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/TextBlock.html#isMultiline" class="linkProperty">isMultiline</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="naturalBounds" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
naturalBounds
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Rect.html" class="linkConstructor">Rect</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns the natural bounds of this TextBlock in local coordinates,
|
|
as determined by its <a href="../symbols/TextBlock.html#font" class="linkProperty">font</a> and <a href="../symbols/TextBlock.html#text" class="linkProperty">text</a> string, and optionally its desiredSize.
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="overflow" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
overflow
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
<span class="since" title="since">1.4</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets how text that is too long to display should be handled.<span class="nodetails" id="xpropoverflow"><a class="morelink" onclick="hst('propoverflow')">More...</a></span> <span class="details" id="propoverflow">
|
|
</span><div class="details" id="dpropoverflow"><p>
|
|
Possible values are <a href="../symbols/TextBlock.html#OverflowClip" class="linkConstant">TextBlock.OverflowClip</a> and <a href="../symbols/TextBlock.html#OverflowEllipsis" class="linkConstant">TextBlock.OverflowEllipsis</a>.
|
|
For OverflowEllipsis to work, you must also set wrap to <a href="../symbols/TextBlock.html#None" class="linkConstant">TextBlock.None</a>
|
|
or limit the number of lines with <a href="../symbols/TextBlock.html#maxLines" class="linkProperty">maxLines</a>.
|
|
<p>
|
|
The default value is <a href="../symbols/TextBlock.html#OverflowClip" class="linkConstant">TextBlock.OverflowClip</a>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/TextBlock.html#wrap" class="linkProperty">wrap</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="stroke" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
stroke
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string|<a href="../symbols/Brush.html" class="linkConstructor">Brush</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the <a href="../symbols/Brush.html" class="linkConstructor">Brush</a> or string that describes the stroke (color) of the text that is drawn.<span class="nodetails" id="xpropstroke"><a class="morelink" onclick="hst('propstroke')">More...</a></span> <span class="details" id="propstroke">
|
|
</span><div class="details" id="dpropstroke"><p>
|
|
The default value is <code>"black"</code>.
|
|
Any valid CSS string can specify a solid color, and the <a href="../symbols/Brush.html" class="linkConstructor">Brush</a>
|
|
class can be used to specify a gradient or pattern.
|
|
More information about the syntax of CSS color strings is available at:
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">CSS colors (mozilla.org)</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="text" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
text
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the TextBlock's text string.<span class="nodetails" id="xproptext"><a class="morelink" onclick="hst('proptext')">More...</a></span> <span class="details" id="proptext"> The default is an empty string.
|
|
The text of a TextBlock, along with the values of <a href="../symbols/TextBlock.html#font" class="linkProperty">font</a>, <a href="../symbols/TextBlock.html#wrap" class="linkProperty">wrap</a>,
|
|
<a href="../symbols/TextBlock.html#isMultiline" class="linkProperty">isMultiline</a> and sizing restrictions are what naturally determine
|
|
the size of the TextBlock.
|
|
</span><div class="details" id="dproptext"><p>
|
|
The text in textblocks can include manual line-breaks by using the character escape, <code>\n</code>.
|
|
<p>
|
|
Leading and trailing whitespace is eliminated in each line of TextBlock text.
|
|
<p>
|
|
If <a href="../symbols/TextBlock.html#editable" class="linkProperty">editable</a> is set to true, users can edit textblocks with the <a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="textAlign" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
textAlign
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the alignment location in the TextBlock's given space.<span class="nodetails" id="xproptextAlign"><a class="morelink" onclick="hst('proptextAlign')">More...</a></span> <span class="details" id="proptextAlign">
|
|
The possible values are <code>"start"</code>, <code>"end"</code>, <code>"left"</code>, <code>"right"</code>, and <code>"center"</code>.
|
|
Any other value is invalid.
|
|
</span><div class="details" id="dproptextAlign"><p>
|
|
This property is most pertinent when the TextBlock has multiple lines of text,
|
|
or when the TextBlock is given a size that differs from the text's natural size (such as with desiredSize).
|
|
<p>
|
|
In left-to-right writing systems, <code>"start"</code> and <code>"left"</code> are synonymous, as are <code>"end"</code> and <code>"right"</code>.
|
|
<p>
|
|
The default is <code>"start"</code>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/TextBlock.html#verticalAlignment" class="linkProperty">verticalAlignment</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="textEdited" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
textEdited
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(TextBlock, string, string) | null}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function that is called after the TextBlock's text has been edited by the <a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a>.<span class="nodetails" id="xproptextEdited"><a class="morelink" onclick="hst('proptextEdited')">More...</a></span> <span class="details" id="proptextEdited">
|
|
<ul>
|
|
<li> The first argument is a reference to this TextBlock.
|
|
<li> The second argument is the previous text, before editing.
|
|
<li> The third argument is the current text, which is also TextBlock.text.
|
|
</ul>
|
|
</span><div class="details" id="dproptextEdited"><p>
|
|
<pre>function(textBlock, previousText, currentText)</pre>
|
|
<p>
|
|
The default value is null -- no function is called.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="textEditor" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
textEditor
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a>|HTMLElement}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the HTMLInfo or HTML Element that this TextBlock uses as its text editor in the TextEditingTool.<span class="nodetails" id="xproptextEditor"><a class="morelink" onclick="hst('proptextEditor')">More...</a></span> <span class="details" id="proptextEditor">
|
|
If null, the TextBlock will use the default text editor of the <a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a>.
|
|
The default is null.
|
|
The value should be set to an instance of <a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a>.
|
|
Setting this to an HTML Element is deprecated functionality, but it will continue to work until version 2.0.
|
|
</span><div class="details" id="dproptextEditor"><p>
|
|
For example usage, see the <a href="../../samples/customTextEditingTool.html">Custom TextEditingTool Sample</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="textValidation" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
textValidation
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(TextBlock, string, string):boolean | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the predicate that determines whether or not a user-edited string of text is valid.<span class="nodetails" id="xproptextValidation"><a class="morelink" onclick="hst('proptextValidation')">More...</a></span> <span class="details" id="proptextValidation">
|
|
If this is non-null, the predicate is called in addition to any <a href="../symbols/TextEditingTool.html#textValidation" class="linkProperty">TextEditingTool.textValidation</a> predicate.
|
|
See <a href="../symbols/TextEditingTool.html#isValidText" class="linkMethod">TextEditingTool.isValidText</a> for more details.
|
|
</span><div class="details" id="dproptextValidation"><p>
|
|
<pre>function(textBlock, oldString, newString)</pre>
|
|
<p>
|
|
The default predicate is null, which is equivalent to simply returning true.
|
|
<p>
|
|
The function, if supplied, must not have any side-effects, and must return true or false.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/TextEditingTool.html#textValidation" class="linkProperty">TextEditingTool.textValidation</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="verticalAlignment" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
verticalAlignment
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Spot.html" class="linkConstructor">Spot</a>}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the vertical alignment <a href="../symbols/Spot.html" class="linkConstructor">Spot</a> of this TextBlock, used when
|
|
the TextBlock has more available vertical space than it needs to draw all lines.<span class="nodetails" id="xpropverticalAlignment"><a class="morelink" onclick="hst('propverticalAlignment')">More...</a></span> <span class="details" id="propverticalAlignment">
|
|
</span><div class="details" id="dpropverticalAlignment"><p>
|
|
The default value is <a href="../symbols/Spot.html#Top" class="linkConstant">Spot.Top</a>, which aligns the TextBlock to the top of its available space.
|
|
<p>
|
|
The <a href="../symbols/TextBlock.html#textAlign" class="linkProperty">textAlign</a> is often used along with this property to specify
|
|
where the should be positioned in its available space.
|
|
<p>
|
|
This does not affect TextBlock coordinates or bounds, it only affects where text is drawn within the given area.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/TextBlock.html#textAlign" class="linkProperty">textAlign</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="wrap" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
wrap
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether the text should be wrapped if it is too long to fit on one line.<span class="nodetails" id="xpropwrap"><a class="morelink" onclick="hst('propwrap')">More...</a></span> <span class="details" id="propwrap">
|
|
</span><div class="details" id="dpropwrap"><p>
|
|
Possible values are <a href="../symbols/TextBlock.html#WrapDesiredSize" class="linkConstant">TextBlock.WrapDesiredSize</a> <a href="../symbols/TextBlock.html#WrapFit" class="linkConstant">TextBlock.WrapFit</a>
|
|
and <a href="../symbols/TextBlock.html#None" class="linkConstant">TextBlock.None</a>.
|
|
<p>
|
|
The default value is <a href="../symbols/TextBlock.html#WrapDesiredSize" class="linkConstant">TextBlock.WrapDesiredSize</a>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/TextBlock.html#overflow" class="linkProperty">overflow</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
<dl class="inheritsList">
|
|
<dt>Properties borrowed from class <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>: </dt><dd><a href="../symbols/GraphObject.html#actionCancel" class="linkProperty">actionCancel</a>, <a href="../symbols/GraphObject.html#actionDown" class="linkProperty">actionDown</a>, <a href="../symbols/GraphObject.html#actionMove" class="linkProperty">actionMove</a>, <a href="../symbols/GraphObject.html#actionUp" class="linkProperty">actionUp</a>, <a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">actualBounds</a>, <a href="../symbols/GraphObject.html#alignment" class="linkProperty">alignment</a>, <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">alignmentFocus</a>, <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a>, <a href="../symbols/GraphObject.html#areaBackground" class="linkProperty">areaBackground</a>, <a href="../symbols/GraphObject.html#background" class="linkProperty">background</a>, <a href="../symbols/GraphObject.html#click" class="linkProperty">click</a>, <a href="../symbols/GraphObject.html#column" class="linkProperty">column</a>, <a href="../symbols/GraphObject.html#columnSpan" class="linkProperty">columnSpan</a>, <a href="../symbols/GraphObject.html#contextClick" class="linkProperty">contextClick</a>, <a href="../symbols/GraphObject.html#contextMenu" class="linkProperty">contextMenu</a>, <a href="../symbols/GraphObject.html#cursor" class="linkProperty">cursor</a>, <a href="../symbols/GraphObject.html#Default" class="linkConstant">Default</a>, <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a>, <a href="../symbols/GraphObject.html#diagram" class="linkProperty">diagram</a>, <a href="../symbols/GraphObject.html#doubleClick" class="linkProperty">doubleClick</a>, <a href="../symbols/GraphObject.html#enabledChanged" class="linkProperty">enabledChanged</a>, <a href="../symbols/GraphObject.html#Fill" class="linkConstant">Fill</a>, <a href="../symbols/GraphObject.html#fromEndSegmentLength" class="linkProperty">fromEndSegmentLength</a>, <a href="../symbols/GraphObject.html#fromLinkable" class="linkProperty">fromLinkable</a>, <a href="../symbols/GraphObject.html#fromLinkableDuplicates" class="linkProperty">fromLinkableDuplicates</a>, <a href="../symbols/GraphObject.html#fromLinkableSelfNode" class="linkProperty">fromLinkableSelfNode</a>, <a href="../symbols/GraphObject.html#fromMaxLinks" class="linkProperty">fromMaxLinks</a>, <a href="../symbols/GraphObject.html#fromShortLength" class="linkProperty">fromShortLength</a>, <a href="../symbols/GraphObject.html#fromSpot" class="linkProperty">fromSpot</a>, <a href="../symbols/GraphObject.html#height" class="linkProperty">height</a>, <a href="../symbols/GraphObject.html#Horizontal" class="linkConstant">Horizontal</a>, <a href="../symbols/GraphObject.html#isActionable" class="linkProperty">isActionable</a>, <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">isPanelMain</a>, <a href="../symbols/GraphObject.html#layer" class="linkProperty">layer</a>, <a href="../symbols/GraphObject.html#margin" class="linkProperty">margin</a>, <a href="../symbols/GraphObject.html#maxSize" class="linkProperty">maxSize</a>, <a href="../symbols/GraphObject.html#measuredBounds" class="linkProperty">measuredBounds</a>, <a href="../symbols/GraphObject.html#minSize" class="linkProperty">minSize</a>, <a href="../symbols/GraphObject.html#mouseDragEnter" class="linkProperty">mouseDragEnter</a>, <a href="../symbols/GraphObject.html#mouseDragLeave" class="linkProperty">mouseDragLeave</a>, <a href="../symbols/GraphObject.html#mouseDrop" class="linkProperty">mouseDrop</a>, <a href="../symbols/GraphObject.html#mouseEnter" class="linkProperty">mouseEnter</a>, <a href="../symbols/GraphObject.html#mouseHold" class="linkProperty">mouseHold</a>, <a href="../symbols/GraphObject.html#mouseHover" class="linkProperty">mouseHover</a>, <a href="../symbols/GraphObject.html#mouseLeave" class="linkProperty">mouseLeave</a>, <a href="../symbols/GraphObject.html#mouseOver" class="linkProperty">mouseOver</a>, <a href="../symbols/GraphObject.html#name" class="linkProperty">name</a>, <a href="../symbols/GraphObject.html#opacity" class="linkProperty">opacity</a>, <a href="../symbols/GraphObject.html#panel" class="linkProperty">panel</a>, <a href="../symbols/GraphObject.html#part" class="linkProperty">part</a>, <a href="../symbols/GraphObject.html#pickable" class="linkProperty">pickable</a>, <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a>, <a href="../symbols/GraphObject.html#position" class="linkProperty">position</a>, <a href="../symbols/GraphObject.html#row" class="linkProperty">row</a>, <a href="../symbols/GraphObject.html#rowSpan" class="linkProperty">rowSpan</a>, <a href="../symbols/GraphObject.html#scale" class="linkProperty">scale</a>, <a href="../symbols/GraphObject.html#segmentFraction" class="linkProperty">segmentFraction</a>, <a href="../symbols/GraphObject.html#segmentIndex" class="linkProperty">segmentIndex</a>, <a href="../symbols/GraphObject.html#segmentOffset" class="linkProperty">segmentOffset</a>, <a href="../symbols/GraphObject.html#segmentOrientation" class="linkProperty">segmentOrientation</a>, <a href="../symbols/GraphObject.html#shadowVisible" class="linkProperty">shadowVisible</a>, <a href="../symbols/GraphObject.html#stretch" class="linkProperty">stretch</a>, <a href="../symbols/GraphObject.html#toEndSegmentLength" class="linkProperty">toEndSegmentLength</a>, <a href="../symbols/GraphObject.html#toLinkable" class="linkProperty">toLinkable</a>, <a href="../symbols/GraphObject.html#toLinkableDuplicates" class="linkProperty">toLinkableDuplicates</a>, <a href="../symbols/GraphObject.html#toLinkableSelfNode" class="linkProperty">toLinkableSelfNode</a>, <a href="../symbols/GraphObject.html#toMaxLinks" class="linkProperty">toMaxLinks</a>, <a href="../symbols/GraphObject.html#toolTip" class="linkProperty">toolTip</a>, <a href="../symbols/GraphObject.html#toShortLength" class="linkProperty">toShortLength</a>, <a href="../symbols/GraphObject.html#toSpot" class="linkProperty">toSpot</a>, <a href="../symbols/GraphObject.html#Uniform" class="linkConstant">Uniform</a>, <a href="../symbols/GraphObject.html#UniformToFill" class="linkConstant">UniformToFill</a>, <a href="../symbols/GraphObject.html#Vertical" class="linkConstant">Vertical</a>, <a href="../symbols/GraphObject.html#visible" class="linkProperty">visible</a>, <a href="../symbols/GraphObject.html#width" class="linkProperty">width</a></dd>
|
|
</dl>
|
|
|
|
|
|
|
|
<!-- ============================== methods summary ======================== -->
|
|
|
|
|
|
|
|
|
|
|
|
<dl class="inheritsList">
|
|
<dt>Methods borrowed from class <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>: </dt><dd><a href="../symbols/GraphObject.html#bind" class="linkMethod">bind</a>, <a href="../symbols/GraphObject.html#copy" class="linkMethod">copy</a>, <a href="../symbols/GraphObject.html#getDocumentAngle" class="linkMethod">getDocumentAngle</a>, <a href="../symbols/GraphObject.html#getDocumentPoint" class="linkMethod">getDocumentPoint</a>, <a href="../symbols/GraphObject.html#getDocumentScale" class="linkMethod">getDocumentScale</a>, <a href="../symbols/GraphObject.html#getLocalPoint" class="linkMethod">getLocalPoint</a>, <a href="../symbols/GraphObject.html#isContainedBy" class="linkMethod">isContainedBy</a>, <a href="../symbols/GraphObject.html#isEnabledObject" class="linkMethod">isEnabledObject</a>, <a href="../symbols/GraphObject.html#isVisibleObject" class="linkMethod">isVisibleObject</a>, <a href="../symbols/GraphObject.html#setProperties" class="linkMethod">setProperties</a></dd>
|
|
</dl>
|
|
|
|
|
|
<!-- ============================== events summary ======================== -->
|
|
|
|
|
|
<!-- ============================== fields summary ===================== -->
|
|
|
|
|
|
|
|
<h2 class="summaryCaption">Constants<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
|
|
<div class="table-responsive">
|
|
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class TextBlock.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="None">
|
|
<td class="name">
|
|
<div class="name">
|
|
None
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Used as a value for <a href="../symbols/TextBlock.html#wrap" class="linkProperty">TextBlock.wrap</a>, the TextBlock will not wrap its text.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="OverflowClip">
|
|
<td class="name">
|
|
<div class="name">
|
|
OverflowClip
|
|
|
|
<span class="since" title="since">1.4</span>
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Used as the default value for <a href="../symbols/TextBlock.html#overflow" class="linkProperty">TextBlock.overflow</a>: if the width is too small to display all text,
|
|
the TextBlock will clip.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="OverflowEllipsis">
|
|
<td class="name">
|
|
<div class="name">
|
|
OverflowEllipsis
|
|
|
|
<span class="since" title="since">1.4</span>
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Used as a value for <a href="../symbols/TextBlock.html#overflow" class="linkProperty">TextBlock.overflow</a>: if the width is too small to display all text,
|
|
the TextBlock will display an ellipsis.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="WrapDesiredSize">
|
|
<td class="name">
|
|
<div class="name">
|
|
WrapDesiredSize
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Used as the default value for <a href="../symbols/TextBlock.html#wrap" class="linkProperty">TextBlock.wrap</a>, the TextBlock will wrap text and the width of
|
|
the TextBlock will be the desiredSize's width, if any.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="WrapFit">
|
|
<td class="name">
|
|
<div class="name">
|
|
WrapFit
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Used as a value for <a href="../symbols/TextBlock.html#wrap" class="linkProperty">TextBlock.wrap</a>, the TextBlock will wrap text, making the width of
|
|
the TextBlock equal to the width of the longest line.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
|
|
<!-- ============================== constructor details ==================== -->
|
|
|
|
</div> <!-- end contentBody -->
|
|
</div> <!-- end container-fluid -->
|
|
|
|
<!-- ============================== footer ================================= -->
|
|
<div id="footer" class="fineprint" style="clear:both">
|
|
Copyright © 1998-2017 by <a href="https://www.nwoods.com/">Northwoods Software Corporation.</a>
|
|
</div>
|
|
</body>
|
|
</html>
|