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.

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
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import './styles.css'; import { AppFunc } from './app-func'; // import { App } from './app-class'; // 1. Functional Component sample ReactDOM.render(<AppFunc />, document.getElementById('app')); // 2. Class Component sample // ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react'; import "@mescius/spread-sheets-shapes"; function initShape(sheet, shapeData, index) { let colors = ["#82BC00", "#F8B22E", "black", "#00C2D6"]; let arrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle; let arrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength; let arrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth; let beginX = 70, endX = 250; if (shapeData.type === 'elbow') { beginX = 320; endX = 500; index = index % 4; } let connectorShape = sheet.shapes.addConnector('', GC.Spread.Sheets.Shapes.ConnectorType[shapeData.type], beginX, 80 + index * 70, endX, 50 + index * 70); if (shapeData.beginArrowhead !== undefined) { let connectorBeginStyle = connectorShape.style(); let 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) { let connectorEndStyle = connectorShape.style(); let endLine = connectorEndStyle.line; endLine.endArrowheadStyle = arrowheadStyle[shapeData.endArrowhead.style]; endLine.endArrowheadWidth = arrowheadWidth[shapeData.endArrowhead.width]; endLine.endArrowheadLength = arrowheadLength[shapeData.endArrowhead.length]; connectorShape.style(connectorEndStyle); } let connectorStyle = connectorShape.style(); let lineTemp = connectorStyle.line; lineTemp.width = 5; lineTemp.color = colors[index]; connectorShape.style(connectorStyle); } export function AppFunc() { const initSpread = (spread) => { let 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(); let sheet = spread.getSheet(0); sheet.name("ConnectorShape"); for (let 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(); } return (<div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => initSpread(spread)}> <Worksheet name={"ConnectorShape"}></Worksheet > </SpreadSheets> </div> </div>); }
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react'; import "@mescius/spread-sheets-shapes"; const Component = React.Component; function initShape(sheet, shapeData, index) { let colors = ["#82BC00", "#F8B22E", "black", "#00C2D6"]; let arrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle; let arrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength; let arrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth; let beginX = 70,endX = 250; if(shapeData.type === 'elbow'){ beginX = 320; endX = 500; index = index%4; } let connectorShape = sheet.shapes.addConnector('', GC.Spread.Sheets.Shapes.ConnectorType[shapeData.type], beginX, 80+index*70, endX, 50+index*70); if (shapeData.beginArrowhead !== undefined) { let connectorBeginStyle = connectorShape.style(); let 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) { let connectorEndStyle = connectorShape.style(); let endLine = connectorEndStyle.line; endLine.endArrowheadStyle = arrowheadStyle[shapeData.endArrowhead.style]; endLine.endArrowheadWidth = arrowheadWidth[shapeData.endArrowhead.width]; endLine.endArrowheadLength = arrowheadLength[shapeData.endArrowhead.length]; connectorShape.style(connectorEndStyle); } let connectorStyle = connectorShape.style(); let lineTemp = connectorStyle.line; lineTemp.width = 5; lineTemp.color = colors[index]; connectorShape.style(connectorStyle); } export class App extends Component { constructor(props) { super(props); this.spread = null; } render() { return (<div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}> <Worksheet name={"ConnectorShape"}></Worksheet > </SpreadSheets> </div> </div>); } initSpread(spread) { let 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(); let sheet = spread.getSheet(0); sheet.name("ConnectorShape"); for (let 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(); } }
<!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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- SystemJS --> <script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('$DEMOROOT$/en/lib/react/license.js').then(function () { System.import('./src/app'); }); </script> </head> <body> <div id="app"></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; } #app { height: 100%; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js', '@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);