ruilisi / fortune-sheet Goto Github PK

Is your feature request related to a problem? Please describe.
Is there any plan to make a Vue version?

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
When I resize the container where the sheet is displayed, the canvas dimension does not update and the rendering does not match the new size.

Describe the solution you'd like
Having a resize observer to adapt the canvas width and height every time the values are updated

Describe alternatives you've considered
I will try to develop this observer on my own side (in my own application) to fix the size by myself - but it could be better to have this fix included in the lib

Additional context
I'm using Angular 13 with the react plugin loaded with a wrapper (just for you to know)

Describe the bug
On my application I was forced to add this custom CSS:

:host{
  ::ng-deep {
    .fortune-fx-input,
    .fortune-name-box-container,
    .fortune-toolbar-item,
    .luckysheet-cell-input {
      color:black
    }
    .fortune-fx-editor {
      background-color: white;
    }
    .fortune-left-top {
      background-color: rgba(194, 194, 194, 0.4);
    }
    .fortune-fx-input{
      text-align: left;
    }
  }
}

Even after adding the dist CSS:
"node_modules/@fortune-sheet/react/dist/index.css"

Expected behavior
Did I make something wrong?
If not, it is possible to add this style directly on the default stylesheet?

Screenshots

Describe the bug
If the allowEdit is true
If the user starts editing a formula, if he changes the sheet (if the user clicks on sheet 2 per example) it will break the entire component.

To Reproduce
Steps to reproduce the behavior:

1. render the Workbook with allowEdit={true}
2. start to edit a cell with the formula (like =B1+B2)
3. validate the edition and add a new Sheet
4. back to the first sheet
5. edit the formula cell
6. click on sheet 2

Expected behavior
The formula edition should be canceled and the new sheet should be displayed

Screenshots

Additional context
I'm using Angular 13 with the react plugin loaded with a wrapper (just for you to know)

我打算执行协同的前端，在命令行执行 yarn storybook。报下面的报错

请问怎么运行协同前端的代码

Describe the bug
Error: Circular dependency: node_modules/@formulajs/formulajs/lib/math-trig.js -> node_modules/@formulajs/formulajs/lib/statistical.js -> node_modules/@formulajs/formulajs/lib/math-trig.js

Is your feature request related to a problem? Please describe.
Export excel

Describe the solution you'd like
To have a download button, which will directly download as Excel

Describe alternatives you've considered
use something like exceljs

Additional context
Included in roadmap

If no one else is working on it, can I get assigned to it?

Excelent initiative, thank's for this.

You know that Formula Parser is deprecated, so may be you can consider integrate to Hyperformula component.

Hyperformula, is a complete, open-source Excel-like calculation engine written in TypeScript. Includes 380+ built-in functions. Maintained by the team at Handsontable.

https://github.com/handsontable/hyperformula/

Thank's a lot.

报错信息如下图所示:

How can you drag down a range programmatically? I have a row that I wish to drag down and copy formats and formulas. Example below. Thank you!

如何以编程方式向下拖动范围？我有一行希望向下拖动并复制格式和公式。下面的例子。谢谢！

插入图片能设置背景

Describe the bug
公式：IF(D1=0,0,C1/D1)，当D1为0时，会显示DIV/0的Error

To Reproduce
Steps to reproduce the behavior:

1. Go to online demo
2. 找个空白的单元格
3. 输入公式：=IF(D1=0,0,C1/D1)
4. 单元格会显示#DIV/0 !

Expected behavior
应该结果为0

Screenshots

The formulas that reference another sheet dosnt work

Can be reproduced in online demos of fortuneSheets

I expected it to work like lucky sheet but it is possible that this functionality has not been implemented in fortune sheet yet?

Please can some one guide how we can create readonly cell and columns.

Thanks for your help advance.

something went wrong with the stylesheet

我想自己搭建服务器，然后想lucksheet一样设置loadUrl和loadSheetUrl，但是没有找到对应的属性。

sheet在创建的时候设置了一些公式，但是在第一次显示时不会自动计算。我看doc里面有一个叫workbook.calculateFormula的，但是在ref里面没找到。

Describe the bug
When zooming user browser zoom in Chrome, text rendering becomes blurry.

To Reproduce
Zoom in the browser to about 160% zoom level.

Describe the bug
Nothing happens when I click on these two bottom sheet name arraws

To Reproduce

1. Open an Excel file with multiple sheets
2. click on the double left arrows

Expected behavior
Maybe they are supposed to move the view from one sheet to the next (or the previous)

Screenshots

Additional context
I'm using Angular 13 with the react plugin loaded with a wrapper (just for you to know)

fortune-sheet 版本 0.6.3
yarn build时出现TypeError: fs.rmSync is not a function错误

`@fortune-sheet/react: Build umd success entry: src/index.ts
@fortune-sheet/react: Build cjs with rollup
end value has mixed support, consider using flex-end instead
@fortune-sheet/react: Build cjs success entry: src/index.ts
@fortune-sheet/react: Build esm with rollup
end value has mixed support, consider using flex-end instead
@fortune-sheet/react: Build esm success entry: src/index.ts
/fortunesheet/scripts/build.js:22
fs.rmSync("packages/core/tsconfig.json");
^

TypeError: fs.rmSync is not a function
at Object. (/fortunesheet/scripts/build.js:22:4)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
at internal/main/run_main_module.js:17:47
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`

yarn的版本为：1.22.19

单元格包含 <> 类似HTML标签时候.存在问题
同时如果存在换行. 那么在复制该单元格进行粘贴的时候会有问题. 再次编辑原单元格,它的值可能也会出现丢失的情况

Describe the bug
When the config allowEdit is false, the text field in the formula bar should not be editable
AND
The user can still move the sheet name from the right or left position

To Reproduce

1. Set config allowEdit to false
2. Select a cell
3. click on the formula bar and edit the content (the cell value is not updated, but the formula bar value should be editable)
4. Open an Excel file with more than 1 sheet (2 or 3)
5. You can still move (drag and drop) one sheet before or after another

Expected behavior
The text field should not be editable (read-only) and the sheet order should not be changed

Screenshots

Describe the bug
在表格的最后几行进行编辑，然后按回车，重复上面的操作，直到选中的单元格超出可视区域，并继续重复操作，发现单元格选择框错位。

Expected behavior
单元格选择框正常

Screenshots

Hi,

It would be nice to consider including an auditing mechanism for changes (actions and data) that are performed in a spreadsheet.

I have seen an interesting idea in the Ethercalc project [https://github.com/audreyt/ethercalc]

Each change is transformed into instructions, for example:

set A1 text t Hi, Friends.
set A2 value n 15
set A3 value n 20
set A4 formula sum(A2:A3)
set A4 font normal bold * *
cut A2:A4 formulas
paste B2 formulas

Others applications, you can persist this and replay changes. It would be a very interesting function with many possibilities, don't you think?

"row": 36, //the number of rows in a sheet
"column": 18, //the number of columns in a sheet

set the attributes as per the document https://ruilisi.github.io/fortune-sheet-docs/guide/sheet.html#initial
followed the above document
got more rows and columns

Describe the bug
The horizontal scrollbar is out of the container.
The scroll bar width exceeds the width of the container

To Reproduce
Default behavior

Expected behavior
The scrollbar width stays inside the container

Screenshots

I can change my application setting to use a discreet scrollbar design, even in this mode we can see the width is too big:

Additional context
I'm using Angular 13 with the react plugin loaded with a wrapper (just for you to know)

Describe the bug
CSS needs to be imported manually

To Reproduce
Try this code:

import { Workbook } from "@fortune-sheet/react";
// try commenting the next line out
// import "@fortune-sheet/react/dist/index.css";

const App = () => {
  const x = 1;
  return (
    <div
      style={{
        width: "100%",
        height: "500px"
      }}
    >
      <Workbook
        data={[
          {
            name: "Empty",
            status: 1,
            celldata: [{ r: 0, c: 0, v: null }]
          }
        ]}
      />
    </div>
  );
};

export default App;

Expected behavior
Auto import or updated the docs(in readme)

Screenshots

Additional context
Codesandbox: https://codesandbox.io/s/playground-fortune-sheet-osbs0h?file=/src/App.tsx:0-478

Describe the bug
There are two empty items in the format dropdown

To Reproduce

In the DOM I can see:

Expected behavior
We should have values or nothing, but no empty line

Additional context
It happens only with ES language.
If I switch in English it is working fine:

Describe the bug
I'm looking for how to display an excel file in ready only mode - without any edition

To Reproduce
I open the file using LuckExcel, directly from an URL with LuckyExcel.transformExcelToLuckyByUrl
Then I load the result with the following:

let options = {
          container: 'react-excel-id', //react-excel-id
          showinfobar: false,
          showsheetbar: true,
          data: exportJson.sheets,
          enableAddRow: false,
          row: 26,
          column: 26,
          allowUpdate: false,
          enableAddBackTop: false,
          lang: this.translateService.getDefaultLang()
        };
        ReactDOM.render(
          React.createElement(ExcelReactComponent, options),
          document.getElementById('react-excel-id')
        );
[...]
// Then I load the component with:
<Workbook data={props.data} config={props} />

With this way, I can see the following error on my console:

Expected behavior
Is there an issue with my code? It is possible to block the edition?

Screenshots

Additional context
I'm using Angular 13 with the react plugin loaded with a wrapper (just for you to know)

lucky-sheet只支持xlsx格式的文件，其它格式都不支持，请问下fortune-sheet支持xls，xlsm，csv格式吗

Describe the bug
Workbook sheets does not re-render when I change the data prop within a button click event.

To Reproduce
Steps to reproduce the behavior:

1. Go to fortune-sheet-react-sample repo and clone it.
2. yarn install
3. yarn start
4. When I click the "Set New Sheets" button then I create the new state with newData object and pass it to Workbook's data prop. But Workbook components does not re-render with new sheet and cells.

Expected behavior
I expect the Workbook component to re-render with new sheet.

RT， handleFormulaInput 如下行会包 Uncaught TypeError: Cannot read property 'id' of null,

Not everyone uses react, can you provide samples, a hello world if you will, of fortune sheet/core? using just vanilla js?

Describe the bug
When there is multiple rows in a cell, then delete the last row, then the words aligment is wrong, especially under "horizontal center" style.

To Reproduce
Steps to reproduce the behavior:

1. Input multipe rows in the same cell with "alt+enter".
2. Delete the last row, and the count of ramining rows is more than one.
3. See the style error.

Screenshots

I can't just go after that.

Fig:

有打算做不同的ip同时操作协同文档的时候，显示不同的颜色

如标题所示，在ref找了没有undo和redo方法，现在有什么方法可以做到吗？

Describe the bug
Error: node_modules/resize-observer-polyfill/src/index.d.ts:19:18 - error TS2717: Subsequent property declarations must have the same type. Property 'contentRect' must be of type 'DOMRectReadOnly', but here has type 'DOMRectReadOnly'.

19 readonly contentRect: DOMRectReadOnly;

To Reproduce
Steps to reproduce the behavior:

1. use angular13
2. with typescript 4.6.4
3. npm start
4. See error

Expected behavior
The issue is because of the latest version of TypeScript ships with an official type definition, which this library conflicts with.

请问什么时候能支持插入链接、透视表分析、图表生成

报错如下：

导致无法编辑了，看逻辑是$copyto因为没有formulabar所以值为空

还有问下这个=开头自动变成公式的逻辑能否关闭？

Describe the bug
Wrapping of words is clipped.

To Reproduce
Input some words especially chinese words, and set the cell wrapping, tune the length of words, will see the wrap cell clips one or two words.

Expected behavior
Correct wrapping calculation.

Screenshots

Describe the bug
When the config allowEdit is false, the ADD button at the bottom of the sheet should not be visible

To Reproduce
Set config allowEdit to false
Scroll to the bottom of the sheet, you can see the button and the field to set the number of added row
If you click on the button, the row will be added on the rendering

Expected behavior
The button should not be visible at all

Screenshots

const onChange = useCallback((d: Sheet[]) => {
d[0]["data"][1][1]={"ct": {"fa": "General","t": "g"},"m": "Nameofthescript","v": "Name of the script","bg": "#858a7e","ht": "0",};
console.info(d[0]["data"]);
}, []);

return ;

Please can suggest the example for onChange event for each cell. I couldn't find on it.
above one is failing while I set the cell value.

Hi, thanks for the react implementation.

I used demo https://ruilisi.github.io/fortune-sheet-demo/?path=/story/workbook--basic and as I see copy-paste range doesn't work from Google sheet.
I see it in formula, but cells don't be updated:

Is your feature request related to a problem? Please describe.
目前表格的初始化为获取到远端data配置后完成第一次加载，但如果使用useState存储data的时候，当data更新后表格不会重新渲染到新的data配置，不知道是否有其他方法可以手动/自动触发这个加载？

Describe the solution you'd like
当data存储在useSatate时，若更新data则表格重新渲染到新的data

Hello,

I have a question that how did you solve the multiple instance problem. 😄
I'm trying to solve this problem in my local luckySheet project.

Regards.

你好，我已经在公司内部测试使用了页面，让我们点击空白的区域的时候会发生如下报错:

支持预览吗