Merge pull request #22 from han-feng/develop

Develop

.editorconfig

@@ -1,9 +1,11 @@
+root = true
+
 [*]
 trim_trailing_whitespace = true
 insert_final_newline = true
 indent_style = space
 indent_size = 2
-end_of_line = lf
+end_of_line = crlf
 
 [*.md]
-indent_size = 3
+indent_size = 4

.eslintrc

@@ -0,0 +1,8 @@
+{
+  "extends": "@antfu",
+  "rules": {
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "vue/component-tags-order": "off",
+    "no-console":"off"
+  }
+}

.github/workflows/develop.yml

@@ -60,3 +60,4 @@ jobs:
           folder: packages/demo/dist
           token: ${{ secrets.ACCESS_TOKEN }}
           clean: true
+          single-commit: true

.npmrc

@@ -1 +1,2 @@
 shared-workspace-lockfile=true
+strict-peer-dependencies=false

.vscode/extensions.json

@@ -1,6 +1,5 @@
 {
   "recommendations": [
-    "vue.volar",
-    "vue.vscode-typescript-vue-plugin"
+    "MisterJ.vue-volar-extention-pack"
   ]
 }

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "prettier.enable": false,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": false,
+    "source.fixAll.eslint": true
+  },
+  "files.associations": {
+    "*.css": "postcss"
+  },
+  "editor.formatOnSave": false
+}

README.md

@@ -3,6 +3,7 @@
 ![GitHub package version](https://img.shields.io/github/package-json/v/han-feng/logicflow-vue?filename=packages%2Fuseapi%2Fpackage.json)
 [![npm](https://img.shields.io/npm/v/logicflow-useapi.svg)](https://npm.im/logicflow-useapi)
 [![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fhan-feng%2Flogicflow-vue.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fhan-feng%2Flogicflow-vue?ref=badge_shield)
 
 ## 子项目
 * [useapi](./packages/useapi/README.md)
@@ -42,14 +43,15 @@
 
 > 推荐安装使用 [**ni**](https://github.com/antfu/ni) ，可以根据当前环境自动选择 npm/yarn/pnpm 进行包管理。 **ni** 还提供了方便的 **nr** 命令，可以更轻松地运行 npm 脚本。
 >
->> **ni** 自带的 **nrm** 命令可能与 *npm源管理工具* **nrm** 冲突，只要重新安装一次 nrm 即可
->
 > **ni** 安装命令
 >   ```shell
 >   npm install -g @antfu/ni
 >   ```
-> **nrm** 安装命令
->   ```shell
->   npm install -g Pana/nrm
->   ```
 >
+
+## License
+
+[![作者](https://img.shields.io/badge/%E4%BD%9C%E8%80%85-han__feng%40foxmail.com-red.svg?style=social&logo=github)](mailto:[email protected])
+![GitHub](https://img.shields.io/github/license/han-feng/logicflow-vue.svg)
+
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fhan-feng%2Flogicflow-vue.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fhan-feng%2Flogicflow-vue?ref=badge_large)

package.json

@@ -1,17 +1,26 @@
 {
   "name": "logicflow-vue",
-  "version": "0.3.0",
-  "description": "Logic Flow Vue",
+  "version": "0.4.0",
   "private": true,
+  "packageManager": "[email protected]",
+  "description": "Logic Flow Vue",
   "scripts": {
     "all": "pnpm -r all",
     "dev": "pnpm -F logicflow-vue-demo dev",
     "build": "pnpm -r build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "preview": "pnpm -F logicflow-vue-demo preview",
     "test": "pnpm -r test",
     "clean": "pnpm -r clean",
     "clean:all": "pnpm --package=rimraf -s dlx rimraf pnpm-lock.yaml **/dist **/node_modules",
     "reinstall": "pnpm clean:all && pnpm i",
     "preinstall": "npx only-allow pnpm"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.27.0",
+    "eslint": "^8.23.1",
+    "eslint-plugin-cypress": "^2.12.1",
+    "typescript": "^4.8.3"
   }
 }

packages/demo/cypress.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  viewportHeight: 768,
+  viewportWidth: 1024,
+  fixturesFolder: false,
+  e2e: {
+    // setupNodeEvents(on, config) {},
+    baseUrl: 'http://localhost:4173',
+    supportFile: false,
+  },
+})

packages/demo/cypress/integration/capture.spec.ts → packages/demo/cypress/e2e/spec.cy.ts

@@ -1,5 +1,4 @@
 describe('basic', () => {
-
   // beforeEach(() => {
   //   cy.visit('/')
   // })
@@ -48,7 +47,6 @@ describe('basic', () => {
     cy.get('button#export').click()
     cy.get('li[data-menu-id="png"]').click()
   })
-
 })
 
-export { }
+export default {}

packages/demo/index.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
   <meta charset="utf-8" />
   <title>Logic Flow Vue Demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script src="/server.config.js"></script>
   <script type="module" src="/src/main.ts"></script>
 </head>
 

packages/demo/modeler.html

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
   <meta charset="utf-8" />
   <title>Flow Modeler</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script src="/server.config.js"></script>
   <script type="module" src="/src/modeler.ts"></script>
 </head>
 

packages/demo/package.json

@@ -1,47 +1,52 @@
 {
   "name": "logicflow-vue-demo",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Logic Flow Vue Demo",
   "private": true,
+  "packageManager": "[email protected]",
   "scripts": {
     "all": "pnpm clean && pnpm build",
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build && node script/crlf.js",
     "preview": "vite preview",
     "cy:run": "cypress install && cypress run",
     "test": "pnpm test:e2e",
-    "test:e2e": "start-server-and-test 'vite preview --open false' 4173 cy:run",
+    "test:e2e": "start-server-and-test 'vite preview --open false' http://127.0.0.1:4173/ 'pnpm cy:run'",
     "clean": "rimraf dist",
     "preinstall": "npx only-allow pnpm"
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@logicflow/core": "^1.1.20",
-    "@logicflow/extension": "^1.1.20",
-    "ant-design-vue": "^3.2.9",
-    "highlight.js": "^11.5.1",
+    "@logicflow/core": "^1.1.28",
+    "@logicflow/extension": "^1.1.28",
+    "ant-design-vue": "^3.2.12",
+    "consola": "^2.15.3",
+    "highlight.js": "^11.6.0",
     "ids": "^1.0.0",
-    "logicflow-useapi": "workspace:^0.3.0",
+    "lodash-es": "^4.17.21",
+    "logicflow-useapi": "workspace:^",
     "resize-detector": "^0.3.0",
     "splitpanes": "^3.1.1",
-    "vue": "^3.2.37"
+    "vue": "^3.2.39"
   },
   "devDependencies": {
-    "@types/node": "^18.0.0",
+    "@types/node": "^18.7.18",
     "@types/splitpanes": "^2.2.1",
-    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue": "^3.1.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.75.7",
-    "rollup-plugin-visualizer": "^5.6.0",
-    "typescript": "^4.7.4",
-    "unplugin-vue-components": "^0.20.1",
-    "vite": "^2.9.13",
-    "vue-tsc": "^0.38.2"
+    "rollup": "^2.79.0",
+    "rollup-plugin-visualizer": "^5.8.1",
+    "typescript": "^4.8.3",
+    "unplugin-vue-components": "^0.22.7",
+    "vite": "^3.1.3",
+    "vite-plugin-resolve-externals": "^0.2.2",
+    "vite-plugin-style-import": "^2.0.0",
+    "vue-tsc": "^0.40.13"
   },
   "optionalDependencies": {
-    "cypress": "^9.7.0",
-    "jimp": "^0.16.1",
+    "cypress": "^10.8.0",
+    "jimp": "^0.16.2",
     "start-server-and-test": "^1.14.0"
   }
 }

packages/demo/public/server.config.js

@@ -0,0 +1,11 @@
+// 服务端配置文件
+// 可以在部署或运行时改变参数，从而影响前端行为
+
+// eslint-disable-next-line no-unused-vars
+var serverConfig = {
+  // 'X-Token-Key': 'X-Token', // 请求头token的key，默认值为'X-Token'
+  'service.baseUrl': './api/',
+  'service.timeout': 5000, // 请求超时时间
+  // login service
+  'service.login.url': 'login'
+}

packages/demo/script/crlf.js

@@ -1,13 +1,16 @@
 const fs = require('fs')
 
-if (process.platform === 'win32')
+if (process.platform === 'win32') {
   fs.readFile('./src/components.d.ts', (err, data) => {
-    if (err) throw err
+    if (err)
+      throw err
     fs.writeFile('./src/components.d.ts',
       data.toString().replace(/\r\n/g, '\n').replace(/\n/g, '\r\n'),
       (err) => {
-        if (err) throw err
+        if (err)
+          throw err
         console.log('components.d.ts CRLF converted')
-      }
+      },
     )
   })
+}

packages/demo/script/img-resize.js

@@ -3,7 +3,7 @@ const jimp = require('jimp')
 
 async function resize(filename) {
   const image = await jimp.read(path.join(__dirname, '../cypress/downloads', filename))
-  image.contain(320, 180).write(path.join(__dirname, '../dist/img', filename))
+  image.contain(320, 180).write(path.join(__dirname, '../src/img', filename))
   console.log(`${filename} resized`)
 }
 

packages/demo/script/img2b64.js

@@ -0,0 +1,77 @@
+'use strict'
+
+const fs = require('fs')
+const path = require('path')
+const pluginutils = require('@rollup/pluginutils')
+
+const defaults = {
+  dom: false,
+  exclude: null,
+  include: null,
+}
+
+const mimeTypes = {
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.png': 'image/png',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+}
+
+const domTemplate = function (ref) {
+  const dataUri = ref.dataUri
+
+  return (`\n  var img = new Image();\n  img.src = "${dataUri}";\n  export default img;\n`)
+}
+
+const constTemplate = function (ref) {
+  const dataUri = ref.dataUri
+
+  return (`\n  var img = "${dataUri}";\n  export default img;\n`)
+}
+
+const getDataUri = function (ref) {
+  const format = ref.format
+  const mime = ref.mime
+  const source = ref.source
+
+  return `data:${mime};${format},${source}`
+}
+
+function image(opts) {
+  if (!opts)
+    opts = {}
+
+  const options = Object.assign({}, defaults, opts)
+  const filter = pluginutils.createFilter(options.include, options.exclude)
+
+  return {
+    name: 'image',
+    enforce: 'pre',
+    load: function load(id) {
+      if (!filter(id))
+        return null
+
+      const mime = mimeTypes[path.extname(id)]
+      if (!mime) {
+        // not an image
+        return null
+      }
+      if (fs.statSync(id).size > 8192) {
+        // file is too big
+        return null
+      }
+
+      const format = 'base64'
+      const source = fs.readFileSync(id, format).replace(/[\r\n]+/gm, '')
+
+      const dataUri = getDataUri({ format, mime, source })
+      const code = options.dom ? domTemplate({ dataUri }) : constTemplate({ dataUri })
+
+      return code.trim()
+    },
+  }
+}
+
+module.exports = image

packages/demo/src/App.vue

@@ -3,7 +3,7 @@
     <a-col>
       <a-card hoverable style="width: 320px">
         <template #cover>
-          <img alt="bpmn" src="/img/bpmn.png" />
+          <img alt="bpmn" :src="bpmnImage">
         </template>
         <template #actions>
           <a-button type="link" href="./viewer.html">
@@ -19,14 +19,13 @@
             </template>
           </a-button>
         </template>
-        <a-card-meta title="BPMN" description="BPMN 2.0 模型的简化版本">
-        </a-card-meta>
+        <a-card-meta title="BPMN" description="BPMN 2.0 模型的简化版本" />
       </a-card>
     </a-col>
     <a-col>
       <a-card hoverable style="width: 320px">
         <template #cover>
-          <img alt="Node-RED" src="/img/nodeRed.png" />
+          <img alt="Node-RED" :src="nodeRedImage">
         </template>
         <template #actions>
           <a-button type="link" href="./viewer.html?modelType=nodeRed">
@@ -51,3 +50,8 @@
     </a-col>
   </a-row>
 </template>
+
+<script setup lang="ts">
+import bpmnImage from './img/bpmn.png'
+import nodeRedImage from './img/nodeRed.png'
+</script>