Standalone version

[Sevenanths]

Hello,

I would like to ask whether you are planning to build a standalone version of this application in the foreseeable future. I'm very impressed by the online demo, and it's basically all I could wish for in a OneNote-like drawing application. It would be fantastic to use IDC in my own projects, but as it stands, this doesn't seem to be possible. I would love to be able to just bind it to my own canvas element and implement the UI myself.

Is this something you're planning in the future? I've seen it's on your roadmap, but it's been some time since the project was updated, which is why I'm asking it here.

Thank you in advance! And props for this fantastic application.

[thfrei]

Hi Sevenanths
Thank you for your kind words. You are right, the project hasn't been updated in quite some time. I am a little bit stuck between, working on the infinite-drawing-canvas library, or rather work on the trilium integration (zadam/trilium#671 / zadam/trilium#1135 (comment)). This trilium integration was (and still is) the main motivator behind the project. I started out with fabric.js, but then found, that all the mouse/pen/touch interaction introduce quite a few extra functions, which made more functions and stuff necessary. Up to this date, it seems to me, that IDC still is quite unique in its ability for pen/touch/mouse support.

I guess, exchanging some thoughts with you or somebody, could solve my dilemma.

What would you need for a standalone application?

Up until now, I thought of an API quite similar to fabric, but extended with buttons. It is somehow abstractly formulated in the hacked demo.js. However, I could not settle on an API or structure.

  const myCanvas = new InfiniteCanvas(
    $('.canvasElement'),
    $('#parentContainer'),
    $('#canvasContainer'),
  );
  const infiniteCanvas = myCanvas.initFabric();
  const canvas = infiniteCanvas.$canvas;

  canvas.setWidth(myCanvas.width);
  canvas.setHeight(myCanvas.height);

  // Buttons
  initButtons(infiniteCanvas);
  initPens(infiniteCanvas);
  initMenu(infiniteCanvas);

For a standalone version, one should probably have some options for pens, buttons, and the menu. And also some hooks (like afterRender).

Looking forward hearing from you.
Bets regards
Thomas

[Sevenanths]

Hi Thomas,

Thanks for your elaborate reply. I understand that your main motivation behind the project is to make it work for your specific workflow, and it makes sense to develop it for this purpose only. It is not my intention to influence what you spend your time on, and if you feel like the Trilium integration makes the most sense, that is definitely what you should be working on. That being said, I do think IDC would benefit from being available as a standalone library, and I could definitely see it being used in other projects (e.g. Trilium, but also video games like skribbl.io).

The API sample you proposed seems like a good start. I am not sure whether you should even explicitly have a set-up for the buttons and pens like you have now. I would leave the implementation of the UI up to the developer who implements the library. I was originally going to advise having some abstractions to activate pens or manipulate the state of the canvas (e.g. infiniteCanvas.activatePen(pen), infiniteCanvas.crop()), but looking at the code in gui.js, I do not even think this is necessary. Everything is quite clear as-is, and I think an API would just introduce even more unnecessary complexity (which you explain you have been trying to avoid).

The only thing I could really wish for at this point is to have IDC as a "drop-in library", which, after having been included, can be addressed in a way that is comparable (or even equal) to the snippet in your reply. All the manipulation of the canvas can be replicated by simply looking at your implementations in gui.js, so this need not be a concern.

I hope my explanation was clear enough. Please do tell if anything is unclear, or if you have any remarks.

Thank you for your time!

[thfrei]

Hi Sevenanths

I might not have stated it quite clearly, but the idea behind IDC is, that it can serve as a library others can use, just like the underlying fabric.js. So I could integrate it into Trilium (my motivator), but also other people can integrate it into their app. That's why I started it as a "library".

Let me repeat what I understand from your usecase: You would like to npm install the library, and have a way to add some functions like in gui.js so that you can add these to your own gui.

I guess an alpha version should be doable in the foreseeable future, without too much of an effort.

I was originally going to advise having some abstractions to activate pens or manipulate the state of the canvas (e.g. infiniteCanvas.activatePen(pen), infiniteCanvas.crop()),

The point you make is valid. I started with functions like resetZoom() and crop(), but a clear way of using the library is still missing, imo.

I will keep you posted on the progress. Thanks for your time and best regards.