cax-svg - event test

packages/cax-svg/cax/svg/parse-event.js

@@ -0,0 +1,23 @@
+export function parseEvent(props, obj) {
+  const tapHandler = props.bindtap || props.bindTap || props.onTap || props.ontap || props.onclick || props.onClick || props.bindclick || props.bindClick
+  if (tapHandler) {
+
+    let _x = null,
+      _y = null
+
+    obj.on('touchstart', (evt) => {
+      _x = evt.stageX
+      _y = evt.stageY
+    })
+
+    obj.on('touchend', (evt) => {
+      if (_x !== null) {
+        console.log(Math.abs(evt.stageX - _x))
+        console.log(Math.abs(evt.stageY - _y))
+        if (Math.abs(evt.stageX - _x) < 20 && Math.abs(evt.stageY - _y) < 20) {
+          tapHandler(evt)
+        }
+      }
+    })
+  }
+}

packages/cax-svg/cax/svg/rect.js

@@ -1,6 +1,7 @@
 import Rect from '../render/display/shape/rect'
 import { parseStyle } from './parse-style'
 import { transform } from './parse-transform'
+import { parseEvent } from './parse-event'
 
 export function rect(props) {
 
@@ -16,7 +17,8 @@ export function rect(props) {
   rect.y = Number(options.y)
 
   transform(props, rect)
-
+  parseEvent(props, rect)
+  
   return rect
 
 }

packages/cax-svg/pages/index/index.js

@@ -7,9 +7,13 @@ Page({
 
 
 
+    function tapHandler(){
+        console.log('tapHandler')
+    }
+
     const rect = new SVG(html`
     <svg>
-      <rect x="10" y="10" height="100" width="100"
+      <rect x="10" y="10" onclick=${tapHandler} height="100" width="100"
             style="stroke:#ff0000; fill: #0000ff"/>
     </svg>`)