Source: ui/widget/chat-log.js

  1. import { TextArea } from './text-area.js';
  2. import { TextAreaInput } from './text-area-input.js';
  3. import { Label } from './label.js';
  4. import { RemoteBrowser } from './remote-browser.js';
  5. import { VRSpaceAPI } from './../../client/rest-api.js'
  6. import { VRSPACEUI } from '../vrspace-ui.js';
  7. import { ServerCapabilities } from '../../client/openapi/model/ServerCapabilities.js';
  8. class ChatLogInput extends TextAreaInput {
  9.   inputFocused(input, focused) {
  10.     super.inputFocused(input,focused);
  11.     if ( focused ) {
  12.       console.log("Focused ", this.textArea);
  13.       ChatLog.activeInstance = this.textArea;
  14.     }
  15.   }
  16. }
  18. class Link {
  19.   constructor( text, enterWorld=false ) {
  20.     this.url = text;
  21.     this.enterWorld = enterWorld;
  22.     let pos = text.indexOf("://");
  23.     if ( pos > 0 ) {
  24.       text = text.substring(pos+3);
  25.     } else {
  26.       this.url = "https://"+this.url;
  27.     }
  28.     pos = text.indexOf("/");
  29.     if ( pos > 0 ) {
  30.       this.site = text.substring(0,pos);
  31.     } else {
  32.       this.site = text;
  33.     }
  34.     console.log('new link: '+this.url+" "+this.site);
  35.     this.label = null;
  36.     this.buttons = [];
  37.   }
  38.   openHere(local) {
  39.     if ( local ) {
  40.       console.log("TODO: Enter the world like AvatarSelection.enterWorld does");
  41.     }
  42.     window.location.href = this.url;    
  43.   }
  44.   openTab() {
  45.     window.open(this.url, '_blank').focus();    
  46.   }
  47.   dispose() {
  48.     this.label.dispose();
  49.     this.buttons.forEach(b=>b.dispose());
  50.   }
  51. }
  53. class LinkStack {
  54.   /** @type {ServerCapabilities} */
  55.   static serverCapablities = null;
  56.   constructor(scene, parent, position, scaling = new BABYLON.Vector3(.02,.02,.02)) {
  57.     this.scene = scene;
  58.     this.parent = parent;
  59.     this.scaling = scaling;
  60.     this.position = position;
  61.     this.capacity = 5;
  62.     this.links = [];
  63.     this.meshes = []; // XR selectables
  64.     this.clickHandler = this.scene.onPointerObservable.add((pointerInfo) => {
  65.       if ( pointerInfo.type == BABYLON.PointerEventTypes.POINTERDOWN
  66.         && pointerInfo.pickInfo.hit
  67.       ) {
  68.         for ( let i = 0; i < this.links.length; i++ ) {
  69.           if ( this.links[i].label.textPlane == pointerInfo.pickInfo.pickedMesh ) {
  70.             this.clicked(this.links[i]);
  71.             break;
  72.           }
  73.         }
  74.       }
  75.     });
  76.     if ( LinkStack.serverCapablities == null ) {
  77.       VRSpaceAPI.getInstance().endpoint.server.getServerCapabilities().then(c=>LinkStack.serverCapablities=c);
  78.     }
  79.   }
  80.   addLink(word, enterWorld, local){
  81.     let link = new Link(word, enterWorld);
  82.     this.scroll();
  83.     
  84.     // add buttons to open in new tab, this tab, optionally internal browser
  85.     if ( enterWorld ) {
  86.       this.addButton(link, "enter", () => link.openHere(local));
  87.     } else {
  88.       this.addButton(link, "external-link", () => link.openTab());
  89.       if (LinkStack.serverCapablities.remoteBrowser) {
  90.         this.addButton(link, "play", () => this.openBrowser(link.url));
  91.       }
  92.     }
  94.     let x = this.scaling.x*link.buttons.length+this.position.x+link.site.length/(Label.fontRatio*2)*this.scaling.x;
  95.     let pos = new BABYLON.Vector3(x,this.position.y,this.position.z);
  96.     let label = new Label(link.site,pos,this.parent);
  97.     //label.background = "black";
  98.     label.display();
  99.     label.textPlane.scaling = this.scaling;
  100.     link.label = label;
  101.     
  102.     this.links.push(link);
  103.     this.meshes.push(label.textPlane);
  104.     return link;
  105.   }
  106.   
  107.   addButton(link, name, callback) {
  108.     let button = BABYLON.GUI.Button.CreateImageOnlyButton(name+"-"+link.site, VRSPACEUI.contentBase+"/content/icons/"+name+".png");
  109.     let buttonPlane = BABYLON.MeshBuilder.CreatePlane(name+"-"+link.site, {height:1,width:1});
  110.     buttonPlane.parent = this.parent;
  111.     buttonPlane.position = new BABYLON.Vector3(this.position.x + this.scaling.x*link.buttons.length,this.position.y,this.position.z);
  112.     buttonPlane.scaling = this.scaling;
  113.     let buttonTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(
  114.       buttonPlane,
  115.       128,
  116.       128,
  117.       false // mouse events disabled
  118.     );
  119.     buttonTexture.addControl(button);
  120.     button.onPointerDownObservable.add( () => callback());
  121.     link.buttons.push(buttonPlane);    
  122.     this.meshes.push(buttonPlane);
  123.   }
  124.   
  125.   /** @param {Link} link */
  126.   async clicked(link) {
  127.     // process invitations
  128.     console.log("Clicked "+link.url);
  129.     if ( link.enterWorld ) {
  130.       link.openHere();
  131.     } else if (LinkStack.serverCapablities.remoteBrowser) {
  132.       this.openBrowser(link.url);
  133.     } else {
  134.       link.openTab();
  135.     }
  136.   }
  137.   openBrowser(url) {
  138.     if ( this.browser ) {
  139.       this.browser.dispose();
  140.     }
  141.     this.browser = new RemoteBrowser(this.scene);
  142.     this.browser.show();
  143.     //this.browser.attachToCamera();
  144.     this.browser.attachToHud();
  145.     if ( url.toLowerCase().endsWith(".jpg") || url.toLowerCase().endsWith(".jpg") ) {
  146.       this.browser.loadUrl(url);
  147.     } else {
  148.       this.browser.get(url);
  149.     }
  150.   }
  151.   scroll() {
  152.     if ( this.links.length == this.capacity ) {
  153.       this.links[0].dispose();
  154.       let link = this.links.splice(0,1)[0];
  155.       link.dispose();
  156.     }
  157.     for ( let i = 0; i < this.links.length; i++ ) {
  158.       let label = this.links[i].label;
  159.       let y = label.textPlane.position.y + label.textPlane.scaling.y*1.5;
  160.       label.textPlane.position = new BABYLON.Vector3( label.textPlane.position.x, y, label.textPlane.position.z );
  161.       this.links[i].buttons.forEach(b=>b.position.y = y );
  162.     }
  163.   }
  164.   dispose() {
  165.     this.scene.onPointerObservable.remove(this.clickHandler);
  166.     this.links.forEach(l=>l.dispose());
  167.     this.meshes = [];
  168.     if ( this.browser ) {
  169.       this.browser.dispose();
  170.     }
  171.   }
  172.   isSelectableMesh(mesh) {
  173.     return this.meshes.includes(mesh);
  174.   }
  175. }
  176. /**
  177.  * Chat log with TextArea and TextAreaInput, attached by to HUD. 
  178.  * By default alligned to left side of the screen.
  179.  */
  180. export class ChatLog extends TextArea {
  181.   static instanceCount = 0;
  182.   static instances = {}
  183.   /** @type {ChatLog} */
  184.   static activeInstance = null;
  185.   static instanceId(name, title) {
  186.     return name+"_"+title;
  187.   }
  188.   /** @return {ChatLog} */
  189.   static findInstance(title, name="ChatLog") {
  190.     if ( ChatLog.instances.hasOwnProperty(ChatLog.instanceId(name,title)) ) {
  191.       return ChatLog.instances[ChatLog.instanceId(name,title)];
  192.     }
  193.   }
  194.   static getInstance(scene, title, name="ChatLog") {
  195.     if ( ChatLog.instances.hasOwnProperty(ChatLog.instanceId(name,title)) ) {
  196.       return ChatLog.instances[ChatLog.instanceId(name,title)];
  197.     }
  198.     return new ChatLog(scene, title, name);
  199.   }
  200.   constructor(scene, title, name="ChatLog") {
  201.     super(scene, name, title);
  202.     if ( ChatLog.instances.hasOwnProperty(this.instanceId()) ) {
  203.       throw "Instance already exists: "+this.instanceId();
  204.     }
  205.     this.input = new ChatLogInput(this, "Say", title);
  206.     this.input.submitName = "send";
  207.     this.input.showNoMatch = false;
  208.     this.inputPrefix = "ME";
  209.     this.showLinks = true;
  210.     this.minimizeInput = false;
  211.     this.minimizeTitle = true;
  212.     this.autoHide = true;
  213.     this.size = .3;
  214.     this.baseAnchor = -.4;
  215.     this.verticalAnchor = -.1;
  216.     //this.baseAnchor = 0;
  217.     this.anchor = this.baseAnchor;
  218.     this.leftSide();
  219.     this.linkStack = new LinkStack(this.scene, this.group, new BABYLON.Vector3(this.size/2*1.25,-this.size/2,0));
  220.     this.listeners = [];
  221.     ChatLog.instanceCount++;
  222.     ChatLog.instances[this.instanceId()] = this;
  223.   }
  224.   instanceId() {
  225.     return ChatLog.instanceId(this.name, this.titleText);
  226.   }
  227.   /**
  228.    * Show both TextArea and TextAreaInput, and attach to HUD.
  229.    */
  230.   show() {
  231.     super.show();
  232.     this.setActiveInstance();
  233.     this.input.inputPrefix = this.inputPrefix;
  234.     this.input.addListener( text => this.notifyListeners(text) );
  235.     // order matters: InputArea.init() shows the title, so call hide after
  236.     this.input.init();
  237.     if ( this.handles ) {
  238.       if ( !this.minimizeInput ) {
  239.         this.handles.dontMinimize.push(this.input.plane);
  240.       }
  241.       if ( this.title && !this.minimizeTitle ) {
  242.         this.handles.dontMinimize.push(this.title.textPlane);
  243.         // reposition the title
  244.         this.handles.onMinMax = (minimized) => {
  245.           if ( minimized ) {
  246.             this.title.position.y = -1.2 * this.size/2 + this.title.height/2;
  247.             this.clearActiveInstance();
  248.           } else {
  249.             // CHECKME: copied from TextArea.showTitle:
  250.             this.title.position.y = 1.2 * this.size/2 + this.title.height/2;
  251.             this.setActiveInstance();
  252.           }
  253.         };
  254.       } else {
  255.         this.handles.onMinMax = (minimized) => {
  256.           if ( minimized ) {
  257.             this.clearActiveInstance();
  258.           } else {
  259.             this.setActiveInstance();
  260.           }
  261.         };
  262.       }
  263.     }
  264.     this.hide(this.autoHide);
  265.     this.attachToHud();
  266.     this.handleResize();
  267.     this.resizeHandler = () => this.handleResize();
  268.     window.addEventListener("resize", this.resizeHandler);
  269.   }
  270.   /**
  271.    * Log something written by someone.
  272.    * @param {String} who who wrote that
  273.    * @param {String} what what they wrote
  274.    * @param {String} link optional url to open 
  275.    */
  276.   log( who, what, link, local ) {
  277.     this.input.write(what,who);
  278.     if ( link ) {
  279.       this.showLink(link, true);
  280.     }
  281.   }
  282.   attachToHud(){
  283.     super.attachToHud();
  284.   }
  285.   /**
  286.    * Move to left side of the screen
  287.    */
  288.   leftSide() {
  289.     this.anchor = - Math.abs(this.anchor);
  290.     this.moveToAnchor();
  291.   }
  292.   /**
  293.    * Move to right side of the screen
  294.    */
  295.   rightSide() {
  296.     this.anchor = Math.abs(this.anchor);
  297.     this.moveToAnchor();
  298.   }
  299.   /**
  300.    * Move either left or right, whatever is the current anchor
  301.    */
  302.   moveToAnchor() {
  303.     //this.position = new BABYLON.Vector3(this.anchor, this.size/2-.025, 0);
  304.     this.position = new BABYLON.Vector3(this.anchor, this.size/2+this.verticalAnchor, 0.2);
  305.     this.group.position = this.position;
  306.   }
  307.   /**
  308.    * Handle window resize, recalculates the current anchor and positions appropriatelly.
  309.    */
  310.   handleResize() {
  311.     let aspectRatio = this.scene.getEngine().getAspectRatio(this.scene.activeCamera);
  312.     // 0.67 -> anchor 0.1 (e.g. smartphone vertical)
  313.     // 2 -> anchor 0.4 (pc, smartphone horizontal)
  314.     let diff = (aspectRatio-0.67)/1.33;
  315.     //this.anchor = -this.baseAnchor * diff * Math.sign(this.anchor);
  316.     this.anchor = this.baseAnchor * diff;
  317.     //console.log("Aspect ratio: "+aspectRatio+" anchor "+Math.sign(this.anchor)+" "+this.anchor+" base "+this.baseAnchor+" diff "+diff);
  318.     this.moveToAnchor();
  319.   }
  320.   hasLink(line) {
  321.     // TODO improve link detection
  322.     return line.indexOf("://") > -1 || line.indexOf('www.') > -1 ;
  323.   }
  324.   processLinks(line) {
  325.     if ( this.showLinks && typeof(line) === "string" && this.hasLink(line)) {
  326.       line.split(' ').forEach((word)=>{
  327.         if ( this.hasLink(word) ) {
  328.           this.showLink(word);
  329.         }
  330.       });
  331.     }
  332.   }
  333.   showLink(word, enterWorld, local) {
  334.     console.log("Link found: "+word);
  335.     this.linkStack.addLink(word, enterWorld);
  336.   }
  337.   write(string) {
  338.     this.processLinks(string);
  339.     super.write(string);
  340.     this.hide(false);
  341.   }
  342.   setActiveInstance() {
  343.     ChatLog.activeInstance = this;
  344.     console.log("Focused ", this);
  345.   }
  346.   clearActiveInstance() {
  347.     if ( ChatLog.activeInstance == this ) {
  348.       console.log("Focus removed from ", this);
  349.       ChatLog.activeInstance = null;
  350.     }
  351.   }
  352.   notifyListeners(text,link) {
  353.     this.listeners.forEach(l=>l(text, link));
  354.   }
  355.   /**
  356.    * Add a listener to be called when input text is changed
  357.    */
  358.   addListener(listener) {
  359.     this.listeners.push(listener);
  360.   }
  361.   /** Remove a listener */
  362.   removeListener(listener) {
  363.     let pos = this.listeners.indexOf(listener);
  364.     if ( pos > -1 ) {
  365.       this.listeners.splice(pos,1);
  366.     }
  367.   }
  368.  
  369.   /** Clean up */
  370.   dispose() {
  371.     window.removeEventListener("resize", this.resizeHandler);
  372.     this.input.dispose();
  373.     super.dispose();
  374.     this.linkStack.dispose();
  375.     this.clearActiveInstance();
  376.     delete ChatLog.instances[this.instanceId()];
  377.     ChatLog.instanceCount--;
  378.   }
  379.   /** XR pointer selection support */
  380.   isSelectableMesh(mesh) {
  381.     return super.isSelectableMesh(mesh) || this.input.isSelectableMesh(mesh) || this.linkStack.isSelectableMesh(mesh);
  382.   }
  383. }