@cloudron/pankow 3.5.18 → 3.6.0

package/components/Button.vue

@@ -12,6 +12,14 @@ const props = defineProps({
   target: String,
   iconRight: String,
   menu: Array,
+  danger: {
+    type: Boolean,
+    default: false
+  },
+  success: {
+    type: Boolean,
+    default: false
+  },
   disabled: {
     type: Boolean,
     default: false
@@ -43,7 +51,9 @@ function onClick(event) {
 </script>
 
 <template>
-  <component ref="elem" :is="href ? 'a' : 'div'" class="pankow-button" role="button" type="button" :class="{ 'pankow-button-disabled': disabled }" @click="onClick" @keydown.enter="onClick" :href="disabled ? null : href" :target="target" tabindex="0">
+  <component ref="elem" :is="href ? 'a' : 'div'" class="pankow-button" role="button" type="button" :class="{ 'pankow-button-disabled': disabled }"
+    @click="onClick" @keydown.enter="onClick" :href="disabled ? null : href" :target="target" tabindex="0"
+    :success="success || undefined" :danger="danger || undefined">
     <Menu ref="menuItem" :model="menu" v-if="menu"></Menu>
     <Spinner v-show="loading" style="stroke: white;" :class="{ 'pankow-button-icon-with-text': $slots['default'] }"/>
     <Icon v-show="!loading && icon" :icon="icon" :class="{ 'pankow-button-icon-with-text': $slots['default'] }" />

package/components/Menu.vue

@@ -69,7 +69,7 @@ const props = defineProps({
 });
 
 const openEventTimeStamp = ref(0);
-const forElement = ref(null);
+let forElement = null;
 let prevFocusElement = null;
 const isOpen = ref(false);
 let pageX = 0;
@@ -172,7 +172,7 @@ async function open(event, element = null) {
   targetBottom = element ? element.getBoundingClientRect().bottom : event.pageY;
   targetTop = element ? element.getBoundingClientRect().top : event.pageY;
   offsetY.value = element ? (element.getBoundingClientRect().height + 2) : 0; // offset in case we roll up
-  forElement.value = element;
+  forElement = element;
   prevFocusElement = document.activeElement;
 
   if (!container.value) return;
@@ -253,20 +253,19 @@ function position() {
   if (!container.value) return;
 
   const size = getHiddenElementSize(container.value);
+  const viewport = getViewport();
 
   let left = pageX;
   let top = targetBottom + 1;
   let width = container.value.offsetParent ? container.value.offsetWidth : size.width;
   let height = container.value.offsetParent ? container.value.offsetHeight : size.height;
-  let viewport = getViewport();
-
   let bottom = viewport.height - targetTop + 1;
 
   //flip
   if (left + width - document.body.scrollLeft > viewport.width) {
     // if this is like a dropdown right align instead of flip
-    if (forElement.value) {
-      left = forElement.value.getBoundingClientRect().left + (forElement.value.getBoundingClientRect().width - width);
+    if (forElement) {
+      left = forElement.getBoundingClientRect().left + (forElement.getBoundingClientRect().width - width);
     } else {
       left -= width;
     }

package/fetcher.js

@@ -38,6 +38,8 @@ async function request(uri, method, headers, query, body, options) {
                 } catch (e) {
                     throw new Error(`Failed to parse response as json for content type ${contentType}.`, e);
                 }
+            } else if (contentType.indexOf('application/octet-stream') !== -1) {
+                responseBody = await response.blob();
             } else {
                 responseBody = await response.text();
             }

package/package.json

@@ -1,11 +1,17 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.5.18",
+  "version": "3.6.0",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
-  "files": ["*.css", "*.js", "components", "viewers", "types"],
+  "files": [
+    "*.css",
+    "*.js",
+    "components",
+    "viewers",
+    "types"
+  ],
   "scripts": {
     "gallery": "cd gallery && vite",
     "build": "cd gallery && vite build",
@@ -19,12 +25,13 @@
     "@fontsource/inter": "^5.2.8",
     "@fortawesome/fontawesome-free": "^7.1.0",
     "filesize": "^11.0.13",
-    "monaco-editor": "^0.55.1"
+    "monaco-editor": "^0.55.1",
+    "online-3d-viewer": "^0.18.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.2",
+    "@vitejs/plugin-vue": "^6.0.3",
     "typescript": "^5.9.3",
-    "vite": "^7.2.7",
-    "vue": "^3.5.25"
+    "vite": "^7.3.0",
+    "vue": "^3.5.26"
   }
 }

package/tooltip.js

@@ -38,9 +38,9 @@ function isElementHidden(element) {
 }
 
 function remove(key, target) {
-    if (tooltips[key]) tooltips[key].remove();
+    if (tooltips[key].element) tooltips[key].element.remove();
 
-    delete tooltips[key];
+    tooltips[key].element = null;
     clearInterval(intervals[key]);
 
     if (target) {
@@ -49,45 +49,49 @@ function remove(key, target) {
     }
 }
 
-function update(target, value, modifiers, tooltip) {
-    if (!tooltip) return;
+function update(target, modifiers, key) {
+    if (!tooltips[key].element) return;
 
-    tooltip.innerText = value;
+    tooltips[key].element.innerText = tooltips[key].value;
 
     // BOTTOM is default
     const pos = modifiers.top ? TOP : (modifiers.left ? LEFT : (modifiers.right ? RIGHT : BOTTOM));
 
     const targetRect = target.getBoundingClientRect();
-    const tooltipRect = tooltip.getBoundingClientRect();
+    const tooltipRect = tooltips[key].element.getBoundingClientRect();
 
-    if (pos === TOP || pos === BOTTOM) tooltip.style.left = (targetRect.left + targetRect.width/2) - (tooltipRect.width/2) + 'px';
-    else if (pos === LEFT) tooltip.style.left = (targetRect.left - tooltipRect.width - padding) + 'px';
-    else tooltip.style.left = (targetRect.left + targetRect.width + padding) + 'px';
+    if (pos === TOP || pos === BOTTOM) tooltips[key].element.style.left = (targetRect.left + targetRect.width/2) - (tooltipRect.width/2) + 'px';
+    else if (pos === LEFT) tooltips[key].element.style.left = (targetRect.left - tooltipRect.width - padding) + 'px';
+    else tooltips[key].element.style.left = (targetRect.left + targetRect.width + padding) + 'px';
 
-    if (pos === LEFT || pos === RIGHT) tooltip.style.top = (targetRect.top + targetRect.height/2) - (tooltipRect.height/2) + 'px';
-    else if (pos === TOP) tooltip.style.top = (targetRect.top - tooltipRect.height - padding) + 'px';
-    else tooltip.style.top = (targetRect.bottom + padding) + 'px';
+    if (pos === LEFT || pos === RIGHT) tooltips[key].element.style.top = (targetRect.top + targetRect.height/2) - (tooltipRect.height/2) + 'px';
+    else if (pos === TOP) tooltips[key].element.style.top = (targetRect.top - tooltipRect.height - padding) + 'px';
+    else tooltips[key].element.style.top = (targetRect.bottom + padding) + 'px';
 }
 
 function mounted(el, binding, vnode) {
     const key = vnode.ctx.uid;
+    tooltips[key] = {
+        element: null,
+        value: binding.value
+    };
 
     el.addEventListener('mouseenter', () => {
-        if (!binding.value) return remove(key);
+        if (!tooltips[key].value) return;
 
-        const tooltip = document.createElement('div');
-        tooltips[key] = tooltip;
+        const element = document.createElement('div');
+        tooltips[key].element = element;
 
-        tooltip.setAttribute('id', key);
-        tooltip.setAttribute('role', 'tooltip');
-        tooltip.setAttribute('aria-hidden', 'false');
-        tooltip.classList.add('pankow-tooltip');
-        window.document.body.appendChild(tooltip);
+        element.setAttribute('id', key);
+        element.setAttribute('role', 'tooltip');
+        element.setAttribute('aria-hidden', 'false');
+        element.classList.add('pankow-tooltip');
+        window.document.body.appendChild(element);
 
         el.setAttribute('aria-expanded', 'true');
         el.setAttribute('aria-describedby', key);
 
-        update(el, binding.value, binding.modifiers, tooltip);
+        update(el, binding.modifiers, key);
 
         intervals[key] = setInterval(() => {
             if (isElementHidden(el)) remove(key, el)
@@ -101,12 +105,18 @@ function mounted(el, binding, vnode) {
 }
 
 function updated(el, binding, vnode) {
-    if (!binding.value) return remove(vnode.ctx.uid, el);
-    update(el, binding.value, binding.modifiers, tooltips[vnode.ctx.uid]);
+    if (!binding.value) remove(vnode.ctx.uid, el);
+
+    tooltips[vnode.ctx.uid].value = binding.value;
+
+    update(el, binding.modifiers, vnode.ctx.uid);
 }
 
 function beforeUnmount(el, binding, vnode) {
+    if (!tooltips[vnode.ctx.uid]) return;
+
     remove(vnode.ctx.uid, el);
+    delete tooltips[vnode.ctx.uid];
 }
 
 const tooltip = {

package/viewers/ThreeDViewer.vue

@@ -0,0 +1,102 @@
+<script setup>
+
+import { ref, useTemplateRef, onMounted } from 'vue';
+import Button from '../components/Button.vue';
+import MainLayout from '../components/MainLayout.vue';
+import TopBar from '../components/TopBar.vue';
+import utils from '../utils.js';
+import { EmbeddedViewer, RGBAColor, RGBColor, EdgeSettings } from 'online-3d-viewer';
+
+const emits = defineEmits([ 'close' ]);
+const props = defineProps({
+  tr: {
+    type: Function,
+    default(id) { console.warn('Missing tr for ThreeDViewer'); return utils.translation(id); }
+  }
+});
+
+const entry = ref(null);
+const container = useTemplateRef('container');
+
+const SUPPORTED_EXTENSIONS = [
+  '3dm', '3ds', '3mf', 'amf', 'bim', 'brep',
+  'dae', 'fbx', 'fcstd', 'glb', 'gltf',
+  'ifc', 'igs', 'iges', 'stp', 'step',
+  'stl', 'obj', 'off', 'ply', 'wrl',
+];
+
+function canHandle(e) {
+  return SUPPORTED_EXTENSIONS.includes(e.extension.toLowerCase());
+}
+
+let viewer;
+
+async function open(e, content) {
+  if (!e || e.isDirectory || !canHandle(e)) return;
+
+  entry.value = e;
+
+  viewer.LoadModelFromFileList([ new File([content], e.fileName) ], {
+    onModelLoaded: () => viewer.Resize()
+  });
+
+  // setTimeout(() => viewer.Resize(), 1000);
+}
+
+function onClose() {
+  emits('close');
+}
+
+onMounted(() => {
+  viewer = new EmbeddedViewer(container.value, {
+    backgroundColor: new RGBAColor(59, 68, 76, 0),
+    defaultColor: new RGBColor(65, 131, 196),
+    edgeSettings: new EdgeSettings(false, new RGBColor(0, 0, 0), 1),
+  });
+
+  const resizeObserver = new ResizeObserver((entries) => {
+    viewer.Resize();
+  });
+
+  resizeObserver.observe(container.value);
+});
+
+defineExpose({
+  canHandle,
+  open,
+});
+
+</script>
+
+<template>
+  <MainLayout :gap="false" class="main-layout">
+    <template #header>
+      <TopBar class="navbar" :gap="false">
+        <template #left>
+        </template>
+        <template #center>
+          <div class="file-name">{{ entry ? entry.fileName : '' }}</div>
+        </template>
+        <template #right>
+          <Button icon="fa-solid fa-xmark" @click="onClose">{{ tr('main.dialog.close') }}</Button>
+        </template>
+      </TopBar>
+    </template>
+    <template #body>
+      <div ref="container" class="threed-object-container"></div>
+    </template>
+  </MainLayout>
+</template>
+
+<style scoped>
+
+.threed-object-container {
+  width: 100%;
+  height: 100%;
+}
+
+.main-layout {
+  background-color: white;
+}
+
+</style>

package/viewers.js

@@ -2,10 +2,12 @@ import GenericViewer from './viewers/GenericViewer.vue';
 import ImageViewer from './viewers/ImageViewer.vue';
 import PdfViewer from './viewers/PdfViewer.vue';
 import TextViewer from './viewers/TextViewer.vue';
+import ThreeDViewer from './viewers/ThreeDViewer.vue';
 
 export {
     GenericViewer,
     ImageViewer,
     PdfViewer,
     TextViewer,
+    ThreeDViewer,
 };