Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Basic flow editor and connect dots tool #179

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

MichaelTamaki
Copy link
Collaborator

@MichaelTamaki MichaelTamaki commented Jun 15, 2021

Description

Fixes issue #96

Basic flow editor and connect dots tool

  • Adds a new "View Mode" for viewing and editing flows. When a dot is selected, it will show that dot's cached flow.
  • Adds a new tool in the bottom menu.
    • Step 1: Select a dot in the current stuntsheet
    • Step 2: Select a dot in the next stuntsheet to connect with
  • Much more work needs to be done to polish this up! But it can come in future PRs!

Pre-PR checklist

  • Ran npm run serve and:
    • Checked basic functionality
    • Checked that errors are handled
  • Ran npm run lint
  • Ran npm run test:unit
  • Ran npm run test:e2e and ran relevant tests
  • Attached reviewers to PR and pinged on Slack/email

Screenshots/GIFs

Original state: 2 dots, with 2 stuntsheets

image

After clicking the "Connect Dots" tool, it changes to "Flow" View Mode and shows a toast at the top of the screen with directions

image

Selecting a dot from the current stuntsheet

image

Selecting a dot from the next stuntsheet

image

Changing the tool to Box Select, and selecting the dot to see the new flow

image

A fun continuity!

image

Copy link
Collaborator

@adhamrait adhamrait left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! After this we can actually start making shows!

<style scoped lang="scss">
.grapher--flow-line {
fill: none;
stroke: $founders-rock;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🐻

@@ -0,0 +1,39 @@
<template>
<div>
<b-field label="View Mode">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if we put "View Mode" under the view menu bar?

super();
GlobalStore.commit(Mutations.CLEAR_SELECTED_DOTS);
this.openToast(
"Connect Dots tool activated. Select a dot from the current stuntsheet."
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These helpful hints are really cool

return this.$props.isConnected
? nextSSDotAppearance
: nextSSUnconnectedDotAppearance;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should have the appearance of the connected dots mimic the starting dot's appearance? It might make situations like this where multiple different dot types have paths that overlap a bit clearer:
image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea... Let's re-visit this once we get this in the hands of STUNT.

@MichaelTamaki
Copy link
Collaborator Author

Following our discussion in the mtg today, we'll be breaking this PR up into smaller issues:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants