@opentiny/tiny-engine-canvas 1.0.0

package/src/components/container/CanvasMenu.vue

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

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

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