docs: add option document and demo sample code (#200)

* docs: add options page

* docs: add sample codes to demo

* docs: unuse wheelinput when there is no option

* docs: add svelte sample codes

* docs: add vue sample codes

package.json

@@ -57,8 +57,12 @@
       "**/karma/**",
       "**/karma-*",
       "**/karma-*/**",
-      "**/@tyoes/chai",
-      "**/@tyoes/chai/**",
+      "**/lite-fixture",
+      "**/lite-fixture/**",
+      "**/hammer-simulator",
+      "**/hammer-simulator/**",
+      "**/@types/chai",
+      "**/@types/chai/**",
       "**/@types/karma-chai",
       "**/@types/karma-chai/**",
       "**/@types/mocha",

packages/axes/src/Axes.ts

@@ -43,7 +43,7 @@ export interface AxesOption {
 /**
  * @typedef {Object} AxisOption The Axis information. The key of the axis specifies the name to use as the logical virtual coordinate system.
  * @ko 축 정보. 축의 키는 논리적인 가상 좌표계로 사용할 이름을 지정한다.
- * @param {Number[]} [range] The coordinate of range <ko>좌표 범위</ko>
+ * @param {Number[]} [range] The range of coordinate <ko>좌표 범위</ko>
  * @param {Number} [range[0]=0] The coordinate of the minimum <ko>최소 좌표</ko>
  * @param {Number} [range[1]=0] The coordinate of the maximum <ko>최대 좌표</ko>
  * @param {Number} [startPos=range[0]] The coordinates to be moved when creating an instance <ko>인스턴스 생성시 이동할 좌표</ko>

packages/demo/docs/codes/Axes/html.txt

@@ -0,0 +1,10 @@
+<div>
+  <p>You can change the value of the axis and apply it to the UI via the touch screen, mouse, or various other inputs.</p>
+  <div id="delegateTarget">
+    <div id="uiWrapper">
+      <div class="ui">
+        <img src="../image/axes/logo.svg"/>
+      </div>
+    </div>
+  </div>
+</div>

packages/demo/docs/codes/Axes/js.txt

@@ -0,0 +1,44 @@
+const SUPPORT_TOUCH = "ontouchstart" in window;
+const delegateTarget = document.getElementById("delegateTarget");
+const uiWrapper = document.getElementById("uiWrapper");
+const uiWidth = uiWrapper.getBoundingClientRect().width;
+const uiHeight = uiWrapper.getBoundingClientRect().height;
+const ui = uiWrapper.querySelector(".ui");
+
+// 1. Initialize eg.Axes
+const axes = new eg.Axes({
+  panX: {
+    range: [0, uiWidth],
+    bounce: 20
+  },
+  panY: {
+    range: [0, uiHeight],
+    bounce: 20
+  },
+  zoom: {
+    range: [1, 5],
+    bounce: 1
+  }
+}, {
+  minimumDuration: 300
+});
+
+// 2. attach event handler
+axes.on({
+  "change": function (e) {
+    var pos = e.pos;
+    ui.style[eg.Axes.TRANSFORM] =
+      `translate3d(${pos.panX}px, ${pos.panY}px, 0) scale(${pos.zoom})`;
+  },
+});
+
+// 3. Initialize inputTypes and connect it
+axes.connect("panX panY", new eg.Axes.PanInput(delegateTarget))
+axes.connect("panX panY", new eg.Axes.MoveKeyInput(delegateTarget, {
+  scale: [5, -5]
+})).connect("zoom", SUPPORT_TOUCH ?
+  new eg.Axes.PinchInput(delegateTarget) :
+  new eg.Axes.WheelInput(delegateTarget));
+
+// 4. move to position
+axes.setTo({panX: uiWidth/2 + 20, panY: uiHeight/2});

packages/demo/docs/codes/Axes/react.txt

@@ -0,0 +1,66 @@
+import React, { useEffect } from "react";
+
+import { useAxes, PanInput, PinchInput, MoveKeyInput, WheelInput } from "@egjs/react-axes";
+import Icon from "../../../static/img/demos/axes/logo.svg";
+import "../../css/demos/axes.css";
+
+export default function AxesDemo() {
+  const { connect, setAxis, setTo, panX, panY, zoom } = useAxes(
+    {
+      panX: {
+        range: [0, 0],
+        bounce: 20,
+      },
+      panY: {
+        range: [0, 0],
+        bounce: 20,
+      },
+      zoom: {
+        range: [1, 5],
+        bounce: 1,
+      },
+    },
+    {
+      minimumDuration: 300,
+    }
+  );
+
+  useEffect(() => {
+    const SUPPORT_TOUCH = "ontouchstart" in window;
+    const delegateTarget = document.getElementById("delegateTarget");
+    const uiWrapper = document.getElementById("uiWrapper");
+    const uiWidth = uiWrapper.getBoundingClientRect().width;
+    const uiHeight = uiWrapper.getBoundingClientRect().height;
+
+    setAxis({
+      panX: {
+        range: [0, uiWidth],
+      },
+      panY: {
+        range: [0, uiHeight],
+      },
+    });
+    connect("panX panY", new PanInput(delegateTarget));
+    connect("panX panY", new MoveKeyInput(delegateTarget, { scale: [5, -5] }));
+    connect("zoom", SUPPORT_TOUCH ? new PinchInput(delegateTarget) : new WheelInput(delegateTarget));
+
+    setTo({ panX: uiWidth / 2, panY: uiHeight / 2 });
+  }, []);
+
+  return (
+    <div>
+      <p>
+        You can change the value of the axis and apply it to the UI via the
+        touch screen, mouse, or various other inputs.
+      </p>
+      <div id="delegateTarget">
+        <div id="uiWrapper">
+          <div className="ui" style={{ transform: `translate3d(${panX}px, ${panY}px, 0) scale(${zoom})` }}>
+            <Icon style={{ height: "75px" }} />
+          </div>
+        </div>
+      </div>
+      <div style={{ clear: "both" }}></div>
+    </div>
+  );
+};

packages/demo/docs/codes/Axes/svelte.txt

@@ -0,0 +1,61 @@
+<script>
+  import { onMount } from "svelte";
+  import { useAxes, PanInput, PinchInput, MoveKeyInput, WheelInput } from "@egjs/svelte-axes";
+
+  const { connect, setAxis, setTo, panX, panY, zoom } = useAxes(
+    {
+      panX: {
+        range: [0, 0],
+        bounce: 20,
+      },
+      panY: {
+        range: [0, 0],
+        bounce: 20,
+      },
+      zoom: {
+        range: [1, 5],
+        bounce: 1,
+      },
+    },
+    {
+      minimumDuration: 300,
+    }
+  );
+
+  onMount(() => {
+    const SUPPORT_TOUCH = "ontouchstart" in window;
+    const delegateTarget = document.getElementById("delegateTarget");
+    const uiWrapper = document.getElementById("uiWrapper");
+    const uiWidth = uiWrapper.getBoundingClientRect().width;
+    const uiHeight = uiWrapper.getBoundingClientRect().height;
+
+    setAxis({
+      panX: {
+        range: [0, uiWidth],
+      },
+      panY: {
+        range: [0, uiHeight],
+      },
+    });
+    connect("panX panY", new PanInput(delegateTarget));
+    connect("panX panY", new MoveKeyInput(delegateTarget, { scale: [5, -5] }));
+    connect("zoom", SUPPORT_TOUCH ? new PinchInput(delegateTarget) : new WheelInput(delegateTarget));
+
+    setTo({ panX: uiWidth / 2, panY: uiHeight / 2 });
+  });
+</script>
+
+<div>
+  <p>
+    You can change the value of the axis and apply it to the UI via the
+    touch screen, mouse, or various other inputs.
+  </p>
+  <div id="delegateTarget">
+    <div id="uiWrapper">
+      <div class="ui" style="transform: `translate3d(${panX}px, ${panY}px, 0) scale(${zoom})`">
+        <img src="../image/axes/logo.svg"/>
+      </div>
+    </div>
+  </div>
+  <div style="clear: 'both'"></div>
+</div>

packages/demo/docs/codes/Axes/vue.txt

@@ -0,0 +1,74 @@
+<template>
+  <div class="App">
+    <p>
+      You can change the value of the axis and apply it to the UI via the
+      touch screen, mouse, or various other inputs.
+    </p>
+    <div id="delegateTarget">
+      <div id="uiWrapper">
+        <div class="ui" :style="{transform: `translate3d(${panX}px, ${panY}px, 0) scale(${zoom})`}">
+          <img :src="`${require('../../../static/img/demos/axes/logo.svg')}`"/>
+        </div>
+      </div>
+    </div>
+    <div style="clear: 'both'"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useAxes, PanInput, PinchInput, MoveKeyInput, WheelInput } from "@egjs/vue-axes";
+
+export default defineComponent({
+  name: "App",
+  setup() {
+    const { connect, setAxis, setTo, panX, panY, zoom } = useAxes(
+      {
+        panX: {
+          range: [0, 0],
+          bounce: 20,
+        },
+        panY: {
+          range: [0, 0],
+          bounce: 20,
+        },
+        zoom: {
+          range: [1, 5],
+          bounce: 1,
+        },
+      },
+      {
+        minimumDuration: 300,
+      }
+    );
+
+    onMounted(() => {
+      const SUPPORT_TOUCH = "ontouchstart" in window;
+      const delegateTarget = document.getElementById("delegateTarget");
+      const uiWrapper = document.getElementById("uiWrapper");
+      const uiWidth = uiWrapper.getBoundingClientRect().width;
+      const uiHeight = uiWrapper.getBoundingClientRect().height;
+
+      setAxis({
+        panX: {
+          range: [0, uiWidth],
+        },
+        panY: {
+          range: [0, uiHeight],
+        },
+      });
+      connect("panX panY", new PanInput(delegateTarget));
+      connect("panX panY", new MoveKeyInput(delegateTarget, { scale: [5, -5] }));
+      connect("zoom", SUPPORT_TOUCH ? new PinchInput(delegateTarget) : new WheelInput(delegateTarget));
+
+      setTo({ panX: uiWidth / 2, panY: uiHeight / 2 });
+    });
+
+    return {
+      panX,
+      panY,
+      zoom,
+    };
+  },
+});
+</script>

packages/demo/docs/codes/Car360viewer/html.txt

@@ -0,0 +1,46 @@
+<div>
+  <p>You can create a viewer that can rotate 360 ​​degrees using one axis.</p>
+  <div class="car_spot">
+    <div class="car_rotate">
+      <div class="img_cont" style="position:relative;z-index:10">
+        <img height="150" src="./../image/car360/beatle (1).png">
+        <img height="150" src="./../image/car360/beatle (2).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (3).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (4).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (5).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (6).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (7).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (8).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (9).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (10).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (11).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (12).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (13).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (14).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (15).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (16).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (17).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (18).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (19).png" style="display:none;">
+        <img height="150" src="./../image/car360/beatle (20).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (21).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (22).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (23).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (24).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (25).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (26).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (27).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (28).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (29).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (30).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (31).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (32).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (33).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (34).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (35).png" style="display:none">
+        <img height="150" src="./../image/car360/beatle (36).png" style="display:none">
+      </div>
+      <div class="ratate_bg"></div>
+    </div>
+  </div>
+</div>

packages/demo/docs/codes/Car360viewer/js.txt

@@ -0,0 +1,25 @@
+const images = Array.prototype.slice.call(document.querySelectorAll(
+  ".car_rotate img"));
+const imagesNum = images.length;
+const ape = 360 / imagesNum; // angle per each
+
+// 1. Initialize eg.Axes
+const axes = new eg.Axes({
+  angle: {
+    range: [0, 360],
+    circular: true
+  }
+}, {
+  deceleration: 0.01
+});
+
+// 2. attach event handler
+axes.on("change", ({pos}) => {
+  const index = Math.min(Math.round(pos.angle % 360 / ape), imagesNum - 1);
+  images.map((v, i) => {
+    v.style.display = i === index ? "inline-block" : "none";
+  });
+});
+
+// 3. Initialize a inputType and connect it
+axes.connect("angle", new eg.Axes.PanInput(".car_rotate"));

packages/demo/docs/codes/Car360viewer/svelte.txt

@@ -0,0 +1,35 @@
+<script>
+  import { onMount } from "svelte";
+  import { useAxes, PanInput } from "@egjs/svelte-axes";
+
+  const images = Array.from({length: 36}, (_, i) => i + 1);
+  const { connect, angle } = useAxes(
+    {
+      angle: {
+        range: [0, 360],
+        circular: true,
+      }
+    },
+    {
+      deceleration: 0.01,
+    },
+  );
+
+  onMount(() => {
+    connect("angle", new PanInput(".car_rotate"));
+  });
+</script>
+
+<div>
+  <p>You can create a viewer that can rotate 360 ​​degrees using one axis.</p>
+  <div class="car_spot">
+    <div class="car_rotate">
+      <div class="img_cont" style="position: 'relative', zIndex: 10">
+        {#each images as i}
+          <img height="150" src="./../image/car360/beatle ({i}).png" style="display: {Math.floor(($angle % 360) / 10 + 1) === i ? 'inline-block' : 'none'}">
+        {/each}
+      </div>
+      <div class="ratate_bg"></div>
+    </div>
+  </div>
+</div>