SnapTo functionality

Technical Q&A
1

I’d like to use the snapTo functionality of Canvas objects but I need to be able to snap outside of a given object so for example:

| layout |
| to |
| snap to |
| |------------------
---------------- | layout to snap |
| |
| |
------------------

I know I can move the canvas to a specific position but I want to be able to set this setup once and not have to worry about where my layout to snap to is on the screen.

2

Your ASCII art didn’t come through very well, but did you notice in the docs for snapTo the ability to snap to a specific edge (snapEdge) and at an offset (snapOffsetLeft, snapOffsetTop)?

3

Oops sorry snapEdge and the offsets - as far as I can see, is within the layout to snap to. I want to place my snapped layout on the outside edge.

What are the possible values for snapEdge? I don’t see it in the documentation.

I’ve attached a screenshot of what I want

snapTo.png

4

You want snapTo:“TR” snapEdge:“BL”. This means you are snapping the bottom left corner of the “layout to snap” to the top right corner of the “layout to snap to”.

5

Not sure what is missing here, but the label does not seem to be showing

isc.Label.create({
    ID:"label1", 
    height: 80, width: 80,
    contents: "Top Left",
    align: "center",
    backgroundColor: "#FFAAAA",
    border: "1px solid black",
    snapTo:"TR", snapEdge:"BL"
});

isc.Canvas.create({
    ID:"snapLayout", 
    height: 300, width: 400,top:400,
    showEdges:true,
    edgeImage:"edges/custom/sharpframe_10.png",
    edgeSize:10,
    canDragResize: true,
    children: [
                label1
        ]
});

isc.HLayout.create({
ID:    "controlLayout",
membersMargin: 20,top:200,
height: 800, width: 1000,
members: [
    snapLayout
    ]
});

I also tried with V/HLayout and V/HStack and these set of properties seem to work differently - it doesn’t even snap to the top right. Is snapTo functionality solely for canvas instance? I thought it would work the same for subclasses

isc.Label.create({
    ID:"label1", 
    height: 80, width: 80,
    contents: "Top Left",
    align: "center",
    backgroundColor: "#FFAAAA",
    border: "1px solid black",
    snapTo:"TR", snapEdge:"BL"
});

isc.VStack.create({
    ID:"snapLayout", 
    height: 300, width: 400,top:200,
    canDragResize: true,backgroundColor:"black",
    children: [
                label1
        ]
});

isc.HLayout.create({
ID:    "controlLayout",
membersMargin: 20,
height: 800, width: 1000,backgroundColor: "yellow",
members: [
    snapLayout
    ]
});
6

In the first instance, the Label is outside the widget’s viewport, hence clipped (overflow:visible only makes widgets expand down and right). You probably want this widget to be a peer rather than a child.

7

Ok - I tested outside of the Feature Explorer and it works the way I want. Thanks.

<HTML><HEAD><TITLE>
    SmartClient animation programming
</TITLE>
    <SCRIPT>var isomorphicDir = "../../isomorphic/"</SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=../../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
	<SCRIPT SRC=../../isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY bgcolor=tan><SCRIPT>

isc.Label.create({
    ID:"label1", 
    height: 80, width: 80,
    contents: "Top Left",
    align: "center",
    backgroundColor: "#FFAAAA",
    border: "1px solid black",
    snapTo:"R", snapEdge:"L"
});

isc.Canvas.create({
    ID:"snapLayout", 
    height: 300, width: 400,top:400,
    canDragResize: true,backgroundColor: "red",
    peers: [
                label1
        ]
});

isc.HLayout.create({
ID:    "controlLayout",
membersMargin: 20,top:200,
height: 800, width: 1000,
members: [
    snapLayout
    ]
});


</SCRIPT></BODY></HTML>
8

I had another question. When I set the height of the masterElement to “100%”, my peer layout changes size but when I have height set to 500, it displays with the right height/width - is there any reason for this?

isc.HStack.create({
ID:"HorizontalStackLayoutTest",
name:"HorizontalStackLayout",
snapTo:"R",
snapEdge:"L",
height:80,width:80,
members:
	[isc.DynamicForm.create({
		ID:"Label$gridWrap",width:"80",height:"*",
		fields:[
		{title:"<nobr>HERERRRR <\/nobr>",
		showTitle:false,
		colSpan:"1",
		ID:"LabelTest",
		name:"LabelTest",
		defaultValue:"HERERRRR",
		wrap:true,_constructor:"StaticTextItem"}]
	})
]});


isc.VStack.create({
ID:"VerticalStackLayoutTest",
name:"VerticalStackLayout",
height:"100%",width:100,
peers:
    [HorizontalStackLayoutTest]
})
9

"Note that this property also impacts the sizing of this widget. If this widgets size is specified as a percent value, and has no explicit Canvas.percentSource, sizing will be calculated based on the size of the masterElement when snapTo is set. "

I only have the size in percentage set on the masterElement - what am I missing here?

10

Another question - I want to be able to dynamically control the visibility of the layout I am snapping - it works fine except when I want the layout to be hidden first. It seems “snapTo” shows the layout right away. Is there any way around this?>

isc.Label.create({
    ID:"label1", 
    height: 80, width: 80,
    contents: "Top Left",
    align: "center",
    backgroundColor: "#FFAAAA",
    border: "1px solid black",
})

isc.VStack.create({
    ID:"snapLayout", 
    height: 300, width: 400,top:400,
    canDragResize: true,backgroundColor: "red",
    peers: [
           isc.HStack.create({ID:"test", height: 80, width:80, visibility: "hidden",
    snapTo:"BR", snapEdge:"TL",members:[label1]})     
        ]
});

isc.HLayout.create({
ID:    "controlLayout",
membersMargin: 20,top:200,
height: 800, width: 1000,
members: [
    snapLayout
    ]
});
11

Any suggestions?

12

We’ve fixed the sizing issue, thanks for the test case. Today’s build has the fix.

On the visibility thing, the intended behavior is that a peer tracks the visibility of it’s master (so this is not related to snapTo but to peers in general) so when the master first becomes visible it’s going to show it’s peer. If this isn’t what you want, you could add the peer after draw, or hide it after draw.