fix: save

.env

@@ -1,3 +1,3 @@
-VITE_APP_SOURCE=https://houseoss.4dkankan.com/project/nanjinbwg-demo/getty-image/
+VITE_PUBLIC_DIR="/"
 VITE_APP_DEBUG=0
-VITE_PUBLIC_DIR="/"
+VITE_APP_SOURCE=https://houseoss.4dkankan.com/project/nanjinbwg-demo/getty-image/

.env.development

@@ -1,3 +1,3 @@
+VITE_PUBLIC_DIR="/"
 VITE_APP_SOURCE=https://houseoss.4dkankan.com/project/nanjinbwg-demo/getty-image/
 VITE_APP_DEBUG=1
-VITE_PUBLIC_DIR="/"

.env.production

@@ -1,3 +1,3 @@
+VITE_PUBLIC_DIR="./"
 VITE_APP_SOURCE=https://houseoss.4dkankan.com/project/nanjinbwg-demo/getty-image/
 VITE_APP_DEBUG=1
-VITE_PUBLIC_DIR="./"

src/App.jsx

@@ -75,13 +75,18 @@ function App() {
     handlerResize();
     document.documentElement.style.overflow = "auto";
     var vConsole = new window.VConsole();
-
+    localStorage.setItem("debug", debug);
     if (debug) {
       vConsole.showSwitch();
+      if (!defaultDebug) {
+        window.location.reload();
+      }
     } else {
+      if (defaultDebug) {
+        window.location.reload();
+      }
       vConsole.hideSwitch();
     }
-    localStorage.setItem("debug", debug);
   });
   const props = {
     // scrollSpeed: scrollSpeed,

src/components/TimeLineText.jsx

@@ -179,6 +179,7 @@ export function TimeLineLabelText(props) {
   // console.log("keyframes-TimeLineLabelText", keyframes);
   return (
     <TimeLineText
+      textType="label"
       trigger={trigger}
       keyframes={keyframes}
       verticalOffset={verticalOffset}
@@ -213,6 +214,7 @@ export function TimeLineWallText(props) {
 
   return (
     <TimeLineText
+      textType="wall"
       trigger={trigger}
       keyframes={keyframes}
       verticalOffset={verticalOffset}
@@ -231,6 +233,7 @@ export function TimeLineTitleText(props) {
   const trigger = props.trigger || Action.scrubPin;
   return (
     <TimeLineText
+      textType="title"
       trigger={trigger}
       verticalOffset={verticalOffset}
       {...props}
@@ -280,14 +283,14 @@ class TimeLineText extends Component {
         ((window.innerHeight * parentHeight) / 100)) *
       100;
     this.top = lastHeight + "%";
-    console.log("this.top", this.top);
+    this.props.debug && console.log(`${this.props.textType}-top: ${this.top}`);
   }
+
   componentDidCatch(error) {
     console.error("error", error);
   }
   createTimeLine() {
     if (!this.timeline) {
-      console.log("createTimeLine");
       const start = this.props.keyframes[0].start;
       const end = this.props.keyframes[0].end;
       const dif = end - start;
@@ -300,11 +303,11 @@ class TimeLineText extends Component {
         (lastEnd - start) * (parseFloat(this.props.parentHeight) - 100);
 
       const flag = `+=${timeRes}%`;
-      console.log("timeRes", flag);
-
+      this.props.debug && console.log("timeRes", flag);
       this.timeline = gsap.timeline({
         scrollTrigger: Object.assign(
           {
+            markers: this.props.debug || false,
             trigger: this.containerRef.current,
             start: "top top",
             end: flag,
@@ -401,6 +404,7 @@ TimeLineText.propTypes = {
   parentHeight: PropTypes.string,
   keyframes: PropTypes.arrayOf(PropTypes.object),
   progressPosition: PropTypes.number,
+  textType: PropTypes.string,
 };
 
 TimeLineText.defaultProps = {

src/components/Viewer.jsx

@@ -22,7 +22,6 @@ export default function Viewer(props) {
       : element;
   });
   const debug = props.debug || false;
-  // console.log("lazyHeight", lazyHeight);
   return (
     <LazyLoad height={lazyHeight} offset={1e4}>
       <ViewerInner {...props} debug={debug}>
@@ -204,17 +203,8 @@ class ViewerInner extends Component {
     this.context.imageSmoothingQuality = "high";
   }
   initializeTimeline() {
-    // const openLoading = () => {
-    //   gsap.to(this.loadingWrap.current, {
-    //     autoAlpha: 1,
-    //   });
-    // };
-    // const closeLoading = () => {
-    //   gsap.to(this.loadingWrap.current, {
-    //     autoAlpha: 0,
-    //   });
-    // };
-    // closeLoading();
+    this.props.debug && console.log(this.props.path, "initializeTimeline");
+    this.leaveHideElements();
     this.timeline = gsap.timeline({
       scrollTrigger: {
         trigger: this.containerRef.current,
@@ -240,22 +230,21 @@ class ViewerInner extends Component {
         },
         onEnter: () => {
           this.isAbove = false;
-          console.log(this.props.path, "onEnter");
           this.enterShowElements();
+          this.props.debug && console.log(this.props.path, "onEnter");
         },
         onEnterBack: () => {
-          // openLoading();
-          console.log(this.props.path, "onEnterBack");
           this.isBelow = false;
           this.enterShowElements();
+          this.props.debug && console.log(this.props.path, "onEnterBack");
         },
         onLeave: () => {
-          console.log(this.props.path, "onLeave");
+          this.props.debug && console.log(this.props.path, "onLeave");
           this.isAbove = true;
           this.leaveHideElements();
         },
         onLeaveBack: () => {
-          console.log(this.props.path, "onLeaveBack");
+          this.props.debug && console.log(this.props.path, "onLeaveBack");
           this.isBelow = true;
           this.leaveHideElements();
         },
@@ -325,7 +314,8 @@ class ViewerInner extends Component {
     }
   }
   initializeExitTween() {
-    console.log(this.props.path, "initializing exit tween ");
+    this.props.debug &&
+      console.log(this.props.path, "initializing exit tween ");
     this.exitTimeline = gsap.timeline({
       scrollTrigger: {
         scrub: true,
@@ -423,11 +413,13 @@ class ViewerInner extends Component {
   }
 
   enterShowElements() {
+    this.props.debug && console.log(this.props.path, "show-process-bar");
     gsap.set(this.processBarRef.current, {
       autoAlpha: 1,
     });
   }
   leaveHideElements() {
+    this.props.debug && console.log(this.props.path, "hide-process-bar");
     gsap.set(this.processBarRef.current, {
       autoAlpha: 0,
     });

src/heti.css

@@ -1,4 +1,4 @@
-*/@font-face {
+@font-face {
   font-family: "Heti Hei";
   src: "Heti Hei SC", "Heti Hei TC", "Heti Hei JP", "Heti Hei KR";
 }

src/index.css

@@ -10,7 +10,7 @@
   font-synthesis: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color-scheme: light dark;
+  /* color-scheme: light dark; */
   /* font-synthesis: none;
   text-rendering: optimizeLegibility;
 

vite.config.js

@@ -21,7 +21,7 @@ export default ({ mode }) =>
       obfuscatorPlugin({
         apply: "build",
         options: {
-          debugProtection: false,
+          debugProtection: true,
           compact: true,
           controlFlowFlattening: true,
           controlFlowFlatteningThreshold: 0.75,