Commit 8aa5f55c authored by Adrian Wuillemet's avatar Adrian Wuillemet
Browse files

#65 Correct control keys and tutorial

parent 2a52de6f
......@@ -24,15 +24,13 @@
<!-- Initial key-mapping summary that is only displayed as long as there is no component drawn -->
<div id="summary">
<p><span>Hover</span> the logo to display the menu.</p>
<p><span>Doubleclick</span> to create a new state.</p>
<p><span class="key">Ctrl</span> | <span class="key">cmd</span> + <span>Doubleclick</span> to create a new state.</p>
<p><span class="key">Ctrl</span> | <span class="key">cmd</span> + <span>Drag</span> states to rearrange them.</p>
<p><span>Click</span> on labels to rename states and transitions.</p>
<p><span>Drag</span> states to rearrange them.</p>
<p><span>Drag</span> arrows between states to draw transitions.</p>
<p><span>Drag</span> transitions to bend them.</p>
<p><span class="key">Shift</span> + <span>Drag</span> to draw transitions between states.</p>
<p><span class="key">Shift</span> + <span>Doubleclick</span> a state to draw a self-transition.</p>
<p><span class="key">Alt</span> | <span class="key">option</span> + <span>Click</span> a state to make it final.</p>
<p><span class="key">Alt</span> | <span class="key">option</span> + <span>Doubleclick</span> a state to make it the initial state.</p>
<p><span class="key">Ctrl</span> | <span class="key">cmd</span> + <span>Click</span> any component to remove it.</p>
<p><span class="key">Alt</span> | <span class="key">option</span> + <span>Click</span> a state to draw a self-transition.</p>
<p><span class="key">Shift</span> + <span>Click</span> any component to remove it.</p>
</div>
<!-- Container let d3 hang in the svg graph representing a state maschine -->
......@@ -107,59 +105,60 @@
<!-- Drawing tutorial -->
<section id="help">
<div class="help-item">
<img src="media/help_states_create.svg" alt="Create Nodes with Doubleclick">
<img src="media/help_states_create.svg">
<div>
<h2>Creating a new state:</h2>
<p>To create a new state simply <span>Doubleclick</span>
on any empty space within the white area.</p>
<p>To create a new state hold <span class="key">cmd</span> or <span class="key">Ctrl</span> and <span>Doubleclick</span> on any empty space within the white area.</p>
</div>
</div>
<div class="help-item">
<img src="media/help_states_rename.svg" alt="Rename Nodes by clicking on the label.">
<img src="media/help_states_rename.svg">
<div>
<h2>Rename a state:</h2>
<p>You can edit the label of a state.</p>
<p>Simply hover over the label and <span>Click</span> on it.</p>
<p>Then type in the new name and hit <span class="key">Enter</span> or just <span>Click</span> outside the the entry box to submit.</p>
<p>Then type in the new name and hit <span class="key">Enter</span> to submit.</p>
<p><span>Click</span> outside to cancel the rename.</p>
<p class="m-top"><span>INFO:</span> Labels need to start with a letter and can not contain any whitespace or special characters. They will be removed upon submit.</p>
</div>
</div>
<div class="help-item">
<img src="media/help_transitions_drag.svg" alt="Drag transitions with Shift">
<img src="media/help_transitions_drag.svg">
<div>
<h2>Draw transitions:</h2>
<p>You can draw a transition from one state to another by holding down <span class="key">Shift</span>:</p>
<p>You can draw a transition from one state to another:</p>
<p><span>Click</span> on any state and <span>Drag</span> the transition to the desired second state.</p>
</div>
</div>
<div class="help-item">
<img src="media/help_transistions_rename.svg" alt="Rename Transitions by clicking on the label.">
<img src="media/help_transistions_rename.svg">
<div>
<h2>Rename transitions:</h2>
<p>You can also edit the label of transitions.</p>
<p>The same rules apply as for the renaming of states:</p>
<p class="m-top"><span>Click</span> on the label to edit it.</p>
<p>Press <span class="key">Enter</span> or <span>Click</span> outside to submit.</p>
<p>Press <span class="key">Enter</span> to submit.</p>
<p><span>Click</span> outside to cancel the rename.</p>
<p class="m-top"><span>INFO:</span> Labels need to start with a letter and can not contain any whitespace or special characters. They will be removed upon submit.</p>
</div>
</div>
<div class="help-item">
<img src="media/help_states_drag.svg" alt="You can rearrange node by dragging them.">
<img src="media/help_states_drag.svg">
<div>
<h2>Move states:</h2>
<p>To rearrange the position of states you can simply <span>Click</span> and <span>Drag</span> them to a desired position.</p>
<p>To rearrange the position of states you can hold down <span class="key">cmd</span> or <span class="key">Ctrl</span> and <span>Drag</span> them to a desired position.</p>
<p>All attached transitions will automatically adapt and move as well.</p>
</div>
</div>
<div class="help-item">
<img src="media/help_transitions_self.svg" alt="Create self transitions with shift + doubleclick.">
<img src="media/help_transitions_self.svg">
<div>
<h2>Create a self-transition:</h2>
<p>You can also transitions from a state back to itself.</p>
<p>To do that hold down <span class="key">Shift</span> and then <span>Doubleclick</span> on a state.</p>
<p>You can also draw transitions from a state back to itself.</p>
<p>To do that hold down <span class="key">option</span> or <span class="key">Alt</span> and then <span>Click</span> on a state.</p>
</div>
</div>
<div class="help-item">
<!-- <div class="help-item">
<img src="media/help_states_final.svg" alt="Make a state final with alt / option">
<div>
<h2>Final states</h2>
......@@ -178,12 +177,12 @@
<p>Doing the same again will revert the state back to normal.</p>
<p class="m-top"><span>INFO:</span> Though it is optional to define an initial state, there can only be one. Upon changing a state to initial any other initial state will be reverted back to normal!</p>
</div>
</div>
</div> -->
<div class="help-item">
<img src="media/help_delete.svg" alt="Delete components by holding ctrl / cmd">
<div>
<h2>Delete components:</h2>
<p>To delete any drawn component, simply hold <span class="key">Ctrl</span> or <span class="key">cmd</span> and <span>Click</span> on the state or transition to remove.</p>
<p>To delete any drawn component, simply hold <span class="key">Shift</span> and <span>Click</span> on the state or transition to remove.</p>
<p class="m-top">If you remove a state, any attached transition will be deleted with it!</p>
</div>
</div>
......
This diff is collapsed.
This diff is collapsed.
......@@ -134,7 +134,7 @@ function render() {
mousedownTransition = transition;
})
.on("click", function(d) {
if(d3.event.ctrlKey) {
if(d3.event.shiftKey) {
graph.transitions.splice(graph.transitions.indexOf(d), 1);
render();
}
......@@ -312,16 +312,20 @@ function changedLabel(input, event): string {
return clearText(input.property("value"));
}
// node dragging
let dragging: boolean;
d3.select(window)
.on("keydown", () => {
if (d3.event.keyCode === 17) {
if (d3.event.ctrlKey || d3.event.metaKey) {
dragging = true;
svg.selectAll(".state").call(nodeDrag);
svg.selectAll(".state").on("mousedown", null);
}
})
.on("keyup", () => {
if (d3.event.keyCode === 17) {
if(dragging) {
dragging = false;
svg.selectAll(".state").on('.drag', null);
svg.selectAll(".state").on("mousedown", (state) => {
mousedownNode = state;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment