Starting with the 8.0.6 nightly from today, we’ve introduced a new Perspective component: the View Canvas. The View Canvas allows the user to embedded multiple views in a coordinate based canvas. Think of it as a coordinate-y version of the flex repeater. The View Canvas also allows for smooth transitioning of views through CSS transitions. Feel free to post comments, questions, suggestions here.
Properties
instances: Array<ViewInstanceProps> - Array of view config objects
position: relative | absolute - Mode that defines how the element is positioned within the canvas. For position absolute, the view is placed within the canvas based on its top, left, bottom, right positions. Views that are positioned absolute do not participate in the flow of the document. For position relative, the view is placed within the canvas placed in the normal document flow and then offset by its top, left values. This is the same with left and right.
top: string | number - The top position of the view.
left: string | number - The left position of the view.
bottom: string | number - The bottom position of the view. Note: If both top and bottom are set, bottom is respected only if position is set to absolute and height is unspecified.
right: string | number - The right position of the view. Note: If both left and right are set, left is respected only if position is set to absolute and height is unspecified.
zIndex: number | auto - The z-order position of the view.
width: string | number - The width of the view.
height: string | number - The height of the view.
viewPath: string - The path of the view.
viewParams: Object - The parameters of the view.
style: StyleObject - The style of the view.
transitionSettings: TransitionSettingProps - Transition settings on each view. The properties affected by transition settings are top, left, bottom, right, and zIndex.
duration: string - Duration of the transition. Units are seconds or milliseconds.
Example: 200ms
delay: string - Delay of the transition before it begins. Units are seconds or milliseconds. Example: 1s
timingFunction: string - A mathematical function that describes how fast one-dimensional values change during the transition. The transition can be described as a cubic-bezier or steps function. The presets for cubic-bezier functions are linear, ease, ease-in, ease-in-out, ease-out. The presets for steps functions are step-start and step-end.
enableTransitions: boolean - Determine whether transitions should be enabled
defaultStyle: StyleObject - The default style that is applied to all views. This can be overridden on an instance basis.
style: StyleObject - The style of the canvas.
Events
onInstanceClicked - Event fired when a view instance is clicked
index: number - The index of the view instance.
params: dictionary - The current view parameters of the view instance.
path: string - The path of the view instance.
position: dictionary - The position of the view instance in relation to the canvas.
top: number - The top position of the view instance
left: number - The left position of the view instance
bottom: number - The bottom position of the view instance
right: number - The right position of the view instance
Can you provide some insight on how the “Example GIF” is coded?
I created a simple canvas and added a couple (of the same) embedded views
I want to click the down arrow and have Task#1 slide up and out of canvas and Task#2 slides to the top.
My First Try was to create a custom property ‘Position’ on the canvas and I bound the top property of each instance (for example canvas.intances[0].top) to the ‘Position’ property. If ‘Position’ = 0 then top of Task#1 would be 0 and top of Task #2 would be 60; and if ‘Position’ =1 top of Task#1 would be -60 and top of Task #2 would be 0. I added a script to each button to change the custom ‘Position’ property and the Tasks moved to the correct posiiton but there is no animation they just immediately jump to the calculated position.
What are your transitionSettings props (as well as enableTransitions) set to? The animation should be driven by the transition related properties on the component, not the script or a binding.
Since the views are jumping to the new positions, it sounds like there is a configuration issue on some of the properties.
There currently is an issue with the view canvas where transitions aren’t playing if transitioning from and to 0. This is certainly not ideal, but try using a start/end position other than zero. I can keep you updated when this issue gets fixed.
Just an FYI, I’m seeing some odd behavior on my mobile device (iOS with Safari, Chrome and Google browsers)
My view canvas above has a black border around it just so I can see where the actual canvas is and it works great on the PC.
In the mobile browser the canvas items are appearing outside the canvas in a static state. They appear initially when canvas is loaded but do not move. Looks like this when I initially load the page
Canvas behaves ok, all items show in canvas and scroll fine but the items that are outside canvas still show in place.
I’m not really sure what “DM’ing me” means but I created a project with a view containing the View Canvas and uploaded it here. I confirmed the same behavior. Oddly enough though, if the canvas is close to the left edge of the view it seems fine. If it’s moved 200-300px away from edge it starts showing the embedded views outside the canvas.
)!
