Refactor render mode to use enum

src/components/DiagramFrame/DiagramFrame.vue

@@ -49,7 +49,7 @@
       <div
         class="footer text-skin-control px-4 py-1 flex justify-between items-center gap-3"
       >
-        <template v-if="mode === 'dynamic'">
+        <template v-if="mode === RenderMode.Dynamic">
           <div class="flex items-center gap-3 color-base">
             <button
               class="bottom-1 flex items-center left-1 hide-export"
@@ -110,9 +110,15 @@ import * as htmlToImage from "html-to-image";
 import Debug from "./Debug/Debug.vue";
 import ThemeSelect from "./ThemeSelect.vue";
 import Icon from "@/components/Icon/Icon.vue";
+import { RenderMode } from "@/store/Store";
 
 export default {
   name: "DiagramFrame",
+  setup() {
+    return {
+      RenderMode,
+    };
+  },
   computed: {
     ...mapState([
       "showTips",

src/components/DiagramFrame/SeqDiagram/LifeLineLayer/LifeLineLayer.vue

@@ -2,7 +2,7 @@
   <div
     class="life-line-layer lifeline-layer z-30 absolute h-full flex flex-col top-0"
     :style="{
-      'min-width': mode === 'dynamic' ? '200px' : 'auto',
+      'min-width': mode === RenderMode.Dynamic ? '200px' : 'auto',
       width: `calc(100% - ${leftGap}px)`,
       pointerEvents: renderParticipants ? 'none' : 'all',
     }"
@@ -64,6 +64,7 @@ import { computed } from "vue";
 import useIntersectionTop from "@/functions/useIntersectionTop";
 import useDocumentScroll from "@/functions/useDocumentScroll";
 import { getElementDistanceToTop } from "@/utils/dom";
+import { RenderMode } from "@/store/Store";
 
 export default {
   name: "life-line-layer",
@@ -73,6 +74,9 @@ export default {
     const store = useStore();
     const intersectionTop = useIntersectionTop();
     const [scrollTop] = useDocumentScroll();
+    if (store.state.mode === RenderMode.static)
+      return { translate: 0, RenderMode };
+
     const translate = computed(() => {
       let top = intersectionTop.value + scrollTop.value;
       if (
@@ -90,7 +94,7 @@ export default {
         participantOffsetTop
       );
     });
-    return { translate };
+    return { translate, RenderMode };
   },
   computed: {
     ...mapGetters([

src/components/DiagramFrame/SeqDiagram/LifeLineLayer/Participant.vue

@@ -45,6 +45,7 @@ import useIntersectionTop from "@/functions/useIntersectionTop";
 import { useStore } from "vuex";
 import { getElementDistanceToTop } from "@/utils/dom";
 import { PARTICIPANT_HEIGHT } from "@/positioning/Constants";
+import { RenderMode } from "@/store/Store";
 
 const INTERSECTION_ERROR_MARGIN = 10; // a threshold for judging whether the participant is intersecting with the viewport
 
@@ -53,7 +54,9 @@ export default {
   setup(props) {
     const store = useStore();
     const participant = ref(null);
-    if (store.state.mode === "static") return { translate: 0, participant };
+    if (store.state.mode === RenderMode.Static) {
+      return { translate: 0, participant };
+    }
 
     const intersectionTop = useIntersectionTop();
     const [scrollTop] = useDocumentScroll();

src/components/DiagramFrame/SeqDiagram/SeqDiagram.vue

@@ -7,7 +7,7 @@
          .bg-skin-base is repeated because .zenuml reset it to default theme.
      -->
     <div :style="{ paddingLeft: `${paddingLeft}px` }" class="relative">
-      <template v-if="mode === 'dynamic'">
+      <template v-if="mode === RenderMode.Dynamic">
         <life-line-layer
           :leftGap="paddingLeft"
           :context="rootContext.head()"
@@ -25,7 +25,7 @@
           :renderLifeLine="false"
         />
       </template>
-      <template v-if="mode === 'static'">
+      <template v-if="mode === RenderMode.Static">
         <life-line-layer
           :leftGap="paddingLeft"
           :context="rootContext.head()"
@@ -50,6 +50,7 @@ import FrameBuilder from "@/parser/FrameBuilder";
 import FrameBorder from "@/positioning/FrameBorder";
 import { TotalWidth } from "@/components/DiagramFrame/SeqDiagram/WidthOfContext";
 import { MARGIN } from "@/positioning/Constants";
+import { RenderMode } from "@/store/Store";
 
 const store = useStore();
 const mode = computed(() => store.state.mode);

src/core.ts

@@ -81,7 +81,7 @@ export default class ZenUml implements IZenUml {
     this._theme = config?.theme || this._theme;
     this.store.state.stickyOffset = config?.stickyOffset || 0;
     this.store.state.theme = this._theme || "default";
-    this.store.state.mode = config?.mode || "dynamic";
+    this.store.state.mode = config?.mode || RenderMode.Dynamic;
 
     // this.initialRender is used to avoid the first rendering is debounced by setTimeout.
     // The first rendering should be executed immediately. It fixes the issue that causes the blank screen on mermaid live editor.

src/store/Store.ts

@@ -25,7 +25,15 @@ export interface Warning {
   message: string;
 }
 
-export type RenderMode = "static" | "dynamic";
+/*
+ * RenderMode
+ * Static: Render once and never update, also disable sticky participants and hide the footer
+ * Dynamic: Render once and update when code changes
+ */
+export const enum RenderMode {
+  Static = "static",
+  Dynamic = "dynamic",
+}
 
 export interface StoreState {
   warning: Warning | undefined;
@@ -54,7 +62,7 @@ const Store = (): StoreOptions<StoreState> => {
       selected: [],
       cursor: null,
       showTips: false,
-      mode: "dynamic",
+      mode: RenderMode.Dynamic,
       numbering: Boolean(
         localStorage.getItem(`${location.hostname}-zenuml-numbering`),
       ),