[REQ] Control selection during browse mode

[dunbarx]

@Stam.

a 'canSelect' property would be nice too!

We already have this, just set the "cantSelect" to "false".

@ Emily.

Is it your intention to be able to select a control, be able to move it and be able to resize it, "live", all with the browser too?

Normally, these actions are reserved for the pointer tool, with the author in control, not the user. In that "space", the tools are simple and available.

But if the user is to be given that level of control, the question is "what user actions will be employed to do those tasks"? You already have two of them, selection and movement, though I would require that certain control keys be pressed in order to enable either.

So the only missing action is resizing. I can think of many ways to resize "live", but am still not sure what you require. If the user moves the cursor into a control, and the "selected" of that control comes into play, and the loc of the control follows the cursor, then what is the user to do next, in order to reSize? This seems to me to be spiraling out of, er. control.

Certainly one could set up three different actions, with three different control keys, for each. If that is acceptable, let me know, and I will show you one way to then resize. Others will also, but I think we have to get started first.

Craig

[stam]

Hi Emily-Elizabeth,

Would be very interested to see a follow up to this, once you have a workable solution.

I am re-writing an older app from scratch - this was bespoke, for one particular project, but I'd like to generalise it - this would likely mean having to create a 'form designer' type function for end-users with the appropriate level of access to create custom cards. I've been thinking of various approaches and likely simple things like fields/labels should be straightforward enough; grids is likely a bit more complex (or more correctly DG Forms would be complex, compared to tables or poly grids...). Or I may just provide complex objects 'off the shelf' with the ability to position these (and in some cases resize) in addition to being able to add/place simpler objects... but right now that's all in my head

Look forward to seeing what you create!
S.

[stam]

@Stam.

a 'canSelect' property would be nice too!

We already have this, just set the "cantSelect" to "false".

Craig - you are missing my point.

Let me be more explicit:
cantSelect makes objects behave like in browser tool, only while using pointer tool. Obviously if you're in IDE you can switch this on or off. I did actually post the dictionary entry above...

What I was suggesting was the opposite: It would be nice to have a canSelect property - this could be a property that makes objects selectable and deformable in browse tool , allowing users to easily relocate/reshape objects without us having to create complex handlers (grab is easy, resizing less so). Of course this is doable without, but it would make like easier. Much like we don't really need a a cantSelect property, but it makes life easier...
This is what I was referring to...

S.

[FourthWorld]

Does anyone have any code that will allow one to select a control during browse mode?

It may be easier to go the other way, with a tool palette allowing the user to select tools and a toplevel document window that allows use of the built-in pointer tool mode.

See the choose command and the tool global property in the Dictionary.

[dunbarx]

Stam.

OK, I see what you mean now.

Craig

[dunbarx]

Emily.

There are a handful of members here lined up to work on this. But I think it would be a great help if you could spell out how you want this to take place.

In other words, you have one or more controls on the card. You have a cursor that is moved by the mouse. How do you want to effect one or more of these three actions? Especially, how do you want the user to be able to resize a control from the browser tool?

I made a stack that allows the user to click and drag on a graphic. That graphic was a double arrow, sometimes straight (<----->) and sometimes containing an included right angle, like an "L". The user clicks and drags one side of that graphic and that side "stretches" from that end. In the above simple graphic, one would get "<----------------------->" .

That method could be used here as well, but I still do not know if that is part of your thinking.

Craig

[Emily-Elizabeth]

Posting from my iPhone so bear with me. I will post a picture when I get back home.

I have an area on the right hand side that acts as an inspector and a large area on the left hand side that the end user will be able to create controls, when in edit mode. While in edit mode they can select the controls, move them and resize them. By switching between the browse and pointer tools I have been able to achieve this, but still have some issues so would like to be able to do it all in browse mode.

[dunbarx]

Emily.

OK, will wait for your picture.

But everything you want to do can be done with the browse tool. It is just a matter of defining those actions. This is necessary since the browse tool will be called upon to do stuff it normally does not. You have to think about how these different actions will be effected. For example, in the card script you might have:

Code: Select all

on mouseMove
   if the optionKey is down then set the loc of the target to the mouseLoc
end MouseMove

on mouseEnter
   if the controlKey is down then select the target
end mouseEnter

Assuming you are OK with those control keys, this leaves only resizing to deal with. But do any of these overlap? Should any be excluded here and there?That is in fact the harder part.

Craig

[Emily-Elizabeth]

So you can see the grey section, on the right, which has everything set with cantSelect and chooses the browse tool when moused over.
The white section, on the left, chooses the pointer tool when moused over.
The label needs to be selected, moved and resized, at the user's whim and right now that happens fine with the pointer tool (there are other issues that need to be resolved when using the pointer tool so I'd rather do the selecting, moving and resizing when the browse tool is in use). There are two modes to this - edit and browse, and the functionality only needs to happen in the edit mode.

[dunbarx]

Emily.

OK. So the user moves the mouse toward the label field, and may very well move that cursor inside that field.

1- How do you want the user to be able to select the field?
2- How do you want the user to be able to move the field?
3- How do you want the user to be able to resize the field?

I make these points, painfully, to get you to understand that you must define what you want.

Just one possible way is to use different control buttons, (command, option, control, shift..) in order to effect certain actions. I still do not know if you see that, never mind whether you know how they can be used that way.

So what is you thinking? If the user wants to move that field, how do you want that to happen? Once you answer THAT question, the mechanics can be dealt with. That will be the fun part.

Craig

[dunbarx]

Emily.

For example, you might say that "I want the user to be able to click on the field in order to select it". Or "I want the user to be able to move the cursor into the field, hold the mouse down, then move the cursor, and as long as the mouse is down that will also move the field.

That sort of thing...

Craig

[Emily-Elizabeth]

I want the user to click on the field to select it
I want the user to hold the mouse button down to move the control
I want the user to use the selection handles to resize it
Exactly like when in pointer mode in LiveCode

[dunbarx]

Emily.

AHA.

Now comes the fun part. "Fun" here means work. Here is a start, and it has issues. On a new card make a locked field. Put this in the card script:

Code: Select all

on mouseUp
   if the mouseLoc is within the rect of fld 1 then select fld 1
   else set the selected of fld 1 to "false"
end mouseUp

on mouseMove
   if abs(item 1 of the mouseLoc - item 1 of the loc of the target) < 10 and abs(item 2 of the mouseLoc - item 2 of the loc of the target) < 10 \
   and the mouse is down then set the loc of fld 1 to the mouseLoc
end mouseMove

on mouseLeave
  click at "0,0"
end mouseLeave

I limited the action of moving the field so that you must click and hold near the center of that field. This may be useful later...

So far, all within the browse tool. You can move the field by holding down the mouse and moving the cursor. You can select the field by clicking on it, but the selection "handles" that appear when one selects that field are not the ones that the pointer tool uses to resize. They look the same but do not work the same. The ability to resize by using handles is jealously guarded by the pointer tool.

So at this stage, assuming you are OK with the current activity, is it still forbidden to invoke the pointer tool? If so I will give you a method to resize, but it will not involve handles.

This is how things have to proceed when building outside the "normal" world. This happens all the time, and is perfectly sound practice. But we are approaching Kludge space.

Craig

[dunbarx]

I like Kludges.

Try this, which does not use handles, but still does the job. Modify the card script to:

Code: Select all

local TL,TR,BL,BR

on mouseEnter
   put the topLeft of fld 1 into TL
   put the topRight of fld 1 into TR
   put the botLeft of fld 1into BL
   put the botRight of fld 1 into BR
end mouseEnter

on mouseUp
   if the mouseLoc is within the rect of fld 1 then select fld 1
   else set the selected of fld 1 to "false"
end mouseUp

on mouseMove
   if abs(item 1 of the mouseLoc - item 1 of the loc of the target) < 10 and abs(item 2 of the mouseLoc - item 2 of the loc of the target) < 10\
         and the mouse is down then set the loc of fld 1 to the mouseLoc
   else
      switch
         case item 1 of the botRight of fld 1 - item 1 of the mouseLoc < 10 and item 2 of the botRight of  fld 1 - item 2 of the mouseLoc < 10 and the mouse is down
            set the rect of fld 1 to TL & "," & item 1 of the mouseLoc & "," & item 2 of the mouseLoc
            set the botRight of fld 1 to item 1 of the mouseLoc & "," & item 2 of the mouseLoc
            break
      end switch
   end if
end mouseMove

on mouseLeave
  click at "0,0"
end mouseLeave

This only works at the bottomRight corner currently. It means you never have to select that field. You can move it or resize it right away.

See if it works for you.
Craig

[dunbarx]

Emily.

Here is a sample stack. You can move the field, and again only the bottomRight works until you bless the method.

And no selecting.

Craig

noPointerTool.livecode.zip

(1.39 KiB) Downloaded 52 times