[TW5][Discussion] DragnDrop Blocks

[BurningTreeC]

Hi @all

I'd like to continue the discussion @Mat and @me had here in this new thread

This is about creating universally usable blocks of wikitext that are draggable and droppable onto tiddlers to append the codeblock directly to the tiddler

@Mat has come up with this great Idea, I've also had some thoughts and I think we can give this a shot!

Here Mat has already a demo working, which demonstrates where this should lead

I hope that the community is interested to give this some attention


I'll look forward to merge your best ideas into mine and share my ideas with you

BurningTreeC

[AlexHough]

Very interesting...

I wonder if it could work for the preview pane in edit mode.

Alex

[Mat]

Thanks BurningTreeC. Your code is what made it possible.

An issue, that actually get's back to your original question in that other thread; It would be neat to also be able to use this when in edit mode. I.e drag'n drop an icon and have the code appear in the editor. Currently, only the title of the source tiddler is dropped but it would be better if dropping these Drag'n Drop Blocks automatically caused cloning of the source tiddler, like it does in view mode. IMO drag'n dropping such blocks should use the same command in edit mode and view mode, i.e merely drag and drop, no "Ctrl+...".

Another issue is that in view mode it is currently not possible to inject rather than append the block. It is not sure that one would want the block at the end. I'm guessing this is a difficult problem, i.e to recognize exactly where the block is dropped in the view mode text.

Also, we should ideally have blocks that can encompass existing content, such as <div>...</div> or //...// and, in edit mode, maybe even \define ... \end.

...

In that other thread Surya expressed a wish for using this to make tables. I agree. I think it would be neat with a solution I've seen in word editors where you click(!) on the icon and have a 'grid' pop up that symbolizes a generic table, where you visually mark out how many rows*columns you want in your table. (Suryas wish for the table fields to then be editable in view mode is a different matter though. Solvable, but a different matter.)

Generally, the idea to have the icons really be buttons is pretty neat. Like it the table case, it can be used to show a popup for filling in any parameter/attribute values - but as a button it can of course be used for anything.

...

Idea: Drop outside of tiddlers, e.g to left of story river, to create a new tiddler with that code. Would make for simple way to create template tiddlers.

...

Idea for later; imagine a toolbox with such icons, perhaps residing in a sidebar tab. Maybe that toolbox could also have a drop area... that, if code is dropped there, creates a tiddler with the dropped text as content and a new icon is added to the toolbox for that tiddler! A kind of clipboard for permanently reusable text/code.

<:-)

[AlexHough]

I made this a while back ...https://alexhough.github.io/DropOntoToClose.html

Alex

[BurningTreeC]

Very interesting...

I wonder if it could work for the preview pane in edit mode.

 

@AlexHough that's a great idea! let's see, it should work. one could choose a new preview type where stuff can be dragged into.
I didn't think about the preview pane for this, but it could be the right place

Simon

[BurningTreeC]

An issue, that actually get's back to your original question in that other thread; It would be neat to also be able to use this when in edit mode. I.e drag'n drop an icon and have the code appear in the editor. Currently, only the title of the source tiddler is dropped but it would be better if dropping these Drag'n Drop Blocks automatically caused cloning of the source tiddler, like it does in view mode. IMO drag'n dropping such blocks should use the same command in edit mode and view mode, i.e merely drag and drop, no "Ctrl+...".

Hm, that would need an enhancement in my dragndrop thing
I think it's possible and could be assigned to a key using the $:/config/DragDefaults tiddler
I also think it would be a faster way to accomplish on a lower level what we're trying here
The dragndrop approach of dragging into areas besides the text editor would still be valuable and I wouldn't want to drop it when the dragging-blocks-into-textareas is possible

Another issue is that in view mode it is currently not possible to inject rather than append the block. It is not sure that one would want the block at the end. I'm guessing this is a difficult problem, i.e to recognize exactly where the block is dropped in the view mode text.

Also, we should ideally have blocks that can encompass existing content, such as <div>...</div> or //...// and, in edit mode, maybe even \define ... \end.

Right, I've also thought about these things - with the table approach a part of this would be made easier.
I was thinking about having the table check the existing code with some regexp list filtering for existing widgets and macros and what else, then represent them visually in a table where you can drag new blocks into and rearrange them.

The content of the table is stored in a qualified tiddler <$set name="storageTiddler" value=<<qualify "$:/whatever/whatever">>
Finished arranging and dragndropping, with the click of a button the current tiddler gets the new code
All this could be done without opening it in edit mode
The table could be toggled somehow like the info panel

...

In that other thread Surya expressed a wish for using this to make tables. I agree. I think it would be neat with a solution I've seen in word editors where you click(!) on the icon and have a 'grid' pop up that symbolizes a generic table, where you visually mark out how many rows*columns you want in your table. (Suryas wish for the table fields to then be editable in view mode is a different matter though. Solvable, but a different matter.)

Generally, the idea to have the icons really be buttons is pretty neat. Like it the table case, it can be used to show a popup for filling in any parameter/attribute values - but as a button it can of course be used for anything.

I somehow tried that before, it's doable. I think everything that's doable with a template tiddler and some variables is possible here - the how is a different question

But where's a will there's a way

...

Idea: Drop outside of tiddlers, e.g to left of story river, to create a new tiddler with that code. Would make for simple way to create template tiddlers.

...

Also cool, could we make a checkable checklist somewhere where we can track ideas and check and comment them if we have solutions?

Idea for later; imagine a toolbox with such icons, perhaps residing in a sidebar tab. Maybe that toolbox could also have a drop area... that, if code is dropped there, creates a tiddler with the dropped text as content and a new icon is added to the toolbox for that tiddler! A kind of clipboard for permanently reusable text/code.

<:-)

YES!

[BurningTreeC]

@Mat

@Jeremy has pointed out that dragging the content of a tiddler is already possible this, you can try it on tiddlywiki.com

<$list filter="[tag[HelloThere]]">
<$draggable tiddler={{!!text}}><$text text=<<currentTiddler>>/></$draggable>
</$list>

[@TiddlyTweeter]

BurningTreeC wrote:

@Jeremy has pointed out that dragging the content of a tiddler is already possible this, you can try it on tiddlywiki.com

Right.

Your & Mat's approach is visually excellent.

To ME its adding possibly "visually driven construction".

BUT without being able to d-n-d ORDER the transfers (i.e. rearrange them) I'm not sure quite what the final added value is? Why would I want "lego" pieces if I can't stack them as i need?

It seems to me that some of the work BTC did (brilliantly) previously on gridded layouts may be relevant?

Just thoughts

Best wishes
Josiah

 

[@TiddlyTweeter]

Ciao BTC & Mat

One thing that interested me about this (because of its VISUALITY) is the possibility to construct complex <div> based layouts.

The advantage over normal is SEEING WSIWYG RENDER LEVEL.

An example: say you wanted to make a three column newspaper layout consisting of Images, Headlines & Text columns (boilerplate). Being able to d-n-d the <div> components needed that, in render, show the final structure could be a godsend.

Best wishes
Josiah

[Mat]

Ha! 

Or to make it even more specific to clarify the simplicity of it:

<$draggable tiddler={{_source_tid_}}>{{_some_icon_}}</$draggable>

BUT there is an issue: The result is surrounded by [[ ... ]]. How can these brackets be omitted? (@Jeremy - ?)

I made some modifications to the demo/experiment site. Now you can drop onto either of the view mode text area or the editor! (As noted, in editor the result is surrounded by [[...]].)

<:-)

[BurningTreeC]

@Mat

I made a demo here: http://dragndroptable.tiddlyspot.com
This shows the table I was describing
in the sidebar are two pills to drag into the table
inside the table they can be rearranged

all operations are stored in a qualified tiddler, not in the current tiddler
so at the end, when arranging is done, click on a button and save

@Jeremy has pointed out that dragging the content of a tiddler is already possible this, you can try it on tiddlywiki.com

<$list filter="[tag[HelloThere]]">
<$draggable tiddler={{!!text}}><$text text=<<currentTiddler>>/></$draggable>
</$list>

Ha! 

Or to make it even more specific to clarify the simplicity of it:

<$draggable tiddler={{_source_tid_}}>{{_some_icon_}}</$draggable>

BUT there is an issue: The result is surrounded by [[ ... ]]. How can these brackets be omitted? (@Jeremy - ?)

That seems to be because of the spaces in the dragged "title" (here it's the text of a tiddler)
It behaves the same way like dragging a tiddler like "i have spaces"
My dragndrop mod could help, maybe I'll make a plugin of it, because currently it has downsides so that it's not core-able

I made some modifications to the demo/experiment site. Now you can drop onto either of the view mode text area or the editor! (As noted, in editor the result is surrounded by [[...]].)

<:-)

This is going to be cool 8-)

Simon

 

[BurningTreeC]

@all @anybody-interested

on my demo here http://dragndroptable.tiddlyspot.com there's the

$:/core/ui/ViewTemplate/dragndroptable

tiddler that contains the whole dragndrop table and I think it's structured so that it's not that hard to understand how it works

anybody interested feel free to use it, modify it, hack something on top of it ...

BTC

[BurningTreeC]

Next step for me is to create a tag pill that represents a widget or a macro
the dropdown holds the possible attributes - they can be selected and then their values can be inserted

the closing parts of widgets or html tags need to be handled, too
that's something I'm gathering ideas for atm

[Alex Hough]

Have a look at the two Kanban edition: they're listed on  TW.com 

Alex (in haste)

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/4a08d1d0-477b-4613-971a-bc66719e8aee%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[BurningTreeC]

Have a look at the two Kanban edition: they're listed on  TW.com 

Thanks @AlexHough , I know them already
This isn't supposed to be a kanban, the purpose of my table is a different one
But maybe I can get some ideas from them, thank you!

Alex (in haste)

On 7 March 2018 at 09:06, BurningTreeC <hypnotize...@gmail.com> wrote:

Next step for me is to create a tag pill that represents a widget or a macro
the dropdown holds the possible attributes - they can be selected and then their values can be inserted

the closing parts of widgets or html tags need to be handled, too
that's something I'm gathering ideas for atm

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.