fix service worker update

zazuko · Nov 29, 2024 · 60e1374 · 60e1374
1 parent de21495
commit 60e1374
Show file tree

Hide file tree

Showing 9 changed files with 6,932 additions and 2,678 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,12 +14,10 @@
     "dev:vscode": "vite --config vite.config.vscode.ts"
   },
   "dependencies": {
-    "@dagrejs/dagre": "^1.1.4",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@primevue/themes": "^4.2.1",
-    "@rdfjs-elements/rdf-editor": "^0.5.8",
-    "@vue-flow/controls": "^1.1.2",
-    "@vue-flow/core": "^1.41.4",
-    "@vue-flow/minimap": "^1.5.0",
+    "@rdfjs-elements/rdf-editor": "^0.5.10",
+    "@vue-flow/core": "^1.41.5",
     "@zazuko/env": "^2.4.2",
     "@zazuko/prefixes": "^2.2.0",
     "elkjs": "^0.9.3",
@@ -30,6 +28,7 @@
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@rdfjs/types": "^1.1.2",
+    "@rollup/plugin-inject": "^5.0.5",
     "@rushstack/eslint-patch": "^1.8.0",
     "@tsconfig/node20": "^20.1.4",
     "@types/node": "^20.14.5",
@@ -42,6 +41,7 @@
     "rollup-plugin-node-polyfills": "^0.2.1",
     "typescript": "~5.4.0",
     "vite": "^5.4.10",
+    "vite-plugin-pwa": "^0.21.0",
     "vue-tsc": "^2.1.10"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -108,7 +108,7 @@ function onNdeSelected(term: Term) {
 
 
 
-  <Dialog v-model:visible="showAboutDialog" modal header="Zazuko Sketch" :style="{ width: '60rem' }">
+  <Dialog v-model:visible="showAboutDialog" modal header="Zazuko RDF Sketch" :style="{ width: '60rem' }">
     <div style="display: flex; flex-direction: row; gap: 24px">  
       <img src="/img/icons/zazuko_icon.svg" alt="Zazuko Logo" style="width: 100px;">
 

diff --git a/src/components/GraphView.vue b/src/components/GraphView.vue
@@ -1,14 +1,5 @@
 <template>
-   <svg style="height: 0; width: 0;">
-        <defs>        
-          <marker id="big-arrow" class="vue-flow__arrowhead" viewBox="-10 -10 20 20" refX="0" refY="0" markerWidth="12.5" markerHeight="12.5" markerUnits="strokeWidth" orient="auto-start-reverse">
-          <polyline stroke-linecap="round" stroke-linejoin="round" fill="rgb(177, 177, 183)" points="-10,-8 0,0 -10, 8, -10,-8" style="stroke: rgb(177, 177, 183); stroke-width: 1;"></polyline>
-          </marker>
-          <marker id="circle" class="vue-flow__arrowhead" viewBox="-10 -10 20 20" refX="0" refY="0" markerWidth="12.5" markerHeight="12.5" markerUnits="strokeWidth" orient="auto-start-reverse">
-          <circle stroke-linecap="round" stroke-linejoin="round" fill="rgb(177, 177, 183)" rx="0" ry="0" r="5" style="stroke: rgb(177, 177, 183); stroke-width: 1;"></circle>
-          </marker>
-        </defs>
-    </svg>
+
 
     <VueFlow :nodes="nodes" :edges="edges" :min-zoom="0.05" :max-zoom="10" @node-drag="onNodeDrag" @edge-click="zoomToNode" >
 
@@ -30,18 +21,16 @@ import type { Dataset } from '@rdfjs/types';
 import { linksFromResources, resourcesFromDataset } from '../resources-utils';
 import FloatingEdge from './graph/floating-edge/FloatingEdge.vue';
 
-import { VueFlow, useVueFlow, type Node, type Edge, type NodeDragEvent} from '@vue-flow/core';
-import '@vue-flow/minimap/dist/style.css';
-import '@vue-flow/controls/dist/style.css';
+import { VueFlow, useVueFlow, type Node, type Edge, type NodeDragEvent, MarkerType} from '@vue-flow/core';
 
 import { useLayout } from '../layout/use-layout'; 
 import ResourceNode  from './graph/resource-node/ResourceNode.vue'
 
 
-type CustomNodeTypes = 'custom' | 'special'
-type CustomNode = Node<Resource, {}, CustomNodeTypes>
+export type CustomNodeTypes = 'custom' | 'special'
+export type CustomNode = Node<Resource, {}, CustomNodeTypes>
 type CustomEdgeTypes = 'custom' | 'special'
-type CustomEdge = Edge<any, any, CustomEdgeTypes>
+export type CustomEdge = Edge<any, any, CustomEdgeTypes>
 
 interface GraphViewProps {
   dataset: Dataset,
@@ -84,8 +73,7 @@ watch(resources, async (newResources) => {
     animated: false,
     data: link,
     type: 'custom',
-    markerEnd: 'big-arrow',
-    markerStart: 'circle'
+    markerEnd:  MarkerType.ArrowClosed
   }));
 
   const nodesWithLayout = await elkLayout(nodesWithoutLayout, newEdges);

diff --git a/src/components/graph/floating-edge/FloatingEdge.vue b/src/components/graph/floating-edge/FloatingEdge.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import { computed, type CSSProperties } from 'vue'
 import type { EdgeProps, GraphNode, MarkerType } from '@vue-flow/core'
-import { BaseEdge, getBezierPath, useVueFlow } from '@vue-flow/core'
+import { BaseEdge, getBezierPath } from '@vue-flow/core'
 import { getEdgeParams } from './floating-edge-utils'
-const { fitView } = useVueFlow()
 
 interface FloatingEdgeProps extends EdgeProps {
   id: string
@@ -28,13 +27,13 @@ const newEdgePath = computed(
     }
 
     
-    const sx = props.sourceX // < props.targetX ? props.sourceX  - 3 : props.sourceX + 3;
+    const sx = props.sourceX  < props.targetX ? props.sourceX  - 3 : props.sourceX + 3;
     const sy = props.sourceY;
     const sourcePos = props.sourcePosition;
       return getBezierPath({
         sourceX: sx,
         sourceY: sy,
-        targetX: edgeParams.value.tx,
+        targetX: edgeParams.value.tx < edgeParams.value.sx ? edgeParams.value.tx + 3 : edgeParams.value.tx - 3,
         targetY: edgeParams.value.ty,
         sourcePosition: sourcePos,
         targetPosition: edgeParams.value.targetPos,

diff --git a/src/components/graph/resource-node/ResourceNode.vue b/src/components/graph/resource-node/ResourceNode.vue
@@ -36,9 +36,6 @@ function zoomToNode(term: Term) {
       <header class="resource-card-header">
 
         <h3 class="resource-title">
-        <!--<TermTooltip :label="props.data.resource.id">
-            {{ props.data.resource.name }}
-          </TermTooltip>--> 
           {{ props.data.resource.name }}
 
         </h3>
@@ -48,7 +45,7 @@ function zoomToNode(term: Term) {
          <div v-for="(property, index) in props.data.resource.properties" :key="index" :data-id="property.id" class="table-row">
          <div>
           <div v-for="value in property.values" :key="value.value" style="position: relative;">
-            <Handle v-if="value.termType === 'NamedNode' || value.termType === 'BlankNode'" type="source" :position="Position.Left" :id="`${props.data.resource.id}-${property.id}-left`" style="opacity: 0" />
+            <Handle v-if="value.termType === 'NamedNode' || value.termType === 'BlankNode'" type="source" :position="Position.Left" :id="`${props.data.resource.id}-${property.id}-left`" style="opacity: 0" :connectable="false"></Handle>
           </div>
         </div>
         <div class="predicate">
@@ -62,7 +59,7 @@ function zoomToNode(term: Term) {
         </div>
 
         <div v-for="value in property.values" :key="value.value" style="position: relative;">
-          <Handle v-if="value.termType === 'NamedNode' || value.termType === 'BlankNode'" type="source" :position="Position.Right" :id="`${props.data.resource.id}-${property.id}-right`" style="opacity: 0;" />
+          <Handle v-if="value.termType === 'NamedNode' || value.termType === 'BlankNode'" type="source" :position="Position.Right" :id="`${props.data.resource.id}-${property.id}-right`" style="opacity: 0;" :connectable="false"/>
         </div>
 
       </div>

diff --git a/src/constant/rdf-format.ts b/src/constant/rdf-format.ts
@@ -3,7 +3,7 @@ export enum RdfSerializationType {
     Trig = 'application/trig',
     NQuads = 'application/n-quads',
     NTriples = 'application/n-triples',
-    N3 = 'text/n3',
+    //  N3 = 'text/n3',
     Turtle = 'text/turtle',
     RdfXML = 'application/rdf+xml',
 }
@@ -34,11 +34,11 @@ export const rdfFormats: RdfFormat[] = [
         name: 'N-Triples',
         type: RdfSerializationType.NTriples,
     },
-    {
-        contentType: RdfSerializationType.N3,
-        name: 'N3',
-        type: RdfSerializationType.N3,
-    },
+    /*  {
+          contentType: RdfSerializationType.N3,
+          name: 'N3',
+          type: RdfSerializationType.N3,
+      },*/
 
     {
         contentType: RdfSerializationType.RdfXML,

diff --git a/src/layout/use-layout.ts b/src/layout/use-layout.ts
@@ -1,4 +1,3 @@
-import dagre from '@dagrejs/dagre'
 import ELK from 'elkjs/lib/elk.bundled.js';
 
 import { Position, useVueFlow, type Node, type Edge } from '@vue-flow/core'
@@ -14,82 +13,6 @@ const height = 800
  * It uses the `dagre` library to calculate the layout of the nodes and edges.
  */
 export function useLayout() {
-    const { findNode } = useVueFlow()
-
-    const graph = ref(new dagre.graphlib.Graph())
-
-
-    function layout(nodes: Node[], edges: Edge[], direction: string) {
-        // we create a new graph instance, in case some nodes/edges were removed, otherwise dagre would act as if they were still there
-        const dagreGraph = new dagre.graphlib.Graph()
-        dagreGraph.setDefaultEdgeLabel(() => ({}))
-
-        const isHorizontal = direction === 'LR' || direction === 'RL'
-        const layoutConfig = {
-            rankdir: direction,
-            nodesep: 600,
-            ranksep: 300,
-            marginx: 100,
-            marginy: 100,
-            ranker: 'network-simplex',
-        }
-        dagreGraph.setGraph(layoutConfig)
-
-
-        for (const node of nodes) {
-            // if you need width+height of nodes for your layout, you can use the dimensions property of the internal node (`GraphNode` type)
-            const graphNode = findNode(node.id)
-            dagreGraph.setNode(node.id, { width: graphNode?.dimensions.width || width, height: graphNode?.dimensions.height || height })
-        }
-
-        for (const edge of edges) {
-            dagreGraph.setEdge(edge.source, edge.target)
-        }
-
-        dagre.layout(dagreGraph)
-
-        // update the sourceHandle of the edges based on the position of the source and target nodes
-        for (const edge of edges) {
-            const sourceNode = dagreGraph.node(edge.source)
-            const targetNode = dagreGraph.node(edge.target)
-
-            if (sourceNode.x < targetNode.x) {
-                const handlePosition = `right`;
-                const currentSourceHandle = edge.sourceHandle;
-                if (!currentSourceHandle.endsWith(handlePosition)) {
-                    // remove the word right from the end of the string 
-                    edge.sourceHandle = currentSourceHandle.slice(0, -5)
-                    edge.sourceHandle = `${edge.sourceHandle}${handlePosition}`
-
-                }
-            } else {
-                const handlePosition = `left`;
-                const currentSourceHandle = edge.sourceHandle;
-                if (!currentSourceHandle.endsWith(handlePosition)) {
-                    // remove the word left from the end of the string 
-                    edge.sourceHandle = currentSourceHandle.slice(0, -5)
-                    edge.sourceHandle = `${edge.sourceHandle}${handlePosition}`
-
-                }
-            }
-
-
-
-        }
-
-        // set nodes with updated positions
-        return nodes.map((node) => {
-            const nodeWithPosition = dagreGraph.node(node.id)
-
-            return {
-                ...node,
-                targetPosition: isHorizontal ? Position.Left : Position.Top,
-                sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
-                position: { x: nodeWithPosition.x, y: nodeWithPosition.y },
-            }
-        })
-    }
-
 
     async function elkLayout(nodes: Node[], edges: Edge[]) {
         /**
@@ -232,5 +155,5 @@ export function useLayout() {
 
     }
 
-    return { graph, layout, elkLayout }
+    return { elkLayout }
 }
diff --git a/vite.config.main.ts b/vite.config.main.ts
@@ -2,9 +2,13 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
 
 import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
+import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
+
 import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
+import inject from '@rollup/plugin-inject';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -20,6 +24,15 @@ export default defineConfig({
                 }
             }
         }),
+        VitePWA({
+            registerType: 'autoUpdate',
+            filename: 'service-worker.js',
+            workbox: {
+                maximumFileSizeToCacheInBytes: 5 * 1024 ** 2, // 5 MB or set to something else
+                globPatterns: ['**/*.{js,css,html,woff,woff2,svg,webmanifest,ico,png}'],
+
+            }
+        }),
     ],
     resolve: {
         alias: {
@@ -35,12 +48,19 @@ export default defineConfig({
                     process: true,
                     buffer: true,
                 }) as any,
+                NodeModulesPolyfillPlugin()
             ],
         },
     },
     build: {
         rollupOptions: {
-            plugins: [rollupNodePolyFill],
+            plugins: [
+                rollupNodePolyFill() as any,
+                inject({
+                    process: 'process', // Inject process global
+                    Buffer: ['buffer', 'Buffer'], // Inject Buffer global
+                }),
+            ],
             input: {
                 main: fileURLToPath(new URL('./index.html', import.meta.url))
             }