Make Images and Videos Linkable

src/editor/nodes/ImageNode.js

@@ -32,13 +32,20 @@ export default class ImageNode extends EditorNodeMixin(Image) {
       })()
     );
 
+    const linkComponent = json.components.find(c => c.name === "link");
+
+    if (linkComponent) {
+      node.href = linkComponent.props.href;
+    }
+
     return node;
   }
 
   constructor(editor) {
     super(editor);
 
     this._canonicalUrl = "";
+    this.href = "";
     this.controls = true;
     this.billboard = false;
   }
@@ -119,6 +126,7 @@ export default class ImageNode extends EditorNodeMixin(Image) {
     this.alphaMode = source.alphaMode;
     this.alphaCutoff = source.alphaCutoff;
     this._canonicalUrl = source._canonicalUrl;
+    this.href = source.href;
 
     return this;
   }
@@ -138,6 +146,10 @@ export default class ImageNode extends EditorNodeMixin(Image) {
       components.billboard = {};
     }
 
+    if (this.href) {
+      components.link = { href: this.href };
+    }
+
     return super.serialize(components);
   }
 
@@ -165,6 +177,10 @@ export default class ImageNode extends EditorNodeMixin(Image) {
       this.addGLTFComponent("billboard", {});
     }
 
+    if (this.href && this.projection === "flat") {
+      this.addGLTFComponent("link", { href: this.href });
+    }
+
     this.replaceObject();
   }
 

src/editor/nodes/ModelNode.js

@@ -384,7 +384,6 @@ export default class ModelNode extends EditorNodeMixin(Model) {
       this.initialScale = source.initialScale;
       this.load(source.src);
     } else {
-      this.updateStaticModes();
       this.stats = JSON.parse(JSON.stringify(source.stats));
       this.gltfJson = source.gltfJson;
       this._canonicalUrl = source._canonicalUrl;
@@ -394,13 +393,16 @@ export default class ModelNode extends EditorNodeMixin(Model) {
     this.collidable = source.collidable;
     this.walkable = source.walkable;
     this.combine = source.combine;
-    this.billboard = source.billboard;
+    this._billboard = source._billboard;
+
+    this.updateStaticModes();
 
     return this;
   }
 
   prepareForExport(ctx) {
     super.prepareForExport();
+
     this.addGLTFComponent("shadow", {
       cast: this.castShadow,
       receive: this.receiveShadow

src/editor/nodes/VideoNode.js

@@ -39,6 +39,12 @@ export default class VideoNode extends EditorNodeMixin(Video) {
       node.billboard = true;
     }
 
+    const linkComponent = json.components.find(c => c.name === "link");
+
+    if (linkComponent) {
+      node.href = linkComponent.props.href;
+    }
+
     loadAsync(
       (async () => {
         await node.load(src, onError);
@@ -69,6 +75,7 @@ export default class VideoNode extends EditorNodeMixin(Video) {
     this.volume = 0.5;
     this.controls = true;
     this.billboard = false;
+    this.href = "";
   }
 
   get src() {
@@ -182,6 +189,7 @@ export default class VideoNode extends EditorNodeMixin(Video) {
     this.controls = source.controls;
     this.billboard = source.billboard;
     this._canonicalUrl = source._canonicalUrl;
+    this.href = source.href;
 
     return this;
   }
@@ -210,6 +218,10 @@ export default class VideoNode extends EditorNodeMixin(Video) {
       components.billboard = {};
     }
 
+    if (this.href) {
+      components.link = { href: this.href };
+    }
+
     return super.serialize(components);
   }
 
@@ -241,6 +253,10 @@ export default class VideoNode extends EditorNodeMixin(Video) {
       this.addGLTFComponent("billboard", {});
     }
 
+    if (this.href && this.projection === "flat") {
+      this.addGLTFComponent("link", { href: this.href });
+    }
+
     this.replaceObject();
   }
 

src/ui/properties/ImageNodeEditor.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import NodeEditor from "./NodeEditor";
 import InputGroup from "../inputs/InputGroup";
+import StringInput from "../inputs/StringInput";
 import SelectInput from "../inputs/SelectInput";
 import BooleanInput from "../inputs/BooleanInput";
 import NumericInputGroup from "../inputs/NumericInputGroup";
@@ -23,6 +24,7 @@ export default function ImageNodeEditor(props) {
   const onChangeProjection = useSetPropertySelected(editor, "projection");
   const onChangeTransparencyMode = useSetPropertySelected(editor, "alphaMode");
   const onChangeAlphaCutoff = useSetPropertySelected(editor, "alphaCutoff");
+  const onChangeHref = useSetPropertySelected(editor, "href");
 
   return (
     <NodeEditor description={ImageNodeEditor.description} {...props}>
@@ -38,6 +40,11 @@ export default function ImageNodeEditor(props) {
       <InputGroup name="Billboard" info="Image always faces user in Hubs.">
         <BooleanInput value={node.billboard} onChange={onChangeBillboard} />
       </InputGroup>
+      {node.projection === ImageProjection.Flat && (
+        <InputGroup name="Link Href" info="Allows the image to function as a link for the given url.">
+          <StringInput value={node.href} onChange={onChangeHref} />
+        </InputGroup>
+      )}
       <InputGroup
         name="Transparency Mode"
         info={`How to apply transparency:

src/ui/properties/VideoNodeEditor.js

@@ -4,6 +4,7 @@ import NodeEditor from "./NodeEditor";
 import InputGroup from "../inputs/InputGroup";
 import SelectInput from "../inputs/SelectInput";
 import BooleanInput from "../inputs/BooleanInput";
+import StringInput from "../inputs/StringInput";
 import { VideoProjection } from "../../editor/objects/Video";
 import VideoInput from "../inputs/VideoInput";
 import { Video } from "styled-icons/fa-solid/Video";
@@ -18,6 +19,7 @@ export default function VideoNodeEditor(props) {
   const onChangeSrc = useSetPropertySelected(editor, "src");
   const onChangeProjection = useSetPropertySelected(editor, "projection");
   const onChangeBillboard = useSetPropertySelected(editor, "billboard");
+  const onChangeHref = useSetPropertySelected(editor, "href");
 
   return (
     <NodeEditor description={VideoNodeEditor.description} {...props}>
@@ -27,6 +29,11 @@ export default function VideoNodeEditor(props) {
       <InputGroup name="Billboard" info="Video always faces user in Hubs. Does not billboard in Spoke.">
         <BooleanInput value={node.billboard} onChange={onChangeBillboard} />
       </InputGroup>
+      {node.projection === VideoProjection.Flat && (
+        <InputGroup name="Link Href" info="Allows the video to function as a link for the given url.">
+          <StringInput value={node.href} onChange={onChangeHref} />
+        </InputGroup>
+      )}
       <InputGroup name="Projection">
         <SelectInput options={videoProjectionOptions} value={node.projection} onChange={onChangeProjection} />
       </InputGroup>