artesgo-flox
v1.0.1-alpha.7
Published
Svg Svelte Components
Downloads
95
Readme
Artesgo-flox
Installation
npm install -D artesgo-flox
Usage
Completed Features
Rendering
- Shapes from data binding
- Display Images
- Display Text
- Edit Text
- Dynamic Connections
- Zoom in and out
- Layers
- Display shape list
- Reorder shapes in list
- Display shape props
- Resize
- Resize images keeps container aspect ratio
Mouse / Clicks
- Navigate Canvas via Click and Drag
- Double Click to add shape at mouse position
- Resize
- Hover over shapes to view resize points
- Drag corners around to resize a shape
- prioritize height when resizing container to img aspect ratio
- Connections
- Hover over shapes to view connection points
- Drag connection points to existing Rect
- Drag connection point creates new connection preview
- Right Click connections to delete Minimum size for shapes
Keyboard Events
- Deletes a selected shape and its connection with Delete/Backspace keys
- Double click, edit mode for item
- Copy and Paste Shapes
- Shapes are in tab order
- Ctrl Z / Ctrl Shift Z
- keep state list
- undo / redo a move
- undo / redo a resize
- undo / redo text edit
- undo / redo img paste
- undo / redo add shape
- undo / redo deleting a shape
- undo / redo copied shapes
- undo / redo connection edits
Fixes
- Resize Snap to Grid
- move on grid
- resize images keeps container aspect ratio (not working in firefox)
- Shapes are in tab order
- Need to adjust what is read out by screen readers
TODO:
keyboard events
Rendering
- Change Font Size
- Context Menu (Challenge, not to be affected by zoom)
- Send to Back
- Bring to Front
- Paste Img Url
- Paste Text
- Delete
Next Version
- Drag and adjust connection midpoints
- Right click context menu
- Touch Interaction (mobile)
- Select multiple shapes with selection box
- Remove Click and Drag on background canvas
- Pan canvas with Spacebar only
Nice to have
Custom Svg Objects
Nice Surprises
PNGs have transparency