Init

Author: dtysky

LICENCE

@@ -0,0 +1,22 @@
+
+MIT License
+
+Copyright (c) 2018-2019 SeinJS (https://github.com/SeinJS)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,3 @@
+# seinjs-my-tiny-program-component
+
+用于适配阿里小程序的组件，一般配合CLI创建模板使用，详见[Sein.js-扩展容器-阿里小程序](http://seinjs.com/cn/extension/containers/my-tiny-program)。

injectCanvas.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.injectCanvas = injectCanvas;
+exports.handleEvent = handleEvent;
+
+/**
+ * @File   : injectCanvas.js
+ * @Author :dtysky ([email protected])
+ * @Date   : 7/29/2019, 7:26:37 PM
+ * @Description:
+ */
+var LISTENERS = {
+  click: [],
+  touchstart: [],
+  touchend: [],
+  touchmove: [],
+  touchcancel: []
+};
+
+function clearListeners() {
+  Object.keys(LISTENERS).forEach(function (key) {
+    LISTENERS[key] = [];
+  });
+}
+
+function injectCanvas(canvas, options) {
+  clearListeners();
+  var dpi = options.dpi;
+  canvas.style = {};
+
+  canvas.getBoundingClientRect = function () {
+    var bound = {
+      x: 0,
+      y: 0,
+      width: canvas.width / dpi,
+      height: canvas.height / dpi,
+      left: 0,
+      right: canvas.width / dpi,
+      top: 0,
+      bottom: canvas.height / dpi
+    };
+    return bound;
+  };
+
+  canvas.addEventListener = function (type, listener) {
+    if (!LISTENERS[type]) {
+      return;
+    }
+
+    LISTENERS[type].push(listener);
+  };
+
+  canvas.removeEventListener = function (type, listener) {
+    if (!LISTENERS[type]) {
+      return;
+    }
+
+    var index = LISTENERS[type].indexOf(listener);
+
+    if (index >= 0) {
+      LISTENERS[type].splice(index, 1);
+    }
+  };
+
+  my.window.mainCanvas = canvas;
+  return canvas;
+}
+
+var noop = function noop() {};
+
+function convertTouch(touch) {
+  var x = touch.x,
+      y = touch.y,
+      identifier = touch.identifier;
+  return {
+    identifier: identifier,
+    x: x,
+    y: y,
+    clientX: x,
+    clientY: y,
+    pageX: x,
+    pageY: y,
+    screenX: x,
+    screenY: y
+  };
+}
+
+function convertEvent(event) {
+  var e = {
+    preventDefault: noop,
+    stopPropagation: noop,
+    target: event.target,
+    currentTarget: event.currentTarget
+  };
+
+  if (event.type === 'tap') {
+    var _event$detail = event.detail,
+        x = _event$detail.x,
+        y = _event$detail.y;
+    e.x = x;
+    e.y = y;
+    e.clientX = x;
+    e.clientY = y;
+    e.offsetX = x;
+    e.offsetY = y;
+    e.pageX = x;
+    e.pageY = y;
+    e.screenX = x;
+    e.screenY = y;
+  } else {
+    e.changedTouches = event.changedTouches.map(convertTouch);
+    e.touches = event.touches.map(convertTouch);
+  }
+
+  return e;
+}
+
+function handleEvent(type, event) {
+  if (!LISTENERS[type]) {
+    return;
+  }
+
+  var e = convertEvent(event);
+  LISTENERS[type].forEach(function (cb) {
+    return cb(e);
+  });
+}

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "seinjs-my-tiny-program-component",
+  "version": "0.8.4",
+  "description": "A ali tiny program component for using Sein.js.",
+  "main": "seinjs.js",
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:SeinJS/Sein.js.git"
+  },
+  "keywords": [
+    "Game engine",
+    "Sein.js",
+    "SeinJS",
+    "Tiny Program"
+  ],
+  "authors": [
+    {
+      "name": "Tianyu Dai (dtysky)",
+      "email": "[email protected]"
+    }
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "http://github.com/SeinJS/Sein.js/issues"
+  },
+  "files": [
+    "README.md",
+    "seinjs.js",
+    "seinjs.json",
+    "seinjs.acss",
+    "seinjs.axml",
+    "injectCanvas.js",
+    "LICENCE"
+  ],
+  "homepage": "http://github.com/SeinJS/Sein.js#readme",
+  "devDependencies": {},
+  "dependencies": {}
+}

seinjs.acss

@@ -0,0 +1,17 @@
+<view class="sein-container">
+  <canvas
+    disable-scroll
+    type="webgl"
+    id="canvas"
+    class="sein-canvas"
+    width="{{width*dpi}}"
+    height="{{height*dpi}}"
+    style="width:{{width}}px;height:{{height}}px;display:block;"
+    enableNative="{{enableNative}}"
+    onTouchStart="handleTouchStart"
+    onTouchEnd="handleTouchEnd"
+    onTouchMove="handleTouchMove"
+    onTouchCancel="handleTouchCancel"
+    onTap="handleClick"
+  />
+</view>

seinjs.axml

@@ -0,0 +1,67 @@
+"use strict";
+
+var _injectCanvas = require("./injectCanvas");
+
+/**
+ * @File   : index.js
+ * @Author :dtysky ([email protected])
+ * @Date   : 2019/7/25 上午11:06:59
+ * @Description:
+ */
+Component({
+  data: {
+    width: 0,
+    height: 0,
+    dpi: 2,
+    enableNative: true
+  },
+  props: {
+    width: 0,
+    height: 0,
+    onSeinCanvasCreated: function onSeinCanvasCreated(canvas) {}
+  },
+  canvas: null,
+  didMount: function didMount() {
+    var _this = this;
+
+    var _my$window = my.window,
+        h = _my$window.innerHeight,
+        w = _my$window.innerWidth,
+        dpi = _my$window.pixelRatio;
+    var data = {
+      width: this.props.width || (isNaN(w) ? parseInt(w) : w),
+      height: this.props.height || (isNaN(h) ? parseInt(h) : h),
+      dpi: isNaN(dpi) ? parseInt(dpi) : dpi
+    };
+    this.setData(data, function () {
+      my._createCanvas({
+        id: 'canvas',
+        // canvas dom id
+        success: function success(canvas) {
+          _this.canvas = (0, _injectCanvas.injectCanvas)(canvas, _this.data);
+
+          _this.props.onSeinCanvasCreated(_this.canvas);
+        }
+      });
+    });
+  },
+  didUpdate: function didUpdate() {},
+  didUnmount: function didUnmount() {},
+  methods: {
+    handleTouchStart: function handleTouchStart(event) {
+      (0, _injectCanvas.handleEvent)('touchstart', event);
+    },
+    handleTouchEnd: function handleTouchEnd(event) {
+      (0, _injectCanvas.handleEvent)('touchend', event);
+    },
+    handleTouchMove: function handleTouchMove(event) {
+      (0, _injectCanvas.handleEvent)('touchmove', event);
+    },
+    handleTouchCancel: function handleTouchCancel(event) {
+      (0, _injectCanvas.handleEvent)('touchcancel', event);
+    },
+    handleClick: function handleClick(event) {
+      (0, _injectCanvas.handleEvent)('click', event);
+    }
+  }
+});

seinjs.js

@@ -0,0 +1,3 @@
+{
+  "component": true
+}