Merge pull request #41 from yushiang-demo/refactor-yarn-workspace-pac…

…kages

Refactor: yarn workspace

CHANGELOG.md

@@ -11,6 +11,8 @@ The format is based on [Keep a Changelog](https://github.com/olivierlacan/keep-a
 
 ### Changed
 
+- Use yarn workspace for `three`, `js-base64` and `pako` packages. (https://github.com/yushiang-demo/PanoToMesh/pull/41)
+
 ### Fixed
 
 - Avoid creating backface plane and bbox. (https://github.com/yushiang-demo/PanoToMesh/pull/39)

apps/editors/decoration/index.js

@@ -12,7 +12,7 @@ import {
   ThreeCanvas,
   PanoramaProjectionMesh,
   MeshIndexMap,
-} from "../../../three";
+} from "@pano-to-mesh/three";
 import useClick2AddWalls from "../../../hooks/useClick2AddWalls";
 import useDragTransformation from "../../../hooks/useDragTransformation";
 import { useStoreDataToHash } from "../../../hooks/useHash";

apps/editors/layout2d.js

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from "react";
 
-import { Loaders, PanoramaOutline, ThreeCanvas } from "../../three";
+import { Loaders, PanoramaOutline, ThreeCanvas } from "@pano-to-mesh/three";
 import useClick2AddWalls from "../../hooks/useClick2AddWalls";
 import PageContainer from "../../components/PageContainer";
 import Input from "../../components/Input";

apps/editors/layout3d.js

@@ -1,6 +1,11 @@
 import React, { useMemo, useRef, useState } from "react";
 import ToolbarRnd from "../../components/ToolbarRnd";
-import { Loaders, ThreeCanvas, PanoramaTextureMesh, Core } from "../../three";
+import {
+  Loaders,
+  ThreeCanvas,
+  PanoramaTextureMesh,
+  Core,
+} from "@pano-to-mesh/three";
 import useClick2AddWalls from "../../hooks/useClick2AddWalls";
 import Icons from "../../components/Icon";
 import Toolbar from "../../components/Toolbar";

apps/viewer.js

@@ -1,6 +1,10 @@
 import React, { useRef, useMemo } from "react";
 
-import { Loaders, ThreeCanvas, PanoramaProjectionMesh } from "../three";
+import {
+  Loaders,
+  ThreeCanvas,
+  PanoramaProjectionMesh,
+} from "@pano-to-mesh/three";
 import useClick2AddWalls from "../hooks/useClick2AddWalls";
 import MediaManager from "../components/MediaManager";
 

components/MediaManager/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Css3DObject, Placeholder } from "../../three";
+import { Css3DObject, Placeholder } from "@pano-to-mesh/three";
 
 import RawHTML from "./RawHTML";
 import { MEDIA } from "../../constant/media";

hooks/useClick2AddWalls.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 
-import { Core } from "../three";
+import { Core } from "@pano-to-mesh/three";
 
 const pointSelector = (x, y, unitParser, threshold) => {
   return ([candidateX, candidateY]) => {

hooks/useDragTransformation.js

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { Core } from "../three";
+import { Core } from "@pano-to-mesh/three";
 
 const useDrag2AddPlane = ({ camera, raycasterTarget, onEnd }) => {
   const [startPoint, setStartPoint] = useState(null);

hooks/useHash.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { encodeString, decodeString } from "../helpers/pako";
+import { encodeString, decodeString } from "@pano-to-mesh/base64";
 
 export const useStoreDataToHash = (data) => {
   const [hash, setHash] = useState("");

package.json

@@ -1,21 +1,27 @@
 {
-  "name": "PanoToMesh",
-  "version": "0.1.0",
+  "name": "pano-to-mesh",
+  "version": "1.2.0",
+  "private": true,
+  "license": "MIT",
+  "workspaces": {
+    "packages": [
+      "packages/*"
+    ]
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "js-base64": "^3.7.5",
+    "@pano-to-mesh/three": "1.0.0",
+    "@pano-to-mesh/base64": "1.0.0",
     "next": "13.2.4",
-    "pako": "^2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-rnd": "^10.4.1",
     "styled-components": "^6.0.4",
-    "three": "^0.149.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {

packages/base64/index.js

@@ -0,0 +1,15 @@
+import { fromUint8Array, toUint8Array } from "js-base64";
+import { deflate, inflate } from "pako";
+
+export const encodeString = (text) => {
+  const data = new TextEncoder().encode(text);
+  const compressed = deflate(data, { level: 9 });
+  const uint8Array = fromUint8Array(compressed, true);
+  return encodeURIComponent(uint8Array);
+};
+
+export const decodeString = (text) => {
+  const decodedText = decodeURIComponent(text);
+  const data = toUint8Array(decodedText);
+  return inflate(data, { to: "string" });
+};

packages/base64/package.json

@@ -0,0 +1,8 @@
+{
+  "version": "1.0.0",
+  "name": "@pano-to-mesh/base64",
+  "dependencies": {
+    "js-base64": "^3.7.5",
+    "pako": "^2.1.0"
+  }
+}

three/core/index.js → packages/three/core/index.js

@@ -1,5 +1,4 @@
 import * as THREE from "three";
-import { v4 as uuidv4 } from "uuid";
 import CameraControls from "./helpers/CameraControls";
 
 function Three({ canvas, alpha = true, interactElement }) {
@@ -41,10 +40,10 @@ function Three({ canvas, alpha = true, interactElement }) {
   };
 
   const addBeforeRenderFunction = (func) => {
-    let id = uuidv4();
+    let id = THREE.MathUtils.generateUUID();
 
     while (customRender[id] !== undefined) {
-      id = uuidv4();
+      id = THREE.MathUtils.generateUUID();
     }
 
     customRender[id] = func;

packages/three/package.json

@@ -0,0 +1,9 @@
+{
+  "version": "1.0.0",
+  "name": "@pano-to-mesh/three",
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "three": "^0.149.0"
+  }
+}