@opentiny/tiny-engine-canvas 1.0.0 → 1.0.1

package/src/components/container/CanvasContainer.vue

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

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

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

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