[Laszlo-user] Tracking onmouseover while dragging another view

[Paulo Scardine]

Paulo Scardine escreveu:
> Hi,
>
> I'm making an operator control panel for a soft-pbx system.
>
> I made a class (extending view) representing external telephone lines 
> and internal extensions.
>
> The operator should be able to transfer a call just dragging one 
> line/extension over another. I also made a custom layout that handles 
> switched calls, and its working great.
>
> What I could not accomplish is this: I would like to "highlight" the 
> target extension while dragging the source extension over it. They are 
> both siblings of the same class (replicated according to a dataset).
>
> I was reading about LzTrack and basetrackgroup, but I was unable to 
> use onmousetrackX events while dragging (funny how we get lots of 
> over/out events).
>
> What am I doing wrong?
>
I was able to achieve the above, after finding some anonymous sample 
code at google.

1) instantiated a hidden object with  options="ignorelayout"
2) on mousedown, I show and drag the hidden object arround.

Now I'm able to track  onmousetrackX  events.

Thank you, anonymous author.
--
Paulo


<canvas>

  <script><![CDATA[
    function DragUtil() {
    }
    DragUtil.start = function(sender, label) {
      DragUtil.__x = canvas.getMouse("x");
      DragUtil.__y = canvas.getMouse("y");

      DragUtil.__sender = sender;
      DragItem.start(sender, label);
    }
    DragUtil.register = function(sender) {
      LzTrack.register(sender, "draganddrop");
    }
    DragUtil.getSender = function() {
      var o = DragUtil.__sender

      var x1 = o.getAttributeRelative("x", canvas)
      var x2 = x1 + o.width
      var y1 = o.getAttributeRelative("y", canvas)
      var y2 = y1 + o.height
      var mx = canvas.getMouse("x");
      var my = canvas.getMouse("y");

      if (mx < x1 || mx > x2 || my < y1 || my > y2)
        return DragUtil.__sender

      return null
    }
  ]]></script>

  <view name="DragItem" height="20" visible="false" opacity="0.8" 
options="ignorelayout">
    <text name="label" bgcolor="white" fontsize="14" />
    <dragstate name="dragger"/>
    <!-- methods -->
    <method name="start" args="sender, label">
      this.bringToFront();
      this.setX(sender.getAttributeRelative("x", canvas));
      this.setY(sender.getAttributeRelative("y", canvas));
      this.setWidth(sender.width);
      this.setVisible(true);

      // make this drag item look like the original item
      // NOTE: you can depends on the sender class to render different look
      this.setAttribute("bgcolor", sender.getAttribute("bgcolor"))
      this.label.setText(" " + label);

      this.dele1 = new LzDelegate(this, "doMouseUp", sender, "onmouseup");
      this.dragger.apply();
      LzTrack.activate("draganddrop");
    </method>
    <method name="doMouseUp">
      this.dele1.unregisterAll();
      this.dragger.remove();
      this.setVisible(false);
      LzTrack.deactivate("draganddrop");

      DragUtil.__sender = null;
    </method>
  </view>

  <class name="test" width="200" height="20" bgcolor="white">
    <attribute name="text" type="string" value=""/>
    <attribute name="originaltext" type="string" value="$once{this.text}"/>
    <dragstate name="dragger" drag_axis="both"/>
    <simplelayout axis="x"/>
    <view name="inner" x="2" y="2" width="194" height="16" bgcolor="white">
      <text fontsize="14" text="${parent.parent.text}"/>
    </view>
    <method event="oninit">
      DragUtil.register(this);
    </method>
    <method event="onmousedown">
      DragUtil.start(this, this.originaltext);
    </method>
    <method event="onmousetrackup"><![CDATA[
      var sender = DragUtil.getSender();
      if (sender && sender != this) {
        this.setAttribute('text', sender.originaltext + '->' + 
this.originaltext);
        sender.setAttribute('text', sender.originaltext);
        this.setBGColor(blue);
      }
    ]]>
    </method>
    <method event="onmousetrackover"><![CDATA[
      this.setBGColor(red);
    ]]>
    </method>
    <method event="onmousetrackout"><![CDATA[
      this.setBGColor(white);
    ]]>
    </method>
  </class>

  <view>
    <view>
      <simplelayout axis="y" spacing="5"/>
      <test text="a"/>
      <test text="b"/>
      <test text="c"/>
      <test text="d"/>
      <test text="e"/>
      <test text="f"/>
    </view>
  </view>

</canvas>