@realsee/five 6.0.0-alpha.73 → 6.0.0-alpha.75

package/templates/react-component/lib/index.tsx

@@ -1,157 +0,0 @@
-//@ts-nocheck
-
-import * as THREE from "three";
-import * as React from "react";
-import { Five } from "@realsee/five";
-import { useFiveState, useFiveEventCallback, useFiveProject2d } from "@realsee/five/react";
-
-const TAG_DEFAULT_LABEL = "未命名";
-
-const styles: Record<string, React.CSSProperties> = {
-  "tag-container": {
-    position: "relative",
-    pointerEvents: "none",
-    overflow: "hidden",
-  },
-  "tag": {
-    pointerEvents: "auto",
-    position: "absolute",
-    width: 0,
-    height: 0,
-    transform: "translateZ(0)",
-  },
-  "tag-pannel": {
-    position: "absolute",
-    width: 100,
-    minHeight: 20,
-    transform: "translate(-50%, 0)",
-    left: "50%",
-    bottom: 10,
-    background: "#333",
-    color: "#fff",
-    borderRadius: 2,
-    textAlign: "center",
-    lineHeight: "20px",
-    padding: 8,
-    fontSize: 14,
-  },
-  "tag-tools": {
-    position: "absolute",
-    height: 16,
-    top: -10,
-    right: -7,
-    background: "#07a",
-    color: "#fff",
-    borderRadius: 7,
-    textAlign: "center",
-    lineHeight: "16px",
-    whiteSpace: "nowrap",
-    padding: "0 3px"
-  },
-  "tag-tool-button": {
-    border: "none",
-    cursor: "pointer",
-    background: "transparent",
-    color: "inherit",
-    fontSize: 12,
-    height: 16,
-    verticalAlign: "top",
-  },
-  "tag-arrow": {
-    position: "absolute",
-    width: 10,
-    height: 10,
-    left: "50%",
-    bottom: -5,
-    transform: "translate(-50%, 0) rotate(45deg)",
-    background: "#333",
-    pointerEvents: "none",
-  }
-};
-
-type Tag = {
-  position: THREE.Vector3,
-  label: string,
-};
-
-type PropTyps = {
-  width: number,
-  height: number,
-  initialTags: Tag[],
-  onChange(tags: Tag[]): void
-}
-
-const FiveTagComponent: React.FC<PropTyps> = (props) => {
-  const project2d = useFiveProject2d();
-  const [{ mode }] = useFiveState();
-  const testModel = mode === Five.Mode.Panorama || mode === Five.Mode.Model;
-
-  const [newTag, setNewTag] = React.useState<Tag | null>(null);
-  const [tags, setTags] = React.useState<Tag[]>(() => props.initialTags);
-
-  const removeTag = React.useCallback((index: number) => {
-    const newTags = tags.filter((_tag, index_) => index !== index_);
-    setTags(newTags);
-    props.onChange(newTags);
-  }, [tags]);
-
-  const editTag = React.useCallback((index: number) => {
-    const newLabel = window.prompt("修改标签名称", tags[index].label) || TAG_DEFAULT_LABEL;
-    const newTags = tags.map((tag, index_) => {
-      if (index_ === index) return { ...tag, label: newLabel };
-      return tag;
-    });
-    setTags(newTags);
-    props.onChange(newTags);
-  }, [tags]);
-
-  const addTag = React.useCallback(() => {
-    setNewTag({ position: new THREE.Vector3(), label: TAG_DEFAULT_LABEL });
-  }, []);
-
-  useFiveEventCallback("intersectionOnModelUpdate", (intersect) => {
-    if (newTag === null) return;
-    setNewTag({ ...newTag, position: intersect.point });
-  }, [newTag]);
-
-  useFiveEventCallback("wantsTapGesture", () => {
-    if (newTag !== null) {
-      const newTags = tags.concat(newTag)
-      setTags(newTags);
-      props.onChange(newTags);
-      setNewTag(null);
-      return false;
-    }
-  }, [tags, newTag]);
-
-  return <div style={{ ...styles["tag-container"], width: props.width, height: props.height }}>
-    <button style={{ position: "absolute", right: 0, bottom: 0, pointerEvents: "auto" }} onClick={() => addTag()}>添加标签</button>
-    {newTag && (() => {
-      const position = project2d(newTag.position, false);
-      if (position === null) return;
-      return <div style={{ ...styles["tag"], pointerEvents: "none", left: position.x, top: position.y }}>
-        <div style={{ ...styles["tag-pannel"] }}>
-          <span style={{ ...styles["tag-content"] }}>{newTag.label}</span>
-          <div style={{ ...styles["tag-arrow"] }}/>
-        </div>
-      </div>
-    })()}
-    {tags.map((tag, index) => {
-      const position = project2d(tag.position, testModel);
-      if (position === null) return;
-      return <div key={index} style={{ ...styles["tag"], left: position.x, top: position.y }}>
-        <div style={{ ...styles["tag-pannel"] }}>
-          <span style={{ ...styles["tag-content"] }}>{tag.label}</span>
-          <div style={{ ...styles["tag-tools"] }}>
-            <button style={{ ...styles["tag-tool-button"] }} onClick={() => editTag(index)}>编辑</button>
-            <span> | </span>
-            <button style={{ ...styles["tag-tool-button"] }} onClick={() => removeTag(index)}>删除</button>
-          </div>
-          <div style={{ ...styles["tag-arrow"] }}/>
-        </div>
-      </div>
-    }).filter(element => element !== undefined)}
-  </div>
-}
-
-export { FiveTagComponent, Tag };

package/templates/react-component/package.json

@@ -1,38 +0,0 @@
-{
-  "name": "a-five-react-component",
-  "version": "1.0.0",
-  "description": "a-five-react-component",
-  "main": "./build/index.js",
-  "scripts": {
-    "example": "concurrently --names \"http,webpack\" --kill-others \"http-server ./ -p 8080 -c-1 --cors\" \"webpack -w --config ./devtools/webpack.example.js\"",
-    "build:example": "webpack --config ./devtools/webpack.example.js",
-    "build:doc": "typedoc --hideGenerator --includeVersion --excludeExternals --tsconfig ./devtools/tsconfig.build.json --out ./docs ./lib/index.tsx",
-    "build:typescript": "del ./build && tsc --project ./devtools/tsconfig.build.json",
-    "build:bundle": "webpack --progress --config ./devtools/webpack.bundle.js",
-    "build:all": "npm run build:doc && npm run build:typescript && && npm run build:example && npm run build:bundle"
-  },
-  "author": "realsee.com",
-  "license": "ISC",
-  "peerDependencies": {
-    "@types/react": "^17.0.14",
-    "react": "^17.0.2",
-    "three": "^0.117.1",
-    "typescript": "^4.3.2"
-  },
-  "devDependencies": {
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
-    "concurrently": "^6.2.0",
-    "del-cli": "^4.0.1",
-    "glob": "^7.1.6",
-    "http-server": "^0.12.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "three": "^0.117.1",
-    "ts-loader": "^9.1.1",
-    "typedoc": "^0.20.36",
-    "typescript": "^4.2.4",
-    "webpack": "^5.35.1",
-    "webpack-cli": "^4.6.0"
-  }
-}

package/templates/react-component/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    /* Basic Options */
-    "jsx": "react",
-    "target": "ES5",
-    "lib": ["ES5", "DOM"],
-    "declaration": true,
-    "sourceMap": true,
-    "rootDir": "./",
-
-    /* Strict Type-Checking Options */
-    "strict": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "declarationMap": false,
-
-    /* Module Resolution Options */
-    "moduleResolution": "node",
-    "baseUrl": "./",
-    "esModuleInterop": true,
-    "preserveSymlinks": true,
-
-    /* Experimental Options */
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
-  }
-}