@opentiny/tiny-engine-canvas 1.0.0 → 1.0.1

package/src/components/container/CanvasMenu.vue

@@ -1,214 +0,0 @@
-<template>
-  <div v-show="menuState.show" ref="menuDom" class="context-menu" :style="menuState.position">
-    <ul class="menu-item">
-      <li
-        v-for="(item, index) in menus"
-        :key="index"
-        :class="item.items ? 'li-item' : ''"
-        @click="doOperation(item)"
-        @mouseover="current = item"
-      >
-        <div>
-          <span>{{ item.name }}</span>
-          <span v-if="item.items"><icon-right></icon-right></span>
-        </div>
-        <ul v-if="item.items && current === item" class="sub-menu menu-item">
-          <template v-for="(subItem, subIndex) in item.items" :key="subIndex">
-            <li v-if="subItem?.check?.() !== false" @click.stop="doOperation(subItem)">
-              {{ subItem.name }}
-            </li>
-          </template>
-        </ul>
-      </li>
-    </ul>
-    <save-new-block :boxVisibility="boxVisibility" fromCanvas @close="close"></save-new-block>
-  </div>
-</template>
-
-<script lang="jsx">
-import { ref, reactive, nextTick } from 'vue'
-import { getConfigure, getController, getCurrent, copyNode, removeNodeById } from './container'
-import { useLayout, useModal, useCanvas } from '@opentiny/tiny-engine-controller'
-import { SaveNewBlock } from '@opentiny/tiny-engine-common'
-import { iconRight } from '@opentiny/vue-icon'
-
-const menuState = reactive({
-  position: null,
-  show: false,
-  menus: []
-})
-
-const current = ref(null)
-const menuDom = ref(null)
-
-export const closeMenu = () => {
-  menuState.show = false
-  current.value = null
-}
-
-export const openMenu = (offset, event) => {
-  const { x, y } = offset
-  const { getScale } = useLayout()
-  menuState.position = {
-    // 位置处于画布右侧边缘时需要调整显示方向 TODO
-    left: event.clientX * getScale() + x + 2 + 'px',
-    top: event.clientY * getScale() + y + 'px'
-  }
-  menuState.show = sessionStorage.getItem('pageInfo') ? true : false
-
-  nextTick(() => {
-    if (menuDom.value) {
-      const { bottom, height, top } = menuDom.value.getBoundingClientRect()
-      if (bottom > document.body?.clientHeight) {
-        menuState.position.top = top - height + 'px'
-      }
-    }
-  })
-}
-
-export default {
-  components: {
-    SaveNewBlock,
-    IconRight: iconRight()
-  },
-  setup(props, { emit }) {
-    const menus = ref([
-      { name: '修改属性', code: 'config' },
-      {
-        name: '插入',
-        items: [
-          { name: '向前', code: 'insert', value: 'top' },
-          {
-            name: '中间',
-            code: 'insert',
-            value: 'in',
-            check() {
-              const { componentName } = getCurrent()?.schema || {}
-              return getConfigure(componentName)?.isContainer
-            }
-          },
-          { name: '向后', code: 'insert', value: 'bottom' }
-        ]
-      },
-      {
-        name: '添加父级',
-        items: [
-          { name: '文字提示', code: 'wrap', value: 'TinyTooltip' },
-          { name: '弹出框', code: 'wrap', value: 'TinyPopover' }
-        ]
-      },
-      { name: '删除', code: 'del' },
-      { name: '复制', code: 'copy' },
-      { name: '绑定事件', code: 'bindEvent' }
-    ])
-
-    const boxVisibility = ref(false)
-
-    // 计算上下文菜单位置，右键时显示，否则关闭
-
-    const operations = {
-      del() {
-        removeNodeById(getCurrent().schema.id)
-      },
-      copy() {
-        copyNode(getCurrent().schema.id)
-      },
-      config() {
-        useLayout().activeSetting('props')
-      },
-      bindEvent() {
-        useLayout().activeSetting('event')
-      },
-      insert({ value }) {
-        emit('insert', value)
-      },
-      wrap({ value, name }) {
-        const componentName = value || name
-        const { schema, parent } = getCurrent()
-        const index = parent.children.indexOf(schema)
-        const wrapSchema = {
-          componentName,
-          id: null,
-          props: {},
-          children: [schema]
-        }
-
-        parent.children.splice(index, 1, wrapSchema)
-
-        getController().addHistory()
-      },
-      createBlock() {
-        if (useCanvas().isSaved()) {
-          boxVisibility.value = true
-        } else {
-          useModal().message({
-            message: '请先保存当前页面',
-            status: 'error'
-          })
-        }
-      }
-    }
-
-    const close = () => {
-      boxVisibility.value = false
-    }
-    const doOperation = (item) => {
-      if (item?.code) {
-        operations[item.code](item)
-        closeMenu()
-      }
-    }
-
-    return {
-      menuState,
-      menus,
-      doOperation,
-      boxVisibility,
-      close,
-      current,
-      menuDom
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.context-menu {
-  position: fixed;
-  z-index: 10;
-}
-.menu-item {
-  width: 140px;
-  line-height: 20px;
-  border-radius: 6px;
-  padding: 8px 0;
-  background-color: var(--ti-lowcode-canvas-menu-bg);
-  box-shadow: 0 1px 15px 0 rgb(0 0 0 / 20%);
-  display: flex;
-  flex-direction: column;
-  .li-item {
-    border-bottom: 1px solid var(--ti-lowcode-canvas-menu-border-color);
-  }
-  li {
-    & > div {
-      display: flex;
-      width: 100%;
-      justify-content: space-between;
-    }
-    font-size: 12px;
-    color: var(--ti-lowcode-toolbar-breadcrumb-color);
-    padding: 6px 15px;
-    &:hover {
-      color: var(--ti-lowcode-toolbar-icon-color);
-      background: var(--ti-lowcode-canvas-menu-hover-color);
-    }
-    position: relative;
-  }
-  &.sub-menu {
-    width: 100px;
-    position: absolute;
-    right: -100px;
-    top: -2px;
-  }
-}
-</style>

package/src/components/container/CanvasResize.vue

@@ -1,195 +0,0 @@
-<template>
-  <div ref="resizeDom" class="canvas-size-controller" :style="sizeStyle">
-    <slot></slot>
-    <div ref="resize" class="canvas-resize-handle" @mousedown.stop="onMouseDown">
-      <div class="handle right-handle">
-        <div class="gutter-handle"></div>
-        <div class="tab-handle"></div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { ref, computed, watch, nextTick } from 'vue'
-import { useLayout } from '@opentiny/tiny-engine-controller'
-import { canvasState } from './container'
-
-export default {
-  setup() {
-    const sizeStyle = computed(() => {
-      const { width, maxWidth, minWidth, scale } = useLayout().getDimension()
-      return {
-        width,
-        maxWidth,
-        minWidth,
-        height: `${100 / scale}%`,
-        transform: `scale(${scale}) translateY(-${(100 / scale - 100) / 2}%)`
-      }
-    })
-
-    const mouseDown = ref(false)
-    const resizeDom = ref(null)
-
-    const onMouseMove = (event) => {
-      if (mouseDown.value) {
-        event.preventDefault()
-        calculateSize(event)
-      }
-    }
-
-    const calculateSize = ({ movementX }) => {
-      const dimension = useLayout().getDimension()
-      const { maxWidth, minWidth, width } = dimension
-      const newWidth = parseInt(width) + movementX * 2
-
-      // 鼠标往返移动到边界时再触发反向宽度调整
-      useLayout().setDimension({
-        width: `${parseInt(Math.min(Math.max(newWidth, parseInt(minWidth)), parseInt(maxWidth)), 10)}px`
-      })
-    }
-
-    const onMouseDown = () => {
-      const iframe = canvasState.iframe
-
-      if (iframe) {
-        iframe.style['pointer-events'] = 'none'
-        bindEvents()
-        mouseDown.value = true
-      }
-    }
-
-    const onMouseUp = () => {
-      const iframe = canvasState.iframe
-
-      if (iframe) {
-        iframe.style['pointer-events'] = 'auto'
-        mouseDown.value = false
-        unbindEvents()
-      }
-    }
-
-    const bindEvents = () => {
-      document.addEventListener('mousemove', onMouseMove, { passive: false })
-      document.addEventListener('mouseup', onMouseUp)
-    }
-
-    const unbindEvents = () => {
-      document.removeEventListener('mousemove', onMouseMove, { passive: false })
-      document.removeEventListener('mouseup', onMouseUp)
-    }
-
-    const setScale = () => {
-      useLayout().setDimension({ scale: 1 })
-      nextTick(() => {
-        const canvasWrap = document.querySelector('#canvas-wrap')
-        const rate = canvasWrap.offsetWidth / resizeDom.value.offsetWidth
-        useLayout().setDimension({
-          scale: rate > 1 ? 1 : rate
-        })
-      })
-    }
-
-    watch(() => useLayout().getDimension().width, setScale, { flush: 'post' })
-
-    watch(() => useLayout().getPluginState().fixedPanels, setScale, { flush: 'post' })
-
-    watch(
-      () => useLayout().getPluginState().render,
-      (value) => !value && setScale(),
-      { flush: 'post' }
-    )
-
-    return {
-      onMouseDown,
-      onMouseMove,
-      sizeStyle,
-      resizeDom
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-.canvas-size-controller {
-  height: 100%;
-
-  .canvas-resize-handle {
-    position: relative;
-
-    .handle {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      z-index: 13;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: -3px;
-        width: 4px;
-        height: 100%;
-        background: var(--ti-lowcode-canvas-tab-handle-hover-bg);
-        display: none;
-      }
-
-      &:hover::before {
-        display: block;
-      }
-
-      &:hover {
-        .tab-handle {
-          background: var(--ti-lowcode-canvas-tab-handle-hover-bg);
-        }
-
-        .tab-handle:before,
-        .tab-handle:after {
-          background: #ffffff;
-        }
-      }
-
-      .gutter-handle {
-        position: absolute;
-        top: 0;
-        left: -3px;
-        width: 4px;
-        height: 100%;
-        cursor: col-resize;
-        pointer-events: all;
-      }
-
-      .tab-handle {
-        position: fixed;
-        top: 50%;
-        width: 14px;
-        height: 38px;
-        margin-top: -19px;
-        background: var(--ti-lowcode-canvas-iframe-scrollbar-thumb-color);
-        cursor: col-resize;
-        pointer-events: all;
-        border-top-right-radius: 3px;
-        border-bottom-right-radius: 3px;
-
-        &::before,
-        &::after {
-          content: '';
-          position: absolute;
-          top: 8px;
-          bottom: 8px;
-          left: 8px;
-          width: 1px;
-          background: var(--ti-lowcode-canvas-tab-handle-color);
-        }
-
-        &::before {
-          left: 5px;
-        }
-      }
-    }
-
-    .right-handle {
-      right: -14px;
-      width: 14px;
-    }
-  }
-}
-</style>

package/src/components/container/CanvasResizeBorder.vue

@@ -1,219 +0,0 @@
-<template>
-  <div
-    v-if="state.visible"
-    :class="['resize-border', `resize-${state.direction}`]"
-    @mousedown="handleResizeStart"
-  ></div>
-</template>
-
-<script>
-import { reactive, watch } from 'vue'
-import { getCurrent, updateRect, selectState, querySelectById } from './container'
-
-export default {
-  props: {
-    iframe: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  setup(props) {
-    const state = reactive({
-      top: 0,
-      left: 0,
-      width: 0,
-      height: 0,
-      visible: false,
-      direction: 'vertical',
-      startPosition: {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0
-      }
-    })
-
-    const isFirstChild = (parent, schema) => {
-      return parent.children[0].id === schema.id
-    }
-
-    const handleResize = (event, type) => {
-      let { clientX, clientY } = event
-
-      if (type === 'iframe' && props.iframe) {
-        const iframeRect = props.iframe.getBoundingClientRect()
-        clientX += iframeRect.left
-        clientY += iframeRect.top
-      }
-
-      const { parent, schema } = getCurrent()
-
-      if (!schema.props) {
-        schema.props = {}
-      }
-
-      if (state.direction === 'horizontal') {
-        let dis = state.startPosition.x - clientX
-
-        if (isFirstChild(parent, schema)) {
-          dis = -dis
-        }
-
-        let newWidth = state.startPosition.width + dis
-
-        const parentDomNode = querySelectById(parent.id)
-        const parentWidth = parseInt(window.getComputedStyle(parentDomNode).width, 10)
-
-        // 最大宽度不能大于父组件宽度
-        if (newWidth >= parentWidth) {
-          newWidth = parentWidth
-        }
-
-        // 最小宽度32
-        if (newWidth <= 32) {
-          newWidth = 32
-        }
-
-        schema.props.flexBasis = `${newWidth}px`
-        schema.props.widthType = 'fixed'
-      }
-
-      if (state.direction === 'vertical') {
-        let target = schema.componentName === 'CanvasRow' ? schema : parent
-        if (!target.props) {
-          target.props = {}
-        }
-        const dis = clientY - state.startPosition.y
-        const minHeight = state.startPosition.height + dis
-        target.props.minHeight = `${minHeight}px`
-      }
-
-      updateRect()
-    }
-
-    const handleResizeOverIframe = (event) => {
-      handleResize(event, 'iframe')
-    }
-
-    const handleResizeEnd = () => {
-      window.removeEventListener('mousemove', handleResize, true)
-      window.removeEventListener('mouseup', handleResizeEnd, true)
-      if (props.iframe) {
-        const iframeWin = props.iframe.contentWindow
-        iframeWin.removeEventListener('mousemove', handleResizeOverIframe, true)
-        iframeWin.removeEventListener('mouseup', handleResizeEnd, true)
-      }
-      updateRect()
-    }
-
-    const handleResizeStart = () => {
-      const { top, left, width, height } = selectState
-      const { parent, schema } = getCurrent()
-
-      let startX = left
-
-      if (isFirstChild(parent, schema)) {
-        startX += parseInt(width, 10)
-      }
-
-      state.startPosition = {
-        x: startX,
-        y: top + parseInt(height, 10),
-        width: parseInt(width, 10),
-        height: parseInt(height, 10)
-      }
-
-      window.addEventListener('mousemove', handleResize, true)
-      window.addEventListener('mouseup', handleResizeEnd, true)
-
-      // 需要同时监听 iframe 和 app 的 mousemove 、mouseup 事件，因为鼠标移动过快可能会造成在 iframe 上面 mousemove 了
-      if (props.iframe) {
-        const iframeWin = props.iframe.contentWindow
-        iframeWin.addEventListener('mousemove', handleResizeOverIframe, true)
-        iframeWin.addEventListener('mouseup', handleResizeEnd, true)
-      }
-    }
-
-    watch(
-      () => selectState,
-      () => {
-        const { top, left, width, height, componentName } = selectState
-        const { parent, schema } = getCurrent()
-
-        if (!['CanvasRow', 'CanvasCol'].includes(componentName)) {
-          state.visible = false
-          return
-        }
-
-        state.visible = true
-
-        if (componentName === 'CanvasRow') {
-          state.top = `${top - 10 + height}px`
-          state.left = `${left}px`
-          state.width = `${width}px`
-          state.height = '20px'
-          state.direction = 'vertical'
-          return
-        }
-
-        if (componentName === 'CanvasCol') {
-          state.direction = parent.children.length > 1 ? 'horizontal' : 'vertical'
-          if (state.direction == 'vertical') {
-            // 选中的是 col，但是只有一个 col，所以出现的是 Row 的高度调整边框
-            state.top = `${top - 10 + height}px`
-            state.left = `${left}px`
-            state.width = `${width}px`
-            state.height = '20px'
-          } else {
-            const extraWidth = isFirstChild(parent, schema) ? width : 0
-            state.top = `${top}px`
-            state.left = `${left - 10 + extraWidth}px`
-            state.width = '20px'
-            state.height = `${height}px`
-          }
-        }
-      },
-      { deep: true }
-    )
-
-    return {
-      state,
-      handleResizeStart
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.resize-border {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 3;
-  top: v-bind('state.top');
-  left: v-bind('state.left');
-  width: v-bind('state.width');
-  height: v-bind('state.height');
-  &::after {
-    content: '';
-    display: block;
-    border: 1px solid var(--ti-lowcode-common-primary-color);
-  }
-  &.resize-vertical {
-    cursor: ns-resize;
-    &::after {
-      min-width: 50%;
-      height: 4px;
-    }
-  }
-
-  &.resize-horizontal {
-    cursor: ew-resize;
-    &::after {
-      width: 4px;
-      height: 100%;
-    }
-  }
-}
-</style>