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:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="option-row">
<p class="desc">Select the floating object in the Spread component and change it using these options</p>
</div>
<div class="option-row">
<input type="checkbox" id="isSheetProtected" v-model="isSheetProtected" v-on:change="onChange" />
<label for="isSheetProtected">IsSheetProtected</label>
</div>
<div class="option-row">
<input type="checkbox" id="isLocked" checked v-model="isLocked" v-on:change="onChange" />
<label for="isLocked">IsLocked</label>
</div>
<div class="option-row">
<input type="checkbox" id="isVisible" checked v-model="isVisible" v-on:change="onChange" />
<label for="isVisible">IsVisible</label>
</div>
<div class="option-row">
<input type="checkbox" id="dynamicSize" checked v-model="dynamicSize" v-on:change="onChange" />
<label for="dynamicSize">DynamicSize</label>
</div>
<div class="option-row">
<input type="checkbox" id="dynamicMove" checked v-model="dynamicMove" v-on:change="onChange" />
<label for="dynamicMove">DynamicMove</label>
<hr>
</div>
<div class="option-row">
<label for="moveRow">Row:</label>
<input type="text" id="moveRow" v-model.number="moveRow" />
<label for="moveColumn">Column:</label>
<input type="text" id="moveColumn" v-model.number="moveColumn" />
<input type="button" id="moveFloatingObject" value="Move floating Object" @click="onMove($event)" />
</div>
<hr>
<div class="option-row">
<label for="resizeWidth">Width:</label>
<input type="text" id="resizeWidth" v-model.number="resizeWidth" />
<label for="resizeHeight">Height:</label>
<input type="text" id="resizeHeight" v-model.number="resizeHeight" />
<input type="button" id="resizeFloatingObject" value="Resize floating object" @click="onResize($event)" />
</div>
<hr>
<div class="option-row">
<input type="button" id="bringToForward" value="Bring Forward" @click="bringToForward($event)" />
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import GC from "@mescius/spread-sheets";
const spreadRef = ref(null);
const isSheetProtected = ref(false);
const isLocked = ref(true);
const isVisible = ref(true);
const dynamicSize = ref(true);
const dynamicMove = ref(true);
const moveRow = ref("");
const moveColumn = ref("");
const resizeWidth = ref("");
const resizeHeight = ref("");
function initSpread (spread) {
spreadRef.value = spread;
let spreadNS = GC.Spread.Sheets;
let sheet = spread.getSheet(0);
sheet.suspendPaint();
let customFloatingObject = new spreadNS.FloatingObjects.FloatingObject("f0");
customFloatingObject.startRow(1);
customFloatingObject.startColumn(1);
customFloatingObject.endColumn(6);
customFloatingObject.endRow(6);
let 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();
}
function onChange(e) {
let value = e.target.checked;
let key = e.target.id;
let sheet = spreadRef.value.getActiveSheet();
if (key === "isSheetProtected") {
sheet.options.isProtected = value;
} else {
let floatingObjects = _concat(sheet);
if (floatingObjects) {
for (let index = 0; index < floatingObjects.length; index++) {
if (floatingObjects[index].isSelected()) {
floatingObjects[index][key](value);
}
}
}
}
}
function onMove() {
let sheet = spreadRef.value.getActiveSheet();
let floatingObjects = _concat(sheet);
let row = moveRow.value;
let col = moveColumn.value;
if (!isNaN(row) && !isNaN(col)) {
if (floatingObjects) {
for (let index = 0, len = floatingObjects.length; index < len; index++) {
let fo = floatingObjects[index];
if (fo.isSelected()) {
fo.startRow(row);
fo.startColumn(col);
fo.startRowOffset(0);
fo.startColumnOffset(0);
}
}
}
}
sheet.repaint();
}
function onResize() {
let sheet = spreadRef.value.getActiveSheet();
let floatingObjects = _concat(sheet);
let width = resizeWidth.value;
let height = resizeHeight.value;
if (!isNaN(width) && !isNaN(height) && width > 0 && height > 0) {
if (floatingObjects) {
for (let index = 0, len = floatingObjects.length; index < len; index++) {
let fo = floatingObjects[index];
if (fo.isSelected()) {
fo.width(width);
fo.height(height);
}
}
}
}
sheet.repaint();
}
function bringToForward() {
let sheet = spreadRef.value.getActiveSheet();
let floatingObjects = _concat(sheet);
let maxZIndex = 0,
selectedCount = 0,
selectedName = null;
if (floatingObjects) {
for (let index = 0, len = floatingObjects.length; index < len; index++) {
let fo = floatingObjects[index];
if (!fo || !fo.name || !fo.isSelected) {
continue;
}
let 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) {
let customFloatingObjects = sheet.floatingObjects.all();
let pictures = sheet.pictures.all();
return pictures.concat(customFloatingObjects);
}
return [];
}
</script>
<style scoped>
#app {
height: 100%;
}
.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;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
