Connector Shape

SpreadJS provides two types of connector shapes, used to create connections between different shapes or items in Spread. This Spread instance shows the different connector shapes that can be added to a workbook.

<p>SpreadJS provides two types of connector shapes.</p> <ul> <li><strong>Straight</strong></li> <li><strong>Elbow</strong></li> </ul> <p>The connector shape (line) can be used stand-along or connected to other shape. The two sides of the shape can has it's own arrow type.</p> <p>You can add a connector shape and change the shape style using the ConnectorShape API</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> shape1 = sheet.shapes.add(<span class="hljs-string">"myShape1"</span>, GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, <span class="hljs-number">62</span> * <span class="hljs-number">9</span>, <span class="hljs-number">0</span>, <span class="hljs-number">200</span>, <span class="hljs-number">200</span>) <span class="hljs-keyword">var</span> shape2 = sheet.shapes.addConnector(<span class="hljs-string">"myShape2"</span>, GC.Spread.Sheets.Shapes.ConnectorType.straight, <span class="hljs-number">220</span>, <span class="hljs-number">120</span>, <span class="hljs-number">300</span>, <span class="hljs-number">120</span>); <span class="hljs-keyword">var</span> oldStyle = shape2.style(); oldStyle.line.color = <span class="hljs-string">'red'</span>; oldStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dashDot; oldStyle.line.width = <span class="hljs-number">10</span>; oldStyle.line.capType = GC.Spread.Sheets.Shapes.LineCapStyle.square; oldStyle.line.joinType = GC.Spread.Sheets.Shapes.LineJoinStyle.miter; oldStyle.line.transparency = <span class="hljs-number">0.5</span>; oldStyle.line.beginArrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle.triangle; oldStyle.line.beginArrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth.narrow; oldStyle.line.beginArrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength.short; oldStyle.line.endArrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle.diamond; oldStyle.line.endArrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth.medium; oldStyle.line.endArrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength.medium; shape2.style(oldStyle); <span class="hljs-keyword">var</span> startConnector = shape2.startConnector(); shape2.startConnector({<span class="hljs-attr">name</span>: shape1.name(), <span class="hljs-attr">index</span>: <span class="hljs-number">2</span>}); </code></pre>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); initSpread(spread); }; function initSpread(spread) { var shapeData = [ { type: 'straight', }, { type: 'straight', endArrowhead: { style: "triangle", width: 'medium', length: 'medium', } }, { type: 'straight', beginArrowhead: { style: "stealth", width: 'wide', length: 'wide', } }, { beginArrowhead: { style: "stealth", width: 'medium', length: 'medium', }, type: 'straight', endArrowhead: { style: "diamond", width: 'wide', length: 'wide', } }, { type: 'elbow', }, { type: 'elbow', endArrowhead: { style: "oval", width: 'medium', length: 'medium', }, }, { type: 'elbow', beginArrowhead: { style: "oval", width: 'wide', length: 'wide', }, }, { beginArrowhead: { style: "open", width: 'medium', length: 'medium', }, type: 'elbow', endArrowhead: { style: "triangle", width: 'medium', length: 'medium', } } ]; spread.suspendPaint(); var sheet = spread.getSheet(0); sheet.name("ConnectorShape"); for (var i = 0; i < shapeData.length; i++) { initShape(sheet, shapeData[i], i);//add connectorShape } sheet.setValue(1, 4, 'stright'); sheet.setValue(1, 10, 'elbow'); spread.options.tabStripRatio = 0.8; spread.resumePaint(); } function initShape(sheet, shapeData,index) { var colors = ["red", "blue", "black", "pink", "green", "orange"]; var arrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle; var arrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength; var arrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth; var beginX = 200,endX = 400; if(shapeData.type === 'elbow'){ beginX = 550; endX = 750; index = index%4; } var connectorShape = sheet.shapes.addConnector('', GC.Spread.Sheets.Shapes.ConnectorType[shapeData.type], beginX, 120+index*70, endX, 80+index*70); if (shapeData.beginArrowhead !== undefined) { var connectorBeginStyle = connectorShape.style(); var beginLine = connectorBeginStyle.line; beginLine.beginArrowheadStyle = arrowheadStyle[shapeData.beginArrowhead.style]; beginLine.beginArrowheadWidth = arrowheadWidth[shapeData.beginArrowhead.width]; beginLine.beginArrowheadLength = arrowheadLength[shapeData.beginArrowhead.length]; connectorShape.style(connectorBeginStyle); } if (shapeData.endArrowhead !== undefined) { var connectorEndStyle = connectorShape.style(); var endLine = connectorEndStyle.line; endLine.endArrowheadStyle = arrowheadStyle[shapeData.endArrowhead.style]; endLine.endArrowheadWidth = arrowheadWidth[shapeData.endArrowhead.width]; endLine.endArrowheadLength = arrowheadLength[shapeData.endArrowhead.length]; connectorShape.style(connectorEndStyle); } var connectorStyle = connectorShape.style(); var lineTemp = connectorStyle.line; lineTemp.width = 5; lineTemp.color = colors[index]; connectorShape.style(connectorStyle); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }