omip-svg - fix rendering error

packages/cax-svg-omip/src/components/cax-element/index.js

@@ -1,4 +1,4 @@
-import cax from './index'
+import cax from './cax'
 import { define, WeElement } from 'omi'
 import './index.css'
 
@@ -17,29 +17,29 @@ define('cax-element', class extends WeElement {
     return this.data.id
   }
 
-  touchStart(evt) {
-    this.stage.touchStartHandler(evt)
-    this.stage.touchStart && this.stage.touchStart(evt)
+  touchStart = (evt) => {
+    this.$scope.stage.touchStartHandler(evt)
+    this.$scope.stage.touchStart && this.$scope.stage.touchStart(evt)
   }
 
-  touchMove(evt) {
-    this.stage.touchMoveHandler(evt)
-    this.stage.touchMove && this.stage.touchMove(evt)
+  touchMove= (evt) => {
+    this.$scope.stage.touchMoveHandler(evt)
+    this.$scope.stage.touchMove && this.$scope.stage.touchMove(evt)
   }
 
-  touchEnd(evt) {
-    this.stage.touchEndHandler(evt)
-    this.stage.touchEnd && this.stage.touchEnd(evt)
+  touchEnd= (evt) => {
+    this.$scope.stage.touchEndHandler(evt)
+    this.$scope.stage.touchEnd && this.$scope.stage.touchEnd(evt)
   }
 
   render(){
     return <canvas 
     class="cax-canvas"
-    bindtouchstart="touchStart" 
-    bindtouchmove="touchMove" 
-    bindtouchend="touchEnd" 
-    canvas-id="{{ id }}" 
-    style="border-top: 1px solid;border-bottom: 1px solid;width: {{width}}px; height: {{height}}px;">
+    bindtouchstart={this.touchStart} 
+    bindtouchmove={this.touchMove}
+    bindtouchend={this.touchEnd} 
+    canvas-id={id}
+    style="width: {{width}}px; height: {{height}}px;">
     <slot></slot>
 </canvas>
   }

packages/cax-svg-omip/src/components/cax-element/render/display/we-stage.js

@@ -13,7 +13,7 @@ class WeStage extends Group {
       height
     })
     component.stage = this
-    const canvasId = component.getCaxCanvasId()
+    const canvasId = component.data.id
 
     const ctx = wx.createCanvasContext(canvasId, component)
     const hitCtx = wx.createCanvasContext(canvasId + 'Hit', component)

packages/cax-svg-omip/src/components/cax-element/svg.js

@@ -1,15 +1,15 @@
 import cax, { html, SVG } from './cax'
 
-function svg(vdom, canvas, scope) {
+function renderSVG(vdom, canvas, scope) {
   const stage = new cax.Stage(vdom.props.width, vdom.props.height, canvas, scope)
   const svg = new SVG(vdom)
   stage.add(svg)
   stage.update()
 
-  return { svg, stage }
+  return { renderSVG, stage }
 }
 
 export {
-  svg,
+  renderSVG,
   html
 }

packages/cax-svg-omip/src/libs/omip/h.js

@@ -1,52 +1,4 @@
-import { mapping } from './mapping'
 
-function VNode() { }
-
-const stack = []
-const EMPTY_CHILDREN = []
-
-export function h(nodeName, attributes) {
-  let children = EMPTY_CHILDREN,
-    lastSimple,
-    child,
-    simple,
-    i
-  for (i = arguments.length; i-- > 2;) {
-    stack.push(arguments[i])
-  }
-  if (attributes && attributes.children != null) {
-    if (!stack.length) stack.push(attributes.children)
-    delete attributes.children
-  }
-  while (stack.length) {
-    if ((child = stack.pop()) && child.pop !== undefined) {
-      for (i = child.length; i--;) stack.push(child[i])
-    } else {
-      if (typeof child === 'boolean') child = null
-
-      if ((simple = typeof nodeName !== 'function')) {
-        if (child == null) child = ''
-        else if (typeof child === 'number') child = String(child)
-        else if (typeof child !== 'string') simple = false
-      }
-
-      if (simple && lastSimple) {
-        children[children.length - 1] += child
-      } else if (children === EMPTY_CHILDREN) {
-        children = [child]
-      } else {
-        children.push(child)
-      }
-
-      lastSimple = simple
-    }
-  }
-
-  let p = new VNode()
-  p.nodeName = mapping[nodeName]
-  p.children = children
-  p.attributes = attributes == null ? undefined : attributes
-  p.key = attributes == null ? undefined : attributes.key
-
-  return p
+export function h(type, props, ...children) {
+  return { type, props, children };
 }

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

@@ -1,14 +1,13 @@
 
 import { WeElement, define } from 'omi'
 import './index.css'
-import Page from '../../decorator/Page'
 import '../../components/cax-element'
+import { renderSVG } from '../../components/cax-element/svg'
 
 //获取应用实例
 const app = getApp()
 
-@Page()
-class PageIndex extends WeElement {
+define('page-index', class extends WeElement {
   config = {
     // 定义需要引入的第三方组件
     usingComponents: {
@@ -60,6 +59,19 @@ class PageIndex extends WeElement {
         }
       })
     }
+
+    renderSVG(
+  <svg width="200" height="200">
+    <g x="-50" y='-50'>
+      <path onclick={this.tapHandler} width="100" height="100" d="M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"  style="stroke:#ff0000; fill: #ff0000"/>
+    </g>
+  </svg>, 'myCanvas', this.$scope)
+
+  }
+
+  tapHandler = ()=>{
+    console.log(this)
+    console.log(123)
   }
 
   getUserInfo = (e) => {
@@ -74,7 +86,7 @@ class PageIndex extends WeElement {
     const { hasUserInfo, canIUse, userInfo, motto } = this.data
     return (
       <view class="container">
-        <cax-element></cax-element>
+        <cax-element id="myCanvas"></cax-element>
         <view class="userinfo">
           {(!hasUserInfo && canIUse) ? (
             <button open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
@@ -97,4 +109,4 @@ class PageIndex extends WeElement {
       </view>
     )
   }
-}
+})

packages/cax-svg/cax/render/display/we-stage.js

@@ -13,7 +13,7 @@ class WeStage extends Group {
       height
     })
     component.stage = this
-    const canvasId = component.getCaxCanvasId()
+    const canvasId = component.data.id
 
     const ctx = wx.createCanvasContext(canvasId, component)
     const hitCtx = wx.createCanvasContext(canvasId + 'Hit', component)

packages/cax-svg/cax/svg.js

@@ -1,6 +1,6 @@
 import cax, { html, SVG } from './cax'
 
-function svg(vdom, canvas, scope) {
+function renderSVG(vdom, canvas, scope) {
   const stage = new cax.Stage(vdom.props.width, vdom.props.height, canvas, scope)
   const svg = new SVG(vdom)
   stage.add(svg)
@@ -10,6 +10,6 @@ function svg(vdom, canvas, scope) {
 }
 
 export {
-  svg,
+  renderSVG,
   html
 }

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

@@ -1,9 +1,9 @@
-import { html, svg } from '../../cax/svg'
+import { html, renderSVG } from '../../cax/svg'
 
 Page({
   onLoad: function (options) {
 
-    svg(html`
+    renderSVG(html`
     <svg width="200" height="200">
       <g x="-50" y='-50'>
         <path onclick=${this.tapHandler} width="100" height="100" d="M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"  style="stroke:#ff0000; fill: #ff0000"/>