search

almende / vis

⚠️ This project is not maintained anymore! Please go to https://github.com/visjs
7.84k stars 1.48k forks source link

Network: When using image, highlight & hover should still work, but doesn't #1154

Closed abcbaby closed 9 years ago

abcbaby commented 9 years ago

Based on the example, http://visjs.org/examples/network/nodeStyles/colors.html, I tweaked nodes, id:7, to be point to an image and highlight and hover does not work anymore.

Here is the tweaked code, (sorry, jsbin not rendering properly on my network):

<!doctype html>
<html>
<head>
  <title>Network | Basic usage</title>

  <script type="text/javascript" src="https://raw.githubusercontent.com/almende/vis/master/dist/vis.js"></script>
  <link href="https://raw.githubusercontent.com/almende/vis/master/dist/vis.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    #mynetwork {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }

    p {
      max-width:700px;
    }
  </style>
</head>
<body>

<p>
  Nodes can be all kinds of colors. This example shows all possible ways of defining colors. If you supply an object, the undefined fields will assume the default colors.
  When supplying a hex or rgb format color, it will be parsed and variations will be created for highlight and hover. Edges with inheritColor take the border colors.
</p>

<div id="mynetwork"></div>

<script type="text/javascript">
  // create an array with nodes
  var nodes = new vis.DataSet([
    {id: 1, label:'html color', color: 'lime'},
    {id: 2, label:'rgb color', color: 'rgb(255,168,7)'},
    {id: 3, label:'hex color', color: '#7BE141'},
    {id: 4, label:'rgba color', color: 'rgba(97,195,238,0.5)'},
    {id: 5, label:'colorObject', color: {background:'pink', border:'purple'}},
    {id: 6, label:'colorObject + highlight', color: {background:'#F03967', border:'#713E7F',highlight:{background:'red',border:'black'}}},
    {id: 7, label:'colorObject + highlight + hover', color: {background:'cyan', border:'blue',highlight:{background:'red',border:'blue'},hover:{background:'white',border:'red'}}, "shape": "image", "image": "http://www.fancyicons.com/free-icons/142/games/png/64/tree_64.png"}
  ])

  // create an array with edges
  var edges = new vis.DataSet([
    {from: 1, to: 3},
    {from: 1, to: 2},
    {from: 2, to: 4},
    {from: 2, to: 5},
    {from: 2, to: 6},
    {from: 4, to: 7},
  ]);

  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    nodes: {borderWidth: 2},
    interaction: {hover: true}
  }
  var network = new vis.Network(container, data, options);
</script>

<script src="../../googleAnalytics.js"></script>
</body>
</html>
AlexDM0 commented 9 years ago

http://jsbin.com/fenibeqeco/1/edit?html,output

Seems to work fine?

abcbaby commented 9 years ago

The label for highlight and hover works fine, but the icon itself does not. It should be color, lime. Here is the example:

http://jsbin.com/mitom/14/edit

AlexDM0 commented 9 years ago

You want the image to get a color? The image does not use the colors. You want an image, you get an image. There is no support for hoverImages and such, allthough you could implement that with the events.

Regards

abcbaby commented 9 years ago

If the image has transparent background, it will use whatever the parent has. For example, in any browser if an image with transparent background, then the background will be whatever color the background is set to.

AlexDM0 commented 9 years ago

Hi,

Well yes, but this is not the DOM. This is drawn on a canvas, if there is an image type, there is no background.

Regards

abcbaby commented 9 years ago

Another question similar to this is, if you set the shape to 'circularImage', the border color will show up, but if set to 'image' it will not. Why is that?

AlexDM0 commented 9 years ago

Because the image is just drawn on the canvas, the circular image first draws a circle, then draws the image inside of it.

Regards

abcbaby commented 9 years ago

But should the shape: 'image", be consider a rectangle, therefore, the border should be highlighted also? Take a look at your demo, http://visjs.org/examples/network/nodeStyles/circularImages.html, if you change, id: 4, shape from 'circularImage' to 'image', the borders for all the other images works, but not this one.

AlexDM0 commented 9 years ago

Yes, we could do that. It's not part of the current design though. Who knows? Maybe in future releases? :)

abcbaby commented 9 years ago

So with the current implementation you have, it is not consider a bug when shape is set to "image" and no border will be outlined but an enhancement?

AlexDM0 commented 9 years ago

No, It's doing what it's designed to to. Maybe the documentation should be appended.

Regards

On 3 aug. 2015, at 18:35, dragonzone notifications@github.com wrote:

So with the current implementation you have, it is not consider a bug when shape is set to "image" and not border will be outlined but an enhancement?

— Reply to this email directly or view it on GitHub.

AlexDM0 commented 9 years ago

Main reason for this is that if you want to use normal icons (which we think is a common usecase) you'd have to set all colours transparent or border width at 0 if you want visible edges when using inherit.

That's a lot of overhead for simple icons.

Regards

On 3 aug. 2015, at 19:07, dragonzone notifications@github.com wrote:

Closed #1154.

— Reply to this email directly or view it on GitHub.

atima commented 9 years ago

For your information, I modified the code to draw a rectangle below image to create image border as follow: (from vis.js in dist folder)

function Image(options, body, labelModule, imageObj) {
  ...
  key: 'draw',
  value: function draw(ctx, x, y, selected, hover) {
    this.resize();
    this.left = x - this.width / 2;
    this.top = y - this.height / 2;

    // Modification ***************
    var borderWidth = this.options.borderWidth;
    var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
    ctx.strokeStyle = selected ? this.options.color.highlight.border : hover ? this.options.color.hover.border : this.options.color.border;
    ctx.lineWidth = selected ? selectionLineWidth : borderWidth;
    ctx.lineWidth *= this.networkScaleInv;
    ctx.lineWidth = Math.min(this.width, ctx.lineWidth);

    this._drawImageAtPosition(ctx);
    ctx.strokeRect(this.left, this.top, this.width, this.height);
    // Atima ***************

    this._drawImageLabel(ctx, x, y, selected || hover);

    this.updateBoundingBox(x, y);
  }
}

In my application, all images has a border so the modification is simple. However, I think an image border can be useful in many cases too. It would be nice if this functionality can be included in vis library without too much overhead.