Comments (12)
What? it looks fine to me. ;)
from visualizer.
The middle-click idea seems like pretty low-hanging fruit. I don't have time to enhance this now, but would be happy to help guide anyone interested in implementing this.
from visualizer.
One other thing to note: you can increase the size of the viewport by passing height
and width
props to the third argument of StateVisualizer.create
:
var vis = window['ui-router-visualizer']
vis.StateVisualizer.create(ng1UIRouter, undefined, { width: 500, height: 500 });
vis.TransitionVisualizer.create(ng1UIRouter);
https://plnkr.co/edit/dKT52b?p=preview
from visualizer.
thank you for the hint, I'll try to work on it next week!
from visualizer.
Awesome tool, very cool!
Was wandering how the labels are rendering? If we wanted to send them through a custom parser to add some addition info etc. What code actually renders the labels?
from visualizer.
Here is where the state name is written out (as SVG text): https://github.com/ui-router/visualizer/blob/master/src/state/stateNode.tsx#L33-L40
Just below it is the "label text" (i.e., "active")
The node itself is the StateVisNode
which wraps a ui-router state object.
from visualizer.
Thanks so much 👍
Was exactly what i was looking for!
from visualizer.
I added some enhancements which makes the visualizer much more usable with large state trees:
- Added other layout strategies: Tree (current), Cluster, Radial. The Radial layout works great for large apps.
- Add a zoom level which scales the state nodes and labels:
- Add an interactive resize handle:
from visualizer.
- Added Collapse/uncollapsing.
- Toggle collapse by double-clicking a state
- The count of collapsed descendents is shown inside the state
- The state is automatically un-collapsed if it is entered.
- States without children cannot be collapsed.
from visualizer.
@aitboudad version 3.0.0 released, please provide feedback
from visualizer.
@christopherthielen just checked on my side and it looks really nice, I have two remarks:
- allow to configure inactive state with children collapsed as default
- add horizontal tree (left to right)
Thanks in advance!
from visualizer.
@aitboudad just before registering the plugin you can set the initial collapsed status of each state.
For example:
let states: State[] = router.stateRegistry.get().map(s => s.$$state());
let secondLevel = states.filter(s => s.parent.name === 'app');
secondLevel.forEach(s => s._collapsed = true);
router.plugin(Visualizer);
Or in this plunker, collapse all top and second level states:
http://plnkr.co/edit/zrc8YzoXnlhLbSD3TtWc?p=preview
// Auto-collapse children in state visualizer
var registry = $uiRouter.stateRegistry;
$uiRouter.stateRegistry.get().map(s => s.$$state())
.filter(s => s.path.length === 2 || s.path.length === 3)
.forEach(s => s._collapsed = true);
from visualizer.
Related Issues (20)
- BUG: artisanal typings require @uirouter/core when it's not a dependency of the project HOT 1
- Allow comments in the tsconfig.json file HOT 1
- Add horizontal layouts
- StateVis: current state not highlighted if vis launched after first transition
- StateVis: Collapsed nodes should animate their parent
- StateVis: Initial layout has unwanted "padding"
- Visualizer for Sticky and DSR states ? HOT 1
- Cannot read property 'isCanceled' of undefined
- 7.2.0 seems to break apps in IE11 HOT 2
- Error with Internet Explorer and .assign method HOT 2
- Display custom data properties in Transition Popover
- a bug of visualizer.d.ts for ng2
- What version of visualizer goes with angular-ur-router 1.0.0-rc.1? HOT 1
- When clicked State Visualizer dissapears HOT 1
- update dependency preact to 8.2.xx HOT 4
- Hooks not deregistering after component is destroyed HOT 1
- Action required: Greenkeeper could not be activated 🚨
- Action required: Greenkeeper could not be activated 🚨
- RADIAL_EDGE && TREE_EDGE functions fail on missing node._parent (possible fix)
- JSX element type 'ReactElement<any>' is not a constructor function for JSX elements.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from visualizer.