[TW5] dragndrop Mod

[BurningTreeC]

Hi community,

I've made this dragndrop mod with the goal to be able to drag links into textareas
and modify the result with the keyboard modifier keys "control" and "shift"

With this one can control the result being one of these:

• [[dragged title]]
• dragged title
• {{dragged title}}
• <$!%$§this is a user defined prefix //§/"()> + dragged title + </$ this is a user defined suffix> (or whatever)

You can test it on http://dragndropmod.tiddlyspot.com/

If you have time, please let me know if you like it or if you think that something's missing or not working properly

If one wants to do so, the results/actions can be assigned differently to the modifier keys through a config tiddler. How they get assigned is a bit quirky right now, I want to change that. Ideas appreciated.

For descriptions see the Introduction tiddler on the tiddlyspot page

best wishes,

BurningTreeC

[David Gifford]

It looks helpful, but what kinds of use cases are you imagining for your dragon droppings? Help me see the potential that I know is there but that I am missing because of my lack of imagination.

Dave

[David Gifford]

BTW I added this and PanFlex and Skeeve's Plugin library to the TiddlyWiki toolmap. Great new stuff!

On Sunday, March 4, 2018 at 3:34:28 AM UTC-6, BurningTreeC wrote:

[Mat]

VERY useful!

A wish: I have a fantasy about "visual" wikitext perhaps akin to Scratch or Blockly. I think TW scare away many potential users with all this cryptic syntax for widgets, macros, and stuff. Imagine if we instead could provide a visual toolbox that the user merely drag'n drops from.

Could your mod allow for [parts of] this? I.e to have icons (icon-links?) be draggable into the text area? In Scratch/Blockly, also the resulting code is visually represented which I guess would not be possible in the TW editor, i.e dropping the icon would in TW instead transform into the code segment the icon represents (similar to the stamp tool).

..or just maybe another kind of visual editor would allow for drag'n dropping such visual blocks and have them graphically represented like in Scratch/Blockly. Yeah, that's beyond your topic here, but I still mention it just hoping your solution here will not somehow hinder a future implementation of this fantasy of mine... ;-)

Thank you for your wonderful stuff BurningTreeC!

<:-)

[Mat]

Follow up; 

One way for drop-icon-to-get-code might be to actually make the drop action copy the text from the source link tiddler. I.e not a transclusion but really a copy of the link source text.

...actually, that would be useful even without icons. It would be another cloning feature, without having to open the source tiddler and use the clone button.

Considering the multiple options I'd probably prefer a unified Ctrl+<button> for all the commands, rather than Ctrl and Shift as modifiers.

<no Ctrl> = default, i.e just drop [[title]]

Ctrl+... = plain, no brackets (I can't come up with a good letter)

Ctrl+t = transclude

Ctrl+c = clone

<:-)

[BurningTreeC]

VERY useful!

Thanks, I've made a pull request for this, I hope the architects accept it 

A wish: I have a fantasy about "visual" wikitext perhaps akin to Scratch or Blockly. I think TW scare away many potential users with all this cryptic syntax for widgets, macros, and stuff. Imagine if we instead could provide a visual toolbox that the user merely drag'n drops from.

I've thought about that, too! That's a different story than this one, but no problem

I had an idea - we could modify the viewtemplate or edittemplate (or both or just the edittemplate) that  it shows a table where you can drag blocks into

the blocks could be styled like tag-pills with drop-downs to select the attributes

you select the blocks from a given catalogue (must be created)

this view can be switched on with a button

Up to this point I'd know how to do it

And then the lets-see-how-to-proceed part begins

I'd really like to try that, great idea!

[BurningTreeC]

I'm just adding something I forgot:

A tw macro , widget  and filter library could be created, so that there a basic blocks that represent the standard tw widgets, macros, filters (this should also reduce traffic on tiddlywiki.com)

And a library where commonly used things are already there and own stuff can be added

That'd be very cool

[BurningTreeC]

@Mat

Could your mod allow for [parts of] this? I.e to have icons (icon-links?) be draggable into the text area? In Scratch/Blockly, also the resulting code is visually represented which I guess would not be possible in the TW editor, i.e dropping the icon would in TW instead transform into the code segment the icon represents (similar to the stamp tool).

Prove me wrong, but this can already be done without my mod

you need a droppable area

\define go-ahead()
<$action-setfield $tiddler="some tiddler" $field="some field" $value="""$(dropText)$"""/>
\end
\define drop-actions()
<$set name="dropText" value={{$(actionTiddler)$}}><<go-ahead>></$set>
\end

<$droppable actions="""<<drop-actions>>""">
drop stuff here
</$droppable>

then you create some draggables like this

<$draggable tiddler="title of my tiddler that holds something in its text field I want to drop somewhere">
grab me and drag me into the drobbable area
</$draggable>


I haven't tested this, but it may work

[BurningTreeC]

Replying to myself again that I tried it and it works beautifully!

So now the cloning part is solved,

we can now create a droppable zone on the bottom of each tiddler and make this happen

The code I posted gets extended so that first it saves the current text of the tiddler inside a variable , then both the old text and the new text get inserted

Or something like that

Or the table idea in combination with something like in the Open Tab, so that one can insert something before something else or after and dragndrop them around

To all who are reading this: 

This one and my last posts are totally out of topic, sorry for that! 

[BurningTreeC]

It looks helpful, but what kinds of use cases are you imagining for your dragon droppings? Help me see the potential that I know is there but that I am missing because of my lack of imagination.

Dave

Hi Dave, thanks for adding it to your list!

Now this is not a plugin yet, I'd like to see if it gets accepted for the tiddlywiki core and get some feedback in the meantime to maybe tweak it a bit

It's supposed to be a time-saver and helpful for:

• transcluding tiddlers by dragging their links into the editor
• linking to tiddlers by dragging their links into the editor
• inserting custom presets of wikisyntax into the texteditor

With a bit of creativity some cool stuff can be done

all the best,
Simon
 

[Mat]

Replying to myself again that I tried it and it works beautifully!

Could you post a demo? When I try with the code you suggested above, I do get the "title of my tiddler that holds ...", surrounded by [[ ]], but I' not sure how that would make for cloning?

So now the cloning part is solved,

we can now create a droppable zone on the bottom of each tiddler and make this happen

Does a drop zone necessarily have to be in edit mode? For the optimal 'visual fantasy' above, I'm hoping the user can drag icons without having to face the actual code.

...or maybe you do mean in edit mode; then I wonder if a dropzone must be at a separate area (e.g "at bottom" as you mention). Could a whole tiddlers text area not be a dropzone so you can just dump stuff onto it? It wouldn't be active as a drop area unless you're actually carrying something draggable, right? (I have not experimented much with the drag'n drop features.)

Your idea with dragging pills that, when clicked, shows parameters for selection is ingenious. Maybe an option would be to drag Select widgets as these already have the dropdown and it is possible with multiple selections.

 

The code I posted gets extended so that first it saves the current text of the tiddler inside a variable , then both the old text and the new text get inserted

Or something like that

Or the table idea in combination with something like in the Open Tab, so that one can insert something before something else or after and dragndrop them around

I don't understand why a table would be helpful in this. How does it differ from just inserting things before and after straight away?

 

To all who are reading this: 

This one and my last posts are totally out of topic, sorry for that! 

(Maybe start a new thread? Sorry if I caused hijacking.) 

[BurningTreeC]

 

Could you post a demo? When I try with the code you suggested above, I do get the "title of my tiddler that holds ...", surrounded by [[ ]], but I' not sure how that would make for cloning?

Hi, you need to change the titles, try this on tiddlywiki.com

put this in a new tiddler and save:

define go-ahead()
<$action-setfield $tiddler="test tiddler" $field="text" $value="""$(dropText)$"""/>

\end
\define drop-actions()
<$set name="dropText" value={{$(actionTiddler)$}}><<

go-ahead>></$set>
\end

<$droppable actions="""<<drop-actions>>""">
drop stuff here
</$droppable>

then put this in a new tiddler and save

<$draggable tiddler="HelloThere">

grab me and drag me into the drobbable area
</$draggable>

then grab the "grab me and drag me into the drobbable area" and drag into onto "drop stuff here"

then look under recent for the tiddler "test tiddler"

 

So now the cloning part is solved,

we can now create a droppable zone on the bottom of each tiddler and make this happen

Does a drop zone necessarily have to be in edit mode? For the optimal 'visual fantasy' above, I'm hoping the user can drag icons without having to face the actual code.

it can be a viewtemplate, I also think that's better

...or maybe you do mean in edit mode; then I wonder if a dropzone must be at a separate area (e.g "at bottom" as you mention). Could a whole tiddlers text area not be a dropzone so you can just dump stuff onto it? It wouldn't be active as a drop area unless you're actually carrying something draggable, right? (I have not experimented much with the drag'n drop features.)

I don't know if the textarea itself can be made a droppable, we'd need to test.. but I thought about replacing the textarea with such a droppable-table by the click of a button

Your idea with dragging pills that, when clicked, shows parameters for selection is ingenious. Maybe an option would be to drag Select widgets as these already have the dropdown and it is possible with multiple selections.

yes, it could be done with the select-widget, but also the tag-pill would work , we just clone the TagTemplate and edit it to our needs

 

The code I posted gets extended so that first it saves the current text of the tiddler inside a variable , then both the old text and the new text get inserted

Or something like that

Or the table idea in combination with something like in the Open Tab, so that one can insert something before something else or after and dragndrop them around

I don't understand why a table would be helpful in this. How does it differ from just inserting things before and after straight away?

the table is just for visual positioning and ordering of the dragged tag-pills or select-widgets, so that they can be shown side-by-side and can be rearranged by dragging from one table-cell to another, gives visual feedback

 

To all who are reading this: 

This one and my last posts are totally out of topic, sorry for that! 

(Maybe start a new thread? Sorry if I caused hijacking.)

ok!
 

[Mat]

Hahaaaa! Brilliant - it works!!!

I made this demo/experiment: TWools.

I modded the viewtemplate so that you can drop anywhere on a tiddler in view mode. I'm not sure that is a solid solution as it will probably interfere with other local dropwidgets (or are they nestable?). 

I honestly think this could be a new UI paradigm for wikitext - one that would drastically lower the threshold for beginners to use more advanced TW and serve as an intermediary step before going into macros.

Of course, in order for such premade code to be useful we'd have to make it so that parameter values can be set at some point during or before or after the drag'n drop. The most natural interaction might be that when you click on the icon tro drag it, you're presented with a popup showing the parameter list where you fill in the values. And if you didn't fill it in there before drag'n dropping, then it appears as you drop.. where it might stay visible until filled in. Something like that. 

I hope to do some more experimenting but it'll probably have to wait until weekend. If you (BurningTreeC) or anyone wants to keep on pushnig this then of course do so. (Hm, now I've definitely hijacked poor BurningTreeC's thread! Sorry man. Getting carried away by your brilliant solution for this.)

<:-)

[David Gifford]

jumpin jehosaphat, good land a Goshen, now I get it...nice work!

[BurningTreeC]

Hahaaaa! Brilliant - it works!!!

I made this demo/experiment: TWools.

YES! That's awesome! :)

I modded the viewtemplate so that you can drop anywhere on a tiddler in view mode. I'm not sure that is a solid solution as it will probably interfere with other local dropwidgets (or are they nestable?). 

I honestly think this could be a new UI paradigm for wikitext - one that would drastically lower the threshold for beginners to use more advanced TW and serve as an intermediary step before going into macros.

I do think so, too
The community could create a library of useful stuff for that

Of course, in order for such premade code to be useful we'd have to make it so that parameter values can be set at some point during or before or after the drag'n drop. The most natural interaction might be that when you click on the icon tro drag it, you're presented with a popup showing the parameter list where you fill in the values. And if you didn't fill it in there before drag'n dropping, then it appears as you drop.. where it might stay visible until filled in. Something like that.

yeah, could be done with a modal for example, or something less invasive but I'm lacking ideas

I hope to do some more experimenting but it'll probably have to wait until weekend. If you (BurningTreeC) or anyone wants to keep on pushnig this then of course do so. (Hm, now I've definitely hijacked poor BurningTreeC's thread! Sorry man. Getting carried away by your brilliant solution for this.)

Oh that's no problem - I mean, it's great how such ideas evolve from something like this

<:-)

I've made a table like I described above where you can drag stuff into like you're doing in your demo
There you can also drag it from one cell to the other
I still have some things wrong inside the code, I'll post a demo when it works reliably

would be great if this could be done in teamwork

[Surya]

Hey Simon & Mat,

I made this demo/experiment: TWools.

WOOOW!! That's really cool!!!

And it would be great filled with a LOT of stuff to drag'n'drop. To format something, to insert something. Maybe even to build macros or something else?
Especially for tables I would love to drag such a table and then being able to fill in the cells my text (cell by cell) in view mode. Because, writing longer text in table cells in edit mode is really not transparent & comfortable (so often I almost don't know anymore, in which cell I am now). And additionally being able to add rows & columns in view mode with this drag'n'drop. A DREAM.....

But also this differently draggable links like Simons idea at the beginning I'd like to have.

Wonderful as a plugin what everybody could choose (if wanted or not). And the draggable stuff should be choosable too- so that one could add only the stuff that one needs.

WOW, how fantastic- I am looking forward.

THANKS THANKS THANKS to you.
Surya

[BurningTreeC]

Hey Simon & Mat,

I made this demo/experiment: TWools.

WOOOW!! That's really cool!!!

Hi Surya! Right? :) That's pretty cool, I'm excited about this, too!

I hope we can make this happen

Simon

[BurningTreeC]

@all interested in the discussion about draggable codeblocks,

I'd like to move it to this new thread if you don't mind

I made a little description there and I'd love to help working on this