Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    How to make DrawPath intercepting only clicks on the path? (not on entire fill area)

    I'm using DrawPath to draw some multi-segment lines that should be rendered on top of other shapes. I need handling click events on the lines, but also some click events related to other underlying shapes.
    The problem is that when I click in the filling area of a DrawPath the mouse event is notified to the DrawPath instead of the underlying shape.

    The screenshot below should clarify what I mean: the red points are drawn by the DrawOval click handler, while blue ones by the DrawPath click handler (here I've enabled filling the DrawPath just to demonstrate the connection between the notified click handler and the DrawPath filling area, but in the real world scenario users doesn't see that area as "belonging" to the DrawPath).



    The screenshot has been obtained at http://www.smartclient.com/#drawKnobs using the following snippet
    Code:
    isc.defineClass("DemoDrawPane", "DrawPane").addProperties({
        margin: 2,
        width: "100%",
        height: "100%",
        border: "1px solid #f0f0f0",
        overflow: "hidden"
    });
    
    var drawLinePathPane = isc.DemoDrawPane.create();
    var drawOval = isc.DrawOval.create({
        drawPane: drawLinePathPane,
        left: 120,
        top: 1,
        width: 200,
        height: 200,
        keepInParentRect: true,
        lineColor: 'red',
        click: function(point){drawPoint(drawLinePathPane.getOffsetX(),drawLinePathPane.getOffsetY(), 'red');}
    });
    var drawLinePath = isc.DrawPath.create({
        drawPane: drawLinePathPane,
        points: [[50, 50], [200, 50], [200, 100], [500, 100]],
        keepInParentRect: true,
        lineColor: 'blue',
        fillColor: 'cyan',
        click: function(point){drawPoint(drawLinePathPane.getOffsetX(),drawLinePathPane.getOffsetY(), 'blue');}
    });
    
    function drawPoint (x,y, color) {
        isc.DrawOval.create({
            drawPane: drawLinePathPane,
            left:x-2,
            top:y-2,
            height:4,
            width:4,
            lineColor: color,
            fillColor: color,
        })
    }
    Now the question: is there any way to receive mouse click events on the underlying oval?

    Reproduced with SmartClient 10.0p Built 2014-09-10
    Attached Files
    Last edited by d.cavestro; 17 Sep 2014, 23:27. Reason: Refined attachment url

    #2
    If the DrawPath were not filled, only clicks on the line would select it.

    It seems like the most intuitive behavior when it is filled is that clicks on the fill go to it.

    Comment


      #3
      I beg to disagree

      Originally posted by Isomorphic View Post
      If the DrawPath were not filled, only clicks on the line would select it.
      ...
      Nope, even with filling disabled the event still gets notified to the DrawPath, as per the following screenshot

      obtained simply commenting fillColor attribute on the snippet I've posted in my previous post (in fact in my real world scenario filling is disabled).
      Unless you are talking about some selection or filling control support I'm not aware of, although the documentation never mentions selection, while the only attributes related to filling are fillColor, fillGradient and fillOpacity.
      Originally posted by Isomorphic View Post
      ...
      It seems like the most intuitive behavior when it is filled is that clicks on the fill go to it.
      I agree, even though sometimes it would need a way to control this aspect.
      Attached Files

      Comment


        #4
        We've made a change so the behavior is now as intended: if there is no fill, events do not hit the DrawPath unlike they are actually on the line itself.

        We may try to add an option in the future to allow the fill area to not count as an event target even if it's visible, but possibly not until after IE8 has been retired (where everything is much harder..).

        Comment

        Working...
        X