Shape Arrow Head

In SpreadJS, you can add connector shapes using different kind of arrows, including: the normal arrow (no side is pointed), basic arrow (with both sides pointed), the open arrow, the stealth arrow, the oval arrow and the diamond arrow.

You can customize the properties of connectorShapes using the ConnectorShape API: style: Gets or sets the style of the connector shape.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); initEvent(spread); }; var arrowheadLength = { "short" : 0, "medium" : 1, "long" : 2 }; var arrowheadWidth = { "narrow" : 0, "medium" : 1, "wide" : 2 }; var activeShape; function fillShapeTypeList(type, dom) { var names = []; for (var name in type) { if(name === "none" || (parseInt(name, 10)) == name) { continue; } names.push({name: name, value: type[name]}); } names.sort(function (a, b) { return a.name > b.name ? 1 : -1 }); var html = ""; names.forEach(function (item) { html += '<option value="' + item.value + '">' + item.name + '</option>'; }); dom.innerHTML= html; } function getActiveConnectorShape(sheet) { return sheet.shapes.all().filter(function(sp){ return sp.isSelected() && sp instanceof GC.Spread.Sheets.Shapes.ConnectorShape; }); } function initSpread(spread) { setConnectorPropVisibility("none"); fillShapeTypeList(GC.Spread.Sheets.Shapes.ArrowheadStyle, _getElementById("beginArrowheadStyle")); fillShapeTypeList(GC.Spread.Sheets.Shapes.ArrowheadStyle, _getElementById("endArrowheadStyle")); fillShapeTypeList(arrowheadLength, _getElementById("beginArrowheadLength")); fillShapeTypeList(arrowheadLength, _getElementById("endArrowheadLength")); fillShapeTypeList(arrowheadWidth, _getElementById("beginArrowheadWidth")); fillShapeTypeList(arrowheadWidth, _getElementById("endArrowheadWidth")); var line1 = spread.getActiveSheet().shapes.addConnector("line", GC.Spread.Sheets.Shapes.ConnectorType.straight, 20, 40, 200, 110); var line2 = spread.getActiveSheet().shapes.addConnector("line", GC.Spread.Sheets.Shapes.ConnectorType.straight, 20, 110, 200, 190); var line3 = spread.getActiveSheet().shapes.addConnector("line", GC.Spread.Sheets.Shapes.ConnectorType.elbow, 300, 40, 500, 90); var line4 = spread.getActiveSheet().shapes.addConnector("line", GC.Spread.Sheets.Shapes.ConnectorType.elbow, 300, 130, 500, 190); var lineShapeStyle = line1.style(); lineShapeStyle.line.width = 3; lineShapeStyle.line.color = "#82BC00"; line1.style(lineShapeStyle); line2.style(lineShapeStyle); line3.style(lineShapeStyle); line4.style(lineShapeStyle); } function setConnectorPropVisibility(display) { var connectorProp = _getElementById("connectorProp"); connectorProp.style.display = display; } function initEvent(spread) { var spreadNS = GC.Spread.Sheets; var sheet = spread.getActiveSheet(); sheet.bind(spreadNS.Events.ShapeSelectionChanged, function () { var selectedShape = sheet.shapes.all().filter(function(sp){ return sp.isSelected(); }); var isShapeSelected = false, isConnectorSelected = false; if (selectedShape.length > 0) { selectedShape.forEach(function (shape) { if (!isShapeSelected && shape instanceof spreadNS.Shapes.Shape) { isShapeSelected = true; } else if (!isConnectorSelected && shape instanceof spreadNS.Shapes.ConnectorShape) { isConnectorSelected = true; } }); if (isConnectorSelected) { setConnectorPropVisibility("block"); } else { setConnectorPropVisibility("none"); } } else { setConnectorPropVisibility("none"); } }); _getElementById("beginArrowheadStyleActionBtn").addEventListener('click', function() { _handleConnectorShapeStyleSetting(spread, 'beginStyle', _getElementById("beginArrowheadStyle")); }); _getElementById("beginArrowheadWidthActionBtn").addEventListener('click', function() { _handleConnectorShapeStyleSetting(spread, 'beginWidth', _getElementById("beginArrowheadWidth")); }); _getElementById("beginArrowheadLengthActionBtn").addEventListener('click', function() { _handleConnectorShapeStyleSetting(spread, 'beginLength', _getElementById("beginArrowheadLength")); }); _getElementById("endArrowheadStyleActionBtn").addEventListener('click', function() { _handleConnectorShapeStyleSetting(spread, 'endStyle', _getElementById("endArrowheadStyle")); }); _getElementById("endArrowheadWidthActionBtn").addEventListener('click', function() { _handleConnectorShapeStyleSetting(spread, 'endWidth', _getElementById("endArrowheadWidth")); }); _getElementById("endArrowheadLengthActionBtn").addEventListener('click', function() { _handleConnectorShapeStyleSetting(spread, 'endLength', _getElementById("endArrowheadLength")); }); } function _handleConnectorShapeStyleSetting(spread, action, valueDom) { var sheet = spread.getActiveSheet(); activeShape = getActiveConnectorShape(sheet); if(activeShape.length > 0) { activeShape.forEach(function (shape) { _setConnectorShapeStyle(shape, action, parseInt(valueDom.value)); }); sheet.repaint(); } } function _setConnectorShapeStyle(shape, action, value) { var shapeStyle = shape.style(); var shapeStyleLine = shapeStyle.line; switch (action) { case "beginStyle": { shapeStyleLine.beginArrowheadStyle = value; break; } case "beginWidth": { shapeStyleLine.beginArrowheadWidth = value; break; } case "beginLength": { shapeStyleLine.beginArrowheadLength = value; break; } case "endStyle": { shapeStyleLine.endArrowheadStyle = value; break; } case "endWidth": { shapeStyleLine.endArrowheadWidth = value; break; } case "endLength": { shapeStyleLine.endArrowheadLength = value; break; } } shape.style(shapeStyle); } function _getElementById(id){ return document.getElementById(id); }
<!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 class="options-container"> <div class="option-row"> Select a shape and change the arrow-head properties to see the effect. </div> <div id="divideLine" class="divide-line"></div> <div id="connectorProp" class="option-row"> <label for="beginArrowheadStyle">Begin Arrowhead Style:</label> <select id='beginArrowheadStyle' class="shapeSelect"></select> <input id="beginArrowheadStyleActionBtn" type="button" data-attr="style" data-isBegin=true class='value arrow-action-button' value="Set"/> <label>Begin Arrowhead Width:</label> <select id="beginArrowheadWidth" class="shapeSelect"></select> <input id="beginArrowheadWidthActionBtn" type="button" data-attr="width" data-isBegin=true class='value arrow-action-button' value="Set"/> <label>Begin Arrowhead Length:</label> <select id="beginArrowheadLength" class="shapeSelect"></select> <input id="beginArrowheadLengthActionBtn" type="button" data-attr="length" data-isBegin=true class='value arrow-action-button' value="Set"/> <label for="endArrowheadStyle">End Arrowhead Style:</label> <select id='endArrowheadStyle' class="shapeSelect"></select> <input id="endArrowheadStyleActionBtn" type="button" data-attr="style" data-isBegin=false class='value arrow-action-button' value="Set"/> <label>End Arrowhead Width:</label> <select id="endArrowheadWidth" class="shapeSelect"></select> <input id="endArrowheadWidthActionBtn" type="button" data-attr="width" data-isBegin=false class='value arrow-action-button' value="Set"/> <label>End Arrowhead Length:</label> <select id="endArrowheadLength" class="shapeSelect"></select> <input id="endArrowheadLengthActionBtn" type="button" data-attr="length" data-isBegin=false class='value arrow-action-button' value="Set"/> </div> </div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding-left: 5px; } .divide-line { width: 100%; height: 1px; background: #cbcbcb; margin-top: 10px; margin-bottom: 3px; } .title { text-align: center; font-weight: bold; } label { display: block; margin-top: 15px; margin-bottom: 5px; } p { padding: 2px 10px; background-color: #F4F8EB; } input { width: 160px; margin-left: 10px; display: inline; } input[type=button] { width: 50px; margin-left: 1px; } select { width: 160px; margin-left: 10px; display: inline; } textarea { width: 160px; margin-left: 10px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }