diff --git a/package-lock.json b/package-lock.json index a400dcc..699d9ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,6 @@ "lodash.clonedeep": "^4.5.0", "lodash.isequal": "^4.5.0", "pinia": "^2.1.7", - "socket.io-client": "^4.7.5", "unplugin-icons": "^0.18.5", "vue": "^3.4.15", "vue-router": "^4.2.5" @@ -927,11 +926,6 @@ "integrity": "sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==", "dev": true }, - "node_modules/@socket.io/component-emitter": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz", - "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==" - }, "node_modules/@types/estree": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", @@ -1637,26 +1631,6 @@ "integrity": "sha512-bZu7p623NEA2rHTc9K1vykl57ektSPQYFFqQir8BOYf6EKOB+yIsbFB9Kpm7Cgt6tsLr9sRkqfqSZUw7LP1XxQ==", "dev": true }, - "node_modules/engine.io-client": { - "version": "6.5.4", - "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.4.tgz", - "integrity": "sha512-GeZeeRjpD2qf49cZQ0Wvh/8NJNfeXkXXcoGh+F77oEAgo9gUHwT1fCRxSNU+YEEaysOJTnsFHmM5oAcPy4ntvQ==", - "dependencies": { - "@socket.io/component-emitter": "~3.1.0", - "debug": "~4.3.1", - "engine.io-parser": "~5.2.1", - "ws": "~8.17.1", - "xmlhttprequest-ssl": "~2.0.0" - } - }, - "node_modules/engine.io-parser": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.2.tgz", - "integrity": "sha512-RcyUFKA93/CXH20l4SoVvzZfrSDMOTUS3bWVpTt2FuFP+XYrL8i8oonHP7WInRyVHXh0n/ORtoeiE1os+8qkSw==", - "engines": { - "node": ">=10.0.0" - } - }, "node_modules/entities": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", @@ -2997,32 +2971,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/socket.io-client": { - "version": "4.7.5", - "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.5.tgz", - "integrity": "sha512-sJ/tqHOCe7Z50JCBCXrsY3I2k03iOiUe+tj1OmKeD2lXPiGH/RUCdTZFoqVyN7l1MnpIzPrGtLcijffmeouNlQ==", - "dependencies": { - "@socket.io/component-emitter": "~3.1.0", - "debug": "~4.3.2", - "engine.io-client": "~6.5.2", - "socket.io-parser": "~4.2.4" - }, - "engines": { - "node": ">=10.0.0" - } - }, - "node_modules/socket.io-parser": { - "version": "4.2.4", - "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz", - "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==", - "dependencies": { - "@socket.io/component-emitter": "~3.1.0", - "debug": "~4.3.1" - }, - "engines": { - "node": ">=10.0.0" - } - }, "node_modules/source-map-js": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", @@ -3392,26 +3340,6 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, - "node_modules/ws": { - "version": "8.17.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz", - "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==", - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "bufferutil": "^4.0.1", - "utf-8-validate": ">=5.0.2" - }, - "peerDependenciesMeta": { - "bufferutil": { - "optional": true - }, - "utf-8-validate": { - "optional": true - } - } - }, "node_modules/xml-name-validator": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz", @@ -3421,14 +3349,6 @@ "node": ">=12" } }, - "node_modules/xmlhttprequest-ssl": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", - "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==", - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", diff --git a/package.json b/package.json index ab25bed..6cc384f 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "lodash.clonedeep": "^4.5.0", "lodash.isequal": "^4.5.0", "pinia": "^2.1.7", - "socket.io-client": "^4.7.5", "unplugin-icons": "^0.18.5", "vue": "^3.4.15", "vue-router": "^4.2.5" diff --git a/src/components/TheList.vue b/src/components/TheList.vue index 1e0152a..be60056 100644 --- a/src/components/TheList.vue +++ b/src/components/TheList.vue @@ -27,14 +27,11 @@ function createNode() {
@@ -48,18 +45,20 @@ function createNode() { :label="node.label" :meta="dataStore.data.nodes[node.class]?.label" > - - - - + diff --git a/src/components/TheProjects.vue b/src/components/TheProjects.vue deleted file mode 100644 index 7713a39..0000000 --- a/src/components/TheProjects.vue +++ /dev/null @@ -1,161 +0,0 @@ - - - - - diff --git a/src/router/index.js b/src/router/index.js index 92eafcb..3714572 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -8,8 +8,8 @@ const router = createRouter({ routes: [ { path: '/', - name: 'home' - // redirect: { name: 'list', params: { type: 'graph' } } + name: 'home', + redirect: { name: 'list', params: { type: 'graph' } } }, { path: '/settings', @@ -34,11 +34,6 @@ const router = createRouter({ name: 'open' // redirect: { name: 'list', params: { type: 'graph' } } }, - { - path: '/projects', - name: 'projects', - component: () => import('@/views/ProjectView.vue') - }, { path: '/video', name: 'video', @@ -54,22 +49,12 @@ router.beforeEach(async (to, from, next) => { const settingsStore = useSettingsStore() const dataStore = useDataStore() - if (to.name === 'home') { - return settingsStore.edit - ? next({ name: 'projects' }) - : next({ name: 'list', params: { type: 'graph' } }) - } - if (to.name === 'open') { if (settingsStore.edit) dataStore.open(to.params.id) // dataStore.data = null return next({ name: 'list', params: { type: 'graph' } }) } - if (to.name === 'projects' && !settingsStore.edit) { - return next({ name: 'list', params: { type: 'graph' } }) - } - const videoStore = useVideoStore() if (dataStore.data === null && ['list', 'graph', 'video'].includes(to.name)) { await dataStore.init() diff --git a/src/stores/data.js b/src/stores/data.js index 781ca78..4ef0b74 100644 --- a/src/stores/data.js +++ b/src/stores/data.js @@ -1,6 +1,5 @@ import { computed, ref, watch } from 'vue' import { defineStore } from 'pinia' -import { io } from 'socket.io-client' import { useStorage } from '@vueuse/core' import { useConstantStore } from './constant' import { useSettingsStore } from './settings' @@ -14,51 +13,20 @@ export const useDataStore = defineStore('data', () => { const data = ref({ nodes: [] }) const nodeId = ref(null) - let socket = null let skipUpdate = false const projectList = useStorage('wanderer-projects', []) const projectId = useStorage('project', null) - // const socket = computed(() => { - // console.log('aaa') - // if (!settingsStore.remote) return - // const socket = io(settingsStore.server) - // return socket - // }) - async function init() { data.value = { nodes: {}, edges: [] } - if (project.value == null) { - console.log(constantStore.wandererStatic) + if (settingsStore.mode === 'live' || localStorage.getItem(`wanderer:data`) == null) { data.value = await fetch(constantStore.wandererStatic).then((d) => d.json()) - } else if (!project.value.remote) { - data.value = JSON.parse(localStorage.getItem(`wanderer-${project.value.id}`)) } else { - skipUpdate = true - initSocket() - socket.emit('fetch', projectId.value) + data.value = JSON.parse(localStorage.getItem(`wanderer:data`)) } } - function initSocket() { - socket = io(constantStore.wandererServer, { path: '/api/socket.io' }) - socket.on('data', (d) => { - skipUpdate = true - data.value = d - }) - socket.on('update', (patch) => { - skipUpdate = true - applyPatch(data.value, patch) - }) - socket.on('disconnect', () => { - console.log('connection closed') - }) - socket.on('created', (id) => { - open(id) - }) - } - const nodeOccurances = computed(() => { if (node.value == null || node.value.type === 'graph') return {} return Object.fromEntries( @@ -123,21 +91,14 @@ export const useDataStore = defineStore('data', () => { } function storeData(data) { - localStorage.setItem(`wanderer-${projectId.value}`, JSON.stringify(data)) + localStorage.setItem(`wanderer:data`, JSON.stringify(data)) } function addProject(id, data = { nodes: {}, edges: [] }) { - const remote = settingsStore.remote - - if (!remote) { - id = id ?? crypto.randomUUID() - projectList.value.push({ id, remote, opened: new Date() }) - localStorage.setItem(`wanderer-${id}`, JSON.stringify(data)) - open(id) - } else { - if (socket == null) initSocket() - socket.emit('create', data) - } + id = id ?? crypto.randomUUID() + projectList.value.push({ id, remote: false, opened: new Date() }) + localStorage.setItem(`wanderer-${id}`, JSON.stringify(data)) + open(id) } function deleteProject(id, all) { @@ -157,12 +118,12 @@ export const useDataStore = defineStore('data', () => { } } - function exportProject(id) { - const project = id && localStorage.getItem(`wanderer-${id}`) - const blob = id && new Blob([project], { type: 'application/json' }) + function exportProject() { + const project = localStorage.getItem(`wanderer:data`) + const blob = new Blob([project], { type: 'application/json' }) const link = document.createElement('a') - link.download = `${id?.split('-')[0] ?? 'db'}.json` - link.href = id ? window.URL.createObjectURL(blob) : constantStore.wandererStatic + link.download = `db.json` + link.href = window.URL.createObjectURL(blob) link.dataset.downloadurl = ['text/json', link.download, link.href].join(':') const evt = new MouseEvent('click', { view: window, @@ -193,15 +154,10 @@ export const useDataStore = defineStore('data', () => { watch( dataCopy, - (value, oldValue) => { - if (projectId.value == null) return - if (!project.value.remote) return storeData(value) - - if (skipUpdate) return (skipUpdate = false) - socket.emit('patch', compare(oldValue, value)) + (value) => { + if (settingsStore.edit) storeData(value) - // if (skipUpdate) return (skipUpdate = false) - // socket.value.emit('update', compare(oldValue, value)) + // compare(oldValue, value)) }, { deep: true } ) @@ -237,7 +193,6 @@ export const useDataStore = defineStore('data', () => { graphs, nodeId, nodeOccurances, - socket, projects, importFromStatic, open, diff --git a/src/stores/edit.js b/src/stores/edit.js index 172b438..5963780 100644 --- a/src/stores/edit.js +++ b/src/stores/edit.js @@ -14,7 +14,6 @@ export const useEditStore = defineStore('edit', () => { function exit() { resetMode() - dataStore.projectId = null } function setDisplay(id, display, graphId) { diff --git a/src/stores/projects.js b/src/stores/projects.js deleted file mode 100644 index 1d8208e..0000000 --- a/src/stores/projects.js +++ /dev/null @@ -1,106 +0,0 @@ -import { defineStore } from 'pinia' -import { useStorage } from '@vueuse/core' -import { useConstantStore } from './constant' -import { computed, ref } from 'vue' -import { io } from 'socket.io-client' - -export const useProjectsStore = defineStore('projects', () => { - const constantStore = useConstantStore() - - const projectList = useStorage('wanderer-projects', []) - const projectId = useStorage('project', null) - const projectData = ref(null) - - let socket = null - - const projects = computed(() => { - return projectList.value - .toSorted((a, b) => (a.opened < b.opened ? 1 : -1)) - .map((p) => ({ - ...p, - opened: new Date(p.opened) - })) - }) - - const project = computed(() => { - return projectList.value.find((p) => p.id === projectId.value) - }) - - async function importFromStatic() { - const data = await fetch(constantStore.wandererStatic).then((d) => d.json()) - addProject(null, data) - } - - function open(id) { - const available = projectList.value.find((p) => p.id === id) - if (available) { - available.opened = new Date() - projectId.value = id - } else { - projectList.value.push({ - id, - opened: new Date(), - remote: true - }) - } - } - - async function initData() { - if (project.value == null) { - projectData.value = await fetch(constantStore.wandererStatic).then((d) => d.json()) - } else if (!project.value.remote) { - projectData.value = JSON.parse(localStorage.getItem(`wanderer-${project.value.id}`)) - } else { - socket = io(constantStore.wandererServer) - socket.emit('fetch') - socket.on('data', (d) => { - projectData.value = d - }) - } - } - - function storeData(data) { - localStorage.setItem(`wanderer-${projectId.value}`, JSON.stringify(data)) - } - - function addProject(id, data = {}, remote = false) { - id = id ?? crypto.randomUUID() - projectList.value.push({ id, remote, opened: new Date() }) - if (!remote) { - localStorage.setItem(`wanderer-${id}`, JSON.stringify(data)) - open(id) - } else { - console.log('remote') - } - } - - function deleteProject(id, all) { - if (!all) { - projectList.value = projectList.value.filter((project) => project.id !== id) - localStorage.removeItem(`wanderer-${id}`) - } else { - // update() - const storage = { ...localStorage } - Object.keys(storage) - .filter((key) => /^wanderer-/.test(key)) - .forEach((key) => localStorage.removeItem(key)) - projectList.value = [] - } - if (id === projectId.value || all) { - projectId.value = null - } - } - - return { - projects, - importFromStatic, - open, - projectId, - project, - projectData, - addProject, - deleteProject, - storeData, - initData - } -}) diff --git a/src/stores/settings.js b/src/stores/settings.js index 3aceb49..86b0d52 100644 --- a/src/stores/settings.js +++ b/src/stores/settings.js @@ -7,16 +7,17 @@ export const useSettingsStore = defineStore('settings', () => { const editStore = useEditStore() const lang = useStorage('lang', 'en') - const edit = useStorage('edit', false) + const edit = computed(() => mode.value === 'edit') const pictureInPicture = useStorage('pip', false) const server = useStorage('server', 'http://localhost:3000') const db = useStorage('db', null) - const remote = useStorage('remote', true) + const mode = useStorage('mode', 'live') + const modeOptions = ['live', 'edit', 'preview'] watch(edit, (edit) => { if (!edit) editStore.exit() }) - return { lang, pictureInPicture, edit, server, remote, db } + return { lang, pictureInPicture, edit, server, db, mode, modeOptions } }) diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue deleted file mode 100644 index 73cf894..0000000 --- a/src/views/ProjectView.vue +++ /dev/null @@ -1,28 +0,0 @@ - - - - - diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue index 5191731..9e61e63 100644 --- a/src/views/SettingsView.vue +++ b/src/views/SettingsView.vue @@ -1,9 +1,11 @@