Background removing system (#105)

* Add background cutting system * fix bug * fix bug * fix bug * fix bug * fix bug * fix bug * Fix background bug in VMK 1.0 * 1. Fix lighting bug in VMK Background cutting system. 2. Adjust overlays in all modules. * Fix bug * Adjust overlay height for mobile devices --------- Co-authored-by: Salttyy <[email protected]> Co-authored-by: Jiratchaya08219 <[email protected]> Co-authored-by: Salttyy <[email protected]>
molecularwebxr · Aug 16, 2023 · 45d072d · 45d072d
1 parent 5b4c648
commit 45d072d
Show file tree

Hide file tree

Showing 37 changed files with 1,074 additions and 28 deletions.
diff --git a/components/bg-icon/index.js b/components/bg-icon/index.js
@@ -0,0 +1,152 @@
+const BgIconContent = /* html */ `
+  <style>
+    .container {
+      position: relative;
+    }
+    a {
+      cursor: pointer;
+    }
+    svg {
+      width: 40px;
+      height: 40px;
+    }
+    #circle {
+      fill: #FFFFFF;
+      transition: 0.2s;
+    }
+    .path {
+      fill: var(--primarydark);
+    }
+    a:hover #circle{
+      fill: var(--secondary);
+    }
+    #circle.active {
+      fill: var(--secondary);
+    }
+    a:hover .tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+    .tooltip {
+      right: calc(100% + 22px);
+      top: 50%;
+      transform: translateY(-50%);
+      position: absolute;
+      background-color: var(--primarylight);
+      visibility: hidden;
+      opacity: 0;
+      padding: 0.5rem 0.75rem;
+      border-radius: 0.5rem;
+      transition: 0.2s;
+      white-space: nowrap;
+    }
+    .tooltip p {
+      font-family: "Roboto";
+      color: #ffffff;
+      font-size: 1rem;
+      text-align: left;
+      margin: 0;
+    }
+    .triangle {
+      position: absolute;
+      top: 50%;
+      right: -10px;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid transparent;
+      border-left: 10px solid var(--primarylight);
+      transform: translateY(-50%);
+    }
+    .hide {
+      display: none;
+    }
+    @media screen and (max-width: 900px) {
+      a:hover .tooltip {
+        display: none;
+      }
+    }
+    @media (max-width: 440px) {
+      svg {
+        width: 30px;
+        height: 30px;
+      }
+    }
+    @media screen and (max-height: 450px) and (orientation: landscape) {
+      svg {
+        width: 28px;
+        height: 29px;
+      }
+    }
+  </style>
+  <div class="container">
+  <a id="anchor">  
+    <svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+      <g transform="matrix(1.79021,0,0,1.79021,53.7063,19.6923)">
+        <circle cx="113" cy="132" r="143" id="circle" />
+      </g>
+      <g id="SVGRepo_bgCarrier" stroke-width="0"/>
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+    <g id="hand" class="path">
+    <g transform="matrix(20,0,0,20,0,0)">
+    <path d="M14 3.5V11V4.5C14 3.67157 14.6716 3 15.5 3C16.3284 3 17 3.67157 17 4.5V11V7.5C17 6.67157 17.6716 6 18.5 6C19.3284 6 20 6.67157 20 7.5V16C20 19.3137 17.3137 22 14 22H12.8727C11.3483 22 9.88112 21.4198 8.76904 20.3772L3.81045 15.7285C3.09365 15.0565 3.0754 13.9246 3.77016 13.2298C4.44939 12.5506 5.55063 12.5506 6.22985 13.2298L8.00001 15V6.5C8.00001 5.67157 8.67158 5 9.50001 5C10.3284 5 11 5.67157 11 6.5V11V3.5C11 2.67157 11.6716 2 12.5 2C13.3284 2 14 2.67157 14 3.5Z" stroke="#ffffff" stroke-width="0.8640000000000001" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+  </g>
+</svg>
+    <div id="tooltip" class="tooltip">
+      <p><intl-message key="app.cutbackground"></p>
+      <div class="triangle"></div>
+    </div>
+  </a>
+</div>`;
+
+class BgIcon extends HTMLElement {
+
+  static get observedAttributes() {
+    return ["isActive"];
+  }
+
+  set isActive(value) {
+    this._isActive = value;
+    if(this._isActive) {
+      this.circleElement.classList.add("active");
+      this.tooltip.classList.add("hide");
+    } else {
+      this.circleElement.classList.remove("active");
+      this.tooltip.classList.remove("hide");
+    }
+  }
+
+  get isActive() {
+    return this._isActive;
+  }
+
+  constructor() {
+    super();
+
+    let shadow = this.attachShadow({ mode: "open" });
+    shadow.innerHTML = BgIconContent;
+
+    this.circleElement = this.shadowRoot.getElementById("circle");
+    this.tooltip = this.shadowRoot.getElementById("tooltip");
+  }
+
+  connectedCallback() {
+    if(this.isActive) {
+      this.circleElement.classList.add("active");
+      this.tooltip.classList.add("hide");
+    }
+  }
+
+  toggle() {
+    this.circleElement.classList.toggle("active");
+    this.tooltip.classList.toggle("hide");
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (attrName === "isActive") {
+      this.isActive = newValue;
+      this.toggle();
+    }
+  }
+}
+
+customElements.define("bg-icon", BgIcon);
diff --git a/components/black-screen/index.js b/components/black-screen/index.js
@@ -0,0 +1,86 @@
+const blackIconTemplate = /* html */ `
+ <style>
+ a {
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+p {
+  font-family: "Roboto";
+  color: #ffffff;
+  font-size: 1rem;
+  text-align: left;
+  transition: 0.2s;
+  margin: 0 0 0 0.5rem;
+}
+svg {
+  transition: transform 0.2s;
+  width: 40px;
+  height: 40px;
+}
+#circle {
+  fill: black;
+  transition: 0.2s;
+}
+.camera-path {
+  fill: var(--primarydark);
+}
+a:hover #circle{
+  fill: var(--secondary);
+}
+a:hover p {
+  color: var(--secondary);
+}
+@media (max-width: 440px) {
+  svg {
+    width: 30px;
+    height: 30px;
+  }
+  p {
+    font-size: 0.8rem;
+  }
+}
+@media screen and (max-height: 450px) and (orientation: landscape) {
+  svg {
+    width: 28px;
+    height: 28px;
+  }
+  p {
+    font-size: 0.75rem;
+  }
+}
+ </style>
+   <a id="anchor">
+   <svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1.79021,0,0,1.79021,53.7063,19.6923)">
+       <circle id="circle" cx="113" cy="132" r="143" />
+     </g>
+     <g class="camera-path" transform="matrix(6.66667,0,0,6.66667,256,256)">
+     </g>
+     </svg>
+     <p>
+        <intl-message key="app.blackscreen">
+     </p>
+   </a>`;
+
+class BlackScreen extends HTMLElement {
+ constructor() {
+   super();
+
+   this.handleClick = this.handleClick.bind(this);
+
+   let shadow = this.attachShadow({ mode: "open" });
+   shadow.innerHTML = blackIconTemplate;
+
+   this.buttonElement = this.shadowRoot.querySelector("a");
+   this.buttonElement.addEventListener("click", this.handleClick);
+ }
+
+ handleClick() {
+   this.dispatchEvent(new CustomEvent("black-screen"));
+ }
+}
+
+customElements.define("black-screen", BlackScreen);
diff --git a/components/reset-activity/index.js b/components/reset-activity/index.js
@@ -119,6 +119,10 @@ class ResetActivity extends HTMLElement {
   }
 
   handleClick() {
+    if (typeof(resetBackground) !== 'undefined') {
+      resetBackground();
+    }
+
     this.dispatchEvent(new CustomEvent("resetActivity"));
   }
 }

diff --git a/components/white-screen/index.js b/components/white-screen/index.js
@@ -0,0 +1,86 @@
+const WhiteIconTemplate = /* html */ `
+<style>
+a {
+ cursor: pointer;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+}
+p {
+ font-family: "Roboto";
+ color: #ffffff;
+ font-size: 1rem;
+ text-align: left;
+ transition: 0.2s;
+ margin: 0 0 0 0.5rem;
+}
+svg {
+ transition: transform 0.2s;
+ width: 40px;
+ height: 40px;
+}
+#circle {
+ fill: white;
+ transition: 0.2s;
+}
+.camera-path {
+ fill: var(--primarydark);
+}
+a:hover #circle{
+ fill: var(--secondary);
+}
+a:hover p {
+ color: var(--secondary);
+}
+@media (max-width: 440px) {
+ svg {
+   width: 30px;
+   height: 30px;
+ }
+ p {
+   font-size: 0.8rem;
+ }
+}
+@media screen and (max-height: 450px) and (orientation: landscape) {
+ svg {
+   width: 28px;
+   height: 28px;
+ }
+ p {
+   font-size: 0.75rem;
+ }
+}
+</style>
+  <a id="anchor">
+  <svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+   <g transform="matrix(1.79021,0,0,1.79021,53.7063,19.6923)">
+      <circle id="circle" cx="113" cy="132" r="143" />
+    </g>
+    <g class="camera-path" transform="matrix(6.66667,0,0,6.66667,256,256)">
+    </g>
+    </svg>
+    <p>
+       <intl-message key="app.whitescreen">
+    </p>
+  </a>`;
+
+class WhiteScreen extends HTMLElement {
+ constructor() {
+   super();
+
+   this.handleClick = this.handleClick.bind(this);
+
+   let shadow = this.attachShadow({ mode: "open" });
+   shadow.innerHTML = WhiteIconTemplate;
+
+   this.buttonElement = this.shadowRoot.querySelector("a");
+   this.buttonElement.addEventListener("click", this.handleClick);
+ }
+
+ handleClick() {
+   this.dispatchEvent(new CustomEvent("white-screen"));
+ }
+}
+
+customElements.define("white-screen", WhiteScreen);
diff --git a/locales/en/translation.json b/locales/en/translation.json
@@ -35,6 +35,9 @@
     "markersWithLink": "markers",
     "reset": "Reset",
     "zoom": "Zoom",
+    "cutbackground" : "Cut background",
+    "blackscreen": "Black screen",
+    "whitescreen": "White screen",
     "pdbOptions": "Molecules in markers",
     "cameraOptions": "Camera and view options",
     "controls": "Temperature and mechanics controls",

diff --git a/modules/acids-and-bases/hbonds-htransfer/hbonds-htransfers.html b/modules/acids-and-bases/hbonds-htransfer/hbonds-htransfers.html
@@ -53,6 +53,9 @@
     <script src="/components/zoom-icon/index.js"></script>
     <script src="/components/swap-camera/index.js"></script>
     <script src="/components/camera-icon/index.js"></script>
+    <script src="/components/bg-icon/index.js"></script>
+    <script src="/components/black-screen/index.js"></script>
+    <script src="/components/white-screen/index.js"></script>
 
     <!-- Utils & A-Frame Components -->
     <script src="index.js"></script>
@@ -118,11 +121,19 @@ <h1 class="activity-title" data-i18n="bonds.acidBase.title"></h1>
       ></scale-graphics>
     </div>
 
+    <!-- bg cut -->
+    <div id="bg-container" class="bg-container small-menu hide column">
+      <div class="triangle-temp"></div>
+      <black-screen class="icon-margin"></black-screen>
+      <white-screen class="icon-margin"></white-screen>
+    </div>
+
     <!-- Side buttons -->
     <div class="side-menu column">
       <camera-icon class="icon-margin"></camera-icon>
       <reset-activity class="icon-margin"></reset-activity>
       <zoom-icon class="icon-margin"></zoom-icon>
+      <bg-icon class="icon-margin"></bg-icon>
       <toggle-menu class="icon-margin"></toggle-menu>
     </div>
 
@@ -197,6 +208,8 @@ <h1 class="activity-title" data-i18n="bonds.acidBase.title"></h1>
       loading-screen="enabled: false"
       switch-camera
     >
+      <a-box id = "black-screen" color="black" position="0 -1 -20" rotation="0 0 0" scale="25 25 0.5" opacity="0"></a-box>
+      <a-box id = "white-screen" color="white" position="0 -1 -20" rotation="0 0 0" scale="25 25 0.5" opacity="0"></a-box>
       <a-marker type="barcode" value="0" id="lysA">
         <a-entity
           rotation="0 0 0"
@@ -656,6 +669,7 @@ <h1 class="activity-title" data-i18n="bonds.acidBase.title"></h1>
     <script src="/modules/utils/handleFlips.js"></script>
     <script src="/modules/utils/handleOverlays.js"></script>
     <script src="/modules/utils/handleGestures.js"></script>
+    <script src="/modules/utils/handleBackground.js"></script>
     <script src="/js/handleSession.js"></script>
   </body>
 </html>