From 4384daa8cc352743a9102678f3062838fd969476 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=8A=B2=E9=B9=8F?= Date: Wed, 22 Sep 2021 10:28:47 +0800 Subject: [PATCH] add gesture demo --- doric-demo/src/GestureDemo.ts | 186 ++++++++++++++++++++++++++++++++++ 1 file changed, 186 insertions(+) create mode 100644 doric-demo/src/GestureDemo.ts diff --git a/doric-demo/src/GestureDemo.ts b/doric-demo/src/GestureDemo.ts new file mode 100644 index 00000000..d8ddcc28 --- /dev/null +++ b/doric-demo/src/GestureDemo.ts @@ -0,0 +1,186 @@ +import { Group, Panel, gestureContainer, layoutConfig, Gravity, Color, stack, modal, scroller, vlayout, gravity, text, SwipeOrientation, } from "doric"; +import { colors } from "./utils"; + +@Entry +class SimpleDemo extends Panel { + build(rootView: Group) { + let pinchChild = stack([], { + layoutConfig: layoutConfig().just().configAlignment(Gravity.Center), + width: 100, + height: 100, + backgroundColor: Color.WHITE, + }) + + let panChild = stack([], { + layoutConfig: layoutConfig().just().configAlignment(Gravity.Center), + width: 100, + height: 100, + backgroundColor: Color.WHITE, + }) + + let rotateChild = stack([], { + layoutConfig: layoutConfig().just().configAlignment(Gravity.Center), + width: 100, + height: 100, + backgroundColor: Color.WHITE, + }) + + scroller( + vlayout([ + vlayout([ + text({ + text: "SingleTap, DoubleTap, LongPress Demo", + layoutConfig: layoutConfig().mostWidth(), + textSize: 20, + textColor: Color.WHITE, + backgroundColor: colors[5], + textAlignment: gravity().center(), + height: 50, + }), + gestureContainer([], { + onSingleTap: () => { + modal(context).toast("onSingleTap") + }, + onDoubleTap: () => { + modal(context).toast("onDoubleTap") + }, + onLongPress: () => { + modal(context).toast("onLongPress") + } + }).apply({ + layoutConfig: layoutConfig().just().configAlignment(Gravity.Center), + width: 300, + height: 300, + backgroundColor: Color.BLACK + }), + ]).apply({ + layoutConfig: layoutConfig().mostWidth().fitHeight() + }), + + + vlayout([ + text({ + text: "Pinch Demo", + layoutConfig: layoutConfig().mostWidth(), + textSize: 30, + textColor: Color.WHITE, + backgroundColor: colors[5], + textAlignment: gravity().center(), + height: 50, + }), + gestureContainer([ + pinchChild + ], { + onPinch: (scale: number) => { + pinchChild.width = 100 * scale + pinchChild.height = 100 * scale + }, + }).apply({ + layoutConfig: layoutConfig().just().configAlignment(Gravity.Center), + width: 300, + height: 300, + backgroundColor: Color.BLACK + }), + ]).apply({ + layoutConfig: layoutConfig().mostWidth().fitHeight() + }), + + + vlayout([ + text({ + text: "Pan Demo", + layoutConfig: layoutConfig().mostWidth(), + textSize: 30, + textColor: Color.WHITE, + backgroundColor: colors[5], + textAlignment: gravity().center(), + height: 50, + }), + gestureContainer([ + panChild + ], { + onPan: (dx: number, dy: number) => { + panChild.x -= dx + panChild.y -= dy + }, + }).apply({ + layoutConfig: layoutConfig().just().configAlignment(Gravity.Center), + width: 300, + height: 300, + backgroundColor: Color.BLACK + }), + ]).apply({ + layoutConfig: layoutConfig().mostWidth().fitHeight() + }), + + + vlayout([ + text({ + text: "Rotate Demo", + layoutConfig: layoutConfig().mostWidth(), + textSize: 30, + textColor: Color.WHITE, + backgroundColor: colors[5], + textAlignment: gravity().center(), + height: 50, + }), + gestureContainer([ + rotateChild + ], { + onRotate: (dAngle: number) => { + if (rotateChild.rotation == null) { + rotateChild.rotation = 0 + } + rotateChild.rotation += dAngle + } + }).apply({ + layoutConfig: layoutConfig().just().configAlignment(Gravity.Center), + width: 300, + height: 300, + backgroundColor: Color.BLACK + }) + ]).apply({ + layoutConfig: layoutConfig().mostWidth().fitHeight() + }), + + + vlayout([ + text({ + text: "Swipe Demo", + layoutConfig: layoutConfig().mostWidth(), + textSize: 30, + textColor: Color.WHITE, + backgroundColor: colors[5], + textAlignment: gravity().center(), + height: 50, + }), + gestureContainer([ + ], { + onSwipe: (orientation) => { + if (orientation == SwipeOrientation.LEFT) { + modal(context).toast("onSwipeLeft") + } else if (orientation == SwipeOrientation.RIGHT) { + modal(context).toast("onSwipeRight") + } else if (orientation == SwipeOrientation.TOP) { + modal(context).toast("onSwipeTop") + } else if (orientation == SwipeOrientation.BOTTOM) { + modal(context).toast("onSwipeBottom") + } + } + }).apply({ + layoutConfig: layoutConfig().just().configAlignment(Gravity.Center), + width: 300, + height: 300, + backgroundColor: Color.BLACK + }) + ]).apply({ + layoutConfig: layoutConfig().mostWidth().fitHeight() + }), + ], { + space: 50, + layoutConfig: layoutConfig().mostWidth().fitHeight(), + gravity: gravity().centerX() + }), { layoutConfig: layoutConfig().most(), } + ).in(rootView) + } +} \ No newline at end of file