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.

Description
app.js
index.html
styles.css
Copy to CodeMine

SpreadJS provides two types of connector shapes.

  • Straight
  • Elbow

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.

You can add a connector shape and change the shape style using the ConnectorShape API

var shape1 = sheet.shapes.add("myShape1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 62 * 9, 0, 200, 200)
    var shape2 = sheet.shapes.addConnector("myShape2", GC.Spread.Sheets.Shapes.ConnectorType.straight, 220, 120, 300, 120);
    var oldStyle = shape2.style();
    oldStyle.line.color = 'red';
    oldStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dashDot;
    oldStyle.line.width = 10;
    oldStyle.line.capType = GC.Spread.Sheets.Shapes.LineCapStyle.square;
    oldStyle.line.joinType = GC.Spread.Sheets.Shapes.LineJoinStyle.miter;
    oldStyle.line.transparency = 0.5;
    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);
    var startConnector = shape2.startConnector();
    shape2.startConnector({name: shape1.name(), index: 2});
SpreadJS provides two types of connector shapes. Straight Elbow 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. You can add a connector shape and change the shape style using the ConnectorShape API
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, 1, 'STRAIGHT'); sheet.setValue(1, 5, 'ELBOW'); spread.options.tabStripRatio = 0.8; spread.resumePaint(); } function initShape(sheet, shapeData,index) { var colors = ["#82BC00", "#F8B22E", "black", "#00C2D6"]; var arrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle; var arrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength; var arrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth; var beginX = 70,endX = 250; if(shapeData.type === 'elbow'){ beginX = 320; endX = 500; index = index%4; } var connectorShape = sheet.shapes.addConnector('', GC.Spread.Sheets.Shapes.ConnectorType[shapeData.type], beginX, 80+index*70, endX, 50+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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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; }