HEAD:init project

.gitignore

@@ -0,0 +1,6 @@
+examples/*/bundle.js
+node_modules
+npm-debug.log
+test/tests.bundle.js
+.DS_Store
+.idea

.travis.yml

@@ -0,0 +1,8 @@
+language: node_js
+node_js:
+  - "6.11"
+script:
+- npm test
+sudo: required
+addons:
+  chrome: stable

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Anton Lavrenov
+
+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 @@
+# React-laya
+
+use react write laya game, most code copy from [react-konva](https://github.com/lavrton/react-konva)

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "react-laya",
+  "description": "React binding to canvas element via laya framework",
+  "version": "1.7.1",
+  "keywords": ["react", "canvas", "jsx", "laya"],
+  "bugs": "https://github.com/zsytssk/react-laya/issues",
+  "license": "MIT",
+  "licenses": "MIT",
+  "main": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:zsytssk/react-laya.git"
+  },
+  "dependencies": {
+    "fbjs": "^0.8.16",
+    "react-reconciler": "^0.7.0"
+  },
+  "peerDependencies": {
+    "react": "16.x",
+    "react-dom": "16.x"
+  },
+  "devDependencies": {
+    "chai": "^4.1.2",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "sinon": "^4.4.3",
+    "react": "16.x",
+    "react-dom": "16.x"
+  },
+  "typings": "react-laya.d.ts",
+  "files": ["README.md", "src", "react-laya.d.ts"]
+}

react-laya.d.ts

@@ -0,0 +1,118 @@
+import * as React from "react";
+
+export interface LayaNodeProps {
+  onMouseOver?(evt: any): void;
+  onMouseMove?(evt: any): void;
+  onMouseOut?(evt: any): void;
+  onMouseEnter?(evt: any): void;
+  onMouseLeave?(evt: any): void;
+  onMouseDown?(evt: any): void;
+  onMouseUp?(evt: any): void;
+  onWheel?(evt: any): void;
+  onClick?(evt: any): void;
+  onDblClick?(evt: any): void;
+  onTouchStart?(evt: any): void;
+  onTouchMove?(evt: any): void;
+  onTouchEnd?(evt: any): void;
+  onTap?(evt: any): void;
+  onDblTap?(evt: any): void;
+  onDragStart?(evt: any): void;
+  onDragMove?(evt: any): void;
+  onDragEnd?(evt: any): void;
+}
+
+export class LayaNodeComponent<
+  Node extends Laya.Node,
+  Props = Konva.NodeConfig
+> extends React.Component<Props & KonvaNodeProps> {
+  getPublicInstance(): Node;
+  getNativeNode(): Node;
+  // putEventListener(type: string, listener: Function): void;
+  // handleEvent(event: Event): void;
+}
+
+export class KonvaContainerComponent<
+  Container extends Konva.Container,
+  Props = Konva.ContainerConfig
+> extends React.Component<Props & KonvaNodeProps> {
+  // moveChild(prevChild, lastPlacedNode, nextIndex, lastIndex): void;
+  // createChild(child, afterNode, mountImage): void;
+  // removeChild(child, node): void;
+  // updateChildrenAtRoot(nextChildren, transaction): void;
+  // mountAndInjectChildrenAtRoot(children, transaction): void;
+  // updateChildren(nextChildren, transaction, context): void;
+  // mountAndInjectChildren(children, transaction, context): void;
+  // mountAndAddChildren(): void;
+}
+
+export interface StageProps
+  extends Konva.NodeConfig,
+    Pick<
+      React.HTMLProps<any>,
+      "className" | "role" | "style" | "tabIndex" | "title"
+    > {
+  onContentMouseOver?(evt: any): void;
+  onContentMouseMove?(evt: any): void;
+  onContentMouseOut?(evt: any): void;
+  onContentMouseDown?(evt: any): void;
+  onContentMouseUp?(evt: any): void;
+  onContentClick?(evt: any): void;
+  onContentDblClick?(evt: any): void;
+  onContentTouchStart?(evt: any): void;
+  onContentTouchMove?(evt: any): void;
+  onContentTouchEnd?(evt: any): void;
+  onContentTap?(evt: any): void;
+  onContentDblTap?(evt: any): void;
+  onContentWheel?(evt: any): void;
+}
+
+/** Stage */
+export class Stage extends KonvaContainerComponent<Konva.Stage, StageProps> {
+  getStage(): Konva.Stage;
+}
+
+/** Containers */
+export class Layer extends KonvaContainerComponent<
+  Konva.Layer,
+  Konva.LayerConfig
+> {}
+export class FastLayer extends KonvaContainerComponent<
+  Konva.FastLayer,
+  Konva.LayerConfig
+> {}
+export class Group extends KonvaContainerComponent<Konva.Group> {}
+export class Label extends KonvaContainerComponent<Konva.Label> {}
+
+/** Shapes */
+export class Rect extends KonvaNodeComponent<Konva.Rect, Konva.RectConfig> {}
+export class Circle extends KonvaNodeComponent<
+  Konva.Circle,
+  Konva.CircleConfig
+> {}
+export class Ellipse extends KonvaNodeComponent<
+  Konva.Ellipse,
+  Konva.EllipseConfig
+> {}
+export class Wedge extends KonvaNodeComponent<Konva.Wedge, Konva.WedgeConfig> {}
+export class Line extends KonvaNodeComponent<Konva.Line, Konva.LineConfig> {}
+export class Sprite extends KonvaNodeComponent<
+  Konva.Sprite,
+  Konva.SpriteConfig
+> {}
+export class Image extends KonvaNodeComponent<Konva.Image, Konva.ImageConfig> {}
+export class Text extends KonvaNodeComponent<Konva.Text, Konva.TextConfig> {}
+export class TextPath extends KonvaNodeComponent<
+  Konva.TextPath,
+  Konva.TextPathConfig
+> {}
+export class Star extends KonvaNodeComponent<Konva.Star, Konva.StarConfig> {}
+export class Ring extends KonvaNodeComponent<Konva.Ring, Konva.RingConfig> {}
+export class Arc extends KonvaNodeComponent<Konva.Arc, Konva.ArcConfig> {}
+export class Tag extends KonvaNodeComponent<Konva.Tag, Konva.TagConfig> {}
+export class Path extends KonvaNodeComponent<Konva.Path, Konva.PathConfig> {}
+export class RegularPolygon extends KonvaNodeComponent<
+  Konva.RegularPolygon,
+  Konva.RegularPolygonConfig
+> {}
+export class Arrow extends KonvaNodeComponent<Konva.Arrow, Konva.ArrowConfig> {}
+export class Shape extends KonvaNodeComponent<Konva.Shape, Konva.ShapeConfig> {}

src/ReactDOMComponentTree.js

@@ -0,0 +1,38 @@
+// from https://github.com/facebook/react/blob/87ae211ccd8d61796cfdef138d1e12fb7a74f85d/packages/shared/ReactTypeOfWork.js
+const HostComponent = 5;
+const HostText = 6;
+
+// adapted FROM: https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMComponentTree.js
+
+const randomKey = Math.random()
+  .toString(36)
+  .slice(2);
+const internalInstanceKey = '__reactInternalInstance$' + randomKey;
+
+/**
+ * Given a DOM node, return the closest ReactDOMComponent or
+ * ReactDOMTextComponent instance ancestor.
+ */
+export function getClosestInstanceFromNode(node) {
+  if (node[internalInstanceKey]) {
+    return node[internalInstanceKey];
+  }
+
+  while (!node[internalInstanceKey]) {
+    if (node.parentNode) {
+      node = node.parentNode;
+    } else {
+      // Top of the tree. This node must not be part of a React tree (or is
+      // unmounted, potentially).
+      return null;
+    }
+  }
+
+  let inst = node[internalInstanceKey];
+  if (inst.tag === HostComponent || inst.tag === HostText) {
+    // In Fiber, this will always be the deepest root.
+    return inst;
+  }
+
+  return null;
+}

src/ReactDOMFrameScheduling.js

@@ -0,0 +1,153 @@
+// adapted FROM: https://github.com/facebook/react/blob/3019210df2b486416ed94d7b9becffaf254e81c4/src/renderers/shared/ReactDOMFrameScheduling.js
+
+'use strict';
+
+// This is a built-in polyfill for requestIdleCallback. It works by scheduling
+// a requestAnimationFrame, storing the time for the start of the frame, then
+// scheduling a postMessage which gets scheduled after paint. Within the
+// postMessage handler do as much work as possible until time + frame rate.
+// By separating the idle call into a separate event tick we ensure that
+// layout, paint and other browser work is counted against the available time.
+// The frame rate is dynamically adjusted.
+
+var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
+
+const hasNativePerformanceNow =
+  typeof performance === 'object' && typeof performance.now === 'function';
+
+let now;
+if (hasNativePerformanceNow) {
+  now = function() {
+    return performance.now();
+  };
+} else {
+  now = function() {
+    return Date.now();
+  };
+}
+
+// TODO: There's no way to cancel, because Fiber doesn't atm.
+let rIC;
+
+if (!ExecutionEnvironment.canUseDOM) {
+  rIC = function(frameCallback) {
+    setTimeout(() => {
+      frameCallback({
+        timeRemaining() {
+          return Infinity;
+        }
+      });
+    });
+    return 0;
+  };
+} else if (typeof requestIdleCallback !== 'function') {
+  // Polyfill requestIdleCallback.
+
+  var scheduledRAFCallback = null;
+  var scheduledRICCallback = null;
+
+  var isIdleScheduled = false;
+  var isAnimationFrameScheduled = false;
+
+  var frameDeadline = 0;
+  // We start out assuming that we run at 30fps but then the heuristic tracking
+  // will adjust this value to a faster fps if we get more frequent animation
+  // frames.
+  var previousFrameTime = 33;
+  var activeFrameTime = 33;
+
+  var frameDeadlineObject;
+  if (hasNativePerformanceNow) {
+    frameDeadlineObject = {
+      timeRemaining() {
+        // We assume that if we have a performance timer that the rAF callback
+        // gets a performance timer value. Not sure if this is always true.
+        return frameDeadline - performance.now();
+      }
+    };
+  } else {
+    frameDeadlineObject = {
+      timeRemaining() {
+        // Fallback to Date.now()
+        return frameDeadline - Date.now();
+      }
+    };
+  }
+
+  // We use the postMessage trick to defer idle work until after the repaint.
+  var messageKey =
+    '__reactIdleCallback$' +
+    Math.random()
+      .toString(36)
+      .slice(2);
+  var idleTick = function(event) {
+    if (event.source !== window || event.data !== messageKey) {
+      return;
+    }
+    isIdleScheduled = false;
+    var callback = scheduledRICCallback;
+    scheduledRICCallback = null;
+    if (callback !== null) {
+      callback(frameDeadlineObject);
+    }
+  };
+  // Assumes that we have addEventListener in this environment. Might need
+  // something better for old IE.
+  window.addEventListener('message', idleTick, false);
+
+  var animationTick = function(rafTime) {
+    isAnimationFrameScheduled = false;
+    var nextFrameTime = rafTime - frameDeadline + activeFrameTime;
+    if (
+      nextFrameTime < activeFrameTime &&
+      previousFrameTime < activeFrameTime
+    ) {
+      if (nextFrameTime < 8) {
+        // Defensive coding. We don't support higher frame rates than 120hz.
+        // If we get lower than that, it is probably a bug.
+        nextFrameTime = 8;
+      }
+      // If one frame goes long, then the next one can be short to catch up.
+      // If two frames are short in a row, then that's an indication that we
+      // actually have a higher frame rate than what we're currently optimizing.
+      // We adjust our heuristic dynamically accordingly. For example, if we're
+      // running on 120hz display or 90hz VR display.
+      // Take the max of the two in case one of them was an anomaly due to
+      // missed frame deadlines.
+      activeFrameTime =
+        nextFrameTime < previousFrameTime ? previousFrameTime : nextFrameTime;
+    } else {
+      previousFrameTime = nextFrameTime;
+    }
+    frameDeadline = rafTime + activeFrameTime;
+    if (!isIdleScheduled) {
+      isIdleScheduled = true;
+      window.postMessage(messageKey, '*');
+    }
+    var callback = scheduledRAFCallback;
+    scheduledRAFCallback = null;
+    if (callback !== null) {
+      callback(rafTime);
+    }
+  };
+
+  rIC = function(callback) {
+    // This assumes that we only schedule one callback at a time because that's
+    // how Fiber uses it.
+    scheduledRICCallback = callback;
+    if (!isAnimationFrameScheduled) {
+      // If rAF didn't already schedule one, we need to schedule a frame.
+      // TODO: If this rAF doesn't materialize because the browser throttles, we
+      // might want to still have setTimeout trigger rIC as a backup to ensure
+      // that we keep performing work.
+      isAnimationFrameScheduled = true;
+      requestAnimationFrame(animationTick);
+    }
+    return 0;
+  };
+} else {
+  rIC = requestIdleCallback;
+}
+
+exports.now = now;
+exports.rIC = rIC;