Add an "insert step" button on each step UI

[jywarren]

This code shows the excellent "insert step" method in use:

image-sequencer/test/modules/image-sequencer.js

Lines 139 to 144 in 5f57123

	test('insertSteps("image",position,"module",options) inserts a step', function(t) {
	sequencer.insertSteps('test', 1, 'channel', {});
	t.equal(sequencer.images.test.steps.length, 3, "Length of Steps increased");
	t.equal(sequencer.images.test.steps[1].options.name, "channel", "Correct Step Inserted");
	t.end();
	});

We should add a new button (next to the trash button) which lets you insert a new module:

See this for how the add step UI works, that could be adapted here:

The available modules are added to the select here:

image-sequencer/examples/demo.js

Lines 11 to 16 in 4d996b9

	// Add modules to the addStep dropdown
	for (var m in modulesInfo) {
	addStepSelect.append(
	'<option value="' + m + '">' + modulesInfo[m].name + "</option>"
	);
	}

Here is how the "add step" button is triggered:

image-sequencer/examples/demo.js

Line 34 in a17d1a6

$("#addStep #add-step-btn").on("click", ui.addStepUi);

Here is the function that's run when the button is pressed; this could be adapted to accept a 'step' parameter too, so the insertion could happen at a different place in the sequence:

image-sequencer/examples/lib/defaultHtmlSequencerUi.js

Lines 38 to 60 in 88364de

	function addStepUi() {
	if ($(addStepSel + " select").val() == "none") return;
	var newStepName = $(addStepSel + " select").val();
	/*
	* after adding the step we run the sequencer from defined step
	* and since loadImage is not a part of the drawarray the step lies at current
	* length - 2 of the drawarray
	*/
	var sequenceLength = 1;
	if (sequencer.sequences[newStepName]) {
	sequenceLength = sequencer.sequences[newStepName].length;
	} else if (sequencer.modules[newStepName][1]["length"]) {
	sequenceLength = sequencer.modules[newStepName][1]["length"];
	}
	_sequencer
	.addSteps(newStepName, options)
	.run({ index: _sequencer.images.image1.steps.length - sequenceLength - 1 });
	// add to URL hash too
	setUrlHashParameter("steps", _sequencer.toString());
	}

@holykol perhaps you'd be interested in this one? Or someone else? We'd love some help!

[gitmate]

GitMate.io thinks the contributor most likely able to help you is @tech4GT.

Possibly related issues are #348 (Improve Images step Ui), #205 (add "drag to crop" UI feature to Crop module), #433 (display add step menu with common modules as "quick" buttons), #432 (display add step menu with common modules as "quick" buttons), and #303 (Disable/dim the Add step button until a module is selected).

[gitmate]

GitMate.io thinks the contributor most likely able to help you is @tech4GT.

Possibly related issues are #348 (Improve Images step Ui), #205 (add "drag to crop" UI feature to Crop module), #433 (display add step menu with common modules as "quick" buttons), #432 (display add step menu with common modules as "quick" buttons), and #303 (Disable/dim the Add step button until a module is selected).

[Divy123]

@jywarren can I work on this?
Looks interesting to me.

[jywarren]

oh that would be great, thank you!

…

On Tue, Nov 13, 2018 at 12:15 PM Slytherin ***@***.***> wrote: @jywarren <https://github.com/jywarren> can I work on this? Looks interesting to me. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#466 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ7XQBeO9HLUjFhTxICOGM4P2qb1gks5uuv4DgaJpZM4YYm4C> .

[jonxuxu]

Hey I'm interested in this task! Is anyone working on it? Just to clarify, will the add-step button display a drop-down and do the same thing as the "add-step" button on the bottom of the page?

[jywarren]

I think the insert-step button might actually insert the entire box as shown above, but between two steps. This might mean we have to have a method which "constructs" the html for the interface, and be able to call it to be inserted in a given HTML element, and specify an index at which to add the new step, you know?

…

On Mon, Nov 26, 2018 at 5:47 PM Jonathan Xu ***@***.***> wrote: Hey I'm interested in this task! Is anyone working on it? Just to clarify, will the add-step button display a drop-down and do the same thing as the "add-step" button on the bottom of the page? [image: image] <https://user-images.githubusercontent.com/22998430/49046749-2ce57a80-f1a3-11e8-9b4e-a3433066db2f.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#466 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ-24I5Ttm1rUZ7R-uu0YgbGjMJh0ks5uzG9DgaJpZM4YYm4C> .

[jonxuxu]

Oh cool, thanks for clarifying. And I presume it hides itself after a new step is created? I'd love to work on this task but I'm not sure if someone else is working on it...

[jywarren]

yes, that's right. I don't think someone is at the moment?

…

On Mon, Nov 26, 2018 at 5:52 PM Jonathan Xu ***@***.***> wrote: Oh cool, thanks for clarifying. And I presume it hides itself after a new step is created? I'd love to work on this task but I'm not sure if someone else is working on it... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#466 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ1KykL3krHjJhIjlqva92jJhIhZGks5uzHCAgaJpZM4YYm4C> .

[Divy123]

I am working on it actually.
Sorry for being late.I am having my semester exams right now.
So will continue after 30th Nov.

[jywarren]

Oh I'm sorry, no prob! Good luck with your exams!!!

…

On Mon, Nov 26, 2018, 7:39 PM Slytherin ***@***.*** wrote: I am working on it actually. Sorry for being late.I am having my semester exams right now. So will continue after 30th Nov. @jywarren <https://github.com/jywarren> @JonathanXu1 <https://github.com/JonathanXu1> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#466 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ3vgIk6p_aLre9lFeUBEiAWvhl8nks5uzImcgaJpZM4YYm4C> .

[jonxuxu]

Ah no worries, good luck on your exams!

[jywarren]

ah - try clearing the cache with the link at the very bottom of the page! Or clear the cache manually in the browser options! Hope that helps!

…

On Tue, Dec 11, 2018 at 2:07 AM Slytherin ***@***.***> wrote: @jywarren <https://github.com/jywarren> I am working on the issue right now. There is a problem that none of the changes that I am making are being visible on my localhost. Can you please help me with this? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#466 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJxW1D_AgwRCx4s2LY_bpCyezjaMbks5u31mTgaJpZM4YYm4C> .

[Divy123]

Thanks @jywarren .One more thing while the majority of the work is done, that please look into the screenshot below:
.
Getting a basic understanding I have added appropriate index in the run function but still the step is being added at the last. Can you please guide me on this?

[tech4GT]

@Divy123 I think the problem here is not with run but with addSteps method, I think we need to use the insertSteps method to put the steps in the right order.

[tech4GT]

I think the function needs the image too, do check out the example given by @jywarren above and try it in that format, if that doesn't work I'll be more than happy to look at your code.
PS It's kind of late here so I may get to it tom. 😄

[Divy123]

Thanks @tech4GT . Your advice is of great help.

[Divy123]

@tech4GT I tried passing ( _sequencer.images,id+1,stepName) as arguments to insertStep but then I am getting errors.
Probably the errors are due to me passing wrong arguments. Can you please help me understand the role of image in the set of parameters?
Attached is the error I am getting:

_sequencer .insertSteps(_sequencer.images,id+1,newStepName) .run( {index: _sequencer.images.image1.steps.length - sequenceLength-1 } );is my code for insertStep.

[Divy123]

This particular problem is resolved as stated above!

[Divy123]

@tech4GT I have almost don the work. Just one thing is there I am not able to figure out.
The inserted step is added at the correct position in steps array, the url is getting updated correctly but in the UI the inserted step is always being added at the last.Though on a page refresh all the steps including the newly inserted one comes at its correct position. Can you please help me with that?

[tech4GT]

oh, try looking into the run function, I think the steps are not being re-run properly.

[tech4GT]

Try running it from 0, if that works then you can figure out the right index. Glad to hear you are making progress on this 😊