8000 [network] image shape: add optional selected image by mehl321 · Pull Request #2601 · visjs/vis · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
This repository was archived by the owner on Jul 29, 2019. It is now read-only.

[network] image shape: add optional selected image #2601

Merged
merged 2 commits into from
Feb 3, 2017
Merged

[network] image shape: add optional selected image #2601

merged 2 commits into from
Feb 3, 2017

Conversation

mehl321
Copy link
Contributor
@mehl321 mehl321 commented Jan 18, 2017

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:

image: {
    unselected: './image.svg',
    selected: './image-selected.svg',
},

This is backward compatible with the previous syntax:

image: './image.svg',

This is my first PR here so please tell me if I missed something.


Examples screenshots:
unselected
selected

@mojoaxel mojoaxel added this to the Minor Release v4.19 milestone Jan 18, 2017
@Tooa Tooa added the Network label Jan 23, 2017
Copy link
Member
@mojoaxel mojoaxel left a 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.

@mehl321
Copy link
Contributor Author
mehl321 commented Jan 31, 2017

Commit updated!

Copy link
Member
@mojoaxel mojoaxel left a 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!

Copy link
Member
@mojoaxel mojoaxel left a 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!

Copy link
Member
@mojoaxel mojoaxel left a 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;
Copy link
Member

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>
Copy link
Member

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,
}
}
]);
Copy link
Member

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},
]);
Copy link
Member

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 = {};
Copy link
Member

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',
    }
  };
``

@mojoaxel
Copy link
Member
mojoaxel commented Feb 3, 2017

Hopefully @yotamberk @Tooa or @eymiha also could have a look at this.

@mehl321
Copy link
Contributor Author
mehl321 commented Feb 3, 2017

Thanks for the suggestions :) The example is much more understandable now. Commit updated

image: {
unselected: './unselected.svg',
selected: './BROKEN_LINK/selected.svg',
},
Copy link
Member

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!

Copy link
Member

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.

Copy link
Contributor Author

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 mojoaxel merged commit 66a6772 into visjs:develop Feb 3, 2017
@mehl321 mehl321 deleted the network-image-selected branch February 3, 2017 22:06
marcortw pushed a commit to marcortw/vis that referenced this pull request Mar 12, 2017
@mehl321
Copy link
Contributor Author
mehl321 commented Mar 22, 2017

@mojoaxel My example is not visible in network_examples.html!

yotamberk pushed a commit that referenced this pull request May 2, 2017
* 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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants
0