@brftech/filex-core 0.1.56

package/src/viewers/DrawioViewer.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+/**
+ * DrawioViewer — embed diagrams.net via iframe + postMessage handshake.
+ *
+ * The diagrams.net embed mode (`?embed=1&proto=json`) handshakes via
+ * window.postMessage:
+ *
+ *   1. iframe sends {event:'init'}                   ← bootstrap
+ *   2. parent sends {action:'load', xml}             ← our payload
+ *   3. iframe sends {event:'save', xml} on save      ← we POST back
+ *
+ * No external library required — diagrams.net hosts the entire editor
+ * inside the iframe. We just fetch the source XML on mount and route
+ * `save` events back to the configured `pdfSaveUrl`-style endpoint
+ * (drawio uses the same shape: POST `{path, content}` body).
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { fetchViewerText } from '../composables/useViewerFetch';
+
+const props = defineProps<{
+  url: string;
+  filePath: string;
+  ext: string;
+  drawioUrl?: string;
+  /** Optional save endpoint. When unset the iframe stays read-only. */
+  saveUrl?: string;
+  readOnly?: boolean;
+  t?: (key: string) => string;
+  authHeaders?: () => Record<string, string>;
+  authCredentials?: RequestCredentials;
+}>();
+
+const iframeRef = ref<HTMLIFrameElement | null>(null);
+const error = ref<string | null>(null);
+const status = ref<'loading' | 'ready' | 'saving' | 'saved' | 'error'>('loading');
+const readOnly = ref(!!props.readOnly || !props.saveUrl);
+
+// drawioUrl=null is the operator's "off" signal — FileExplorer wipes it
+// when the capabilities probe reports drawio offline. Don't silently fall
+// back to the public embed.diagrams.net iframe, that defeats the point of
+// gating: render a "not configured" pane instead so the user understands
+// why the editor isn't loading.
+//
+// `drawioBase` MUST be a computed (not a const), otherwise a stale null
+// at mount time (capabilities probe still inflight) gets cached for the
+// component's lifetime — leading to the spurious
+// "viewer.drawio.disabled" fallback after the capability flips to "ok".
+const drawioBase = computed<string | null>(() =>
+  props.drawioUrl ? props.drawioUrl.replace(/\/$/, '') : null,
+);
+const iframeSrc = computed<string>(() => {
+  if (!drawioBase.value) return '';
+  const params = new URLSearchParams({
+    embed: '1',
+    proto: 'json',
+    spin: '1',
+    saveAndExit: '0',
+    noSaveBtn: readOnly.value ? '1' : '0',
+    noExitBtn: '1',
+    ui: 'kennedy',
+    modified: 'unsavedChanges',
+  });
+  return `${drawioBase.value}/?${params.toString()}`;
+});
+
+let pendingXml: string = '';
+
+async function loadXml(): Promise<void> {
+  status.value = 'loading';
+  error.value = null;
+  try {
+    pendingXml = await fetchViewerText({
+      url: props.url,
+      headers: props.authHeaders?.() ?? {},
+      credentials: props.authCredentials,
+    });
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'fetch failed';
+    status.value = 'error';
+  }
+}
+
+function send(msg: unknown): void {
+  iframeRef.value?.contentWindow?.postMessage(JSON.stringify(msg), '*');
+}
+
+async function persist(xml: string): Promise<void> {
+  if (!props.saveUrl) return;
+  status.value = 'saving';
+  try {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      ...(props.authHeaders?.() ?? {}),
+    };
+    const res = await fetch(props.saveUrl, {
+      method: 'POST',
+      headers,
+      credentials: props.authCredentials || 'same-origin',
+      body: JSON.stringify({ path: props.filePath, content: xml }),
+    });
+    if (!res.ok) {
+      throw new Error(`${res.status} ${res.statusText}`);
+    }
+    status.value = 'saved';
+    setTimeout(() => {
+      if (status.value === 'saved') status.value = 'ready';
+    }, 2500);
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'save failed';
+    status.value = 'error';
+  }
+}
+
+function onMessage(ev: MessageEvent): void {
+  if (typeof ev.data !== 'string' || ev.data.length === 0) return;
+  // Drawio messages always start with '{' or '<'. Ignore anything else
+  // (devtools / unrelated postMessage senders inside the same window).
+  const first = ev.data[0];
+  if (first !== '{' && first !== '<') return;
+  let payload: any;
+  try {
+    payload = JSON.parse(ev.data);
+  } catch {
+    return;
+  }
+  if (!payload || typeof payload !== 'object') return;
+  switch (payload.event) {
+    case 'init':
+      send({
+        action: 'load',
+        xml: pendingXml,
+        autosave: 0,
+      });
+      status.value = 'ready';
+      break;
+    case 'save':
+      if (typeof payload.xml === 'string') {
+        persist(payload.xml);
+      }
+      break;
+    case 'export':
+      // Could persist a PNG/SVG render; out of V1 scope.
+      break;
+    case 'autosave':
+      if (typeof payload.xml === 'string' && !readOnly.value) {
+        persist(payload.xml);
+      }
+      break;
+    default:
+      break;
+  }
+}
+
+function bootIfReady(): void {
+  if (!drawioBase.value) {
+    error.value = tt('viewer.drawio.disabled', 'Drawio (diagrams.net) yapılandırılmamış.');
+    status.value = 'error';
+    return;
+  }
+  // Clear a previous "disabled" error in case the prop just became
+  // available (capability probe finished after mount).
+  if (error.value === tt('viewer.drawio.disabled', 'Drawio (diagrams.net) yapılandırılmamış.')) {
+    error.value = null;
+    status.value = 'loading';
+  }
+  loadXml();
+}
+
+onMounted(() => {
+  window.addEventListener('message', onMessage);
+  bootIfReady();
+});
+
+watch(() => props.drawioUrl, bootIfReady);
+
+onBeforeUnmount(() => {
+  window.removeEventListener('message', onMessage);
+});
+
+function tt(key: string, fallback: string): string {
+  return props.t ? props.t(key) : fallback;
+}
+</script>
+
+<template>
+  <div class="filex-viewer-drawio">
+    <div v-if="error" class="filex-viewer-fallback">
+      <span class="filex-viewer-fallback__icon">📐</span>
+      <p>{{ error }}</p>
+    </div>
+    <iframe
+      v-else
+      ref="iframeRef"
+      :src="iframeSrc"
+      class="filex-viewer-drawio__frame"
+      title="diagrams.net editor"
+    />
+  </div>
+</template>
+
+<style scoped>
+.filex-viewer-drawio {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 70vh;
+  background: var(--fe-bg, #fff);
+}
+.filex-viewer-drawio__bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 12px;
+  background: var(--fe-bg-elev, #f7f8fa);
+  border-bottom: 1px solid var(--fe-border, #e2e6ed);
+  font-size: 12px;
+  color: var(--fe-text-muted, #5a6475);
+}
+.filex-viewer-drawio__status[data-state="error"] { color: var(--fe-danger, #dc2626); }
+.filex-viewer-drawio__status[data-state="saved"] { color: #059669; }
+.filex-viewer-drawio__readonly {
+  font-style: italic;
+  margin-left: auto;
+}
+.filex-viewer-drawio__frame {
+  flex: 1;
+  width: 100%;
+  border: 0;
+  background: #fafafa;
+  min-height: 0;
+}
+.filex-viewer-fallback {
+  text-align: center;
+  padding: 32px;
+  color: var(--fe-text-muted, #5a6475);
+}
+.filex-viewer-fallback__icon {
+  font-size: 48px;
+  display: block;
+  margin-bottom: 12px;
+}
+</style>

package/src/viewers/EpubViewer.vue

@@ -0,0 +1,307 @@
+<script setup lang="ts">
+/**
+ * EpubViewer — flowable EPUB reader via `epubjs`.
+ *
+ * Lazy-imports `epubjs` (~80 KB gzipped). epub.js renders the publication
+ * inside an iframe (default `flow: 'paginated'`), but we use it in
+ * scrolled-doc mode only when the user toggles the "fit-width" flag — by
+ * default we keep paginated since that matches reader-app expectations.
+ *
+ * UX:
+ *   - prev/next page buttons (also keyboard arrow keys via composable)
+ *   - collapsible TOC sidebar (built from `book.loaded.navigation`)
+ *   - font size +/- (Themes API)
+ *   - graceful fallback if peer not installed
+ */
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+const props = defineProps<{
+  url: string;
+  mime?: string;
+  ext: string;
+  t?: (key: string) => string;
+  authHeaders?: () => Record<string, string>;
+  authCredentials?: RequestCredentials;
+}>();
+
+interface TocNode {
+  href: string;
+  label: string;
+  subitems?: TocNode[];
+}
+
+const root = ref<HTMLDivElement | null>(null);
+const containerRef = ref<HTMLDivElement | null>(null);
+const error = ref<string | null>(null);
+const toc = ref<TocNode[]>([]);
+const tocOpen = ref(false);
+const fontSize = ref(100);
+const ready = ref(false);
+const loading = ref(true);
+
+let book: any = null;
+let rendition: any = null;
+
+async function load(): Promise<void> {
+  loading.value = true;
+  ready.value = false;
+  error.value = null;
+  let mod: any = null;
+  try {
+    mod = await import(/* @vite-ignore */ 'epubjs');
+  } catch {
+    error.value = props.t
+      ? props.t('viewer.peer_not_installed')
+      : 'EPUB viewer requires `epubjs` — install or use download.';
+    loading.value = false;
+    return;
+  }
+  try {
+    const Epub = mod.default ?? mod;
+    // epub.js wants a URL (it then fetches with XHR). When the host
+    // site requires auth headers we have to load the file ourselves
+    // and pass an ArrayBuffer instead.
+    let source: string | ArrayBuffer = props.url;
+    if (props.authHeaders) {
+      const headers = props.authHeaders();
+      const res = await fetch(props.url, {
+        headers,
+        credentials: props.authCredentials || 'same-origin',
+      });
+      if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+      source = await res.arrayBuffer();
+    }
+    book = Epub(source);
+    if (!containerRef.value) {
+      throw new Error('EPUB mount target missing');
+    }
+    rendition = book.renderTo(containerRef.value, {
+      width: '100%',
+      height: '100%',
+      flow: 'paginated',
+      manager: 'default',
+    });
+    await rendition.display();
+    rendition.themes.fontSize(fontSize.value + '%');
+    const nav = await book.loaded.navigation;
+    toc.value = (nav?.toc ?? []) as TocNode[];
+    ready.value = true;
+  } catch (err) {
+    error.value =
+      err instanceof Error ? err.message : 'EPUB load failed';
+  } finally {
+    loading.value = false;
+  }
+}
+
+function next(): void {
+  rendition?.next?.();
+}
+function prev(): void {
+  rendition?.prev?.();
+}
+function gotoHref(href: string): void {
+  rendition?.display?.(href);
+  tocOpen.value = false;
+}
+function bigger(): void {
+  fontSize.value = Math.min(200, fontSize.value + 10);
+  rendition?.themes?.fontSize(fontSize.value + '%');
+}
+function smaller(): void {
+  fontSize.value = Math.max(60, fontSize.value - 10);
+  rendition?.themes?.fontSize(fontSize.value + '%');
+}
+
+function onKey(ev: KeyboardEvent): void {
+  if (ev.key === 'ArrowRight' || ev.key === 'PageDown') next();
+  else if (ev.key === 'ArrowLeft' || ev.key === 'PageUp') prev();
+}
+
+onMounted(() => {
+  load();
+  window.addEventListener('keydown', onKey);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKey);
+  try {
+    rendition?.destroy?.();
+  } catch {
+    /* ignore */
+  }
+  try {
+    book?.destroy?.();
+  } catch {
+    /* ignore */
+  }
+  rendition = null;
+  book = null;
+});
+
+watch(
+  () => props.url,
+  () => {
+    if (rendition) {
+      try {
+        rendition.destroy();
+      } catch {
+        /* ignore */
+      }
+    }
+    if (book) {
+      try {
+        book.destroy();
+      } catch {
+        /* ignore */
+      }
+    }
+    book = null;
+    rendition = null;
+    load();
+  },
+);
+
+function tt(key: string, fallback: string): string {
+  return props.t ? props.t(key) : fallback;
+}
+</script>
+
+<template>
+  <div ref="root" class="filex-viewer-epub">
+    <div v-if="error" class="filex-viewer-fallback">
+      <span class="filex-viewer-fallback__icon">📖</span>
+      <p>{{ error }}</p>
+    </div>
+    <template v-else>
+      <div ref="containerRef" class="filex-viewer-epub__rendition" />
+      <div v-if="ready" class="filex-viewer-epub__nav">
+        <button type="button" class="filex-viewer-btn" @click="prev" :disabled="!ready">‹</button>
+        <button type="button" class="filex-viewer-btn" @click="next" :disabled="!ready">›</button>
+      </div>
+      <div v-if="loading" class="filex-viewer-epub__loading">
+        {{ tt('viewer.loading', 'Loading…') }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.filex-viewer-epub__nav {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+  padding: 4px 8px;
+  background: var(--fe-bg-elev, rgba(255, 255, 255, 0.9));
+  border: 1px solid var(--fe-border, #e2e6ed);
+  border-radius: 6px;
+  backdrop-filter: blur(4px);
+}
+.filex-viewer-epub {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 70vh;
+  background: var(--fe-bg, #fff);
+  color: var(--fe-text, #1a1e27);
+  position: relative;
+}
+.filex-viewer-epub__bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: var(--fe-bg-elev, #f7f8fa);
+  border-bottom: 1px solid var(--fe-border, #e2e6ed);
+  font-size: 13px;
+}
+.filex-viewer-spacer { flex: 1; }
+.filex-viewer-epub__fs {
+  display: inline-block;
+  min-width: 40px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  color: var(--fe-text-muted, #5a6475);
+}
+.filex-viewer-epub__main {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+.filex-viewer-epub__rendition {
+  flex: 1;
+  min-height: 0;
+}
+.filex-viewer-epub__toc {
+  width: 260px;
+  border-right: 1px solid var(--fe-border, #e2e6ed);
+  overflow-y: auto;
+  padding: 12px 0;
+  background: var(--fe-bg-elev, #f7f8fa);
+}
+.filex-viewer-epub__toc ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.filex-viewer-epub__toc-link {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: 0;
+  padding: 6px 14px;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+.filex-viewer-epub__toc-link:hover {
+  background: var(--fe-bg-hover, #edf0f5);
+}
+.filex-viewer-epub__toc-link.is-child {
+  padding-left: 28px;
+  color: var(--fe-text-muted, #5a6475);
+  font-size: 12px;
+}
+.filex-viewer-epub__loading {
+  position: absolute;
+  inset: auto 0 0 0;
+  text-align: center;
+  padding: 6px;
+  background: rgba(0, 0, 0, 0.05);
+  font-size: 12px;
+  color: var(--fe-text-muted, #5a6475);
+}
+.filex-viewer-fallback {
+  text-align: center;
+  padding: 32px;
+  color: var(--fe-text-muted, #5a6475);
+}
+.filex-viewer-fallback__icon {
+  font-size: 48px;
+  display: block;
+  margin-bottom: 12px;
+}
+.filex-viewer-btn {
+  border: 1px solid var(--fe-border, #e2e6ed);
+  background: var(--fe-bg, #fff);
+  color: var(--fe-text, #1a1e27);
+  padding: 4px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+}
+.filex-viewer-btn:hover:not(:disabled) {
+  background: var(--fe-bg-hover, #edf0f5);
+}
+.filex-viewer-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>