DEV Community

loading...
Cover image for new Circle().center().drag();

new Circle().center().drag();

zimlearn profile image Dr Abstract ・2 min read

Chaining is when the methods can be dotted to each other. Basically, a method can be dotted to an object. new Circle() is the object so center() can be dotted directly to it. In this case drag() does not seem to be dotted directly to the object. So how does this work?

The answer is that the center() method must return the object - and it does. It is quite easy to make a method return the object... at the end of the method just return this.

Indeed for us to assign the expression to a variable and expect the variable to refer to the object, the drag() method should also return the object - and it does.

In ZIM, almost all methods are chainable. The only ones that are not are methods that need to return a value. The on() method for instance, should not be chained as it returns an event id used to turn the event off().

ZIM has a set of short chainable methods that replace common properties like x, y, rotation, alpha, scale, etc. This means we rarely use properties to set initial values and quite often, this means we do not need to even store an object in a variable - only if we need to access it later. We also have chainable tap() and change() methods to use instead of the on() method.

new Circle()
  .center()
  .mov(100)
  .drag();

// Note the semi-colon is at the end. 
// Putting these on multiple lines 
// allows you to comment out individual commands for testing. 

pos(), loc(), mov(), sca(), alp(), hov(), rot(), reg(), siz(),
ske(), tap(), hov(), cur(), top(), bot(), ord(), sha()

// Other methods can be chained too such as

center(), centerReg(), cache(), setMask(), etc.
Enter fullscreen mode Exit fullscreen mode

If you have not checked out the Canvas recently - you simply must! Here is the ZIM Dev Site and some In-depth Guides by Dr Abstract including Your Guide to Coding Creativity on the Canvas.

Discussion (0)

Forem Open with the Forem app