@opentiny/tiny-engine-canvas 1.0.0 → 1.0.1

package/src/components/builtin/CanvasCollection.js

@@ -1,278 +0,0 @@
-/**
- * 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

@@ -1,106 +0,0 @@
-<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

@@ -1,30 +0,0 @@
-<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

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

package/src/components/builtin/CanvasPlaceholder.vue

@@ -1,26 +0,0 @@
-<template>
-  <div class="canvas-container">
-    <div class="container-box">
-      <div class="container-tip">
-        <slot>{{ placeholder }}</slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    placeholder: {
-      type: String,
-      default: '请将元素拖放到这里'
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.canvas-container {
-  min-height: 48px;
-}
-</style>

package/src/components/builtin/CanvasRow.vue

@@ -1,67 +0,0 @@
-<template>
-  <div class="canvas-row">
-    <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: {
-    minHeight: {
-      type: [String, Number],
-      default: ''
-    },
-    rowGap: {
-      type: [String, Number],
-      default: ''
-    },
-    colGap: {
-      type: [String, Number],
-      default: ''
-    },
-    align: {
-      type: [String, Number],
-      default: ''
-    },
-    justAlign: {
-      type: [String, Number],
-      default: ''
-    }
-  },
-  setup(props) {
-    const styles = computed(() => ({
-      minHeight: getStyleValue(props.minHeight),
-      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-row {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: v-bind('styles.justAlign');
-  align-items: v-bind('styles.align');
-  column-gap: v-bind('styles.rowGap');
-  row-gap: v-bind('styles.colGap');
-  min-height: v-bind('styles.minHeight');
-}
-</style>

package/src/components/builtin/CanvasRowColContainer.vue

@@ -1,42 +0,0 @@
-<template>
-  <div class="row-col-container">
-    <slot>
-      <canvas-placeholder :placeholder="$attrs.placeholder"></canvas-placeholder>
-    </slot>
-  </div>
-</template>
-
-<script>
-import { computed } from 'vue'
-import CanvasPlaceholder from './CanvasPlaceholder.vue'
-import { getStyleValue } from './helper'
-
-export default {
-  components: {
-    CanvasPlaceholder
-  },
-  props: {
-    rowGap: {
-      type: [String, Number],
-      default: ''
-    }
-  },
-  setup(props) {
-    const styles = computed(() => ({
-      rowGap: getStyleValue(props.rowGap)
-    }))
-
-    return {
-      styles
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.row-col-container {
-  display: flex;
-  flex-direction: column;
-  row-gap: v-bind('styles.rowGap');
-}
-</style>

package/src/components/builtin/CanvasSlot.vue

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

package/src/components/builtin/CanvasText.vue

@@ -1,18 +0,0 @@
-<template>
-  <span :class="['canvas-text', className]">{{ text }}</span>
-</template>
-
-<script>
-export default {
-  props: {
-    text: {
-      type: String,
-      default: ''
-    },
-    className: {
-      type: String,
-      default: ''
-    }
-  }
-}
-</script>