-
Notifications
You must be signed in to change notification settings - Fork 1.5k
[network] image shape: add optional selected image #2601
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks! Can you please also add documentation and a new example for this new feature.
Commit updated! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks! Very good.
Could you please replace examples/network/imageSelected/broken-image.png with something more like this: http://www.mylessonplanner.com/images/icons/DefaultIcon/png/256x256/MD-picture-broken-link.png
Maybe even another SVG. That would be perfect!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for your patience!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's a really nice addition! THANKS!!
I'm sorry for the many change-requests.
You did a really nice job but, we aim for perfection ;-)
width: 600px; | ||
height: 600px; | ||
border: 1px solid lightgray; | ||
background-color:#333333; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you please remove the background color here. I like it but it does not go well with the broken image.
background-color:#333333; | ||
} | ||
</style> | ||
<script src="../../googleAnalytics.js"></script> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please remove the analytics. We are not using them since f384521
interpolation: false, | ||
} | ||
} | ||
]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would like to propose the following:
var nodes = new vis.DataSet([{
id: 1,
shape: 'image',
size: 20,
label: 'No select image',
image: './unselected.svg',
}, {
id: 2,
shape: 'image',
size: 20,
label: 'Select image broken',
image: {
unselected: './unselected.svg',
selected: './BROKEN_LINK/selected.svg',
},
}, {
id: 3,
shape: 'image',
size: 20,
label: 'Select works!',
image: {
unselected: './unselected.svg',
selected: './selected.svg',
},
shapeProperties: {
borderDashes:[15,5],
interpolation: false,
}
}]);
var edges = new vis.DataSet([ | ||
{from: 1, to: 11}, | ||
{from: 1, to: 2}, | ||
]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
var edges = new vis.DataSet([
{from: 1, to: 2},
{from: 2, to: 3},
]);
nodes: nodes, | ||
edges: edges | ||
}; | ||
var options = {}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The broken-image should be applied to all nodes. (I also added a randomSeed so always have a nice alignment).
var options = {
layout:{
randomSeed: 5
},
nodes: {
brokenImage: './broken-image.png',
}
};
``
Hopefully @yotamberk @Tooa or @eymiha also could have a look at this. |
Thanks for the suggestions :) The example is much more understandable now. Commit updated |
image: { | ||
unselected: './unselected.svg', | ||
selected: './BROKEN_LINK/selected.svg', | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here is a unnecessary comma. Probably my mistake!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@mehl321 You don't have to change this of course, but you can if you want.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You decide :) I like to use trailing commas as part of my code style because all lines look the same and you can safely copy-paste them. Really it's up to you, depending on the code style of vis.js.
@mojoaxel My example is not visible in |
* Add Gitter badge (#2179) * do not generate source-maps in distribution version * add 'dist' folder for deployment * added Badges * added codeclimate badge * added @Tooa to the support team * added badges from isitmaintained.com (#2517) * do not ignore dist and test folders in master * generated dist files for v4.18.0 * generated dist files for v4.18.1 * Cheap fix for bug #2795 * Update to PR #2826 to use newline format * changed to v4.18.1-SNAPSHOT * chore(docs): general improvements (#2652) * removed NOTICE file * updated license date range to include 2017 * chore(docs): updated support team members * chore: updated dependencies and devDependencies (#2649) * Fixes instanceof Object statements for objects from other windows and iFrames. (#2631) * Replaces instanceof Object checks with typeof to prevent cross tab issues. * Adds missing space. * chore: removed google-analytics from all examples (#2670) * chore(docs): Add note that PRs should be submitted against the `develop` branch (#2623) Related to: #2618 Related to: #2620 * feat(timeline): Change setCustomTimeTitle title parameter to be a string or a function (#2611) * change setCustomTimeTitle title parameter, Now could be an string or a function * Fixed indent and spacing * feat(timeline): refactor tooltip to only use one dom-element (#2662) * feat(network): Allow for image nodes to have a selected or broken image (#2601) * feat(tests): run mocha tests in travis ci (#2687) * Added showX(YZ)Axis options to Graph3d (#2686) * Added showX(YZ)Axis to Graph3d * Added show_Axis options to docs and playground example * Resolved merge conflict * Added show_Axis options to docs and playground example * fix(build): use babel version compatible with webpack@1.14 (#2693) fixes #2685 * feat(docs): use babel preset2015 for custom builds (#2678) * add link to a mentioned example (#2709) * chore(lint): added support for eslint (#2695) * Trivial typo fix in how_to_help doc. (#2714) * fix(timeline): #2598 Flickering onUpdateTimeTooltip (#2702) * Fix redraw order * Fix error when option is not defined * Allow template labels * Add .travis.yml file * Add experiment travis code * Fix react example * Add animation to onUpdateTooltip * fix(timeline): #778 Tooltip does not work with background items in timeline (#2703) * Fix redraw order * Fix error when option is not defined * Allow template labels * Add .travis.yml file * Add experiment travis code * Fix react example * Make items z-index default to 1 * Add initial tests for Timeline PointItem (#2716) * fix(timeline): #2679 TypeError: Cannot read property 'hasOwnProperty' of null (#2735) * Fix redraw order * Fix error when option is not defined * Allow template labels * Add .travis.yml file * Add experiment travis code * Fix react example * Fix bug in item editable * feat(timeline): #2647 Dynamic rolling mode option (#2705) * Fix redraw order * Fix error when option is not defined * Allow template labels * Add .travis.yml file * Add experiment travis code * Fix react example * Add toggleRollingMode option * Update docs with toggleRollingMode option * fixes timestep next issue (#2732) * feat(timeline): added new locales for french and espanol (#2723) * Fix eslint problem on Travis. (#2744) * fix: Range.js "event" is undeclared (#2749) * fix(timeline): #2720 Problems with option editable (#2743) Clean up and centralise edit status for Timeline Items. * feat(network): Improve the performance of the network layout engine (#2729) * Improve the performance of the network layout engine Short-cut the execution of a number of methods in LayoutEngine to make them handle highly-connected graphs better. * Demonstrations of layouts of large networks * Added support to supply an end to bar charts to have them scale (#2760) * Added support to supply an X2 to bar charts to have them scale * Fixed graph2d stacking issue. It no longer takes into account hidden items * Changed x2 to end per recommendation and added this to the docs * Initial tests for timeline ItemSet. (#2750) Somewhat more complicated setup, associated with the need for a real window. * [Timeline] Modify redraw logic to treat scroll as needing restack. (#2774) This addresses #1982 and #1417. It possibly reduces performance, but correctness seems better. * fix(timeline): #2672 Item events original event (#2704) * Fix redraw order * Fix error when option is not defined * Allow template labels * Add .travis.yml file * Add experiment travis code * Fix react example * Fix events returned from mouse events * Fix example * Rename censor to stringifyObject in example * [timeline] Update examples to use ISOString format. (#2791) Resolves #2790 * [timeline] Update serialization example to use ISOString dates. (#2789) Resolves #2696 * added github templates for issues and pull-requests (#2787) fixes #2418 * feat(timeline): Add item data as argument to the template function (#2799) * Fix regression introduced in #2743. (#2796) * Fix for issue #2536 (#2803) * Fix for issue #2536 * Adjusted documentation for fix. * Adjustments due to review * Grrrrr whitespace * Fixed Travis issue * Cheap fix for bug #2795 * Update to PR #2826 to use newline format * Update to gitignore to reflect changes on remote * clean dist folder * Local gitignore update * Just a first example file for the week scale feature * Allowing sourcemap creation * Initial (non-functional) commit to ensure we insert code at the right places (check TODOs) * Functional, not bug-free version which works with locale aware week numbers. * Locale-aware implementation and simplified major labels to a full year * Trying to make the major labels show the correct start date * Working implementation of week numbers using localization. * removing development leftovers * Updated package.json * Reintagrate package.json from accidental deletion * Updates for package.json * Fixing package.json * Integrate the week numbers feature in the documentation. * Reverting local changes to .gitignore * Reverting local changes * Extending examples to cover the case when 1st day of week and 1st day of month align; Fixing display bug so that week numbers are not repeated in minorLabels * Putting the examples into a loop
This pull request allows to specify an optional selected image (on top of the base image) with a node of type "image" or "circularImage".
This can be done by passing an object in the "image" option:
This is backward compatible with the previous syntax:
This is my first PR here so please tell me if I missed something.
Examples screenshots:

