npm - @opentiny/tiny-engine-canvas - Versions diffs - 1.0.0 - Mend

@opentiny/tiny-engine-canvas 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/.eslintrc.js +42 -0
package/README.md +7 -0
package/canvas.html +212 -0
package/dist/index.js +48919 -0
package/index.html +13 -0
package/package.json +30 -0
package/public/favicon.ico +0 -0
package/src/Design.vue +53 -0
package/src/assets/logo.png +0 -0
package/src/canvas.js +34 -0
package/src/components/builtin/CanvasBox.vue +22 -0
package/src/components/builtin/CanvasCol.vue +89 -0
package/src/components/builtin/CanvasCollection.js +278 -0
package/src/components/builtin/CanvasCollection.vue +106 -0
package/src/components/builtin/CanvasIcon.vue +30 -0
package/src/components/builtin/CanvasImg.vue +18 -0
package/src/components/builtin/CanvasPlaceholder.vue +26 -0
package/src/components/builtin/CanvasRow.vue +67 -0
package/src/components/builtin/CanvasRowColContainer.vue +42 -0
package/src/components/builtin/CanvasSlot.vue +22 -0
package/src/components/builtin/CanvasText.vue +18 -0
package/src/components/builtin/builtin.json +955 -0
package/src/components/builtin/helper.js +46 -0
package/src/components/builtin/index.js +33 -0
package/src/components/common/index.js +158 -0
package/src/components/container/CanvasAction.vue +554 -0
package/src/components/container/CanvasContainer.vue +244 -0
package/src/components/container/CanvasDivider.vue +246 -0
package/src/components/container/CanvasDragItem.vue +38 -0
package/src/components/container/CanvasFooter.vue +86 -0
package/src/components/container/CanvasMenu.vue +214 -0
package/src/components/container/CanvasResize.vue +195 -0
package/src/components/container/CanvasResizeBorder.vue +219 -0
package/src/components/container/container.js +791 -0
package/src/components/container/keyboard.js +147 -0
package/src/components/container/shortCutPopover.vue +181 -0
package/src/components/render/CanvasEmpty.vue +14 -0
package/src/components/render/RenderMain.js +408 -0
package/src/components/render/context.js +53 -0
package/src/components/render/render.js +689 -0
package/src/components/render/runner.js +140 -0
package/src/i18n/en.json +5 -0
package/src/i18n/zh.json +5 -0
package/src/i18n.js +21 -0
package/src/index.js +96 -0
package/src/locale.js +19 -0
package/src/lowcode.js +104 -0
package/src/main.js +17 -0
package/test/form.json +690 -0
package/test/group.json +99 -0
package/test/jsslot.json +427 -0
package/vite.config.js +73 -0

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,30 @@
+{
+  "name": "@opentiny/tiny-engine-canvas",
+  "version": "1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "dependencies": {
+    "@opentiny/tiny-engine-common": "^1.0.0",
+    "@opentiny/tiny-engine-controller": "^1.0.0",
+    "@opentiny/tiny-engine-utils": "^1.0.0",
+    "@opentiny/tiny-engine-i18n-host": "^1.0.0",
+    "@opentiny/vue": "^3.8.0",
+    "@vueuse/core": "^9.6.0",
+    "vue": "3.2.45",
+    "vue-i18n": "9.2.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "rollup-plugin-terser": "^7.0.2",
+    "vite": "^4.3.7"
+  }
+}

package/public/favicon.ico ADDED Viewed

Binary file

package/src/Design.vue ADDED Viewed

@@ -0,0 +1,53 @@
+<template>
+  <div style="height: calc(100vh - 100px)">
+    <canvas-container :controller="controller" @selected="nodeSelected"></canvas-container>
+  </div>
+</template>
+<script setup>
+import CanvasContainer from './index'
+import formJSON from '../test/form.json'
+const controller = {
+  getPageSchema() {
+    return formJSON
+  },
+  getConfigureMap() {
+    return {
+      TinyTabs: {
+        nestingRule: {
+          childWhitelist: ['TinyTabItem'],
+          parentWhitelist: '',
+          descendantBlacklist: '',
+          ancestorWhitelist: ''
+        }
+      },
+      TinyForm: {
+        nestingRule: {
+          childWhitelist: ['TinyFormItem'],
+          parentWhitelist: '',
+          descendantBlacklist: '',
+          ancestorWhitelist: ''
+        }
+      }
+    }
+  },
+  getJSResource() {
+    return {
+      utils: { Select: 'select' }
+    }
+  },
+  addHistory() {},
+  closePlugin() {},
+  getMaterial() {}
+}
+const nodeSelected = () => {}
+</script>
+<style>
+#app {
+  height: 100%;
+}
+</style>

package/src/assets/logo.png ADDED Viewed

Binary file

package/src/canvas.js ADDED Viewed

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { createApp } from 'vue'
+import * as TinyVue from '@opentiny/vue'
+import { RenderMain } from './index'
+import { I18nInjectionKey, createI18n } from 'vue-i18n'
+window.TinyLowcodeComponent = {}
+Object.entries(TinyVue).forEach(([_key, component]) => {
+  const { name } = component
+  if (name) {
+    window.TinyLowcodeComponent[name] = component
+  }
+})
+const i18nHost = createI18n({
+  locale: 'zh_CN',
+  messages: {}
+})
+createApp(RenderMain).use(i18nHost).provide(I18nInjectionKey, i18nHost).mount('#app')

package/src/components/builtin/CanvasBox.vue ADDED Viewed

@@ -0,0 +1,22 @@
+<template>
+  <component :is="tag" v-bind="$attrs">
+    <slot>
+      <canvas-placeholder :placeholder="$attrs.placeholder"></canvas-placeholder>
+    </slot>
+  </component>
+</template>
+<script>
+import CanvasPlaceholder from './CanvasPlaceholder.vue'
+export default {
+  components: {
+    CanvasPlaceholder
+  },
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  }
+}
+</script>

package/src/components/builtin/CanvasCol.vue ADDED Viewed

@@ -0,0 +1,89 @@
+<template>
+  <div ref="colRef" class="canvas-col">
+    <slot>
+      <canvas-placeholder :placeholder="$attrs.placeholder"></canvas-placeholder>
+    </slot>
+  </div>
+</template>
+<script>
+import { computed } from 'vue'
+import CanvasPlaceholder from './CanvasPlaceholder.vue'
+import { getStyleValue, alignMap, justAlignMap } from './helper'
+export default {
+  components: {
+    CanvasPlaceholder
+  },
+  props: {
+    flexBasis: {
+      type: String,
+      default: '0px'
+    },
+    rowGap: {
+      type: [String, Number],
+      default: ''
+    },
+    colGap: {
+      type: [String, Number],
+      default: ''
+    },
+    align: {
+      type: [String, Number],
+      default: ''
+    },
+    justAlign: {
+      type: [String, Number],
+      default: ''
+    },
+    grow: {
+      type: Boolean,
+      default: true
+    },
+    shrink: {
+      type: Boolean,
+      default: true
+    },
+    widthType: {
+      type: String,
+      default: 'auto'
+    }
+  },
+  setup(props) {
+    const getFlex = () => {
+      const { flexBasis, grow, shrink, widthType } = props
+      if (widthType === 'fixed') {
+        return `0 0 ${getStyleValue(flexBasis)}`
+      }
+      return `${Number(grow)} ${Number(shrink)} ${getStyleValue(flexBasis)}`
+    }
+    const styles = computed(() => ({
+      flex: getFlex(props.flexBasis),
+      rowGap: getStyleValue(props.rowGap),
+      colGap: getStyleValue(props.colGap),
+      align: alignMap[props.align] || 'stretch',
+      justAlign: justAlignMap[props.justAlign] || 'flex-start'
+    }))
+    return {
+      styles
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.canvas-col {
+  display: flex;
+  flex: v-bind('styles.flex');
+  flex-direction: column;
+  flex-wrap: nowrap;
+  row-gap: v-bind('styles.rowGap');
+  column-gap: v-bind('styles.colGap');
+  align-items: v-bind('styles.align');
+  justify-content: v-bind('styles.justAlign');
+}
+</style>

package/src/components/builtin/CanvasCollection.js ADDED Viewed

@@ -0,0 +1,278 @@
+/**
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { getController } from '../render/render'
+import { api } from '../render/RenderMain'
+import { useModal } from '@opentiny/tiny-engine-controller'
+const NAME_PREFIX = {
+  loop: 'loop',
+  table: 'getTableData',
+  page: 'pageConfig',
+  grid: 'tinyGrid',
+  tree: 'tinyTree',
+  select: 'tinySelect'
+}
+const genRemoteMethodToLifeSetup = (variableName, sourceRef, pageSchema) => {
+  if (sourceRef.value.data?.option) {
+    const setupFn = pageSchema.lifeCycles?.setup?.value
+    const fetchBody = `
+    this.state.${variableName} = []
+    this.dataSourceMap.${sourceRef.value.name}.load().then(data=>{  this.state.${variableName}=data })`
+    if (!setupFn) {
+      pageSchema.lifeCycles = pageSchema.lifeCycles || {}
+      pageSchema.lifeCycles.setup = {
+        type: 'JSFunction',
+        value: `function setup({ props, state, watch, onMounted }) {${fetchBody}}`
+      }
+    } else {
+      pageSchema.lifeCycles.setup.value = setupFn.trim().replace(/\}$/, fetchBody + '}')
+    }
+  }
+}
+const removeState = (pageSchema, variableName) => {
+  delete pageSchema.state[variableName]
+  const { parse, traverse, generate } = getController().ast
+  const setupFn = pageSchema.lifeCycles?.setup?.value
+  try {
+    const ast = parse(setupFn)
+    traverse(ast, {
+      ExpressionStatement(path) {
+        path.toString().includes(variableName) && path.remove()
+      }
+    })
+    pageSchema.lifeCycles.setup.value = generate(ast).code
+  } catch (error) {
+    // do nothing
+  }
+}
+const setStateWithSourceRef = (pageSchema, variableName, sourceRef, data) => {
+  api.setState({ [variableName]: data })
+  pageSchema.state[variableName] = data
+  if (sourceRef.value.data?.option?.isSync) {
+    genRemoteMethodToLifeSetup(variableName, sourceRef, pageSchema)
+  }
+}
+const defaultHandlerTemplate = ({ node, sourceRef, schemaId, pageSchema }) => {
+  const genVarName = (schemaId) => `${NAME_PREFIX.loop}${schemaId}`
+  const updateNode = () => {
+    const { configure } = getController().getMaterial(node?.componentName)
+    if (!configure?.loop) {
+      return
+    }
+    const variableName = genVarName(schemaId)
+    setStateWithSourceRef(pageSchema, variableName, sourceRef, sourceRef.value.data?.data)
+    node.loop = {
+      type: 'JSExpression',
+      value: `this.state.${variableName}`
+    }
+  }
+  const clearBindVar = () => {
+    const variableName = genVarName(schemaId)
+    removeState(pageSchema, variableName)
+  }
+  return {
+    updateNode,
+    clearBindVar
+  }
+}
+const generateAssginColumns = (newColumns, oldColumns) => {
+  newColumns.forEach((item) => {
+    const targetColumn = oldColumns.find((value) => value.field === item.field)
+    if (targetColumn) {
+      Object.assign(item, targetColumn)
+    }
+  })
+  return newColumns
+}
+const askShouldImportData = ({ node, sourceRef }) => {
+  useModal().confirm({
+    message: '检测到表格存在配置的数据，是否需要引入？',
+    exec() {
+      const sourceColums = sourceRef.value?.data?.columns?.map(({ title, field }) => ({ title, field })) || []
+      // 这里需要找到对应列，然后进行列合并
+      node.props.columns = generateAssginColumns(sourceColums, node.props.columns)
+    },
+    cancel() {
+      node.props.columns = [...sourceRef.value.data?.columns]
+    }
+  })
+}
+const updateNodeHandler = ({ node, sourceRef, pageSchema, sourceName, methodName }) => {
+  if (!node || !node.props) {
+    return
+  }
+  // 如果使用了数据元则需要删除表格的data属性
+  delete node?.props?.data
+  if (node.props.columns.length) {
+    askShouldImportData({ node, sourceRef })
+  } else {
+    node.props.columns = [...sourceRef.value.data?.columns]
+  }
+  const pageConfig = {
+    attrs: {
+      currentPage: 1,
+      pageSize: 50,
+      pageSizes: [10, 20, 50],
+      total: 0,
+      layout: 'sizes,total, prev, pager, next, jumper'
+    }
+  }
+  node.props.pager = pageConfig
+  pageSchema.methods[methodName] = {
+    type: 'JSFunction',
+    value: `function ${methodName}({ page, sort, sortBy, filters}) {
+/**
+* @param {Object} sort 排序数据
+* @param {Array} sortBy 排序方式
+* @param {Object} page 分页数据
+* @param {Array} filters 筛选数据
+* @returns {Object} 返回一个promise对象，并且resolve格式为{ result: Array, page: { total: Number } }
+*/
+return new Promise((resolve, reject) => {
+this.dataSourceMap.${sourceName}.load().then((res) => {
+  // 如果按照数据源面板的建议格式编写dataHandler
+  // 那么dataSourceMap的res格式应该是：{ code: string, msg: string, data: {items: any[], total: number} }
+  resolve({ result: res.data.items, page: { total: res.data.total } });
+});
+});
+}`
+  }
+}
+const extraHandlerMap = {
+  TinyGrid: ({ node, sourceRef, schemaId, pageSchema }) => {
+    const sourceName = sourceRef.value?.name
+    const methodName = `${NAME_PREFIX.table}${schemaId}`
+    node.props.fetchData = {
+      type: 'JSExpression',
+      value: `{ api: this.${methodName} }`
+    }
+    const updateNode = () => updateNodeHandler({ node, sourceRef, pageSchema, sourceName, methodName })
+    const clearBindVar = () => {
+      // 当数据源组件children字段为空时，及时清空创建的methods
+      delete pageSchema.methods[methodName]
+    }
+    return {
+      updateNode,
+      clearBindVar
+    }
+  },
+  TinyTree: ({ node, sourceRef, schemaId, pageSchema }) => {
+    const genVarName = (schemaId) => `${NAME_PREFIX.tree}${schemaId}`
+    const updateNode = () => {
+      const variableName = genVarName(schemaId)
+      const arrayToTree = (data) => {
+        const map = {}
+        const tree = []
+        let node = null
+        let i = 0
+        for (i = 0; i < data.length; i++) {
+          map[data[i].id] = data[i]
+          data[i].children = []
+        }
+        for (i = 0; i < data.length; i++) {
+          node = data[i]
+          if (node.pid !== '') {
+            map[node.pid]?.children?.push(node)
+          } else {
+            tree.push(node)
+          }
+        }
+        return tree
+      }
+      setStateWithSourceRef(pageSchema, variableName, sourceRef, arrayToTree(sourceRef.value.data?.data))
+      node.props.data = {
+        type: 'JSExpression',
+        value: `this.state.${variableName}`
+      }
+    }
+    const clearBindVar = () => {
+      const variableName = genVarName(schemaId)
+      removeState(pageSchema, variableName)
+    }
+    return {
+      updateNode,
+      clearBindVar
+    }
+  },
+  TinySelect: ({ node, sourceRef, schemaId, pageSchema }) => {
+    const genVarName = (schemaId) => `${NAME_PREFIX.select}${schemaId}`
+    const updateNode = () => {
+      const variableName = genVarName(schemaId)
+      setStateWithSourceRef(pageSchema, variableName, sourceRef, sourceRef.value.data?.data)
+      node.props.options = {
+        type: 'JSExpression',
+        value: `this.state.${variableName}`
+      }
+    }
+    const clearBindVar = () => {
+      const variableName = genVarName(schemaId)
+      removeState(pageSchema, variableName)
+    }
+    return {
+      updateNode,
+      clearBindVar
+    }
+  }
+}
+export const getHandler = ({ node, sourceRef, schemaId, pageSchema }) =>
+  extraHandlerMap[node.componentName]
+    ? extraHandlerMap[node.componentName]({ node, sourceRef, schemaId, pageSchema })
+    : defaultHandlerTemplate({ node, sourceRef, schemaId, pageSchema })

package/src/components/builtin/CanvasCollection.vue ADDED Viewed

@@ -0,0 +1,106 @@
+<template>
+  <component :is="tag" v-bind="$attrs">
+    <slot>
+      <canvas-placeholder>{{ source?.name || '未选择数据源' }}</canvas-placeholder>
+    </slot>
+  </component>
+</template>
+<script>
+import { ref, watch, computed, inject } from 'vue'
+import { getController } from '../render/render'
+import CanvasPlaceholder from './CanvasPlaceholder.vue'
+import { getHandler } from './CanvasCollection.js'
+export const fetchDataSourceDetail = (dataSourceId) =>
+  getController().request.get(`/app-center/api/sources/detail/${dataSourceId}`)
+export default {
+  components: {
+    CanvasPlaceholder
+  },
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    schema: {
+      type: Object,
+      default: () => ({})
+    },
+    dataSource: [String, Array, Number]
+  },
+  setup(props) {
+    const source = ref(null)
+    const pageSchema = inject('rootSchema')
+    if (props.dataSource) {
+      fetchDataSourceDetail(props.dataSource).then((res) => {
+        source.value = res
+      })
+    }
+    let handler
+    watch(
+      () => props.dataSource,
+      async (value) => {
+        if (value) {
+          source.value = await fetchDataSourceDetail(value)
+          if (props.schema?.children[0]) {
+            handler = getHandler({
+              sourceRef: source,
+              node: props.schema?.children[0],
+              schemaId: props.schema.id,
+              pageSchema
+            })
+          }
+          handler?.updateNode()
+        }
+      }
+    )
+    const isEmpty = computed(() => {
+      const { children } = props.schema || {}
+      return Array.isArray(children) ? !children.length : !children
+    })
+    watch(
+      () => isEmpty.value,
+      (value) => {
+        if (value) {
+          // 清除自动创建的state,method与setup逻辑
+          if (handler) {
+            handler.clearBindVar()
+          } else {
+            const schemaId = props.schema?.id
+            // 当页面初始化时handler是不存在的，所以需要通过数据源的schemaId（唯一性），去删除对应的方法
+            Object.keys(pageSchema.methods || {})?.some((item) => {
+              if (item.includes(schemaId)) {
+                delete pageSchema.methods[item]
+                return true
+              }
+              return false
+            })
+          }
+        } else {
+          if (props.schema?.children[0]) {
+            handler = getHandler({
+              sourceRef: source,
+              node: props.schema?.children[0],
+              schemaId: props.schema.id,
+              pageSchema
+            })
+            handler.updateNode()
+          }
+        }
+      }
+    )
+    return { source }
+  }
+}
+</script>

package/src/components/builtin/CanvasIcon.vue ADDED Viewed

@@ -0,0 +1,30 @@
+<script>
+import * as SvgIcons from '@opentiny/vue-icon'
+import { h } from 'vue'
+export default {
+  props: {
+    name: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
+    return () =>
+      h('span', { class: 'iconwarp' }, [
+        h(SvgIcons[props.name]?.(), { style: { width: '100%', height: '100%' } }) || 'error.'
+      ])
+  }
+}
+</script>
+<style scoped>
+.iconwarp {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  fill: currentColor;
+  width: 1em;
+  height: 1em;
+}
+</style>

package/src/components/builtin/CanvasImg.vue ADDED Viewed

@@ -0,0 +1,18 @@
+<template>
+  <img :src="src" :style="style" />
+</template>
+<script>
+export default {
+  props: {
+    src: {
+      type: String,
+      default: ''
+    },
+    style: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>