Jump to content
Sign in to follow this  
lynkfs

window component

Recommended Posts

Looks nice, unsure what I would use it for at the moment but good to see if here.

 

You are undoubtedly aware that if mouse comes off the window the dragging stops.

Share this post


Link to post
Share on other sites

@lynkfs SetCapture/ReleaseCapture takes care of those dragging problems that @Czar mentioned.

Edit: However, to be able to use SetCapture and ReleaseCapture, you need to listen to MouseDown, MouseUp and MouseMove using the normal Delphi-like events instead of using the raw JS events.

Edit2: When you use normal events, the EventManager takes care of a boatload of the complexity. For example, SetCapture locks on to the control meaning that all move events go that one. (See the Scrollbars code in the RTL as an example)

The EventManager also notices situations where you click on control to drag it, move the mouse outside of the whole browser window and release the button there. If you try to listen to events through JS, these kinds of special situations are a pain to handle correctly.

Share this post


Link to post
Share on other sites
27 minutes ago, lynkfs said:

(problem fixed by the way)

Did you change to use the normal events? Because the situation I mentioned above does still happen when you drag the window.

Share this post


Link to post
Share on other sites

demo works ok here

The javascriptisch events used are

  //Move window
  Header.handle.onmousedown := procedure(e: variant)
  begin
    Header.handle.style.cursor := 'move';
    var saveX := e.clientX;
    var saveY := e.clientY;

    Header.handle.onmousemove := procedure(e: variant)
    begin
      self.left    := self.Left - (saveX - e.clientX);
      self.top     := self.top - (saveY - e.clientY);
      PrevSize     := TRect.CreateSized(left, top, width, height);

      saveX := e.clientX;
      saveY := e.clientY;
    end;
  end;
  //
  Header.handle.onmouseup := procedure(e: variant)
  begin
    Header.handle.onmousemove := null;                       //nullify mousemove
    Header.handle.style.cursor := 'default';
  end;
  //
  Header.handle.onmouseleave := procedure(e: variant)
  begin
    self.Parent.handle.onmousemove := header.handle.onmousemove;
    self.Parent.handle.onmouseup   := procedure(e: variant)
    begin
      self.parent.Handle.onmousemove := null;
    end;
  end;

will be interesting to compare using eventmanager. I agree that will probably be a better solution
 

 

 

Share this post


Link to post
Share on other sites

OFF TOPIC -  "SMS Component design"
Just things that crosses my mind, and I want to discuss. Please don’t see that as an attack to someones's work. 
I really like SMS and the new possibilities.  We all want the best possible development experience result. 

While the visual widgets/UI in SMS still is customizable (by user and developer). 
I often spend more time on UI parts to realize the look and feel i want to have. I have to say here, one think that is very frustating for me is the SMS form designer

I've spent a few minutes reflecting on this RAD approach and its form designer to create web app.
Just drop components onto a form and set up at the objector inspector, the events and the properties. 
All of the above is great and it will no doubt give us the same benefits as Delphi developers currently enjoy. 
The compiler will auto generate the components for you, such as: 

var 
  btn1: TButton; 

btn1 := TButton.Create(Self); 
btn1.Width := 121; 
btn1.Top := 16; 
btn1.Left := 536; 
btn1.Height := 25; 
btn1.Name := 'btn1'; 
btn1.OnClick := Self.btn1Click; 

The UI part could be implemented on  top of TCustomComponent, both visual or non-visual components could be used. 
"the window component" - it's great candidate hein! ...but what I really don't like this approach is when i.e. you
drop "a visual component" onto form, you see "rectangule" drawing which represents the component itself you dropped.

I can't seem to find anyway how to get the "live preview" on the SMS designer on those components I've created. 
other thing is the "objector inspector" support for some custom properties.

For instance, if the user choose 'Material' from the list, the Material CSS style should be applied to the component.

type
   TCustomStyle = array[1..3] of string;

const
   CustomStyle : TCustomStyle = ('iOS','Android','Material');

type
  TMystyle  = (cssIOS, cssAndroid, cssMaterial);

TToggleComponent = class(TW3CustomControl)
  private
    fMyStyle: TMystyle;
    fCustomStyle : TCustomStyle;
  published
    property Mystyle: TMystyle Read fMyStyle Write fMyStyle default cssAndroid;
    property CustomStyle: TCustomStyle Read fCustomStyle Write fCustomStyle;

...when I see at Object Inspector the property MyStyle : 0 (set to zero?). For the boolean type it shows the dropdown list.

How can I create  a property of type String that will show a combo box in the object inspector with a predefined set of values the user could choose?
This is very frustating for me :( It seems there's just a bit too much work involved to meet even baseline expectations. 
 

Share this post


Link to post
Share on other sites
2 hours ago, lynkfs said:

will be interesting to compare using eventmanager.

Something like this:

var saveX, saveY: Integer;

Header.OnMouseDown:=procedure(Sender: TObject; Button: TMouseButton; shiftState: TShiftState; x, y: integer)
  begin
    var Ctrl:=TW3CustomControl(Sender);
    Ctrl.Cursor:=crMove;
    saveX:=x;
    saveY:=y;
  end;

Header.OnMouseMove:=procedure(Sender: TObject; ShiftState: TShiftState; x, y: integer)
  begin
    var Ctrl:=TW3CustomControl(Sender);
    if Ctrl.Cursor=crMove then begin
      Ctrl.MoveTo(Ctrl.Left-(saveX-x),Ctrl.Top-(saveY-y));
      PrevSize:=Ctrl.BoundsRect;
      saveX:=x;
      saveY:=y;
    end;
  end;

Header.OnMouseUp:=procedure(Sender: TObject; Button: TMouseButton; shiftState: TShiftState; x, y: integer)
  begin
    var Ctrl:=TW3CustomControl(Sender);        
    Ctrl.Cursor:=crDefault;
  end;

 

Share this post


Link to post
Share on other sites

@warleyalex Yeah, well, the problem you experience is because the current Object Inspector lacks features. We're in the process of replacing it with a better component, which should let you edit more properties. For example sets.

The Object Inspector also needs a lot of work. The current design was based on the idea that we'd get the Chromium to render us a live preview that we could use to make the controls look realistic. However, there was some changes in Chromium that broke that feature. So we're currently thinking about what'd be the best way to proceed. Basically: Should we try to improve the current one or replace it with something better.

Share this post


Link to post
Share on other sites

mmm

your amended code (when applied to this or any other visual component) makes for very jittery dragging

substituting code with this (below) gives a very smooth movement

header.OnAllMovement := procedure(Sender: TObject; dx,dy: Integer)
begin
  left := left + dx;
  top := top + dy;
end;

but that wasn't the point. Any idea what causes the jitteryness ?

Edit1 : the x,y values in OnMouseMove don't make much sense

Share this post


Link to post
Share on other sites

Cool, you found the new events like OnAllMovement. That makes the code a lot easier. The jitteryness may come from MoveTo.

Forgot one thing: You need to call Ctrl.SetCapture when MouseDown happens and Ctrl.ReleaseCapture during MouseUp.

Share this post


Link to post
Share on other sites

found the problem : the js events give a window based coordinate (e.clientX), while the Smart events give a component based coordinate (x as in left relative to component).

Solution : just ad water (just ad component.left)

    if Ctrl.Cursor=crMove then begin
      x := x + left;
      y := y + top;

or something like that

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×