plotly/spectacle-editor

Drag and drop Spectacle editor.

Spectacle Editor

An Electron based app for creating, editing, saving, and publishing Spectacle presentations. With integrated Plotly support.

This project is a joint effort between Formidable and Plotly.

Getting started with development

Please review the contributing guidelines first.

Fork then clone the repo:

git clone [email protected]:<USERNAME>/spectacle-editor.git

Install npm dependencies:

cd spectacle-editor && npm install

Run Spectacle Editor in dev mode:

npm run dev

Running tests/lint:

npm run check

Overview

The initial setup of this project is based on electron-react-boilerplate.

MobX and seamless-immutable are used for the store(s).

Note: Instead of actions, components call methods on the store(s) passed down via context.

Spectacle Editor leverages React-Motion for drag and drop functionality.

Draggable elements

The elements that can be added to slides and edited include:

• Text
• Image
• Plotly chart
• Table
• Shape (V2)
• MathJax (V2)

Each element will have a corresponding property menu that is available when an element of that type is selected.

Canvas

The canvas is the editable area that displays the current slide. Elements can be dropped on the canvas, repositioned and formatted.

Slide list

The slide list displays all slides in the presentation and allows for changing the selected slide and reordering existing slides.

Property menu

This is where options for the selected element will appear. The menu will depend on the type of element selected. If no element is selected a slide menu will appear.

Creating release packages

To build for Windows on MacOS, you'll need (this may take 30+ mins):

brew update

brew install wine --without-x11
brew install mono

To build for Linux on MacOS, you'll need:

brew install gnu-tar libicns graphicsmagick xz

To build and package for all platforms, run:

npm run release

Other packaging steps are:

npm run package-all
npm run package-mac
npm run package-win
npm run package-linux

spectacle-editor's Issues

Standardize on one syntax for static properties

Either static keyword or className.property =.

Open from plot.ly

Allow users to view and open presentations they have uploaded to plot.ly.

Depends on #31

set up mobx store

Handle scrolling slide list for drag and drop

Image save and upload

Allow users to select an image from the filesystem and have it work with slide background and the image element. Figure out image upload when saving presentation to Plotly server.

Create distributable packages

Package up app as downloadable executables for OSX/Windows. Test them.

Show an "off-limits" drop indicator if dragging on the canvas outside of content area

When dragging onto the canvas but outside the content-area, highlight the padding area with off-limits styling to indicate the element cannot be dropped there. If an element is dropped in that area, do not add it to the current slide.

depends on #16 and #21

Move delete slide into electron menu bar

Remove the delete button from the UI and add a delete menu item in the "edit" menu dropdown. Add a keyboard event for delete when a slide is selected.

Save UI preferences locally

Save user's UI preferences locally. E.g. "snap to grid" should not reset when a user quits the app.

Upload presentation to plot.ly

Depends on #29

Allow users to publish their presentation to plot.ly.

Work with Plotly team to figure out API, Presentation deserialization and viewing, url generation, and anything else I'm missing.

Update readme

Update the readme to include contributing info, notice about state of app, links to plot.ly, formidable.com, and any relevant blog posts, and code documentation.

Property menu for image

Menu should show in the right menu area when an image element is selected.

Menu items to include

• Width/height
• scale
• src (limited to a valid http reference).

Progress/navigation toggle setting

Allow users to toggle on/off the showing of slide progress and navigation on the canvas and in presenter mode.

Depends on #33

Table element

Create a drag/droppable table element with table property menu.

Menu probably includes:

• Rows/Columns
• Heading
• Label and other text settings
• width/height?

Shape/line element

Create a shape element with a menu for editing that shape. It should have draggable vertices.

Menu items (probably)

• Number of Vertices (min 2 for a line)
• Stroke, size and color
• Fill color
• ???

configure eslint settings

Move undo/redo into electron menu bar

Move undo/redo into electron menu bar under "edit". Add keyboard events for ctrl z (undo) and ctrl y (redo).

Property menu for Plotly embed

Menu should show in the right menu area when a Plotly element is selected.

Menu items to include

• Embed src
• Size (width, height)
• Scale
• Any other menu items Plotly wishes to include

Open presentation from file

Add menu item for opening a presentation from file complete with file dialog box. Deserialize the slideshow and load it into a new history.

Depends on #27 for serialization coordination.

Slide templates

Have a set of default slide templates that are available when a user clicks "add slide". Allow users to create their own slide templates.

Basic drag and drop (not wired to store)

React color picker

Decide on a way to do color picking for various elements. Perhaps https://github.com/casesandberg/react-color or https://github.com/react-component/react-colors-picker

Nice to have: Recently used color swatches under the color picker.

Build property menu for editing text elements

Menu should show in the right menu area when a text element is selected.

Menu items to include

• Alignment (left, right, center)
• Type (Heading 1 - N, list, quote) (Not sure how many heading options we'll want)
• Font (font-face, size, color, bold, italic, line-height)

Some of these menu items may change the underlying element's type and react component to match Spectacle components instead of using a generic text react component with a large prop surface area.

Spectacle appear element and intra slide transitions

Add property menu item for elements such that they can be wrapped in a Spectacle <Appear> tag https://github.com/FormidableLabs/spectacle#appear. This makes elements transition into view as a presenter progresses through their presentation.

Switch element drag and drop to react motion

Draggable elements currently use a basic reactDnD setup. Switch to react motion like the slide list. Canvas should change background color on when an element is hovered over it. Does not require positioning on drop e.g. dropping an element just appends it to current slides children without position info. Dropping anywhere other than canvas should have the element return to it's source and disappear.

Drag preview (what the user drags around the app) should be a rendered version of the element with default props/children/etc.

Clicking and quickly releasing i.e. not dragging an element in the element menu should place that element in the center of the slide.

Add preview/presenter mode

Allow users to drive the presentation from within the app. Nice to have: Transition the canvas to fullscreen when switching.

Add transitions for undo/redo slide add/delete/move

On undo and redo, make sure the slide list transitions occur. If a user clicks undo/redo multiple times fast, make sure the slide list doesn't lag or get into an unhealthy state.

Set up dev with hot reloading

Update history to include slide index and current element index

Make sure history includes the info needed to completely recreate the state. I think just adding slide index and current element index is enough.

Theme editor

Add menu for editing theme level config.

• Primary, Secondary, Tertiary, Quarternary, Background Colors and other colors
• Font and font-sizes
• Slide transition
• Background image?
• Anything else I missed?

Element drag/drop snap to grid

When dragging an element to the canvas, snap to a predefined (and visible) grid like other presentation tools. This includes snapping to center alignment of the canvas. Allow for the grid + snapping to be a toggleable option in view menu.

Does not need to snap to other element alignment.

Depends on #16

Create landing page with app download links

Create a landing page with download links for end users.

User sign in to plot.ly

Add user menu for signing in with username/password to plot.ly. Save user state locally (not sure how) so quitting and reopening app stay logged in.

Closely related to #30

Element drag/drop snap to other elements

Make dragging elements snap to top/bottom/left/right/center of existing elements on the canvas. Similar to other design/presentation tools.

Depends on #17

Fix caching of plotly embedded iframes

Same embed url is reloaded when switching slides. Allow electron/chromium to cache plotly embed request.

Spectacle slide CRUD

set up CI

Complete and approve visual designs V1

Team to agree on initial visual design direction. Approved comps will be posted here.

Presenter notes

Add ability for users to add presenter notes to slides. Most likely a content area below the canvas. Presenter notes should be available in presenter mode #33

Upgrade to electron 1.0

Enter transitions for add new slide

Currently slide transitions only occur on move slide and delete slide. Add the reverse delete transition on slide addition.

Style app to match visual design

Style app to match designs agreed upon from #37

Element drop positioning

When dragging an element onto the canvas, allow the user to drop the element and have it's position stored. E.g. dragging a text element to the top right corner of the canvas and dropping there should have the text element then render in the top right corner. Probably requires using absolute positioning.

Does not include snap to grid.

Depends on #21

Test on Windows and touch devices.

Wireframes

Complete and get consensus on wireframes.

Save presentation to file

Serialize the current slideshow state and write it to a local file. Includes save dialog box. Unknown: file extension (json?).

Closely related to #28

Match canvas content area scaling to Spectacle

Spectacle uses specific logic to determine content area (read padding), zoom, and text size within a slide https://github.com/FormidableLabs/spectacle/blob/master/src/components/slide.js#L45-L78.

Update the canvas to always have a 4:3 aspect ratio but make the content area scaling match Spectacle. Doesn't necessarily have to be identical code but behavior should be identical when resizing the electron app window.

add css linting

Add history max length to avoid memory leak

Cap the number of entries in the history array, say 40? When history length hits 40 (seriously, I don't know if this is a good number), discard the earliest entry.

MathJax Element

Create a drag/droppable MathJax element with property menu.

Menu items to include:

• I have no idea at this point in time