움직이는 개체의 위치와 크기를 변경할 수 있습니다. 위치와 크기는 두 가지 다른 방법으로 설정할 수 있습니다. 예:
행 높이 또는 열 너비의 크기를 조정할 것이므로 움직이는 개체의 위치나 크기를 변경하지 않아도 되는 경우가 있습니다. 이 경우, dynamicMove와 dynamicSize 메서드를 사용합니다. 예:
dynamicMove 메서드가 false이고 dynamicSize 메서드가 true이면 둘 다 아무런 효과가 없습니다.
UI 상호 작용에 따라 움직이는 개체를 변경하지 않으려면 isLocked 메서드를 사용하여 해당 개체를 잠급니다. 잠그려면 먼저 시트를 잠급니다.
하나의 움직이는 개체가 다른 개체와 겹치면 zIndex 메서드를 사용하여 순서를 위에서 아래로 변경할 수 있습니다. 예:
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 '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
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 '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
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$/ko/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/ko/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/ko/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-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/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);
