feat: add vue3-view360 and svelte-view360

* feat: add vue3-view360

* feat: add svelte-view360

* refactor: commonize vue utils

.eslintrc.js

@@ -342,7 +342,7 @@ module.exports = {
       "error",
       "never"
     ],
-    "prefer-arrow/prefer-arrow-functions": "error",
+    "prefer-arrow/prefer-arrow-functions": "off",
     "prefer-const": "error",
     "quote-props": "off",
     "radix": "error",

packages/ngx-view360/projects/ngx-view360/package.json

@@ -7,7 +7,7 @@
     "@angular/core": ">=10.0.0"
   },
   "dependencies": {
-    "@egjs/view360": "~3.6.1"
+    "@egjs/view360": "^3.6.1"
   },
   "devDependencies": {
     "@angular/common": "~10.0.0",

packages/react-view360/package.json

@@ -15,7 +15,7 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
-    "@egjs/view360": "~3.6.1"
+    "@egjs/view360": "^3.6.1"
   },
   "peerDependencies": {
     "react": ">=16.0.0"

packages/svelte-view360/.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store

packages/svelte-view360/.npmignore

@@ -0,0 +1,9 @@
+node_modules/
+demo/
+public/
+
+.eslintcache
+.env
+rollup.config.js
+rollup.config.build.js
+tsconfig.json

packages/svelte-view360/README.md

@@ -0,0 +1,91 @@
+<h1 align=center>
+  @egjs/svelte-view360
+</h1>
+
+<p align=center>
+  <a href="https://www.npmjs.com/package/@egjs/svelte-view360" target="_blank">
+    <img src="https://img.shields.io/npm/v/@egjs/svelte-view360.svg?style=flat-square&color=00d8ff&label=version&logo=NPM">
+  </a>
+  <a href="https://www.npmjs.com/package/@egjs/svelte-view360" target="_blank">
+    <img alt="npm bundle size (scoped)" src="https://img.shields.io/bundlephobia/minzip/@egjs/svelte-view360.svg?style=flat-square&label=%F0%9F%92%BE%20gzipped&color=007acc">
+  </a>
+  <a href="https://github.com/naver/egjs-view360/graphs/commit-activity">
+    <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/naver/egjs-view360.svg?style=flat-square&label=%E2%AC%86%20commits&color=08CE5D">
+  </a>
+  <a href="https://www.npmjs.com/package/@egjs/svelte-view360" target="_blank">
+    <img src="https://img.shields.io/npm/dm/@egjs/svelte-view360.svg?style=flat-square&label=%E2%AC%87%20downloads&color=08CE5D" alt="npm downloads per month">
+  </a>
+  <a href="https://github.com/naver/egjs-view360/graphs/contributors" target="_blank">
+    <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/naver/egjs-view360.svg?label=%F0%9F%91%A5%20contributors&style=flat-square&color=08CE5D"></a>
+  <a href="https://github.com/naver/egjs-view360/blob/master/LICENSE" target="_blank">
+    <img alt="GitHub" src="https://img.shields.io/github/license/naver/egjs-view360.svg?style=flat-square&label=%F0%9F%93%9C%20license&color=08CE5D">
+  </a>
+</p>
+
+<p align=center>
+  Svelte wrapper of <a href="https://github.com/naver/egjs-view360">@egjs/view360</a>
+</p>
+
+<p align=center>
+  <a href="https://naver.github.io/egjs-view360/">Demo</a> / <a href="https://naver.github.io/egjs-view360/release/latest/doc/">Documentation</a> / <a href="https://naver.github.io/egjs/">Other components</a>
+</p>
+
+## ⚙️ Installation
+```sh
+npm install --save @egjs/svelte-view360
+```
+
+## 🏃 Quick Start
+```js
+import { PanoViewer, SpinViewer } from "@egjs/svelte-view360";
+
+<PanoViewer
+  tag="div"
+  image="PATH_TO_YOUR_PANORAMA_IMAGE"
+  on:viewChange={e => {
+    // Event properties are placed in "detail"
+    console.log(e.detail);
+  }}
+/>
+<SpinViewer
+  tag="div"
+  imageUrl="PATH_TO_YOUR_PANORAMA_IMAGE"
+  rowCount={42}
+  scale={1}
+/>
+```
+
+## 🙌 Contributing
+See [CONTRIBUTING.md](https://github.com/naver/egjs-view360/blob/master/CONTRIBUTING.md).
+
+## 📝 Feedback
+Please file an [Issue](https://github.com/naver/egjs-view360/issues)
+
+## 📜 License
+egjs-view360 is released under the [MIT license](http://naver.github.io/egjs/license.txt).
+
+```
+Copyright (c) 2017-present NAVER Corp.
+
+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.
+```
+
+<p align=center>
+  <a href="https://naver.github.io/egjs/"><img height="50" src="https://naver.github.io/egjs/img/logotype1_black.svg" ></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/naver"><img height="50" src="https://naver.github.io/OpenSourceGuide/book/assets/naver_logo.png" /></a>
+</p>

packages/svelte-view360/demo/App.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { Router, Link, Route } from "svelte-routing";
+  import Rerender from "./pano/Rerender.svelte";
+  import Video from "./pano/Video.svelte";
+  import Spin from "./spin/Spin.svelte";
+
+  export let url = "";
+</script>
+
+<Router url="{url}">
+  <nav class="is-size-4">
+    <div>
+      <span>PanoViewer:</span>
+      <Link to="rerender">Rerender</Link>
+      <Link to="video">Video</Link>
+    </div>
+    <div>
+      <span>SpinViewer:</span>
+      <Link to="spin">Spin</Link>
+    </div>
+  </nav>
+  <div>
+    <Route path="rerender" component={Rerender} />
+    <Route path="video" component={Video} />
+    <Route path="spin" component={Spin} />
+    <Route path="/"></Route>
+  </div>
+</Router>

packages/svelte-view360/demo/Empty.svelte

@@ -0,0 +1 @@
+<div></div>

packages/svelte-view360/demo/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="svelte" />

packages/svelte-view360/demo/main.ts

@@ -0,0 +1,7 @@
+import App from "./App.svelte";
+
+const app = new App({
+  target: document.querySelector("#app")
+});
+
+export default app;

packages/svelte-view360/demo/pano/Rerender.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+import { PanoViewer } from "../../src";
+
+let counter = 0;
+let image = 1;
+let pano: PanoViewer;
+
+$: src = `https://naver.github.io/egjs-view360/examples/panoviewer/etc/img/bookcube${image}.jpg`;
+
+function rerender() {
+  counter += 1;
+}
+function toggleImage() {
+  image = image === 1 ? 2 : 1;
+}
+function fullscreen() {
+  pano.getElement().requestFullscreen();
+}
+</script>
+
+<button on:click={rerender}>Force Rerender</button>
+<button on:click={toggleImage}>Change Image</button>
+<button on:click={fullscreen}>Fullscreen</button>
+<PanoViewer
+  class="viewer"
+  bind:this={pano}
+  image={src}
+  useZoom={false}
+  projectionType="cubemap"
+  cubemapConfig={{ tileConfig: { flipHorizontal: true, rotation: 0 } }}
+  canvasClass="some-other-canvas"
+/>
+<span>{counter}</span>

packages/svelte-view360/demo/pano/Video.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import PanoViewer from "../../src/PanoViewer";
+
+  let pano: PanoViewer;
+  let overlay = true;
+  let children = [0, 1, 2, 3, 4];
+
+  function addChild() {
+    const last = children[children.length - 1];
+    children = [...children, last + 1, last + 2];
+  }
+
+  function play() {
+    pano.getVideo().play();
+
+    overlay = false;
+  }
+</script>
+
+<button on:click={addChild}>Increase Children</button>
+<PanoViewer
+  class="viewer"
+  bind:this={pano}
+  video="https://naver.github.io/egjs-view360/examples/img/equi.mp4"
+>
+  <div class="overlay" on:click={play} class:hidden={ !overlay }>
+    Click to play
+  </div>
+  {#each children as item, index}
+    <li>{index + 1}: {item}</li>
+  {/each}
+</PanoViewer>

packages/svelte-view360/demo/spin/Spin.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+let viewer: SpinViewer;
+let scale = 1;
+
+function spin() {
+  viewer.spinBy(720, { duration: 500 });
+}
+
+function changeScale() {
+  scale = scale === 1 ? 5 : 1;
+}
+</script>
+<SpinViewer
+  id="spin"
+  bind:this={viewer}
+  imageUrl="https://naver.github.io/egjs-view360/common/img/spinviewer/spin_demo.jpg"
+  rowCount={47}
+  wrapperClass="im-wrapper"
+  imageClass="im-image"
+  scale={scale}
+/>
+<button on:click={spin}>spin</button>
+<button on:click={changeScale}>change scale</button>