You can change the position and size of the floating object. The position and size can be set in two different ways:
Sometimes you will resize the row's height or the column's width, and you don't want the position or size of the floating object to change. In that case, use the dynamicMove and dynamicSize methods. For example:
Note that if the dynamicMove method is false and the dynamicSize method is true, neither has an effect.
If you do not want the floating object to change based on UI interaction, use the isLocked method to lock it. If you want to lock it, first lock the sheet.
When one floating object overlaps another, you can change the order from top to bottom using the zIndex method. For example:
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';
let spread = null;
export function AppFunc() {
const [customInfo, setCustomInfo] = React.useState({
isSheetProtected: false,
isLocked: true,
isVisible: true,
dynamicSize: true,
dynamicMove: true,
moveRow: "",
moveColumn: "",
resizeWidth: "",
resizeHeight: "",
});
const initSpread = (currSpread) => {
spread = currSpread;
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
sheet.suspendPaint();
var customFloatingObject = new spreadNS.FloatingObjects.FloatingObject("f0");
customFloatingObject.startRow(1);
customFloatingObject.startColumn(1);
customFloatingObject.endColumn(6);
customFloatingObject.endRow(6);
var div = document.createElement('div');
div.innerHTML = "I'm a Div.<div style='border: 1px solid red; width: 80%; margin:auto;'><span>I'm a span</span></div>"
div.style.background = 'mintcream';
div.style.border = '1px solid green';
customFloatingObject.content(div);
sheet.floatingObjects.add(customFloatingObject);
sheet.resumePaint();
}
const onChange = (e) => {
var value = e.target.checked;
var key = e.target.id;
var state = {};
state[key] = value;
setCustomInfo({ ...customInfo, ...state});
var sheet = spread.getActiveSheet();
if (key === "isSheetProtected") {
sheet.options.isProtected = value;
} else {
var floatingObjects = _concat(sheet);
if (floatingObjects) {
for (var index = 0; index < floatingObjects.length; index++) {
if (floatingObjects[index].isSelected()) {
floatingObjects[index][key](value);
}
}
}
}
}
const onInputChange = (e) => {
var value = e.target.value;
var id = e.target.id;
var state = {};
if (value) {
if (id === "moveRow" || id === "moveColumn") {
value = parseInt(value);
} else {
value = parseFloat(value);
}
}
state[id] = value;
setCustomInfo({ ...customInfo, ...state });
}
const onMove = () => {
var sheet = spread.getActiveSheet();
var floatingObjects = _concat(sheet);
var row = parseInt(customInfo.moveRow);
var col = parseInt(customInfo.moveColumn);
if (!isNaN(row) && !isNaN(col)) {
if (floatingObjects) {
for (var index = 0, len = floatingObjects.length; index < len; index++) {
var fo = floatingObjects[index];
if (fo.isSelected()) {
fo.startRow(row);
fo.startColumn(col);
fo.startRowOffset(0);
fo.startColumnOffset(0);
}
}
}
}
sheet.repaint();
}
const onResize = () => {
var sheet = spread.getActiveSheet();
var floatingObjects = _concat(sheet);
var width = parseFloat(customInfo.resizeWidth);
var height = parseFloat(customInfo.resizeHeight);
if (!isNaN(width) && !isNaN(height) && width > 0 && height > 0) {
if (floatingObjects) {
for (var index = 0, len = floatingObjects.length; index < len; index++) {
var fo = floatingObjects[index];
if (fo.isSelected()) {
fo.width(width);
fo.height(height);
}
}
}
}
sheet.repaint();
}
const bringToForward = () => {
var sheet = spread.getActiveSheet();
var floatingObjects = _concat(sheet);
var maxZIndex = 0, selectedCount = 0, selectedName = null;
if (floatingObjects) {
for (var index = 0, len = floatingObjects.length; index < len; index++) {
var fo = floatingObjects[index];
if (!fo || !fo.name || !fo.isSelected) {
continue;
}
var zIndex = sheet.floatingObjects.zIndex(fo.name());
if (zIndex > maxZIndex) {
maxZIndex = zIndex;
}
if (fo.isSelected()) {
selectedCount++;
selectedName = fo.name();
}
}
if (selectedCount === 1) {
sheet.floatingObjects.zIndex(selectedName, maxZIndex + 1);
}
}
}
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet></Worksheet>
<Worksheet></Worksheet>
</SpreadSheets>
</div>
<div className="options-container">
<div className="option-row">
<p className="desc">Select the floating object in the Spread component and change it using these options</p>
</div>
<div className="option-row">
<input type="checkbox" id="isSheetProtected" value={customInfo.isSheetProtected} onChange={(e) => { onChange(e) }} />
<label htmlFor="isSheetProtected">IsSheetProtected</label>
</div>
<div className="option-row">
<input type="checkbox" id="isLocked" defaultChecked value={customInfo.isLocked} onChange={(e) => { onChange(e) }} />
<label htmlFor="isLocked">IsLocked</label>
</div>
<div className="option-row">
<input type="checkbox" id="isVisible" defaultChecked value={customInfo.isVisible} onChange={(e) => { onChange(e) }} />
<label htmlFor="isVisible">IsVisible</label>
</div>
<div className="option-row">
<input type="checkbox" id="dynamicSize" defaultChecked value={customInfo.dynamicSize} onChange={(e) => { onChange(e) }} />
<label htmlFor="dynamicSize">DynamicSize</label>
</div>
<div className="option-row">
<input type="checkbox" id="dynamicMove" defaultChecked value={customInfo.dynamicMove} onChange={(e) => { onChange(e) }} />
<label htmlFor="dynamicMove">DynamicMove</label>
<hr />
</div>
<div className="option-row">
<label htmlFor="moveRow">Row:</label>
<input type="text" id="moveRow" value={customInfo.moveRow} onChange={(e) => { onInputChange(e) }} />
<label htmlFor="moveColumn">Column:</label>
<input type="text" id="moveColumn" value={customInfo.moveColumn} onChange={(e) => { onInputChange(e) }} />
<input type="button" id="moveFloatingObject" defaultValue="Move floating Object" onClick={() => { onMove() }} />
</div>
<hr />
<div className="option-row">
<label htmlFor="resizeWidth">Width:</label>
<input type="text" id="resizeWidth" value={customInfo.resizeWidth} onChange={(e) => { onInputChange(e) }} />
<label htmlFor="resizeHeight">Height:</label>
<input type="text" id="resizeHeight" value={customInfo.resizeHeight} onChange={(e) => { onInputChange(e) }} />
<input type="button" id="resizeFloatingObject" defaultValue="Resize floating object" onClick={() => { onResize() }} />
</div>
<hr />
<div className="option-row">
<input type="button" id="bringToForward" defaultValue="Bring Forward" onClick={() => { bringToForward() }} />
</div>
</div>
</div>;
}
function _concat(sheet) {
if (sheet) {
var customFloatingObjects = sheet.floatingObjects.all();
var pictures = sheet.pictures.all();
return pictures.concat(customFloatingObjects);
}
return [];
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.state = {
isSheetProtected: false,
isLocked: true,
isVisible: true,
dynamicSize: true,
dynamicMove: true,
moveRow: "",
moveColumn: "",
resizeWidth: "",
resizeHeight: "",
}
}
render() {
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
<Worksheet></Worksheet>
<Worksheet></Worksheet>
</SpreadSheets>
</div>
<div className="options-container">
<div className="option-row">
<p className="desc">Select the floating object in the Spread component and change it using these options</p>
</div>
<div className="option-row">
<input type="checkbox" id="isSheetProtected" value={this.state.isSheetProtected} onChange={(e) => { this.onChange(e) }} />
<label htmlFor="isSheetProtected">IsSheetProtected</label>
</div>
<div className="option-row">
<input type="checkbox" id="isLocked" defaultChecked value={this.state.isLocked} onChange={(e) => { this.onChange(e) }} />
<label htmlFor="isLocked">IsLocked</label>
</div>
<div className="option-row">
<input type="checkbox" id="isVisible" defaultChecked value={this.state.isVisible} onChange={(e) => { this.onChange(e) }} />
<label htmlFor="isVisible">IsVisible</label>
</div>
<div className="option-row">
<input type="checkbox" id="dynamicSize" defaultChecked value={this.state.dynamicSize} onChange={(e) => { this.onChange(e) }} />
<label htmlFor="dynamicSize">DynamicSize</label>
</div>
<div className="option-row">
<input type="checkbox" id="dynamicMove" defaultChecked value={this.state.dynamicMove} onChange={(e) => { this.onChange(e) }} />
<label htmlFor="dynamicMove">DynamicMove</label>
<hr />
</div>
<div className="option-row">
<label htmlFor="moveRow">Row:</label>
<input type="text" id="moveRow" value={this.state.moveRow} onChange={(e) => { this.onInputChange(e) }} />
<label htmlFor="moveColumn">Column:</label>
<input type="text" id="moveColumn" value={this.state.moveColumn} onChange={(e) => { this.onInputChange(e) }} />
<input type="button" id="moveFloatingObject" defaultValue="Move floating Object" onClick={() => { this.onMove() }} />
</div>
<hr />
<div className="option-row">
<label htmlFor="resizeWidth">Width:</label>
<input type="text" id="resizeWidth" value={this.state.resizeWidth} onChange={(e) => { this.onInputChange(e) }} />
<label htmlFor="resizeHeight">Height:</label>
<input type="text" id="resizeHeight" value={this.state.resizeHeight} onChange={(e) => { this.onInputChange(e) }} />
<input type="button" id="resizeFloatingObject" defaultValue="Resize floating object" onClick={() => { this.onResize() }} />
</div>
<hr />
<div className="option-row">
<input type="button" id="bringToForward" defaultValue="Bring Forward" onClick={() => { this.bringToForward() }} />
</div>
</div>
</div>;
}
initSpread(spread) {
this.spread = spread;
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
sheet.suspendPaint();
var customFloatingObject = new spreadNS.FloatingObjects.FloatingObject("f0");
customFloatingObject.startRow(1);
customFloatingObject.startColumn(1);
customFloatingObject.endColumn(6);
customFloatingObject.endRow(6);
var div = document.createElement('div');
div.innerHTML = "I'm a Div.<div style='border: 1px solid red; width: 80%; margin:auto;'><span>I'm a span</span></div>"
div.style.background = 'mintcream';
div.style.border = '1px solid green';
customFloatingObject.content(div);
sheet.floatingObjects.add(customFloatingObject);
sheet.resumePaint();
}
onChange(e) {
var value = e.target.checked;
var key = e.target.id;
var state = {};
state[key] = value;
this.setState(() => (state), () => {
var sheet = this.spread.getActiveSheet();
if (key === "isSheetProtected") {
sheet.options.isProtected = value;
} else {
var floatingObjects = _concat(sheet);
if (floatingObjects) {
for (var index = 0; index < floatingObjects.length; index++) {
if (floatingObjects[index].isSelected()) {
floatingObjects[index][key](value);
}
}
}
}
});
}
onInputChange(e) {
var value = e.target.value;
var id = e.target.id;
var state = {};
if (value) {
if (id === "moveRow" || id === "moveColumn") {
value = parseInt(value);
} else {
value = parseFloat(value);
}
}
state[id] = value;
this.setState(() => (state));
}
onMove() {
var sheet = this.spread.getActiveSheet();
var floatingObjects = _concat(sheet);
var row = parseInt(this.state.moveRow);
var col = parseInt(this.state.moveColumn);
if (!isNaN(row) && !isNaN(col)) {
if (floatingObjects) {
for (var index = 0, len = floatingObjects.length; index < len; index++) {
var fo = floatingObjects[index];
if (fo.isSelected()) {
fo.startRow(row);
fo.startColumn(col);
fo.startRowOffset(0);
fo.startColumnOffset(0);
}
}
}
}
sheet.repaint();
}
onResize() {
var sheet = this.spread.getActiveSheet();
var floatingObjects = _concat(sheet);
var width = parseFloat(this.state.resizeWidth);
var height = parseFloat(this.state.resizeHeight);
if (!isNaN(width) && !isNaN(height) && width > 0 && height > 0) {
if (floatingObjects) {
for (var index = 0, len = floatingObjects.length; index < len; index++) {
var fo = floatingObjects[index];
if (fo.isSelected()) {
fo.width(width);
fo.height(height);
}
}
}
}
sheet.repaint();
}
bringToForward() {
var sheet = this.spread.getActiveSheet();
var floatingObjects = _concat(sheet);
var maxZIndex = 0, selectedCount = 0, selectedName = null;
if (floatingObjects) {
for (var index = 0, len = floatingObjects.length; index < len; index++) {
var fo = floatingObjects[index];
if (!fo || !fo.name || !fo.isSelected) {
continue;
}
var zIndex = sheet.floatingObjects.zIndex(fo.name());
if (zIndex > maxZIndex) {
maxZIndex = zIndex;
}
if (fo.isSelected()) {
selectedCount++;
selectedName = fo.name();
}
}
if (selectedCount === 1) {
sheet.floatingObjects.zIndex(selectedName, maxZIndex + 1);
}
}
}
}
function _concat(sheet) {
if (sheet) {
var customFloatingObjects = sheet.floatingObjects.all();
var pictures = sheet.pictures.all();
return pictures.concat(customFloatingObjects);
}
return [];
}
<!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: 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: 5px;
}
input, select {
padding: 4px 6px;
width: 100%;
box-sizing: border-box;
}
input[type=checkbox] {
width: auto;
}
label {
display: inline-block;
min-width: 70px;
margin: 6px 0;
}
hr {
border-color: #fff;
opacity: .2;
margin: 12px 0;
}
input[type=button] {
margin-top: 6px;
}
.desc{
padding:2px 10px;
background-color:#F4F8EB;
}
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-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);
