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

[Example] Add shapes drawing example application #115

Merged
merged 19 commits into from
Jun 26, 2024

Conversation

miroiu
Copy link
Owner

@miroiu miroiu commented Jun 22, 2024

📝 Description of the Change

This PR adds a new application example that demonstrates how to implement some common functionalities:

  • implementing undo/redo for common actions ([Feature] Copy/Paste and Undo/Redo editor actions #101)
  • implementing resizable nodes
  • using decorators for drawing a node toolbar and users (cursors) in a collaborative environment (Collaboration and Tree View  #64)
  • using the mouse location in editor coordinates to draw shapes by clicking and dragging
  • using editor commands to zoom, fit nodes to screen, and bring locations into view (locations of other users in this case)
  • using gestures to make the editor read-only, or enter drawing mode
  • customizing the template for ItemContainer and Connector
  • using the step connection
  • using the editor without including a theme in App.xaml

Keybinds:

  • Delete selection: Delete
  • Undo and redo changes: Ctrl+Z and Ctrl+Y or Ctrl+Shift+Z
  • Zoom in and out: Ctrl+Plus or Ctrl+Minus
  • Fit to screen: Shift+Home
  • Remove connection: Right Mouse Button or Alt+Left Mouse Button

new-app

Closes #33
Related #116

Credits: https://reactflow.dev/examples/nodes/shapes

@BAndysc
Copy link
Contributor

BAndysc commented Jun 24, 2024

I really like this demo app! It is just beautiful! I couldn't resist and ported it to Avalonia, the best part - it is possible to run this demo in a browser :D https://cca7896a.nodify-avalonia.pages.dev/ it can be sluggish compared to the desktop version, but hey, it runs everywhere :)

@miroiu
Copy link
Owner Author

miroiu commented Jun 25, 2024

I'm impressed. It's working well in the browser, despite the minor visual glitch of the grid pattern when zooming out.

I really like this demo app! It is just beautiful!

Thanks! I like it too, but the design is not mine. Here's the original app: https://reactflow.dev/examples/nodes/shapes

@BAndysc
Copy link
Contributor

BAndysc commented Jun 25, 2024

Thanks! I like it too, but the design is not mine. Here's the original app: https://reactflow.dev/examples/nodes/shapes

Ah, I see, still I am impressed how well you recreated the design and how nice Nodify works for this example :) Great job

Fix batch action history
Copy link

@hendrikp hendrikp left a comment

Choose a reason for hiding this comment

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

Another nice sample esp. the readonly/locked and undo/redo would be great addition to Nodify.Shared

@miroiu miroiu merged commit 7eea989 into master Jun 26, 2024
5 checks passed
@miroiu miroiu deleted the features/shapes-example-app branch June 26, 2024 18:32
miroiu added a commit that referenced this pull request Jul 12, 2024
* Fixed knot node binding errors in playground app

* Add new built-in connection type: StepConnection (#109)

* Fix BaseConnection SplitEvent and DisconnectEvent not being raised if the corresponding command is null

* Fixed DecoratorContainer scaling with zoom when not referencing a theme in App.xaml

* Fixed wrong connector position for knot nodes when using step connection (#112)

* Sync documentation to wiki

* Update sync-docs.yml

* add chinese wiki docs (#114)

* [Example] Add shapes drawing example application (#115)

* Add new example application

* Disable editing controls when the canvas is locked

* Draw shapes by click and drag

* Add ResizablePanel to resize shapes

* Update README.md

Add canvas app example

* NodifyObservableCollection: Avoid copying the list of items if there are no subscribers to removed or cleared events

* Bump version for release

---------

Co-authored-by: enheng? <48354002+WYihei@users.noreply.github.com>
BAndysc added a commit to BAndysc/nodify-avalonia that referenced this pull request Oct 24, 2024
* Release mouse capture on connector cancel due to KeyUp event

* Update CHANGELOG.md

* Bump version for release

* Port to Avalonia

* Fix warnings

* Update README.md

Add link to Avalonia port

* Fix: Zooming into nested editors should not zoom the parent editors

* Fix: Cancelling a pending connection via a hot key will no longer throw an exception

* Fix: Exceptions in UnscaleTransformConverter and UnscaleDoubleConverter

* Fix: Cannot use marquee selection and pan at the same time

* Fix: fixed selection clear on items collection reset

* Fix: Cannot use marquee selection inside comment nodes

* 5.2.0.1 release

* Reorder DataTemplates in calculator demo for easier Avalonia merges

* Fix: The selection rectangle stops updating when the cursor is outside the window

* Added BaseConnection.Orientation to allow vertical connections

* Updated changelog

* Fix: Mimic WPF's mouse capture behavior

* fix small spelling error in recently added dependency property

* split source/target orientation

* better control point if different orientations

* slight clarification in changelog

* Updated changelong

* Added directional arrows

* Fixed spelling issue

* Caluclate bezier connection tangent

* Added vertical nodes in playground app

* Minor adjustments

* Merge fix

* Update Avalonia to 11.1.0-beta2

* Allow changing editor gestures at runtime (miroiu#104)

Separated selection gestures for ItemContainer and GroupingNode from the NodifyEditor
Added new gesture types: AnyGesture, AllGestures, and NodifyGesture
Fixed a bug where the item container would incorrectly transition to the dragging state on mouse over

* Added Orientation to NodeInput and NodeOutput (miroiu#105)

* Added Orientation dependency property to NodeInput and NodeOutput

* Added the ability to animate directional arrows on connections (miroiu#106)

* Added DirectionalArrowsOffset dependency property to BaseConnection
Added StartAnimation and StopAnimation methods to BaseConnection

* Added Toggle connections animation button in playground app

* Prepare for release

* Allow changing editor gestures at runtime (miroiu#104)

Separated selection gestures for ItemContainer and GroupingNode from the NodifyEditor
Added new gesture types: AnyGesture, AllGestures, and NodifyGesture
Fixed a bug where the item container would incorrectly transition to the dragging state on mouse over

* Added Orientation to NodeInput and NodeOutput (miroiu#105)

* Added Orientation dependency property to NodeInput and NodeOutput

* Added the ability to animate directional arrows on connections (miroiu#106)

* Added DirectionalArrowsOffset dependency property to BaseConnection
Added StartAnimation and StopAnimation methods to BaseConnection

* Added Toggle connections animation button in playground app

* Prepare for release

* Post-merge fixes

* Update readme

* Fixed knot node binding errors in playground app

* fix bug can not access editor command (#17)

* fix bug can not access editor command

---------

Co-authored-by: Bartosz Korczynski <b.andysc@gmail.com>

* Fix: Can't resize grouping nodes

* Fix: Sticky Connections

* Fix: Don't open context menu when panning

* Add new built-in connection type: StepConnection (miroiu#109)

* Fix BaseConnection SplitEvent and DisconnectEvent not being raised if the corresponding command is null

* Fixed DecoratorContainer scaling with zoom when not referencing a theme in App.xaml

* Fixed wrong connector position for knot nodes when using step connection (miroiu#112)

* Sync documentation to wiki

* Update sync-docs.yml

* add chinese wiki docs (miroiu#114)

* Merge conflicts fix

* [Example] Add shapes drawing example application (miroiu#115)

* Add new example application

* Disable editing controls when the canvas is locked

* Draw shapes by click and drag

* Add ResizablePanel to resize shapes

* Update README.md

Add canvas app example

* NodifyObservableCollection: Avoid copying the list of items if there are no subscribers to removed or cleared events

* Bump version for release

* Update FAQ.md

* Improved Node customizability

* Added DataContext to ItemsSelectStartedCommand, ItemsSelectCompletedCommand, ItemsDragStartedCommand and ItemsDragCompletedCommand

* Fix containers at (0, 0) being selected when double clicking on the canvas

* Update changelog

* Update Connections-Overview.md

* Resolve merge conflicts

* Upgrade to Avalonia 11.1

* Fix CI

* Add a Minimap control to Nodify (miroiu#124)

* Added a Minimap control to Nodify

* Add  MaxViewportOffset and Zoom event

* Add ResizeToViewport

* Add playground settings

* Add IsReadOnly to minimap to allow disabling controls

* Add documentation

* Bump version for release

* Increase minimap colors contrast

* Resolve WPF merge conflicts

* Build fix

* Added a link to a live, browser demo

* Update the getting started section  miroiu#125

* Update README.md

Fix image link for Shapes app

* Add CuttingLine control to Nodify (miroiu#127)

* Added CuttingLine control to Nodify

* Bump version for release

* Update api reference

* Update README.md (#19)

Spent far too long going in circles with this one... 😄

* Add OutlineBrush and OutlineThickness to BaseConnection (miroiu#133)

Fixes miroiu#131

* Add IsAnimatingDirectionaArrows and DirectionalArrowsAnimationDuration dependency properties to BaseConnection (miroiu#135)

* Add the ability to select connections (miroiu#139)

* Add multi-select and support for custom connections

* Added CanSelectMultipleItems to NodifyEditor

* Added settings search box to playground app

* Fix Calculator context manu and converter issues.

* Update Avalonia version to 11.1.4

* Fix Calculator context menu

* Add support for ScrollViewer (miroiu#142)

* Implement IScrollInfo

* Bump version for release

* Merge commit 'efa15e00e859d4f756e87e8743994693844d759e' into avalonia_port

* Add support for ScrollViewer

---------

Co-authored-by: Emanuel Miroiu <miroiu.emanuel@gmail.com>
Co-authored-by: Hendrik Polczynski <hendrik.polczynski@siemens.com>
Co-authored-by: phamviethuy <42407610+phamviethuy@users.noreply.github.com>
Co-authored-by: enheng? <48354002+WYihei@users.noreply.github.com>
Co-authored-by: ArronDavies <arronadaarro@aol.co.uk>
Co-authored-by: Mario Pintaric <mario@noemata.org>
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.

[Application] Add more examples.
3 participants