@opentiny/tiny-engine-canvas 1.0.0

package/src/components/container/keyboard.js

@@ -0,0 +1,147 @@
+/**
+ * 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 {
+  getCurrent,
+  insertNode,
+  selectNode,
+  getSchema,
+  POSITION,
+  removeNodeById,
+  allowInsert,
+  getConfigure,
+  clearHover,
+  hoverState
+} from './container'
+import { useHistory } from '@opentiny/tiny-engine-controller'
+import { copyObject, getClipboardSchema, setClipboardSchema } from '../common'
+
+const KEY_Y = 89
+const KEY_Z = 90
+const KEY_RIGHT = 39
+const KEY_LEFT = 37
+const KEY_UP = 38
+const KEY_DOWN = 40
+const KEY_DEL = 46
+
+function handlerLeft({ parent }) {
+  selectNode(parent?.id)
+}
+function handlerRight({ schema }) {
+  const id = schema.children?.[0]?.id
+  id && selectNode(id)
+}
+function handlerUp({ index, parent }) {
+  const id = (parent.children[index - 1] || parent)?.id
+  id && selectNode(id)
+}
+function handlerDown({ index, parent }) {
+  const id = parent.children[index + 1]?.id
+  id && selectNode(id)
+}
+function handlerDelete({ schema }) {
+  if (hoverState.id === schema.id) {
+    clearHover()
+  }
+  removeNodeById(schema.id)
+}
+
+const handlerArrow = (keyCode) => {
+  let { schema, parent } = getCurrent()
+  let index = null
+
+  if (schema) {
+    index = parent.children.indexOf(schema)
+  } else {
+    schema = getSchema()
+  }
+
+  let obj = {
+    [KEY_LEFT]: handlerLeft,
+    [KEY_RIGHT]: handlerRight,
+    [KEY_UP]: handlerUp,
+    [KEY_DOWN]: handlerDown,
+    [KEY_DEL]: handlerDelete
+  }
+  if (obj[keyCode]) {
+    obj[keyCode]({ index, schema, parent })
+  }
+}
+
+const handlerCtrl = (keyCode) => {
+  switch (keyCode) {
+    case KEY_Y:
+      useHistory().forward()
+      break
+    case KEY_Z:
+      useHistory().back()
+      break
+    default:
+      break
+  }
+}
+
+const handleClipboardCut = (event, schema) => {
+  if (setClipboardSchema(event, copyObject(schema))) {
+    removeNodeById(schema?.id)
+  }
+}
+
+const handleClipboardPaste = (node, schema, parent) => {
+  if (node?.componentName && schema?.componentName && allowInsert(getConfigure(schema.componentName), node)) {
+    insertNode({ parent, node: schema, data: { ...node } }, POSITION.IN)
+  }
+}
+
+const handlerClipboardEvent = (event) => {
+  const { schema, parent } = getCurrent()
+  const node = getClipboardSchema(event)
+  switch (event.type) {
+    case 'copy':
+      setClipboardSchema(event, copyObject(schema))
+      break
+    case 'paste':
+      handleClipboardPaste(node, schema, parent)
+      break
+    case 'cut':
+      handleClipboardCut(event, schema)
+      break
+    default:
+      break
+  }
+}
+
+const keyboardHandler = (event) => {
+  if (event.ctrlKey) {
+    getCurrent()?.schema && handlerCtrl(event.keyCode)
+  }
+
+  handlerArrow(event.keyCode)
+}
+
+const removeHostkeyEvent = (dom) => {
+  dom.removeEventListener('keydown', keyboardHandler)
+  dom.removeEventListener('copy', handlerClipboardEvent)
+  dom.removeEventListener('cut', handlerClipboardEvent)
+  dom.removeEventListener('paste', handlerClipboardEvent)
+}
+
+const registerHostkeyEvent = (dom) => {
+  removeHostkeyEvent(dom)
+
+  dom.addEventListener('keydown', keyboardHandler)
+  dom.addEventListener('copy', handlerClipboardEvent)
+  dom.addEventListener('cut', handlerClipboardEvent)
+  dom.addEventListener('paste', handlerClipboardEvent)
+}
+
+export { registerHostkeyEvent, removeHostkeyEvent }

package/src/components/container/shortCutPopover.vue

@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <div class="header">
+      <icon-setting class="icon-setting"></icon-setting>
+      <div>属性设置</div>
+      <span class="icon-wrap">
+        <icon-close class="icon-close" @click="closePanel"></icon-close>
+      </span>
+    </div>
+    <config-group :group="propertiesList" :index="0">
+      <template #item="{ data, propIndex }">
+        <config-item
+          :key="propIndex"
+          :property="data"
+          :data-prop-index="propIndex"
+          :data-group-index="groupIndex"
+          :isTopLayer="true"
+        >
+          <template #prefix>
+            <slot name="prefix" :data="data"></slot>
+          </template>
+          <template v-if="!data.noBinding" #suffix>
+            <slot name="suffix" :data="data"></slot>
+          </template>
+        </config-item>
+      </template>
+    </config-group>
+  </div>
+</template>
+
+<script>
+import { computed, ref } from 'vue'
+import { useResource, useProperties, useCanvas, useProperty } from '@opentiny/tiny-engine-controller'
+import { ConfigGroup, ConfigItem } from '@opentiny/tiny-engine-common'
+import { iconSetting, iconClose } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    ConfigGroup,
+    ConfigItem,
+    IconSetting: iconSetting(),
+    IconClose: iconClose()
+  },
+  setup(props, { emit }) {
+    const { getMaterial } = useResource()
+    const { pageState } = useCanvas()
+    const { properties } = useProperty({ pageState })
+    const active = ref('props')
+
+    const propertiesList = computed(() => {
+      const quickProps = []
+
+      const schema = useProperties().getSchema()
+      if (!schema) return []
+      const nodeType = getMaterial(schema.componentName)
+      const shortcuts = nodeType.configure?.shortcuts?.properties || []
+
+      properties.value.forEach((group) => {
+        group.content.forEach((prop) => {
+          shortcuts.includes(prop.property) && quickProps.push(prop)
+        })
+
+        // 如果目标元素的快速设置值没有，则取属性值放置
+        if (!quickProps.length) {
+          quickProps.push(...group.content.slice(0, 2))
+        }
+      })
+
+      return {
+        content: quickProps
+      }
+    })
+
+    const closePanel = () => {
+      emit('active', 'props')
+    }
+
+    return {
+      active,
+      propertiesList,
+      closePanel
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.header {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  border-bottom: 1px solid var(--ti-lowcode-toolbar-border-color, #333);
+  height: 36px;
+
+  div {
+    flex: 1;
+    margin: 0 10px;
+  }
+
+  .icon-setting {
+    font-size: 16px;
+    fill: var(--ti-lowcode-toolbar-breadcrumb-color, #d9d9d9);
+  }
+
+  .icon-wrap {
+    width: 20px;
+    height: 20px;
+    fill: var(--ti-lowcode-text-color, #6a6a6a);
+    font-size: 16px;
+    border-radius: 2px;
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    transition: 0.3s;
+    &:hover {
+      fill: var(--ti-lowcode-toolbar-icon-color, #fff);
+      background: var(--ti-lowcode-icon-hover-bg, rgba(255, 255, 255, 0.1));
+    }
+  }
+}
+.body {
+  padding: 0 12px;
+
+  .properties-item {
+    width: 100%;
+    padding: 8px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .item-label {
+      width: 40%;
+      word-break: break-all;
+    }
+    .item-component {
+      width: 100%;
+      padding-left: 8px;
+    }
+    .nolabel {
+      width: 100%;
+    }
+    &.col-6 {
+      width: 50%;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      .item-label {
+        width: auto;
+        margin-bottom: 6px;
+      }
+    }
+    &.col-4 {
+      width: 33.33%;
+      flex-direction: column;
+      align-items: flex-start;
+      .item-label {
+        width: auto;
+        margin-bottom: 6px;
+      }
+    }
+  }
+}
+.footer {
+  padding: 8px;
+  cursor: pointer;
+  span {
+    width: 100%;
+    padding: 4px 0;
+    display: inline-block;
+    background: var(--ti-lowcode-toolbar-view-hover-bg, #4d4d4d);
+    border-radius: 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  svg {
+    fill: var(--ti-lowcode-toolbar-breadcrumb-color, #d9d9d9);
+    margin-left: 4px;
+  }
+}
+</style>

package/src/components/render/CanvasEmpty.vue

@@ -0,0 +1,14 @@
+<template>
+  <p class="empty-text">从左侧面板拖入组件，以构建页面</p>
+</template>
+
+<style lang="less" scoped>
+.empty-text {
+  position: absolute;
+  top: 250px;
+  left: 50%;
+  transform: translate(-50%);
+  color: #808080;
+  font-size: 12px;
+}
+</style>