Download as HTML

ltouroumov · Oct 15, 2024 · a72a230 · a72a230
1 parent 7807285
commit a72a230
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 19 deletions.
diff --git a/components/viewer/ViewProjectObj.vue b/components/viewer/ViewProjectObj.vue
@@ -35,6 +35,7 @@
           <template v-if="obj.isSelectableMultiple">
             <div class="obj-select-multi">
               <div
+                v-if="canToggle"
                 class="i-carbon-subtract-alt text-xl"
                 :class="{
                   'text-green-400': selectedAmount > minSelectedAmount,
@@ -44,6 +45,7 @@
               />
               <span class="mx-1">{{ selectedAmount }}</span>
               <div
+                v-if="canToggle"
                 class="i-carbon-add-alt text-xl"
                 :class="{
                   'text-green-400': selectedAmount < maxSelectedAmount,

diff --git a/components/viewer/modal/BackpackModal.vue b/components/viewer/modal/BackpackModal.vue
@@ -23,7 +23,7 @@
               class="btn btn-primary"
               @click="backpackToHtml"
             >
-              Download HTML (Beta)
+              Download HTML
             </button>
           </div>
           <div v-show="!isLoading" class="flex-column pack-actions-options">
@@ -55,7 +55,11 @@
             </div>
           </div>
         </div>
-        <BackpackView ref="backpackRef" :is-loading="isLoading" />
+        <BackpackView
+          ref="backpackRef"
+          :vertical-score="!isLoading"
+          :show-title="isLoading"
+        />
         <div class="pack-import-export">
           <ImportCode />
           <ExportCode />
@@ -68,9 +72,11 @@
 <script setup lang="ts">
 import canvasSize from 'canvas-size';
 import { elementToSVG, inlineResources } from 'dom-to-svg';
+import { h, render } from 'vue';
 import { useToast } from 'vue-toastification';
 
 import ModalDialog from '~/components/utils/ModalDialog.vue';
+import BackpackExportWrapper from '~/components/viewer/utils/BackpackExportWrapper.vue';
 import BackpackView from '~/components/viewer/utils/BackpackView.vue';
 import ExportCode from '~/components/viewer/utils/ExportCode.vue';
 import ImportCode from '~/components/viewer/utils/ImportCode.vue';
@@ -205,18 +211,15 @@ const copyStyles = (sourceDoc: Document, targetDoc: Document): void => {
 };
 
 const backpackToHtml = async () => {
-  const vNode = backpackRef.value;
-  if (!vNode) return;
   const wRef = window.open('', '_blank', 'popup=yes,width=1200,height=1000');
   if (!wRef) return;
 
-  console.log(vNode.$el);
-
   const wDoc = wRef.window.document;
   copyStyles(window.document, wDoc);
-  const wNode = vNode.$el.cloneNode(true);
   wDoc.body.setAttribute('data-bs-theme', 'dark');
-  wDoc.body.appendChild(wNode);
+
+  const vNode = h(BackpackExportWrapper, {});
+  render(vNode, wDoc.body);
 };
 </script>
 

diff --git a/components/viewer/utils/BackpackExportWrapper.vue b/components/viewer/utils/BackpackExportWrapper.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="export-container" data-bs-theme="dark">
+    <BackpackView
+      :vertical-score="false"
+      :show-title="true"
+      :lock-backpack="true"
+      :hide-disabled-addons="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import BackpackView from '~/components/viewer/utils/BackpackView.vue';
+</script>
+
+<style scoped lang="scss">
+.export-container {
+  padding: 1rem;
+}
+</style>
diff --git a/components/viewer/utils/BackpackView.vue b/components/viewer/utils/BackpackView.vue
@@ -1,15 +1,11 @@
 <template>
-  <div
-    ref="backpackRef"
-    class="backpack-container"
-    :class="{ backpackRender: isLoading }"
-  >
-    <div v-if="isLoading" class="project-title">
+  <div ref="backpackRef" class="backpack-container">
+    <div v-if="showTitle" class="project-title">
       {{ project?.projectName }}
     </div>
     <div class="pack-info-container">
       <div class="pack-scores">
-        <ViewScoreStatus :vertical="!isLoading" />
+        <ViewScoreStatus :vertical="verticalScore" />
       </div>
     </div>
     <div
@@ -29,7 +25,9 @@
             :row="row"
             :width="packRow.objectWidth"
             :view-object="objectMode"
-            :hide-disabled-addons="!disabledAddonsInBackpack"
+            :hide-disabled-addons="
+              !disabledAddonsInBackpack || hideDisabledAddons
+            "
           />
         </div>
       </div>
@@ -46,8 +44,11 @@ import { useProjectRefs, useProjectStore } from '~/composables/store/project';
 import { useSettingRefs } from '~/composables/store/settings';
 import { ViewContext } from '~/composables/viewer';
 
-defineProps<{
-  isLoading: boolean;
+const $props = defineProps<{
+  showTitle: boolean;
+  verticalScore: boolean;
+  lockBackpack?: boolean;
+  hideDisabledAddons?: boolean;
 }>();
 
 const { getObject, getObjectRow, getRow, project } = useProjectStore();
@@ -79,7 +80,8 @@ const packRows = computed(() => {
   );
 });
 const objectMode = computed(() => {
-  if (lockBackpackObjects.value) return ViewContext.BackpackDisabled;
+  if ($props.lockBackpack || lockBackpackObjects.value)
+    return ViewContext.BackpackDisabled;
   else return ViewContext.BackpackEnabled;
 });
 </script>