blockd3 icon indicating copy to clipboard operation
blockd3 copied to clipboard

Extending features

Open chubbymoth opened this issue 6 years ago • 2 comments

Hello Nick,

I've been digging through the code a bit with the idea to use this code base for extending it with features. I am primarily interested in adding basic SVG elements to the menu and adding support for Image and Use.

If you could point at the steps that I need to take to add something, or explain what actually is going on in the editor I'd be much obliged. As far as I can tell, all elements are generated by the js because I can't find the SVG code, which is a bit of a bummer.

It's been a while, but if you remember, please point me in the right direction.

chubbymoth avatar Aug 13 '19 18:08 chubbymoth

Looks like the bulk of the blocks are built here, using b4:

https://github.com/bollwyvl/blockd3/blob/master/js/d3.b4.js

b4 is the little library I made a long time ago for building blockly blocks with a chainable API, and has also not been touched in a very long time.

Best thing to get a feel for what's happening would be to jump into your browser inspector and trace how data moves through the different files.

bollwyvl avatar Aug 13 '19 21:08 bollwyvl

Using the Blockly documentation and digging into it, I found out that indeed all SVG objects are constructed to be adaptable for size and the inserts of objects. It turned out to be a major pia for the kids friendly version and seems to have led to a rethink. I personally hope to find a simple solution to the problem by disabling the resizing of stuff and being able to fall back on external SVG files with a simple of objects in an SVG file. The method currently used is a bit strange to me from a designers point of view as you could easily just change the size of an object using transforms and finding the bbox on externally authored objects. That would make a more versatile product and other ways to show connectors. Nor am I all that convinced of the shapes designed, but that aside.

My main interest is the way how the svg objects are handled with the snapping and I am seeking to use the code to make a user interface for interacting with data from a database, possibly using a web2py backend. The Blockly objects could then be used to retreive data and do things with it to produce all kinds of outputs.

When I saw your implementation I immediately was thinking about implementing this with Snap.js or adj.js instead. As it is so much easier for visually focused people to use such objects than staring at lines of code, that seemed like an interesting implementation. But I want to start with something more limited and add some stuff to the existing code first to learn how it works.

Thanks for your info, I hope to show some stuff later ;-)

Jelle

On 2019-08-13 23:12, Nicholas Bollweg wrote:

Looks like the bulk of the blocks are built here, using b4:

https://github.com/bollwyvl/blockd3/blob/master/js/d3.b4.js

b4 is the little library I made a long time ago for building blockly blocks with a chainable API, and has also not been touched in a very long time.

Best thing to get a feel for what's happening would be to jump into your browser inspector and trace how data moves through the different files.

You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub [1], or mute the thread [2].

Links:

[1] https://github.com/bollwyvl/blockd3/issues/12?email_source=notifications&email_token=AM4SHGRXMGPYJBZLSZGZECLQEMPT7A5CNFSM4ILNRHF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4G77OI#issuecomment-521011129 [2] https://github.com/notifications/unsubscribe-auth/AM4SHGQP3AL6EI724DRBNKDQEMPT7ANCNFSM4ILNRHFQ

chubbymoth avatar Aug 14 '19 18:08 chubbymoth