@realsee/five 5.0.0-alpha.100

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

@@ -0,0 +1,157 @@
+//@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

@@ -0,0 +1,38 @@
+{
+  "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

@@ -0,0 +1,27 @@
+{
+  "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
+  }
+}