Select range of cells with getSelection()

[danillohss]

Hello friends, I am facing a specific issue. My goal is to select cells from a spreadsheet and retrieve those values to save them. Initially, I searched for the functionality to do this and found the following code:

Link: https://reference.univer.ai/en-US/classes/FSelection

const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const fSelection = fWorksheet.getSelection();
const activeRange = fSelection.getActiveRange();
console.log(activeRange);

However, I couldn't access the getSelection() function. I kept searching and discovered that to access it, I would need to install the Facade API package. Indeed, the function is inside Facade.js, located in the node_modules folder.

After doing this, I realized I would need to instantiate the spreadsheet differently, as shown on this page: https://reference.univer.ai/en-US.

I did that, installed and instantiated the spreadsheet this way, but now I am encountering this error in the console:

The column width is less than 0, need to adjust page width to make it greater than 0

Version Vue.js: 3.3.10
Version Univer: 0.15.0

Here is my code:

<template>
  <button>Get Active Range</button>
  <div
    id="univer-container"
    class="univer-container"
    tabindex="0"
    style="width: 1500px !important; height: 45rem !important; outline: none"
  ></div>
</template>

<script setup lang="ts">
import {
  createUniver,
  defaultTheme,
  LocaleType,
  merge,
} from "@univerjs/presets";
import { UniverSheetsCorePreset } from "@univerjs/presets/preset-sheets-core";
import UniverPresetSheetsCoreZhCN from "@univerjs/presets/preset-sheets-core/locales/en-US";

import "@univerjs/presets/lib/styles/preset-sheets-core.css";
import { onMounted } from "vue";

const { _, univerAPI } = createUniver({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: merge({}, UniverPresetSheetsCoreZhCN),
  },
  theme: defaultTheme,
  presets: [
    UniverSheetsCorePreset({
      container: "univer-container",
    }),
  ],
});

onMounted(() => {
  const workbook = univerAPI.createWorkbook({ name: "Test Sheet" });
  console.log({ workbook });

  const activeSheet = workbook.getActiveSheet();
  activeSheet.setColumnWidth(0, 200);

  console.log({ activeSheet });

  const selection = activeSheet.getSelection();
  console.log({ selection });

  const range = selection.getActiveRange();
  console.log({ range });
});
</script>

<style scoped>
.univer-container {
  width: 100%;
  height: 50rem !important;
  overflow: hidden;
}

/* Also hide the menubar */
:global(.univer-menubar) {
  display: none;
}
</style>