@opentiny/tiny-engine-canvas 1.0.0

package/src/components/container/CanvasContainer.vue

@@ -0,0 +1,244 @@
+<template>
+  <canvas-action
+    :hoverState="hoverState"
+    :selectState="selectState"
+    :lineState="lineState"
+    :windowGetClickEventTarget="target"
+    :resize="canvasState.type === 'absolute'"
+    @select-slot="selectSlot"
+    @setting="settingModle"
+  ></canvas-action>
+  <canvas-divider :selectState="selectState"></canvas-divider>
+  <canvas-resize-border :iframe="iframe"></canvas-resize-border>
+  <canvas-resize>
+    <iframe
+      v-if="!loading"
+      id="canvas"
+      ref="iframe"
+      :src="canvasSrc"
+      style="border: none; width: 100%; height: 100%"
+    ></iframe>
+    <div v-else class="datainit-tip">应用数据初始化中...</div>
+  </canvas-resize>
+  <canvas-menu @insert="insertComponent"></canvas-menu>
+  <!-- 快捷选择物料面板 -->
+  <div v-if="insertPosition" ref="insertPanel" class="insert-panel">
+    <component :is="materialsPanel" :shortcut="insertPosition" @close="insertPosition = false"></component>
+  </div>
+</template>
+
+<script>
+import { onMounted, ref, computed, onUnmounted } from 'vue'
+import { iframeMonitoring } from '@opentiny/tiny-engine-common/js/monitor'
+import { useTranslate, useCanvas, useResource } from '@opentiny/tiny-engine-controller'
+import CanvasAction from './CanvasAction.vue'
+import CanvasResize from './CanvasResize.vue'
+import CanvasMenu, { closeMenu, openMenu } from './CanvasMenu.vue'
+import { NODE_UID, NODE_LOOP } from '../common'
+import { registerHostkeyEvent, removeHostkeyEvent } from './keyboard'
+import CanvasDivider from './CanvasDivider.vue'
+import CanvasResizeBorder from './CanvasResizeBorder.vue'
+import {
+  canvasState,
+  onMouseUp,
+  dragMove,
+  dragState,
+  hoverState,
+  selectState,
+  lineState,
+  removeNodeById,
+  updateRect,
+  getElement,
+  dragStart,
+  getOffset,
+  selectNode,
+  initCanvas,
+  clearLineState,
+  querySelectById,
+  getCurrent
+} from './container'
+
+export default {
+  components: { CanvasAction, CanvasResize, CanvasMenu, CanvasDivider, CanvasResizeBorder },
+  props: {
+    controller: Object,
+    canvasSrc: String,
+    materialsPanel: Object
+  },
+  emits: ['selected', 'remove'],
+  setup(props, { emit }) {
+    const iframe = ref(null)
+    const insertPanel = ref(null)
+    const insertPosition = ref(false)
+    const loading = computed(() => useCanvas().isLoading())
+    let showSettingModle = ref(false)
+    let target = ref(null)
+
+    const setCurrentNode = async (event) => {
+      const { clientX, clientY } = event
+      const element = getElement(event.target)
+      closeMenu()
+      let node = getCurrent().schema
+
+      if (element) {
+        const currentElement = querySelectById(getCurrent().schema?.id)
+
+        if (!currentElement?.contains(element) || event.button === 0) {
+          const loopId = element.getAttribute(NODE_LOOP)
+          if (loopId) {
+            node = await selectNode(element.getAttribute(NODE_UID), `loop-id=${loopId}`)
+          } else {
+            node = await selectNode(element.getAttribute(NODE_UID))
+          }
+        }
+
+        if (event.button === 0 && element !== element.ownerDocument.body) {
+          const { x, y } = element.getBoundingClientRect()
+
+          dragStart(node, element, { offsetX: clientX - x, offsetY: clientY - y })
+        }
+
+        // 如果是点击右键则打开右键菜单
+        if (event.button === 2) {
+          openMenu(getOffset(event.target), event)
+        }
+      }
+    }
+
+    const beforeCanvasReady = () => {
+      if (iframe.value) {
+        const win = iframe.value.contentWindow
+
+        win.thirdPartyDeps = useResource().resState.thirdPartyDeps
+      }
+    }
+
+    const canvasReady = ({ detail }) => {
+      if (iframe.value) {
+        // 设置monitor报错埋点
+        iframeMonitoring()
+
+        initCanvas({ emit, renderer: detail, iframe: iframe.value, controller: props.controller })
+
+        const doc = iframe.value.contentDocument
+        const win = iframe.value.contentWindow
+
+        // 以下是内部iframe监听的事件
+        win.addEventListener('mousedown', (event) => {
+          insertPosition.value = false
+          setCurrentNode(event)
+          target.value = event.target
+        })
+
+        win.addEventListener('dragover', (ev) => {
+          ev.dataTransfer.dropEffect = 'move'
+          ev.preventDefault()
+          dragMove(ev)
+        })
+
+        win.addEventListener('drop', (ev) => {
+          ev.preventDefault()
+          onMouseUp(ev)
+        })
+
+        win.addEventListener('mousemove', (ev) => {
+          dragMove(ev, true)
+        })
+
+        // 阻止浏览器默认的右键菜单功能
+        win.oncontextmenu = (e) => {
+          e.preventDefault()
+        }
+
+        registerHostkeyEvent(doc)
+
+        win.addEventListener('scroll', updateRect, true)
+      }
+    }
+    // 设置弹窗
+    const settingModle = () => {
+      showSettingModle.value = true
+    }
+
+    const updateI18n = (message) => {
+      if (message?.data?.isI18n) {
+        const data = message.data.data || {}
+        const ensureI18n = useTranslate().ensureI18n
+        Object.keys(data).forEach((key) => {
+          ensureI18n(data[key], false)
+        })
+      }
+    }
+    const run = () => {
+      // 以下是外部window需要监听的事件
+      window.addEventListener('mousedown', (e) => {
+        insertPosition.value = insertPanel.value?.contains(e.target)
+        target.value = e.target
+      })
+
+      window.addEventListener('dragenter', () => {
+        // 如果拖拽范围超出了iframe范围，则清空拖拽位置数据
+        clearLineState()
+      })
+
+      window.addEventListener('message', updateI18n)
+    }
+
+    const insertComponent = (position) => {
+      insertPosition.value = position
+    }
+
+    const selectSlot = (slotName) => {
+      hoverState.slot = slotName
+    }
+
+    onMounted(() => run(iframe))
+    onUnmounted(() => {
+      removeHostkeyEvent(iframe.value.contentDocument)
+      window.removeEventListener('message', updateI18n, false)
+    })
+
+    document.addEventListener('beforeCanvasReady', beforeCanvasReady)
+    document.addEventListener('canvasReady', canvasReady)
+
+    return {
+      iframe,
+      dragState,
+      hoverState,
+      selectState,
+      lineState,
+      removeNodeById,
+      selectSlot,
+      canvasState,
+      insertComponent,
+      insertPanel,
+      settingModle,
+      target,
+      showSettingModle,
+      insertPosition,
+      loading
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.insert-panel {
+  z-index: 1;
+  position: fixed;
+  top: 200px;
+  left: 400px;
+  width: 480px;
+  :deep(.components-wrap) {
+    & > .tiny-collapse {
+      height: 300px;
+    }
+  }
+}
+.datainit-tip {
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  color: #1890ff;
+}
+</style>

package/src/components/container/CanvasDivider.vue

@@ -0,0 +1,246 @@
+<template>
+  <div
+    v-if="state.showVerticalDivider"
+    class="divider-wrapper divider-vertical"
+    @click="handleSplit"
+    @mouseenter="handleMouseEnter('vertical')"
+    @mouseleave="handleMouseLeave"
+  >
+    <div class="divider"></div>
+  </div>
+  <div
+    v-if="state.showHorizontalDivider"
+    class="divider-wrapper divider-horizontal"
+    @click="handleSplitRow"
+    @mouseenter="handleMouseEnter('horizontal')"
+    @mouseleave="handleMouseLeave"
+  >
+    <div class="divider"></div>
+  </div>
+
+  <div v-if="state.showDividerLine" class="divider-line" :style="state.dividerStyle"></div>
+</template>
+
+<script>
+import { reactive, watch } from 'vue'
+import { extend } from '@opentiny/vue-renderless/common/object'
+import { getCurrent, updateRect } from './container'
+
+const LEGAL_DIVIDER_COMPONENT = ['CanvasRow', 'CanvasCol']
+
+const ROW_SNIPPET = {
+  componentName: 'CanvasRow',
+  props: {
+    rowGap: '20px',
+    colGap: '20px'
+  },
+  children: [
+    {
+      componentName: 'CanvasCol',
+      props: {
+        rowGap: '20px',
+        colGap: '20px',
+        grow: true,
+        shrink: true,
+        widthType: 'auto'
+      }
+    }
+  ]
+}
+
+const COL_SNIPPET = {
+  componentName: 'CanvasCol',
+  props: {
+    rowGap: '20px',
+    colGap: '20px',
+    grow: true,
+    shrink: true,
+    widthType: 'auto'
+  },
+  children: []
+}
+
+export default {
+  props: {
+    selectState: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const state = reactive({
+      horizontalLeft: 0,
+      horizontalTop: 0,
+      verLeft: 0,
+      verTop: 0,
+      showVerticalDivider: false,
+      showHorizontalDivider: false,
+      showDividerLine: false,
+      dividerStyle: {}
+    })
+
+    const handleSplit = () => {
+      const { parent, schema } = getCurrent()
+
+      const index = parent.children.findIndex(({ id }) => id === schema.id)
+
+      parent.children.splice(index + 1, 0, extend(true, {}, COL_SNIPPET))
+      updateRect()
+    }
+
+    const handleSplitRow = () => {
+      const { parent, schema } = getCurrent()
+
+      const index = parent.children.findIndex(({ id }) => id === schema.id)
+
+      if (schema.componentName === 'CanvasRow') {
+        parent.children.splice(index + 1, 0, extend(true, {}, ROW_SNIPPET))
+
+        return
+      }
+
+      // 当前选中组件是 CanvasCol 横向切割
+      if (schema.componentName === 'CanvasCol') {
+        // 当前组件为空组件，直接切成两行
+        if (!schema.children?.length) {
+          schema.children = [
+            {
+              ...extend(true, {}, ROW_SNIPPET),
+              children: [{ ...extend(true, {}, COL_SNIPPET) }]
+            },
+            {
+              ...extend(true, {}, ROW_SNIPPET),
+              children: [{ ...extend(true, {}, COL_SNIPPET) }]
+            }
+          ]
+        } else if (schema.children[0].componentName !== 'CanvasRow') {
+          // 当前组件不为空组件且第一个孩子不为 row，则是第一次切割，切割成两行，需要将原来有的 children 放置到第一个 row 的 col
+          schema.children = [
+            {
+              ...extend(true, {}, ROW_SNIPPET),
+              children: [
+                {
+                  ...extend(true, {}, COL_SNIPPET),
+                  children: [...(schema.children || [])]
+                }
+              ]
+            },
+            extend(true, {}, ROW_SNIPPET)
+          ]
+        } else {
+          // 已经切割过了，直接加一行
+          schema.children.push(...extend(true, {}, ROW_SNIPPET))
+        }
+      }
+
+      updateRect()
+    }
+
+    watch(
+      () => props.selectState,
+      (selectState) => {
+        const { width, height, left, top, componentName } = selectState
+
+        if (!LEGAL_DIVIDER_COMPONENT.includes(componentName)) {
+          state.showHorizontalDivider = false
+          state.showVerticalDivider = false
+
+          return
+        }
+
+        state.showHorizontalDivider = true
+        state.showVerticalDivider = 'CanvasRow' !== componentName
+
+        const centerLeft = left + width / 2
+        const centerTop = top + height / 2
+
+        state.verLeft = `${centerLeft}px`
+        state.verTop = `${top}px`
+
+        state.horizontalLeft = `${left}px`
+        state.horizontalTop = `${centerTop}px`
+      },
+      { deep: true }
+    )
+
+    // 鼠标进入剪刀按钮，出现剪刀线
+    const handleMouseEnter = (type) => {
+      const { width, height, left, top } = props.selectState
+      if (type === 'vertical') {
+        state.dividerStyle = {
+          width: '1px',
+          height: `${height}px`,
+          left: `${state.verLeft}px`,
+          top: `${top}px`
+        }
+      } else {
+        state.dividerStyle = {
+          width: `${width}px`,
+          height: '1px',
+          left: `${left}px`,
+          top: `${state.horizontalTop}px`
+        }
+      }
+      state.showDividerLine = true
+    }
+
+    const handleMouseLeave = () => {
+      state.showDividerLine = false
+      state.dividerStyle = {}
+    }
+
+    return {
+      state,
+      handleSplit,
+      handleSplitRow,
+      handleMouseEnter,
+      handleMouseLeave
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.divider-wrapper {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--ti-lowcode-common-text-color-3);
+  cursor: pointer;
+  z-index: 3;
+  &.divider-vertical {
+    transform: translateX(-50%);
+    top: v-bind('state.verTop');
+    left: v-bind('state.verLeft');
+  }
+  &.divider-horizontal {
+    transform: translate(10px, -50%) rotate(270deg);
+    top: v-bind('state.horizontalTop');
+    left: v-bind('state.horizontalLeft');
+  }
+  &:hover {
+    background-color: var(--ti-lowcode-common-primary-color);
+    .divider {
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACbElEQVRIDZ2Vu2sVURCH9yZgbCxMsFFjKQkExScREgQtLISAXbS4GDu10fgHiL1gpxKDCLFRfICCCSpCwEiCYiNWFkYsImIRH4jgY/x+xzNy7t29614HvsycmfnN3j1nd5Nl0cysDrPwEV7DRVjn9Vaent7Y+wYvrWbUG/pJTIHsCzyBd1pg8v0NzcmC2kDswdkizIFmyKZCK4F+uWwGelxPfAx+wFPPpZ58JzyHX3DEa8TdoFmyesYf3ZKu+nd40nyJvGzEc+7JjYWK2aTn3JPXRTRzVhdYhjkvpp78KMieNeW7yGnPZYfSmsfktV3LHSSWoNVhro+CbTTvdzH+KGyI61batdSXdAcXQDYWBcGx1m2+ha/wHRZUwK+C9/ABtA3q6W7S+vadl6AH9LT8hAk4CKdAQtlJuBIis3340zE+gR+PsXqlkVYzNEsz/5wrQR/MQ2qfWYzHX72RWE+UnppPoP3vijUNVm9qCyz60rvSnXTAJtBjOwKr0wbWV8GtaDulkVYzdLbtGaLdINPed1ZVt3Mlf/21r8NVL1Cpj1+sM9IZvAK9uY8qCas2MfAGyPbC9RCZDVXVl/YxbHsc+FCNxDpE3cWDUmHVIoPug2yna4hvhYzZLs/9l2fInjjoZjqA3JaYn07zbccM0Qujw839TyB3B2Q72h4sAcIDQW52uWiABsf63aJ6aQ6h3uqX8A38q5nTULsHsq25YlkCweEgMzv3j77B2He7rK+hhmAFLII+YGsaigULevSU6bHdXFDOp2g8DrIz+Wo+Q99Q6Da7lq9mWdG3aCWNL+BskaA5V6vVHpPT8FpzTevfkrgJcwZ0OJIAAAAASUVORK5CYII=);
+    }
+  }
+  .divider {
+    width: 12px;
+    height: 12px;
+    color: var(--ti-lowcode-common-text-color-3);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAACO0lEQVRIDa2Uy6tNURzHN7cwMUAmHncot0QeV5QiBgZKmWEgzDDx+ANu5soMcUkxIY+iEFIKEZnIyMC9GZAMrke6hXt9Pvus1VnntPbZ53B/9dnrt36P7zpr7bVPUTRtD+5j+Arv4QwshDpbTIG1o2CvGmq12CVmk/ADnsGnMHccgCpbRiLWjuA/BTXUUrM0VzNwD+aVkcbjIMNveJnEUrePyWuYgP1JYi6+WmqWO3FLrpqKMy3tHE8LtzemLc99ITfcEm1MXERNtYsxcGs520nQBV61JWcyHw253W25OFVzbDqPj1D1MheF6tWM24LvcAD6w7yqdwF5tYvT4K90y6m5zQ/wE37BC9Bmw2f4Ah6DNdamFo/vlEHP3pvwB87CLjgGNrrwEbgY/K2MQ8E/zHg0+NbaY68aaqmpdmlLeT4HBSPf8RXQloA3ylvzDTx/34OmsLWxz9Hdqtlivo/l4NXy1syB1C4ziSK547THXjXU6tk20uECnn1fz91dNJynJu5gUxf1PZV4nr6DdzABj2BK7Rpq/votcDX4GxinxNagovjDoOZLdBcPwvy/h/souMDaROlGiK1PYv/kbg5C19u6V4b43bZ4z1M/GF/uQKbzFjF3NpjJdRXaEQQuVFQr7AK3K/Idw36Jb2Ec+jtU3iHnIqs61GRTe4naeDKbbQbXhbqbzVC9N4OSEfAPbD7UmbfMa7uirjDmD+H464/HQM3oB2f9lVxd7l9vFoVv4ESuIRN7QkzxaZlc8RcdnI7tMHZBlAAAAABJRU5ErkJggg==);
+  }
+}
+
+.divider-line {
+  position: fixed;
+  border: 1px dashed var(--ti-lowcode-common-primary-color);
+  z-index: 2;
+}
+</style>

package/src/components/container/CanvasDragItem.vue

@@ -0,0 +1,38 @@
+<template>
+  <div draggable="true" class="drag-item" @dragstart="dragstart">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { dragStart } from './container'
+export default {
+  props: {
+    data: Object
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const dragstart = (e) => {
+      if (props.data && e.button === 0) {
+        const data = JSON.parse(JSON.stringify(props.data))
+        emit('click', data)
+        dragStart(data)
+
+        // 设置拖拽鼠标样式和设置拖拽预览图
+        const target = e.target.querySelector('.component-item-component')
+        e.dataTransfer.effectAllowed = 'move'
+        e.dataTransfer.setDragImage(target, 10, 10)
+      }
+    }
+    return {
+      dragstart
+    }
+  }
+}
+</script>
+<style lang="less">
+.drag-item {
+  user-select: none;
+  cursor: move;
+}
+</style>

package/src/components/container/CanvasFooter.vue

@@ -0,0 +1,86 @@
+<template>
+  <div id="tiny-bottom-panel">
+    <div class="content">
+      <tiny-steps v-show="data.length > 0" :data="data" @click="(index, node) => $emit('click', node)"></tiny-steps>
+      <div v-show="data.length <= 0" class="tip">没有选中的节点</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Steps } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinySteps: Steps
+  },
+  props: {
+    data: {
+      type: Array,
+      default: []
+    }
+  },
+  emits: ['click']
+}
+</script>
+
+<style lang="less" scoped>
+#tiny-bottom-panel {
+  width: 100%;
+  height: var(--base-bottom-panel-height, 30px);
+  bottom: 0;
+  position: absolute;
+  background-color: var(--ti-lowcode-breadcrumb-bg);
+  z-index: 90;
+  border-top: 1px solid var(--ti-lowcode-canvas-footer-border-top-color);
+  .content {
+    .tip {
+      color: var(--ti-lowcode-breadcrumb-color);
+      line-height: 30px;
+      height: 30px;
+      padding-left: 10px;
+    }
+    :deep(.tiny-steps-advanced) {
+      li {
+        width: unset !important;
+        background: var(--ti-lowcode-breadcrumb-bg);
+        a {
+          padding: 0 3px 0 16px;
+          border-top: 0;
+          color: var(--ti-lowcode-breadcrumb-color);
+          transition: 0.3s;
+          &::after {
+            display: inline-block;
+            right: -6px;
+            border-left: 6px solid var(--ti-lowcode-breadcrumb-bg);
+            transition: 0.3s;
+          }
+          &::before {
+            display: inline-block;
+            right: -7px;
+            left: unset;
+            border-left: 6px solid var(--ti-lowcode-breadcrumb-icon-color);
+            transition: 0.3s;
+            z-index: 1;
+          }
+          &:hover {
+            background: var(--ti-lowcode-breadcrumb-hover-bg);
+            &::after {
+              border-left-color: var(--ti-lowcode-breadcrumb-hover-bg);
+            }
+          }
+        }
+        &:last-child a {
+          border-right: 0px solid var(--ti-lowcode-breadcrumb-color);
+          border-radius: 0;
+        }
+        &:first-child a {
+          border-right: 0px solid var(--ti-lowcode-breadcrumb-color);
+          border-radius: 0;
+          border-left: unset;
+        }
+      }
+    }
+  }
+}
+</style>