Looks very nice. Couple of nitpicks: 1. Tooltips go into a flicker loop when you hover over the tooltip arrow ( the triangle hanging off of the tooltip box ). 2. Dropdowns should close when you click a second time on the dropdown toggle.
thx
Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web
31–40 of 108 posts
Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web
#32The speed of the rendering is amazing compared especially to e.g. google sheets. I just informally timed both and gsheets was rendered and editable in 4 seconds whereas this took 0.2 seconds.
However nearly every native UI interaction seems kinda broken. Even entering a value on Firefox doesn't work well. The first letter typed is entered into the cell but then every subsequent letter triggers firefox's fine-in-page (which also doesn't work as others have pointed out). Similarly copy/paste doesn't work, and the context menu (right-click) closes immediately. Maybe it works better in Chrome.
I wonder if there's a case to be made for a hybrid rendering/ui approach here. Rendering could be handled by canvas but native elements swapped in when actual text-editing is invoked?
Cool little demo in any case. I liked some of the simple but effective spreadsheet evaluation code.
Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web
#33AFAIK (and in evidence in this case) you can't use the normal "find in page" (control-f) when using canvas. Consistency in functions like find is one of the greatest things about the browser, this approach removes it. Probably (!) an implementation will add its own find, which may be better or worse, but as browsers are best thought of as universal information vehicles, it won't automatically fit into accessibility a…
You'll basically have to reimplement Ctrl+F yourself regardless of whether you are using canvas or not because if you have say a spreadsheet with fifteen thousand columns and fourty million rows of data then I doubt any browser would be able to handle having all of those elements in the DOM at once. So I don't think that is a compelling argument against canvas.
That's true, but I hope people would hesitate before using this for spreadsheets that don't require virtual rendering.
Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web
#34The cells need to have some kind of hover styling. Without it the demo feels non-interactive.
I'm not sure I've ever seen hover styling in any spreadsheet app, whether native or online. I think it would detract from the user's focus.
This certainly feels interactive when I interact with it like I would any other spreadsheet. Are you unable to select cells and/or type in them?
Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web
#35It's neat and fast. I do think that you should consider implementing a few more common excel shortcuts, to make it really seamless to an advanced excel user. For instance:
- CTRL ARROWS: to move on the grid to the next populated cell
- F2: edit the first cell of the selected range
- CTR ENTER: applies the content of the first cell of the selected range to the whole range (after you pressed F2 to edit it)
- when edit mode, pressing down arrow should leave edit mode and move to the cell below
- CTR *: select area
- SHIFT SPACE / CTR SPACE: to select a row / column
Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web
#36This is amazing and fast. I'm complaining about it actually being easily broken only because I really wished this worked well, so I could build on it. It crashed for me on literally the very first thing I tried. I opened up the demo page, typed in 4 numbers in a column (in positions a5,a6,a7,a8), then typed "=sum(a5:a8)" in position a9, hit enter, and the demo crashed (with canvas all messed up). There's a traceback in the console log that starts "Uncaught TypeError: Cannot read property 'render' of undefined at cell.js:146". I'm using Chrome 71. I refreshed and tried the same test and it crashed again. There is a test suite (https://github.com/myliang/x-spreadsheet/tree/master/test) but the files have mostly not been touched in four months. In any case, awesome work - please make it even better!
Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web
#37I think a description of why canvas was used would be nice in the README. My (probably naive) view is that browsers are pretty good at table-ish layouts so it’d be great to know why canvas was chosen.
If by table-ish layouts you mean using the element to render something like this then browsers might be OK at it but the woefully inadequate to do anything more than the most basic table renderings. Virtual scrolling or frozen rows/columns is a lot of manual work to do on top of a .
Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web
#38Breaks easily, to reproduce bug:
Put =B1 in A1 and =A1 in B1.
Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web
#39Breaks easily, to reproduce bug: Put =B1 in A1 and =A1 in B1.
or just B1=B1
Re: Show HN: X-spreadsheet – A JavaScript canvas spreadsheet for web
#40This is amazing and fast. I'm complaining about it actually being easily broken only because I really wished this worked well, so I could build on it. It crashed for me on literally the very first thing I tried. I opened up the demo page, typed in 4 numbers in a column (in positions a5,a6,a7,a8), then typed "=sum(a5:a8)" in position a9, hit enter, and the demo crashed (with canvas all messed up). There's a traceback…
It's also fast because the worksheet is tiny (100 rows x 25 columns), but it's a great proof of concept.