Image Gesture Controls using Monoids
summary
Uses TypeScript and NativeScript to implement image panning, pinch-zoom, and double-tap reset by modeling gestures as monoids: a pair sum monoid (concat = add, empty = 0) combines deltaX/deltaY for translate; a product monoid (concat = multiply, empty = 1) scales image from pinchScale (pinch scale starts at 1) with compare+clamp (e.g. clamp 1–5). Gesture state codes 1/2/3 determine start/move/end, deltas are accumulated and saved, console logs confirm positions and scale update as expected. Also recommends the fpts library.
AI-written summary · about
chapters (15)
- 0:00Start
- 2:06Building Block of Monois
- 3:20Associative Property
- 4:32Identity Element
- 5:03Recap
- 6:13Closed Binary Operator
- 9:49Monoid Sum
- 11:47Animation over Time
- 14:16Console Log
- 15:36Zoom on Pinch
- 15:48The Pinch Scale
- 18:55Clamp Function
- 21:44Reset on Double Tap
- 22:01Re Set the Position
- 22:24Conclusion
related talks
44mGames Development with Typescript and Canvas
15mScale Your Components With Tagged Unions and Factory Pattern
49mBuilding mobile apps with Angular2 and NativeScript
25mLeveraging (algebraic data) types to make your UI rock solid
30mSwipe Left, Uncaught TypeError Learning to Love Type Systems
26mWhen Cross-Platform Is An Understatement: Making Weird Physical Games With TypeScript
37mBuilding Better Components — A Journey to a More Resilient Frontend
21mSuper TypeScript II Turbo – FP Remix