fl-web-component 0.1.0 → 1.0.0

package/package.json

@@ -1,47 +1,80 @@
-{
-  "name": "fl-web-component",
-  "version": "0.1.0",
-  "scripts": {
-    "dev": "vue-cli-service serve",
-    "lint": "vue-cli-service lint",
-    "build": "vue-cli-service build --target lib --name fl-web-component ./packages/index.js",
-    "release": "bumpp && npm publish"
-  },
-  "files": [
-    "dist",
-    "packages"
-  ],
-  "main": "dist/fl-web-component.common.js",
-  "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^2.6.11"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.0",
-    "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
-}
+{
+  "name": "fl-web-component",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "lint": "eslint \"{src,packages}/**/*.{vue,js}\" --fix",
+    "prettier": "prettier --write  \"packages/**/*.{js,css,less,scss,vue,html}\"",
+    "watch": "npm run lint && vue-cli-service build --watch --mode production --target lib --name fl-web-component ./src/main.js",
+    "build": "npm run lint && vue-cli-service build --target lib --name fl-web-component ./src/main.js"
+  },
+  "files": [
+    "dist",
+    "packages",
+    "src",
+    "patches"
+  ],
+  "main": "dist/fl-web-component.common.js",
+  "dependencies": {
+    "camera-controls": "^2.9.0",
+    "core-js": "^3.6.5",
+    "element-ui": "2.15.14",
+    "html2canvas": "^1.4.1",
+    "konva": "^9.3.14",
+    "lodash": "^4.17.21",
+    "meshline": "^3.3.1",
+    "three": "^0.176.0",
+    "three.path": "^1.0.1",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-sent": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
+    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/plugin-syntax-jsx": "^7.17.12",
+    "@babel/plugin-transform-object-rest-spread": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/runtime-corejs2": "^7.18.3",
+    "@vue/cli-plugin-babel": "~4.4.0",
+    "@vue/cli-plugin-eslint": "~4.4.0",
+    "@vue/cli-service": "~4.4.0",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.0.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "patch-package": "^6.4.7",
+    "sass": "1.32.13",
+    "sass-loader": "10.1.1",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/packages/components/button/index.vue

@@ -1,22 +1,26 @@
 <template>
+  <div>
     <button class="my-button" @click="handleClick">
-        {{ text }}
+      {{ text }}
     </button>
+  </div>
 </template>
 <script>
 export default {
-    name: 'MyButton',
-    props: {
-        text: { type: String, default: 'Click Me' }
+  name: 'MyButton',
+  props: {
+    text: { type: String, default: 'Click Me' },
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click');
     },
-    methods: {
-        handleClick() { this.$emit('click'); }
-    }
-}
+  },
+};
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .my-button {
-    padding: 8px 16px;
-    background: #42b983;
+  padding: 8px 16px;
+  background: #42b983;
 }
-</style>
+</style>

package/packages/components/com-card/card-page.vue

@@ -0,0 +1,102 @@
+<template>
+  <el-pagination
+    v-if="pageFlag"
+    :small="comCard.size == 'mini'"
+    :disabled="defaultPage.disabled"
+    :hide-on-single-page="defaultPage.single"
+    :pager-count="defaultPage.pagerCount"
+    :current-page.sync="defaultPage.currentPage"
+    :background="defaultPage.background"
+    :page-size="defaultPage.pageSize"
+    :page-sizes="defaultPage.pageSizes"
+    @size-change="sizeChange"
+    @prev-click="prevClick"
+    @next-click="nextClick"
+    @current-change="currentChange"
+    :layout="defaultPage.layout"
+    :total="defaultPage.total"
+  ></el-pagination>
+</template>
+
+<script>
+// import base from "../../utils/base.js";
+
+export default {
+  name: 'comCard',
+  inject: ['comCard'],
+  // mixins: [base()],
+  data() {
+    return {
+      defaultPage: {
+        single: false,
+        total: 0, // 总页数
+        pagerCount: 7, //超过多少条隐藏
+        currentPage: 1, // 当前页数
+        pageSize: 10, // 每页显示多少条
+        pageSizes: [10, 20, 30, 40, 50, 100],
+        layout: 'total, sizes, prev, pager, next, jumper',
+        background: true, // 背景颜色
+      },
+    };
+  },
+  created() {
+    this.pageInit();
+    this.comCard.$emit('on-load', this.defaultPage);
+  },
+  watch: {
+    'comCard.page': {
+      handler() {
+        this.pageInit();
+      },
+      deep: true,
+    },
+  },
+  computed: {
+    pageFlag() {
+      return this.defaultPage.total != 0;
+    },
+  },
+  methods: {
+    pageInit() {
+      this.defaultPage = Object.assign(this.defaultPage, this.comCard.page);
+      this.updateValue();
+    },
+    updateValue() {
+      console.log('updateValue defaultPage', this.defaultPage);
+      this.comCard.$emit('update:page', this.defaultPage);
+    },
+    //下一页事件
+    nextClick(val) {
+      console.log('nextClick', val);
+      this.comCard.$emit('next-click', val);
+    },
+    //上一页事件
+    prevClick(val) {
+      console.log('prevClick', val);
+      this.comCard.$emit('prev-click', val);
+    },
+    // 页大小回调
+    sizeChange(val) {
+      this.defaultPage.currentPage = 1;
+      this.defaultPage.pageSize = val;
+      this.updateValue();
+      console.log('sizeChange', val);
+      this.comCard.$emit('on-load', this.defaultPage);
+      this.comCard.$emit('size-change', val);
+    },
+    // 页码回调
+    currentChange(val) {
+      this.updateValue();
+      this.comCard.$emit('on-load', this.defaultPage);
+      this.comCard.$emit('current-change', val);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-pagination {
+  text-align: right;
+  padding: 15px 10px 15px 20px !important;
+}
+</style>

package/packages/components/com-card/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="card-container">
+    <!-- 列表区域-->
+    <div class="card-list">
+      <el-card
+        v-loading="loading"
+        class="card"
+        v-for="(item, index) in data"
+        :key="index"
+        :body-style="{ padding: '0px' }"
+      >
+        <slot :data="item"></slot>
+      </el-card>
+    </div>
+    <!-- 分页区域 -->
+    <card-page ref="cardPage"> </card-page>
+  </div>
+</template>
+
+<script>
+import CardPage from './card-page';
+
+export default {
+  name: 'comCard',
+  provide() {
+    return {
+      comCard: this,
+    };
+  },
+  components: {
+    CardPage, //分页
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+      require: true,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    page: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+};
+</script>
+
+<style></style>

package/packages/components/com-dialogWrapper/Readme.md

@@ -0,0 +1,53 @@
+<!-- 使用方法 样例 -->
+<template>
+  <div class="trigger_dialog">
+    <!-- 触发弹窗操作  -->
+    <el-button type="primary" @click="dialogVisible = true">触发对话框</el-button>
+    <!-- 弹窗组件 -->
+    <DialogWrapper
+      v-if="dialogVisible"
+      dialog-title="触发对话框"
+      :visible.sync="dialogVisible"
+      :popup-width="'35%'"
+      @handleClose="handleClose"
+      @submitDialogData="submitDialogData"
+    >
+      弹窗内容
+    </DialogWrapper>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+    // 弹窗引入，如注册全局组件则克直接使用
+    DialogWrapper: () => import('./DialogWrapper.vue')
+  },
+  props: {},
+  data() {
+    return {
+      dialogVisible: false // 弹框状态
+    }
+  },
+  computed: { },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    /* 弹窗 修改是否让页面显示与隐藏的事件 */
+    updateVisible(val) {
+      this.dialogVisible = val
+    },
+    /* 弹窗 确认 操作 */
+    submitDialogData() {
+      this.dialogVisible = false
+    },
+    /* 弹窗 关闭 操作 */
+    handleClose() {
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

package/packages/components/com-dialogWrapper/index.vue

@@ -0,0 +1,98 @@
+<!--
+ * @Author: fengyang9326@163.com
+ * @Date: 2024-05-13 10:36:07
+ * @LastEditors: fengyang9326@163.com
+ * @LastEditTime: 2024-05-20 09:34:46
+ * @FilePath: /web/components/com-dialogWrapper/index.vue
+ * @Description: 弹窗封装
+-->
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :title="dialogTitle"
+    :fullscreen="dialogFullScreen"
+    :close-on-click-modal="false"
+    :before-close="handleClose"
+    :width="popupWidth"
+    append-to-body
+  >
+    <!-- 弹窗title -->
+    <template slot="title">
+      <div class="custom_dialog_header">
+        <span class="el_dialog_title">{{ dialogTitle }}</span>
+        <div class="custom_dialog_menu" @click="dialogFullScreen = !dialogFullScreen">
+          <svg-icon :icon-class="dialogFullScreen ? 'exit-fullscreen' : 'fullscreen'" />
+        </div>
+      </div>
+    </template>
+
+    <!-- 弹窗插槽 -->
+    <slot>
+      <p>弹框自定义的内容</p>
+    </slot>
+
+    <!-- 弹窗操作 -->
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'DialogWrapper',
+  components: {},
+  props: {
+    /* 弹窗 title标题 */
+    dialogTitle: {
+      type: String,
+      default: '标题',
+    },
+    /* 弹窗 width宽度 */
+    popupWidth: {
+      type: String,
+      default: '35%',
+    },
+    /* 弹窗 显示隐藏状态 */
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      openDialog: false,
+      dialogFullScreen: false,
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        // 初始化数据
+        if (this.visible) Object.assign(this.$data, this.$options.data());
+        return this.visible;
+      },
+      set(val) {
+        // 当visible改变的时候，触发父组件的 updateVisible方法，
+        // 在该方法中更改传入子组件的 centerDialogVisible的值
+        this.$emit('updateVisible', val);
+      },
+    },
+  },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    /* 关闭弹窗 */
+    handleClose() {
+      this.$emit('handleClose');
+    },
+    /* 弹窗 确认 操作 */
+    handleSubmit() {
+      this.$emit('submitDialogData');
+    },
+  },
+};
+</script>
+<style lang="scss" scoped></style>

package/packages/components/com-flcanvas/components/bspline.js

@@ -0,0 +1,91 @@
+import round10 from './round10'
+
+/**
+ * Copied and ported to code standard as the b-spline library is not maintained any longer.
+ * Source:
+ * https://github.com/thibauts/b-spline
+ * Copyright (c) 2015 Thibaut Séguy <thibaut.seguy@gmail.com>
+ */
+export default (t, degree, points, knots, weights) => {
+  const n = points.length // points count
+  const d = points[0].length // point dimensionality
+
+  if ((t < 0) || (t > 1)) {
+    throw new Error('t out of bounds [0,1]: ' + t)
+  }
+  if (degree < 1) throw new Error('degree must be at least 1 (linear)')
+  if (degree > (n - 1)) throw new Error('degree must be less than or equal to point count - 1')
+
+  if (!weights) {
+    // build weight vector of length [n]
+    weights = []
+    for (let i = 0; i < n; i++) {
+      weights[i] = 1
+    }
+  }
+
+  if (!knots) {
+    // build knot vector of length [n + degree + 1]
+    knots = []
+    for (let i = 0; i < n + degree + 1; i++) {
+      knots[i] = i
+    }
+  } else {
+    if (knots.length !== n + degree + 1) throw new Error('bad knot vector length')
+  }
+
+  const domain = [
+    degree,
+    knots.length - 1 - degree
+  ]
+
+  // remap t to the domain where the spline is defined
+  const low = knots[domain[0]]
+  const high = knots[domain[1]]
+  t = t * (high - low) + low
+
+  // Clamp to the upper &  lower bounds instead of
+  // throwing an error like in the original lib
+  // https://github.com/bjnortier/dxf/issues/28
+  t = Math.max(t, low)
+  t = Math.min(t, high)
+
+  // find s (the spline segment) for the [t] value provided
+  let s
+  for (s = domain[0]; s < domain[1]; s++) {
+    if (t >= knots[s] && t <= knots[s + 1]) {
+      break
+    }
+  }
+
+  // convert points to homogeneous coordinates
+  const v = []
+  for (let i = 0; i < n; i++) {
+    v[i] = []
+    for (let j = 0; j < d; j++) {
+      v[i][j] = points[i][j] * weights[i]
+    }
+    v[i][d] = weights[i]
+  }
+
+  // l (level) goes from 1 to the curve degree + 1
+  let alpha
+  for (let l = 1; l <= degree + 1; l++) {
+    // build level l of the pyramid
+    for (let i = s; i > s - degree - 1 + l; i--) {
+      alpha = (t - knots[i]) / (knots[i + degree + 1 - l] - knots[i])
+
+      // interpolate each component
+      for (let j = 0; j < d + 1; j++) {
+        v[i][j] = (1 - alpha) * v[i - 1][j] + alpha * v[i][j]
+      }
+    }
+  }
+
+  // convert back to cartesian and return
+  const result = []
+  for (let i = 0; i < d; i++) {
+    result[i] = round10(v[s][i] / v[s][d], -9)
+  }
+  return result
+}