types: add types to hooks.ts, containers.ts and useCanvas.ts (#1240)
This commit is contained in:
Gene
GitHub
parent
bec6f7c101
commit
a481eff281
|
|
@ -1,71 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"jsx": "react",
|
||||
"paths": {
|
||||
"@/*": ["packages/*"],
|
||||
"@opentiny/tiny-engine": ["packages/design-core/index.js"],
|
||||
"@opentiny/tiny-engine-meta-register": ["packages/register/src/index.js"],
|
||||
"@opentiny/tiny-engine-canvas": ["packages/canvas/src/index"],
|
||||
"@opentiny/tiny-engine-plugin-materials": ["packages/plugins/materials/index"],
|
||||
"@opentiny/tiny-engine-plugin-state": ["packages/plugins/state/index"],
|
||||
"@opentiny/tiny-engine-plugin-script": ["packages/plugins/script/index"],
|
||||
"@opentiny/tiny-engine-plugin-tree": ["packages/plugins/tree/index"],
|
||||
"@opentiny/tiny-engine-plugin-help": ["packages/plugins/help/index"],
|
||||
"@opentiny/tiny-engine-plugin-schema": ["packages/plugins/schema/index"],
|
||||
"@opentiny/tiny-engine-plugin-page": ["packages/plugins/page/index"],
|
||||
"@opentiny/tiny-engine-plugin-i18n": ["packages/plugins/i18n/index"],
|
||||
"@opentiny/tiny-engine-plugin-bridge": ["packages/plugins/bridge/index"],
|
||||
"@opentiny/tiny-engine-setting-events": ["packages/settings/events/index"],
|
||||
"@opentiny/tiny-engine-setting-props": ["packages/settings/props/index"],
|
||||
"@opentiny/tiny-engine-common": ["packages/common/index"],
|
||||
"@opentiny/tiny-engine-setting-styles": ["packages/settings/styles/index"],
|
||||
"@opentiny/tiny-engine-toolbar-breadcrumb": ["packages/toolbars/breadcrumb/index"],
|
||||
"@opentiny/tiny-engine-toolbar-fullscreen": ["packages/toolbars/fullscreen/index"],
|
||||
"@opentiny/tiny-engine-toolbar-lang": ["packages/toolbars/lang/index"],
|
||||
"@opentiny/tiny-engine-toolbar-view-setting": ["packages/toolbars/view-setting/index"],
|
||||
"@opentiny/tiny-engine-toolbar-layout": ["packages/toolbars/layout/index"],
|
||||
"@opentiny/tiny-engine-toolbar-lock": ["packages/toolbars/lock/index"],
|
||||
"@opentiny/tiny-engine-toolbar-logo": ["packages/toolbars/logo/index"],
|
||||
"@opentiny/tiny-engine-toolbar-media": ["packages/toolbars/media/index"],
|
||||
"@opentiny/tiny-engine-toolbar-preview": ["packages/toolbars/preview/index"],
|
||||
"@opentiny/tiny-engine-toolbar-generate-code": ["packages/toolbars/generate-code/index"],
|
||||
"@opentiny/tiny-engine-toolbar-clean": ["packages/toolbars/clean/index"],
|
||||
"@opentiny/tiny-engine-toolbar-theme-switch": ["packages/toolbars/themeSwitch/index"],
|
||||
"@opentiny/tiny-engine-toolbar-save": ["packages/toolbars/save/index"],
|
||||
"tiny-engine-canvas": ["packages/canvas/index"],
|
||||
"@opentiny/tiny-engine-svgs": ["packages/svgs/index"],
|
||||
"@opentiny/tiny-engine-plugin-materials/*": ["packages/plugins/materials/*"],
|
||||
"@opentiny/tiny-engine-plugin-state/*": ["packages/plugins/state/*"],
|
||||
"@opentiny/tiny-engine-plugin-script/*": ["packages/plugins/script/*"],
|
||||
"@opentiny/tiny-engine-plugin-tree/*": ["packages/plugins/tree/*"],
|
||||
"@opentiny/tiny-engine-plugin-help/*": ["packages/plugins/help/*"],
|
||||
"@opentiny/tiny-engine-plugin-schema/*": ["packages/plugins/schema/*"],
|
||||
"@opentiny/tiny-engine-plugin-page/*": ["packages/plugins/page/*"],
|
||||
"@opentiny/tiny-engine-plugin-i18n/*": ["packages/plugins/i18n/*"],
|
||||
"@opentiny/tiny-engine-plugin-bridge/*": ["packages/plugins/bridge/*"],
|
||||
"@opentiny/tiny-engine-setting-events/*": ["packages/settings/events/*"],
|
||||
"@opentiny/tiny-engine-setting-props/*": ["packages/settings/props/*"],
|
||||
"@opentiny/tiny-engine-common/*": ["packages/common/*"],
|
||||
"@opentiny/tiny-engine-setting-styles/*": ["packages/settings/styles/*"],
|
||||
"@opentiny/tiny-engine-toolbar-breadcrumb/*": ["packages/toolbars/breadcrumb/*"],
|
||||
"@opentiny/tiny-engine-toolbar-fullscreen/*": ["packages/toolbars/fullscreen/*"],
|
||||
"@opentiny/tiny-engine-toolbar-lang/*": ["packages/toolbars/lang/*"],
|
||||
"@opentiny/tiny-engine-toolbar-view-setting/*": ["packages/toolbars/view-setting/*"],
|
||||
"@opentiny/tiny-engine-toolbar-layout/*": ["packages/toolbars/layout/*"],
|
||||
"@opentiny/tiny-engine-toolbar-lock/*": ["packages/toolbars/lock/*"],
|
||||
"@opentiny/tiny-engine-toolbar-logo/*": ["packages/toolbars/logo/*"],
|
||||
"@opentiny/tiny-engine-toolbar-media/*": ["packages/toolbars/media/*"],
|
||||
"@opentiny/tiny-engine-toolbar-preview/*": ["packages/toolbars/preview/*"],
|
||||
"@opentiny/tiny-engine-toolbar-clean/*": ["packages/toolbars/clean/*"],
|
||||
"@opentiny/tiny-engine-toolbar-theme-switch/*": ["packages/toolbars/themeSwitch/*"],
|
||||
"@opentiny/tiny-engine-toolbar-save/*": ["packages/toolbars/save/*"],
|
||||
"@opentiny/tiny-engine-svgs/*": ["packages/svgs/*"],
|
||||
"@opentiny/tiny-engine-utils": ["packages/utils/src/index"],
|
||||
"@opentiny/tiny-engine-webcomponent-core": ["packages/webcomponent/src/lib"],
|
||||
"@opentiny/tiny-engine-i18n-host": ["packages/i18n/src/lib"]
|
||||
}
|
||||
},
|
||||
"include": ["packages/**/*"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import type { Node, RootNode } from '../../../types'
|
||||
|
||||
export type PageSchema = RootNode
|
||||
|
||||
export interface PageState {
|
||||
currentVm?: unknown
|
||||
currentSchema?: unknown
|
||||
currentType?: unknown
|
||||
currentPage?: unknown
|
||||
hoverVm?: unknown
|
||||
pageSchema: RootNode | null
|
||||
properties?: unknown
|
||||
dataSource?: unknown
|
||||
dataSourceMap?: unknown
|
||||
isSaved: boolean
|
||||
isLock: boolean
|
||||
isBlock: boolean
|
||||
nodesStatus: Record<string, any>
|
||||
loading: boolean
|
||||
}
|
||||
|
||||
export interface InsertOperation {
|
||||
parentId: string
|
||||
newNodeData: Node
|
||||
position: string
|
||||
referTargetNodeId?: string
|
||||
}
|
||||
|
||||
export interface DeleteOperation {
|
||||
id: string
|
||||
}
|
||||
|
||||
export interface ChangePropsOperation {
|
||||
id: string
|
||||
value: {
|
||||
props?: any
|
||||
}
|
||||
option?: {
|
||||
overwrite?: boolean
|
||||
}
|
||||
}
|
||||
|
||||
export interface UpdateAttributesOperation {
|
||||
id: string
|
||||
value: any
|
||||
overwrite?: boolean
|
||||
}
|
||||
|
||||
export type NodeOperation =
|
||||
| (InsertOperation & { type: 'insert' })
|
||||
| (DeleteOperation & { type: 'delete' })
|
||||
| (ChangePropsOperation & { type: 'changeProps' })
|
||||
| (UpdateAttributesOperation & { type: 'updateAttributes' })
|
||||
|
|
@ -15,14 +15,26 @@ import * as jsonDiffPatch from 'jsondiffpatch'
|
|||
import DiffMatchPatch from 'diff-match-patch'
|
||||
import { constants, utils } from '@opentiny/tiny-engine-utils'
|
||||
import { useHistory, getMetaApi, useMessage } from '@opentiny/tiny-engine-meta-register'
|
||||
import type { canvasApi as CanvasApi } from '../../../container/src/container'
|
||||
import type { Node, RootNode } from '../../../types'
|
||||
import type {
|
||||
ChangePropsOperation,
|
||||
DeleteOperation,
|
||||
InsertOperation,
|
||||
NodeOperation,
|
||||
PageSchema,
|
||||
PageState,
|
||||
UpdateAttributesOperation
|
||||
} from './types'
|
||||
|
||||
const { COMPONENT_NAME } = constants
|
||||
const { deepClone } = utils
|
||||
|
||||
const defaultPageState = {
|
||||
const defaultPageState: PageState = {
|
||||
currentVm: null,
|
||||
currentSchema: null,
|
||||
currentType: null,
|
||||
currentPage: null,
|
||||
pageSchema: null,
|
||||
properties: null,
|
||||
dataSource: null,
|
||||
|
|
@ -34,7 +46,7 @@ const defaultPageState = {
|
|||
loading: false
|
||||
}
|
||||
|
||||
const defaultSchema = {
|
||||
const defaultSchema: PageSchema = {
|
||||
componentName: 'Page',
|
||||
fileName: '',
|
||||
css: '',
|
||||
|
|
@ -53,11 +65,11 @@ const defaultSchema = {
|
|||
outputs: []
|
||||
}
|
||||
|
||||
const canvasApi = ref({})
|
||||
const canvasApi = ref<Partial<typeof CanvasApi>>({})
|
||||
const isCanvasApiReady = ref(false)
|
||||
const nodesMap = ref(new Map())
|
||||
const nodesMap = ref(new Map<string | number, { node: any; parent: any }>())
|
||||
|
||||
const initCanvasApi = (newCanvasApi) => {
|
||||
const initCanvasApi = (newCanvasApi: typeof CanvasApi) => {
|
||||
canvasApi.value = newCanvasApi
|
||||
isCanvasApiReady.value = true
|
||||
}
|
||||
|
|
@ -72,7 +84,7 @@ const rootSchema = ref([
|
|||
}
|
||||
])
|
||||
|
||||
const handleTinyGridColumnsSlots = (node) => {
|
||||
const handleTinyGridColumnsSlots = (node: Node) => {
|
||||
const columns = Array.isArray(node.props?.columns) ? node.props.columns : []
|
||||
for (const columnItem of columns) {
|
||||
if (!columnItem?.slots) {
|
||||
|
|
@ -81,7 +93,7 @@ const handleTinyGridColumnsSlots = (node) => {
|
|||
|
||||
for (const slotItem of Object.values(columnItem.slots)) {
|
||||
if (Array.isArray(slotItem?.value)) {
|
||||
slotItem.value.forEach((item) => {
|
||||
slotItem.value.forEach((item: Node) => {
|
||||
if (!item.id) {
|
||||
item.id = utils.guid()
|
||||
}
|
||||
|
|
@ -98,13 +110,13 @@ const handleTinyGridColumnsSlots = (node) => {
|
|||
}
|
||||
}
|
||||
|
||||
const handleNodesInProps = (node) => {
|
||||
const handleNodesInProps = (node: Node) => {
|
||||
if (node.componentName === 'TinyGrid') {
|
||||
handleTinyGridColumnsSlots(node)
|
||||
}
|
||||
}
|
||||
|
||||
const generateNodesMap = (nodes, parent) => {
|
||||
const generateNodesMap = (nodes: Node[], parent: RootNode | Node) => {
|
||||
nodes.forEach((nodeItem) => {
|
||||
if (!nodeItem.id) {
|
||||
nodeItem.id = utils.guid()
|
||||
|
|
@ -124,7 +136,7 @@ const generateNodesMap = (nodes, parent) => {
|
|||
}
|
||||
|
||||
const jsonDiffPatchInstance = jsonDiffPatch.create({
|
||||
objectHash: function (obj, index) {
|
||||
objectHash: function (obj: { fileName?: string; id?: string }, index) {
|
||||
return obj.fileName || obj.id || `$$index:${index}`
|
||||
},
|
||||
arrays: {
|
||||
|
|
@ -135,8 +147,7 @@ const jsonDiffPatchInstance = jsonDiffPatch.create({
|
|||
diffMatchPatch: DiffMatchPatch,
|
||||
minLength: 60
|
||||
},
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
propertyFilter: function (name, context) {
|
||||
propertyFilter: function (name) {
|
||||
return name.slice(0, 1) !== '$'
|
||||
},
|
||||
cloneDiffValues: false
|
||||
|
|
@ -145,7 +156,7 @@ const jsonDiffPatchInstance = jsonDiffPatch.create({
|
|||
const { publish } = useMessage()
|
||||
|
||||
// 重置画布数据
|
||||
const resetCanvasState = async (state = {}) => {
|
||||
const resetCanvasState = async (state: Partial<PageState> = {}) => {
|
||||
const previousSchema = JSON.parse(JSON.stringify(pageState.pageSchema))
|
||||
|
||||
Object.assign(pageState, defaultPageState, state)
|
||||
|
|
@ -178,14 +189,14 @@ const resetCanvasState = async (state = {}) => {
|
|||
}
|
||||
|
||||
// 页面重置画布数据
|
||||
const resetPageCanvasState = (state = {}) => {
|
||||
const resetPageCanvasState = (state: Partial<PageState> = {}) => {
|
||||
state.isBlock = false
|
||||
resetCanvasState(state)
|
||||
useHistory().addHistory(state.pageSchema)
|
||||
}
|
||||
|
||||
// 区块重置画布数据
|
||||
const resetBlockCanvasState = async (state = {}) => {
|
||||
const resetBlockCanvasState = async (state: Partial<PageState> = {}) => {
|
||||
state.isBlock = true
|
||||
await resetCanvasState(state)
|
||||
}
|
||||
|
|
@ -225,7 +236,7 @@ const clearCanvas = () => {
|
|||
const isBlock = () => pageState.isBlock
|
||||
|
||||
// 初始化页面数据
|
||||
const initData = (schema = { ...defaultSchema }, currentPage) => {
|
||||
const initData = (schema: PageSchema = { ...defaultSchema }, currentPage: any) => {
|
||||
if (schema.componentName === COMPONENT_NAME.Block) {
|
||||
resetBlockCanvasState({
|
||||
pageSchema: toRaw(schema),
|
||||
|
|
@ -255,7 +266,7 @@ const getPageSchema = () => {
|
|||
return pageState.pageSchema || {}
|
||||
}
|
||||
|
||||
const setCurrentSchema = (schema) => {
|
||||
const setCurrentSchema = (schema: any) => {
|
||||
pageState.currentSchema = schema
|
||||
}
|
||||
|
||||
|
|
@ -269,15 +280,15 @@ const clearCurrentState = () => {
|
|||
}
|
||||
const getCurrentPage = () => pageState.currentPage
|
||||
|
||||
const getNodeById = (id) => {
|
||||
const getNodeById = (id: string) => {
|
||||
return nodesMap.value.get(id)?.node
|
||||
}
|
||||
|
||||
const getNodeWithParentById = (id) => {
|
||||
const getNodeWithParentById = (id: string) => {
|
||||
return nodesMap.value.get(id)
|
||||
}
|
||||
|
||||
const delNode = (id) => {
|
||||
const delNode = (id: string) => {
|
||||
nodesMap.value.delete(id)
|
||||
}
|
||||
|
||||
|
|
@ -285,18 +296,18 @@ const clearNodes = () => {
|
|||
nodesMap.value.clear()
|
||||
}
|
||||
|
||||
const setNode = (schema, parent) => {
|
||||
const setNode = (schema: Node, parent: Node | RootNode) => {
|
||||
schema.id = schema.id || utils.guid()
|
||||
|
||||
nodesMap.value.set(schema.id, { node: schema, parent })
|
||||
}
|
||||
|
||||
const getNode = (id, parent) => {
|
||||
const getNode = (id: string, parent?: boolean) => {
|
||||
return parent ? nodesMap.value.get(id) : nodesMap.value.get(id)?.node
|
||||
}
|
||||
|
||||
const operationTypeMap = {
|
||||
insert: (operation) => {
|
||||
insert: (operation: InsertOperation) => {
|
||||
const { parentId, newNodeData, position, referTargetNodeId } = operation
|
||||
const parentNode = getNode(parentId) || pageState.pageSchema
|
||||
// 1. 确认是否存在 ParentNode
|
||||
|
|
@ -359,7 +370,7 @@ const operationTypeMap = {
|
|||
previous: undefined
|
||||
}
|
||||
},
|
||||
delete: (operation) => {
|
||||
delete: (operation: DeleteOperation) => {
|
||||
const { id } = operation
|
||||
const targetNode = getNode(id, true)
|
||||
|
||||
|
|
@ -398,7 +409,7 @@ const operationTypeMap = {
|
|||
previous: node
|
||||
}
|
||||
},
|
||||
changeProps: (operation) => {
|
||||
changeProps: (operation: ChangePropsOperation) => {
|
||||
const { id, value, option: changeOption } = operation
|
||||
let { node } = getNode(id, true) || {}
|
||||
const previous = deepClone(node)
|
||||
|
|
@ -423,10 +434,10 @@ const operationTypeMap = {
|
|||
previous
|
||||
}
|
||||
},
|
||||
updateAttributes: (operation) => {
|
||||
updateAttributes: (operation: UpdateAttributesOperation) => {
|
||||
const { id, value, overwrite } = operation
|
||||
const { id: _id, children, ...restAttr } = value
|
||||
const node = getNode(id)
|
||||
const node: Node | RootNode = getNode(id)
|
||||
|
||||
// 其他属性直接浅 merge
|
||||
Object.assign(node, restAttr)
|
||||
|
|
@ -466,7 +477,7 @@ const operationTypeMap = {
|
|||
|
||||
const newChildrenSet = new Set(newChildren.map(({ id }) => id))
|
||||
// 被删除的项
|
||||
const deletedIds = originChildrenIds.filter((id) => !newChildrenSet.has(id))
|
||||
const deletedIds = originChildrenIds.filter((id: any) => !newChildrenSet.has(id))
|
||||
const deletedIdsSet = new Set(deletedIds)
|
||||
|
||||
for (const id of deletedIds) {
|
||||
|
|
@ -526,7 +537,7 @@ const lastUpdateType = ref('')
|
|||
* @param {*} operation
|
||||
* @returns
|
||||
*/
|
||||
const operateNode = async (operation) => {
|
||||
const operateNode = async (operation: NodeOperation) => {
|
||||
if (!operationTypeMap[operation.type]) {
|
||||
return
|
||||
}
|
||||
|
|
@ -546,11 +557,11 @@ const operateNode = async (operation) => {
|
|||
}
|
||||
|
||||
// 获取传入的 schema 与最新 schema 的 diff
|
||||
const getSchemaDiff = (schema) => {
|
||||
const getSchemaDiff = (schema: unknown) => {
|
||||
return jsonDiffPatchInstance.diff(schema, pageState.pageSchema)
|
||||
}
|
||||
|
||||
const patchLatestSchema = (schema) => {
|
||||
const patchLatestSchema = (schema: unknown) => {
|
||||
// 这里 pageSchema 需要 deepClone，不然 patch 的时候，会 patch 成同一个引用，造成画布无法更新
|
||||
const diff = jsonDiffPatchInstance.diff(schema, deepClone(pageState.pageSchema))
|
||||
|
||||
|
|
@ -559,7 +570,7 @@ const patchLatestSchema = (schema) => {
|
|||
}
|
||||
}
|
||||
|
||||
const importSchema = (data) => {
|
||||
const importSchema = (data: any) => {
|
||||
let importData = data
|
||||
|
||||
if (typeof data === 'string') {
|
||||
|
|
@ -585,7 +596,7 @@ const getSchema = () => {
|
|||
return pageState.pageSchema || {}
|
||||
}
|
||||
|
||||
const getNodePath = (id, nodes = []) => {
|
||||
const getNodePath = (id: string, nodes: { name: string; node: string }[] = []) => {
|
||||
const { parent, node } = getNodeWithParentById(id) || {}
|
||||
|
||||
if (node) {
|
||||
|
|
@ -601,7 +612,11 @@ const getNodePath = (id, nodes = []) => {
|
|||
return nodes
|
||||
}
|
||||
|
||||
const updateSchema = (data) => {
|
||||
const updateSchema = (data: Partial<PageSchema>) => {
|
||||
if (!pageState.pageSchema) {
|
||||
return
|
||||
}
|
||||
|
||||
Object.assign(pageState.pageSchema, data)
|
||||
|
||||
publish({ topic: 'schemaChange', data: {} })
|
||||
|
|
|
|||
|
|
@ -1,17 +1,30 @@
|
|||
import { ref } from 'vue'
|
||||
import { getDocument, getRect, querySelectById } from '../container'
|
||||
|
||||
export interface MultiSelectedState {
|
||||
id: string
|
||||
left: number
|
||||
height: number
|
||||
top: number
|
||||
width: number
|
||||
componentName: string
|
||||
doc: Document
|
||||
schema: any
|
||||
parent: any
|
||||
type?: string
|
||||
}
|
||||
|
||||
// 初始化多选节点
|
||||
const multiSelectedStates = ref([])
|
||||
const multiSelectedStates = ref<MultiSelectedState[]>([])
|
||||
|
||||
export const useMultiSelect = () => {
|
||||
/**
|
||||
* 添加state到多选列表
|
||||
* @param {*} selectState
|
||||
* @param {boolean} isMultiple 是否多选
|
||||
* @returns {boolean} 添加成功返回true，否则返回false
|
||||
* @param selectState
|
||||
* @param isMultiple 是否多选
|
||||
* @returns 添加成功返回true，否则返回false
|
||||
*/
|
||||
const toggleMultiSelection = (selectState, isMultiple = false) => {
|
||||
const toggleMultiSelection = (selectState: MultiSelectedState, isMultiple = false) => {
|
||||
if (!selectState || typeof selectState !== 'object') {
|
||||
return false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,18 @@ import { utils } from '@opentiny/tiny-engine-utils'
|
|||
import { isVsCodeEnv } from '@opentiny/tiny-engine-common/js/environments'
|
||||
import Builtin from '../../render/src/builtin/builtin.json' //TODO 画布内外应该分开
|
||||
import { useMultiSelect } from './composables/useMultiSelect'
|
||||
import type { Node, RootNode } from '../../types'
|
||||
|
||||
export interface DragOffset {
|
||||
offsetX: number
|
||||
offsetY: number
|
||||
horizontal: string
|
||||
vertical: string
|
||||
width: number
|
||||
height: number
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
|
||||
export const POSITION = Object.freeze({
|
||||
TOP: 'top',
|
||||
|
|
@ -38,31 +50,34 @@ export const POSITION = Object.freeze({
|
|||
const initialDragState = {
|
||||
keydown: false,
|
||||
draging: false,
|
||||
data: null,
|
||||
position: null, // ghost位置
|
||||
mouse: null, // iframe里鼠标位置
|
||||
element: null,
|
||||
offset: {}
|
||||
data: null as Node | null,
|
||||
position: null as { left: number; top: number } | null, // ghost位置
|
||||
mouse: {} as { x: number; y: number }, // iframe里鼠标位置
|
||||
element: null as Element | null,
|
||||
offset: {} as DragOffset,
|
||||
timer: 0
|
||||
}
|
||||
|
||||
export const canvasState = shallowReactive({
|
||||
type: 'normal',
|
||||
schema: null,
|
||||
renderer: null, // 存放画布内的api
|
||||
iframe: null,
|
||||
renderer: null as any, // 存放画布内的api
|
||||
iframe: {} as HTMLIFrameElement,
|
||||
loading: true,
|
||||
current: null,
|
||||
parent: null,
|
||||
loopId: null
|
||||
current: null as any,
|
||||
parent: null as any,
|
||||
loopId: null as string | null,
|
||||
controller: null as any,
|
||||
emit: null as any
|
||||
})
|
||||
|
||||
export const getRenderer = () => canvasState.renderer
|
||||
|
||||
export const getController = () => canvasState.controller
|
||||
|
||||
export const getDocument = () => canvasState.iframe.contentDocument
|
||||
export const getDocument = () => canvasState.iframe.contentDocument!
|
||||
|
||||
export const getWindow = () => canvasState.iframe.contentWindow
|
||||
export const getWindow = () => canvasState.iframe.contentWindow!
|
||||
|
||||
export const getCurrent = () => {
|
||||
return {
|
||||
|
|
@ -74,7 +89,7 @@ export const getCurrent = () => {
|
|||
|
||||
export const getDesignMode = () => getRenderer()?.getDesignMode()
|
||||
|
||||
export const setDesignMode = (mode) => getRenderer()?.setDesignMode(mode)
|
||||
export const setDesignMode = (mode: string) => getRenderer()?.setDesignMode(mode)
|
||||
|
||||
export const getSchema = () => useCanvas().getPageSchema()
|
||||
|
||||
|
|
@ -103,7 +118,8 @@ const initialLineState = {
|
|||
forbidden: false,
|
||||
id: '',
|
||||
config: null,
|
||||
doc: null
|
||||
doc: null,
|
||||
configure: null
|
||||
}
|
||||
|
||||
// 鼠标移入画布中元素时的状态
|
||||
|
|
@ -136,14 +152,14 @@ export const clearSelect = () => {
|
|||
}
|
||||
|
||||
const smoothScroll = {
|
||||
timmer: null,
|
||||
timmer: undefined as ReturnType<typeof setTimeout> | undefined,
|
||||
/**
|
||||
*
|
||||
* @param {*} up 方向
|
||||
* @param {*} step 每次滚动距离
|
||||
* @param {*} time 滚动延时（不得大于系统滚动时长，否则可能出现卡顿效果）
|
||||
* @param {boolean} up 方向
|
||||
* @param {number} step 每次滚动距离
|
||||
* @param {number} time 滚动延时（不得大于系统滚动时长，否则可能出现卡顿效果）
|
||||
*/
|
||||
start(up, step = 40, time = 100) {
|
||||
start(up: boolean, step = 40, time = 100) {
|
||||
const dom = getDocument().documentElement
|
||||
const fn = () => {
|
||||
const top = up ? dom.scrollTop + step : dom.scrollTop - step
|
||||
|
|
@ -158,14 +174,14 @@ const smoothScroll = {
|
|||
},
|
||||
stop() {
|
||||
clearTimeout(this.timmer)
|
||||
this.timmer = null
|
||||
this.timmer = undefined
|
||||
}
|
||||
}
|
||||
|
||||
export const dragStart = (
|
||||
data,
|
||||
element,
|
||||
{ offsetX = 0, offsetY = 0, horizontal, vertical, width, height, x, y } = {}
|
||||
data: Node,
|
||||
element: Element,
|
||||
{ offsetX = 0, offsetY = 0, horizontal, vertical, width, height, x, y } = {} as DragOffset
|
||||
) => {
|
||||
// 表示鼠标按下开始拖拽
|
||||
dragState.keydown = true
|
||||
|
|
@ -188,8 +204,8 @@ export const dragEnd = () => {
|
|||
const { element, data } = dragState
|
||||
|
||||
if (element && canvasState.type === 'absolute') {
|
||||
data.props = data.props || {}
|
||||
data.props.style = element.style.cssText
|
||||
data!.props = data!.props || {}
|
||||
data!.props.style = element.style.cssText
|
||||
|
||||
getController().addHistory()
|
||||
}
|
||||
|
|
@ -202,15 +218,19 @@ export const dragEnd = () => {
|
|||
smoothScroll.stop()
|
||||
}
|
||||
|
||||
export const getOffset = (element) => {
|
||||
export const getOffset = (element: Element) => {
|
||||
if (element.ownerDocument === document) {
|
||||
return { x: 0, y: 0 }
|
||||
return { x: 0, y: 0, bottom: 0, top: 0 }
|
||||
}
|
||||
const { x, y, bottom, top } = canvasState.iframe.getBoundingClientRect()
|
||||
return { x, y, bottom, top }
|
||||
}
|
||||
|
||||
export const getElement = (element) => {
|
||||
export const getElement = (element?: Element): Element | undefined => {
|
||||
if (!element || element.nodeType !== 1) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
// 如果当前元素是body
|
||||
if (element === element.ownerDocument.body) {
|
||||
return element
|
||||
|
|
@ -221,10 +241,6 @@ export const getElement = (element) => {
|
|||
return element.ownerDocument.body
|
||||
}
|
||||
|
||||
if (!element || element.nodeType !== 1) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
if (element.getAttribute(NODE_UID)) {
|
||||
return element
|
||||
} else if (element.parentElement) {
|
||||
|
|
@ -234,7 +250,7 @@ export const getElement = (element) => {
|
|||
return undefined
|
||||
}
|
||||
|
||||
export const getInactiveElement = (element) => {
|
||||
export const getInactiveElement = (element?: Element): Element | undefined => {
|
||||
if (
|
||||
!element ||
|
||||
element.nodeType !== 1 ||
|
||||
|
|
@ -256,7 +272,7 @@ export const getInactiveElement = (element) => {
|
|||
return undefined
|
||||
}
|
||||
|
||||
export const getRect = (element) => {
|
||||
export const getRect = (element: Element) => {
|
||||
if (element === getDocument().body) {
|
||||
const { innerWidth: width, innerHeight: height } = getWindow()
|
||||
return {
|
||||
|
|
@ -273,48 +289,54 @@ export const getRect = (element) => {
|
|||
return element.getBoundingClientRect()
|
||||
}
|
||||
|
||||
const insertAfter = ({ parent, node, data }) => {
|
||||
interface InsertOptions {
|
||||
parent: Node | RootNode
|
||||
node: Node | RootNode
|
||||
data: Node
|
||||
}
|
||||
|
||||
const insertAfter = ({ parent, node, data }: InsertOptions) => {
|
||||
if (!data.id) {
|
||||
data.id = utils.guid()
|
||||
}
|
||||
|
||||
useCanvas().operateNode({
|
||||
type: 'insert',
|
||||
parentId: parent.id,
|
||||
parentId: parent.id || '',
|
||||
newNodeData: data,
|
||||
position: 'after',
|
||||
referTargetNodeId: node.id
|
||||
})
|
||||
}
|
||||
|
||||
const insertBefore = ({ parent, node, data }) => {
|
||||
const insertBefore = ({ parent, node, data }: InsertOptions) => {
|
||||
if (!data.id) {
|
||||
data.id = utils.guid()
|
||||
}
|
||||
|
||||
useCanvas().operateNode({
|
||||
type: 'insert',
|
||||
parentId: parent.id,
|
||||
parentId: parent.id || '',
|
||||
newNodeData: data,
|
||||
position: 'before',
|
||||
referTargetNodeId: node.id
|
||||
})
|
||||
}
|
||||
|
||||
const insertInner = ({ node, data }, position) => {
|
||||
const insertInner = ({ node, data }: Omit<InsertOptions, 'parent'>, position: string = '') => {
|
||||
if (!data.id) {
|
||||
data.id = utils.guid()
|
||||
}
|
||||
|
||||
useCanvas().operateNode({
|
||||
type: 'insert',
|
||||
parentId: node.id,
|
||||
parentId: node.id || '',
|
||||
newNodeData: data,
|
||||
position: [POSITION.TOP, POSITION.LEFT].includes(position) ? 'before' : 'after'
|
||||
position: ([POSITION.TOP, POSITION.LEFT] as string[]).includes(position) ? 'before' : 'after'
|
||||
})
|
||||
}
|
||||
|
||||
export const removeNode = (id) => {
|
||||
export const removeNode = (id: string) => {
|
||||
useCanvas().operateNode({
|
||||
type: 'delete',
|
||||
id
|
||||
|
|
@ -322,21 +344,21 @@ export const removeNode = (id) => {
|
|||
}
|
||||
|
||||
// 添加外部容器
|
||||
const insertContainer = ({ parent, node, data }) => {
|
||||
const insertContainer = ({ parent, node, data }: InsertOptions) => {
|
||||
if (!data.id) {
|
||||
data.id = utils.guid()
|
||||
}
|
||||
|
||||
useCanvas().operateNode({
|
||||
type: 'insert',
|
||||
parentId: parent.id,
|
||||
parentId: parent.id || '',
|
||||
newNodeData: data,
|
||||
position: POSITION.OUT,
|
||||
referTargetNodeId: node.id
|
||||
})
|
||||
}
|
||||
|
||||
export const removeNodeById = (id) => {
|
||||
export const removeNodeById = (id: string) => {
|
||||
if (!id) {
|
||||
return
|
||||
}
|
||||
|
|
@ -347,9 +369,9 @@ export const removeNodeById = (id) => {
|
|||
canvasState.emit('remove')
|
||||
}
|
||||
|
||||
export const querySelectById = (id) => {
|
||||
export const querySelectById = (id: string) => {
|
||||
let selector = `[${NODE_UID}="${id}"]`
|
||||
const doc = canvasState.iframe.contentDocument
|
||||
const doc = getDocument()
|
||||
let element = doc.querySelector(selector)
|
||||
const loopId = element?.getAttribute('loop-id')
|
||||
if (element && loopId) {
|
||||
|
|
@ -364,12 +386,12 @@ export const getCurrentElement = () => querySelectById(getCurrent().schema?.id)
|
|||
// 滚动页面后，目标元素与页面边界至少保留的边距
|
||||
const SCROLL_MARGIN = 15
|
||||
|
||||
export const scrollToNode = (element) => {
|
||||
export const scrollToNode = (element?: Element | null) => {
|
||||
if (element) {
|
||||
const container = getDocument().documentElement
|
||||
const { clientWidth, clientHeight } = container
|
||||
const { left, right, top, bottom, width, height } = element.getBoundingClientRect()
|
||||
const option = {}
|
||||
const option: { left?: number; top?: number } = {}
|
||||
|
||||
if (right < 0) {
|
||||
option.left = container.scrollLeft + left - SCROLL_MARGIN
|
||||
|
|
@ -391,11 +413,15 @@ export const scrollToNode = (element) => {
|
|||
return nextTick()
|
||||
}
|
||||
|
||||
const setSelectRect = (id, element, options = {}) => {
|
||||
const setSelectRect = (
|
||||
id: string,
|
||||
element?: Element | null,
|
||||
options?: { type?: string; schema: any; isMultiple: boolean }
|
||||
) => {
|
||||
clearHover()
|
||||
|
||||
const { type, isMultiple = false } = options
|
||||
const schema = options.schema || (useCanvas().getNodeWithParentById(id) || {}).node
|
||||
const { type, isMultiple = false } = options || {}
|
||||
const schema = options?.schema || (useCanvas().getNodeWithParentById(id) || {}).node
|
||||
element = element || querySelectById(id) || getDocument().body
|
||||
|
||||
const { left, height, top, width } = getRect(element)
|
||||
|
|
@ -419,7 +445,7 @@ const setSelectRect = (id, element, options = {}) => {
|
|||
)
|
||||
}
|
||||
|
||||
export const updateRect = (id) => {
|
||||
export const updateRect = (id?: string) => {
|
||||
id = (typeof id === 'string' && id) || getCurrent().schema?.id
|
||||
clearHover()
|
||||
|
||||
|
|
@ -440,7 +466,7 @@ export const updateRect = (id) => {
|
|||
}
|
||||
}
|
||||
|
||||
export const getConfigure = (targetName) => {
|
||||
export const getConfigure = (targetName: string) => {
|
||||
const material = getController().getMaterial(targetName)
|
||||
|
||||
// 这里如果是区块插槽，则返回标识为容器的对象
|
||||
|
|
@ -459,7 +485,7 @@ export const getConfigure = (targetName) => {
|
|||
* @param {*} data 当前插入目标的schame数据
|
||||
* @returns
|
||||
*/
|
||||
export const allowInsert = (configure = hoverState.configure || {}, data = dragState.data || {}) => {
|
||||
export const allowInsert = (configure: any = hoverState.configure || {}, data: Node | null = dragState.data) => {
|
||||
const { nestingRule = {} } = configure
|
||||
const { childWhitelist = [], descendantBlacklist = [] } = nestingRule
|
||||
|
||||
|
|
@ -480,7 +506,7 @@ export const allowInsert = (configure = hoverState.configure || {}, data = dragS
|
|||
return flag
|
||||
}
|
||||
|
||||
const isAncestor = (ancestor, descendant) => {
|
||||
const isAncestor = (ancestor: string | Node, descendant: string | Node) => {
|
||||
const ancestorId = typeof ancestor === 'string' ? ancestor : ancestor.id
|
||||
let descendantId = typeof descendant === 'string' ? descendant : descendant.id
|
||||
|
||||
|
|
@ -497,9 +523,13 @@ const isAncestor = (ancestor, descendant) => {
|
|||
return false
|
||||
}
|
||||
|
||||
type Rect =
|
||||
| DOMRect
|
||||
| { left: number; top: number; right: number; bottom: number; width: number; height: number; x: number; y: number }
|
||||
|
||||
// 获取位置信息，返回状态
|
||||
const lineAbs = 20
|
||||
const getPosLine = (rect, configure) => {
|
||||
const getPosLine = (rect: Rect, configure: { isContainer: any }) => {
|
||||
const mousePos = dragState.mouse
|
||||
const yAbs = Math.min(lineAbs, rect.height / 3)
|
||||
const xAbs = Math.min(lineAbs, rect.width / 3)
|
||||
|
|
@ -532,14 +562,14 @@ const getPosLine = (rect, configure) => {
|
|||
return { type, forbidden }
|
||||
}
|
||||
|
||||
const isBodyEl = (element) => element.nodeName === 'BODY'
|
||||
const isBodyEl = (element: Element) => element.nodeName === 'BODY'
|
||||
|
||||
const setHoverRect = (element, data) => {
|
||||
const setHoverRect = (element?: Element, data?: Node | null) => {
|
||||
if (!element) {
|
||||
return clearHover()
|
||||
}
|
||||
const componentName = element.getAttribute(NODE_TAG)
|
||||
const id = element.getAttribute(NODE_UID)
|
||||
const componentName = element.getAttribute(NODE_TAG)!
|
||||
const id = element.getAttribute(NODE_UID)!
|
||||
const configure = getConfigure(componentName)
|
||||
const rect = getRect(element)
|
||||
const { left, height, top, width } = rect
|
||||
|
|
@ -561,7 +591,7 @@ const setHoverRect = (element, data) => {
|
|||
// 如果容器盒子有子节点，则以最后一个子节点为拖拽参照物
|
||||
const lastNode = children[children.length - 1]
|
||||
childEle = querySelectById(lastNode.id)
|
||||
const childComponentName = element.getAttribute(childEle)
|
||||
const childComponentName = childEle!.getAttribute(NODE_TAG)!
|
||||
const Childconfigure = getConfigure(childComponentName)
|
||||
lineState.id = lastNode.id
|
||||
lineState.configure = Childconfigure
|
||||
|
|
@ -572,7 +602,7 @@ const setHoverRect = (element, data) => {
|
|||
if (childEle) {
|
||||
const childRect = getRect(childEle)
|
||||
const { left, height, top, width } = childRect
|
||||
const posLine = getPosLine(childRect, lineState.configure)
|
||||
const posLine = getPosLine(childRect, lineState.configure!)
|
||||
Object.assign(lineState, {
|
||||
width,
|
||||
height,
|
||||
|
|
@ -627,13 +657,13 @@ const updateHoverRect = (id?: string) => {
|
|||
})
|
||||
}
|
||||
|
||||
const setInactiveHoverRect = (element) => {
|
||||
const setInactiveHoverRect = (element?: Element) => {
|
||||
if (!element) {
|
||||
Object.assign(inactiveHoverState, initialRectState, { slot: null })
|
||||
return
|
||||
}
|
||||
|
||||
const componentName = element.getAttribute(NODE_TAG)
|
||||
const componentName = element.getAttribute(NODE_TAG)!
|
||||
const id = element.getAttribute(NODE_INACTIVE_UID)
|
||||
const configure = getConfigure(componentName)
|
||||
const rect = getRect(element)
|
||||
|
|
@ -657,10 +687,10 @@ export const syncNodeScroll = () => {
|
|||
updateHoverRect()
|
||||
}
|
||||
|
||||
let moveUpdateTimer = null
|
||||
let moveUpdateTimer: ReturnType<typeof setTimeout> | undefined = undefined
|
||||
|
||||
// 绝对布局
|
||||
const absoluteMove = (event, element) => {
|
||||
const absoluteMove = (event: DragEvent, element: HTMLElement) => {
|
||||
const { clientX, clientY } = event
|
||||
const { offsetX, offsetY, horizontal, vertical, height, width, x, y } = dragState.offset
|
||||
|
||||
|
|
@ -693,7 +723,7 @@ const absoluteMove = (event, element) => {
|
|||
|
||||
clearTimeout(moveUpdateTimer)
|
||||
|
||||
const { data } = dragState
|
||||
const data = dragState.data!
|
||||
data.props = data.props || {}
|
||||
|
||||
// 防抖更新位置信息到 schema
|
||||
|
|
@ -706,7 +736,16 @@ const absoluteMove = (event, element) => {
|
|||
updateRect()
|
||||
}
|
||||
|
||||
const setDragPosition = ({ clientX, x, clientY, y, offsetBottom, offsetTop }) => {
|
||||
interface SetDragPositionOptions {
|
||||
clientX: number
|
||||
x: number
|
||||
clientY: number
|
||||
y: number
|
||||
offsetBottom: number
|
||||
offsetTop: number
|
||||
}
|
||||
|
||||
const setDragPosition = ({ clientX, x, clientY, y, offsetBottom, offsetTop }: SetDragPositionOptions) => {
|
||||
const left = clientX + x
|
||||
const top = clientY + y
|
||||
if (clientY < 20) {
|
||||
|
|
@ -720,12 +759,14 @@ const setDragPosition = ({ clientX, x, clientY, y, offsetBottom, offsetTop }) =>
|
|||
dragState.position = { left, top }
|
||||
}
|
||||
|
||||
export const dragMove = (event, isHover) => {
|
||||
export const dragMove = (event: DragEvent, isHover: boolean) => {
|
||||
if (!dragState.draging && dragState.keydown && new Date().getTime() - dragState.timer < 200) {
|
||||
return
|
||||
}
|
||||
|
||||
const { x, y, bottom: offsetBottom, top: offsetTop } = getOffset(event.target)
|
||||
const eventTarget = event.target as Element
|
||||
|
||||
const { x, y, bottom: offsetBottom, top: offsetTop } = getOffset(eventTarget)
|
||||
const { clientX, clientY } = event
|
||||
const { element } = dragState
|
||||
const absolute = canvasState.type === 'absolute'
|
||||
|
|
@ -737,24 +778,24 @@ export const dragMove = (event, isHover) => {
|
|||
// 如果仅仅是mouseover事件直接return,并重置拖拽位置状态，优化性能
|
||||
if (isHover) {
|
||||
lineState.position = ''
|
||||
setHoverRect(getElement(event.target), null)
|
||||
setInactiveHoverRect(getInactiveElement(event.target))
|
||||
setHoverRect(getElement(eventTarget), null)
|
||||
setInactiveHoverRect(getInactiveElement(eventTarget))
|
||||
return
|
||||
}
|
||||
|
||||
setHoverRect(getElement(event.target), dragState.data)
|
||||
setHoverRect(getElement(eventTarget), dragState.data)
|
||||
|
||||
if (dragState.draging) {
|
||||
// 绝对布局时走的逻辑
|
||||
if (element && absolute) {
|
||||
absoluteMove(event, element)
|
||||
absoluteMove(event, element as HTMLElement)
|
||||
}
|
||||
setDragPosition({ clientX, x, clientY, y, offsetBottom, offsetTop })
|
||||
}
|
||||
}
|
||||
|
||||
// type == clickTree, 为点击大纲; type == loop-id=xxx ,为点击循环数据
|
||||
export const selectNode = async (id, type, isMultiple = false) => {
|
||||
export const selectNode = async (id: string, type?: string, isMultiple = false) => {
|
||||
const { node } = useCanvas().getNodeWithParentById(id) || {}
|
||||
|
||||
let element = querySelectById(id)
|
||||
|
|
@ -798,16 +839,20 @@ export const selectNode = async (id, type, isMultiple = false) => {
|
|||
}
|
||||
}
|
||||
|
||||
export const hoverNode = (id, data) => {
|
||||
export const hoverNode = (id: string, data: Node) => {
|
||||
const element = querySelectById(id)
|
||||
if (element) {
|
||||
setHoverRect(element, data)
|
||||
}
|
||||
}
|
||||
|
||||
export const insertNode = (node, position = POSITION.IN, select = true) => {
|
||||
export const insertNode = (
|
||||
node: { node: Node; parent: Node; data: Node },
|
||||
position: string = POSITION.IN,
|
||||
select = true
|
||||
) => {
|
||||
if (!node.parent) {
|
||||
insertInner({ node: useCanvas().pageState.pageSchema, data: node.data }, position)
|
||||
insertInner({ node: useCanvas().pageState.pageSchema!, data: node.data }, position)
|
||||
} else {
|
||||
switch (position) {
|
||||
case POSITION.TOP:
|
||||
|
|
@ -837,33 +882,34 @@ export const insertNode = (node, position = POSITION.IN, select = true) => {
|
|||
getController().addHistory()
|
||||
}
|
||||
|
||||
export const addComponent = (data, position) => {
|
||||
export const addComponent = (data: Node, position: string) => {
|
||||
const { schema, parent } = getCurrent()
|
||||
|
||||
insertNode({ node: schema, parent, data }, position)
|
||||
}
|
||||
|
||||
export const copyNode = (id) => {
|
||||
export const copyNode = (id: string) => {
|
||||
if (!id) {
|
||||
return
|
||||
}
|
||||
|
||||
const { node, parent } = useCanvas().getNodeWithParentById(id)
|
||||
const { node, parent } = useCanvas().getNodeWithParentById(id)!
|
||||
|
||||
insertAfter({ parent, node, data: copyObject(node) })
|
||||
getController().addHistory()
|
||||
}
|
||||
|
||||
export const onMouseUp = () => {
|
||||
const { draging, data } = dragState
|
||||
const { draging } = dragState
|
||||
const { position, forbidden } = lineState
|
||||
const absolute = canvasState.type === 'absolute'
|
||||
const sourceId = data?.id
|
||||
const lineId = lineState.id
|
||||
const { getNodeWithParentById, getSchema } = useCanvas()
|
||||
|
||||
if (draging && !forbidden) {
|
||||
const { parent, node } = getNodeWithParentById(lineId) || {} // target
|
||||
const data = dragState.data!
|
||||
const sourceId = data.id
|
||||
|
||||
const insertData = toRaw(data)
|
||||
const targetNode = { parent, node, data: { ...insertData, children: insertData.children || [] } }
|
||||
|
|
@ -890,16 +936,16 @@ export const onMouseUp = () => {
|
|||
dragEnd()
|
||||
}
|
||||
|
||||
export const addStyle = (href) => appendStyle(href, getDocument())
|
||||
export const addStyle = (href: string) => appendStyle(href, getDocument())
|
||||
|
||||
export const addScript = (src) => appendScript(src, getDocument())
|
||||
export const addScript = (src: string) => appendScript(src, getDocument())
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} messages
|
||||
* @param {*} merge 是否合并，默认是重置所有数据
|
||||
*/
|
||||
export const setLocales = (messages, merge) => {
|
||||
export const setLocales = (messages: any, merge: any) => {
|
||||
const i18n = getRenderer().getI18n()
|
||||
|
||||
Object.keys(messages).forEach((lang) => {
|
||||
|
|
@ -908,11 +954,11 @@ export const setLocales = (messages, merge) => {
|
|||
})
|
||||
}
|
||||
|
||||
export const setConfigure = (configure) => {
|
||||
export const setConfigure = (configure: any) => {
|
||||
getRenderer().setConfigure(configure)
|
||||
}
|
||||
|
||||
export const setI18n = (data) => {
|
||||
export const setI18n = (data: any) => {
|
||||
const messages = data || useTranslate().getData()
|
||||
const i18n = getRenderer().getI18n()
|
||||
Object.keys(messages).forEach((lang) => {
|
||||
|
|
@ -920,7 +966,7 @@ export const setI18n = (data) => {
|
|||
})
|
||||
}
|
||||
|
||||
export const setCanvasType = (type) => {
|
||||
export const setCanvasType = (type: string) => {
|
||||
canvasState.type = type || 'normal'
|
||||
getDocument().body.className = type === 'absolute' ? 'canvas-grid-bg' : ''
|
||||
}
|
||||
|
|
@ -932,7 +978,7 @@ export const getCanvasType = () => canvasState.type
|
|||
* @param {string} name 事件名称
|
||||
* @param {any} data 派发的数据
|
||||
*/
|
||||
export const canvasDispatch = (name, data, doc = getDocument()) => {
|
||||
export const canvasDispatch = (name: string, data: any, doc = getDocument()) => {
|
||||
if (!doc) return
|
||||
|
||||
doc.dispatchEvent(new CustomEvent(name, data))
|
||||
|
|
@ -964,15 +1010,15 @@ export const canvasApi = {
|
|||
getConfigure,
|
||||
allowInsert,
|
||||
Builtin,
|
||||
removeBlockCompsCache: (...args) => {
|
||||
removeBlockCompsCache: (...args: any[]) => {
|
||||
return canvasState.renderer.removeBlockCompsCache(...args)
|
||||
},
|
||||
updateCanvas: (...args) => {
|
||||
updateCanvas: (...args: any[]) => {
|
||||
return canvasState.renderer.updateCanvas(...args)
|
||||
}
|
||||
}
|
||||
|
||||
export const initCanvas = ({ renderer, iframe, emit, controller }) => {
|
||||
export const initCanvas = ({ renderer, iframe, emit, controller }: any) => {
|
||||
canvasState.iframe = iframe
|
||||
canvasState.emit = emit
|
||||
// 存放画布外层传进来的插件api
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@opentiny/tiny-engine-vite-plugin-meta-comments": "workspace:*",
|
||||
"@types/diff-match-patch": "^1.0.36",
|
||||
"@vitejs/plugin-vue": "^5.1.2",
|
||||
"@vitejs/plugin-vue-jsx": "^4.0.1",
|
||||
"rollup-plugin-polyfill-node": "^0.13.0",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,6 @@ let designMode = DESIGN_MODE.DESIGN
|
|||
|
||||
export const getDesignMode = () => designMode
|
||||
|
||||
export const setDesignMode = (mode) => {
|
||||
export const setDesignMode = (mode: string) => {
|
||||
designMode = mode
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
export interface Node {
|
||||
id: string
|
||||
componentName: string
|
||||
props: Record<string, any> & { columns?: { slots?: Record<string, any> }[] }
|
||||
children?: Node[]
|
||||
}
|
||||
|
||||
export type RootNode = Omit<Node, 'id'> & {
|
||||
id?: string
|
||||
css?: string
|
||||
fileName: string
|
||||
methods?: Record<string, any>
|
||||
state?: Record<string, any>
|
||||
lifeCycles?: Record<string, any>
|
||||
dataSource?: any
|
||||
bridge?: any
|
||||
inputs?: any[]
|
||||
outputs?: any[]
|
||||
}
|
||||
|
|
@ -7,7 +7,15 @@ const durationMap = {
|
|||
error: 10000
|
||||
}
|
||||
|
||||
const useNotify = (config) => {
|
||||
export interface NotifyOptions {
|
||||
[key: string]: any
|
||||
customClass: string
|
||||
title: string
|
||||
type: keyof typeof durationMap
|
||||
position: string
|
||||
}
|
||||
|
||||
const useNotify = (config: NotifyOptions) => {
|
||||
const { customClass, title, type = 'info', position = 'top-right', ...otherConfig } = config
|
||||
|
||||
Notify({
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
*
|
||||
*/
|
||||
|
||||
import type { App } from 'vue'
|
||||
import ConfigGroup from './ConfigGroup.vue'
|
||||
import ConfigItem from './ConfigItem.vue'
|
||||
export { default as PluginSetting } from './PluginSetting.vue'
|
||||
|
|
@ -54,12 +55,12 @@ export { default as Pane } from './Pane.vue'
|
|||
export { default as I18nInput } from './I18nInput.vue'
|
||||
export { default as CanvasDragItem } from './CanvasDragItem.vue'
|
||||
export { default as ToolbarBase } from './ToolbarBase.vue'
|
||||
export { default as Modal } from './Modal.jsx'
|
||||
export { default as Notify } from './Notify.jsx'
|
||||
export { default as Modal } from './Modal'
|
||||
export { default as Notify } from './Notify'
|
||||
export { ConfigGroup, ConfigItem }
|
||||
|
||||
export const injectGlobalComponents = {
|
||||
install: (app) => {
|
||||
install: (app: App<Element>) => {
|
||||
const globalComponents = {
|
||||
ConfigGroup,
|
||||
ConfigItem
|
||||
|
|
@ -25,7 +25,9 @@ const helpState = {
|
|||
}
|
||||
}
|
||||
|
||||
const getDocsUrl = (plugin) => {
|
||||
type PluginName = keyof typeof helpState['docsUrl']
|
||||
|
||||
const getDocsUrl = (plugin: PluginName) => {
|
||||
return `${getBaseUrl()}${helpState.docsUrl[plugin]}`
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export const metaHashMap: Record<string, any> = {}
|
|||
export const apisMap: Record<string, any> = {}
|
||||
export const optionsMap: Record<string, any> = {}
|
||||
|
||||
export const getMetaApi = (id: string, key: string) => {
|
||||
export const getMetaApi = (id: string, key?: string) => {
|
||||
if (!apisMap[id]) {
|
||||
return
|
||||
}
|
||||
|
|
@ -144,14 +144,14 @@ const handleRegistryProp = (id: string, value: any) => {
|
|||
|
||||
export const preprocessRegistry = (registry: Array<any> | { [s: string]: any }) => {
|
||||
// 元应用支持使用长度为2的数组来配置，第一个参数为元应用，第二个参数是额外的自定义配置。此函数判断数组是否属于这种配置格式
|
||||
const isArrayFormat = (arr) => Array.isArray(arr) && arr.length === 2 && arr[0].id
|
||||
const isArrayFormat = (arr: any) => Array.isArray(arr) && arr.length === 2 && arr[0].id
|
||||
|
||||
Object.values(registry)
|
||||
.filter((metaApps) => Array.isArray(metaApps))
|
||||
.forEach((metaApps) => {
|
||||
// normal: { plugins: [ Page, Block, ... ] }
|
||||
// array format: { plugins: [ [ Page, { options: extraOptions } ], Block, ... ] }
|
||||
metaApps.forEach((metaApp, index) => {
|
||||
metaApps.forEach((metaApp: any, index: number) => {
|
||||
if (isArrayFormat(metaApp)) {
|
||||
metaApps.splice(index, 1, { ...metaApp[0], ...metaApp[1] })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,23 @@
|
|||
import type {
|
||||
NotifyParams,
|
||||
NotifyResult,
|
||||
UseBlockApi,
|
||||
UseBreadcrumbApi,
|
||||
UseCanvasApi,
|
||||
UseDataSourceApi,
|
||||
UseHelpApi,
|
||||
UseHistoryApi,
|
||||
UseLayoutApi,
|
||||
UseMaterialApi,
|
||||
UseModalApi,
|
||||
UsePageApi,
|
||||
UsePropertiesApi,
|
||||
UsePropertyApi,
|
||||
UseResourceApi,
|
||||
UseSaveLocalApi,
|
||||
UseTranslateApi
|
||||
} from './types'
|
||||
|
||||
export const HOOK_NAME = {
|
||||
useLayout: 'layout',
|
||||
useCanvas: 'canvas',
|
||||
|
|
@ -18,7 +38,9 @@ export const HOOK_NAME = {
|
|||
useNotify: 'notify',
|
||||
useCustom: 'custom',
|
||||
useMaterial: 'material'
|
||||
}
|
||||
} as const
|
||||
|
||||
type HookName = typeof HOOK_NAME[keyof typeof HOOK_NAME]
|
||||
|
||||
const hooksState = {
|
||||
[HOOK_NAME.useLayout]: {},
|
||||
|
|
@ -42,35 +64,35 @@ const hooksState = {
|
|||
[HOOK_NAME.useCustom]: {} // 自定义
|
||||
}
|
||||
|
||||
const getHook = (hookName: string, args: any[]) => {
|
||||
const getHook = (hookName: HookName, args: any[]) => {
|
||||
if (typeof hooksState[hookName] === 'function') {
|
||||
return hooksState[hookName](...args)
|
||||
}
|
||||
return hooksState[hookName]
|
||||
}
|
||||
|
||||
export const useLayout = (...args: any[]) => getHook(HOOK_NAME.useLayout, args)
|
||||
export const useCanvas = (...args: any[]) => getHook(HOOK_NAME.useCanvas, args)
|
||||
export const useResource = (...args: any[]) => getHook(HOOK_NAME.useResource, args)
|
||||
export const useHistory = (...args: any[]) => getHook(HOOK_NAME.useHistory, args)
|
||||
export const useProperties = (...args: any[]) => getHook(HOOK_NAME.useProperties, args)
|
||||
export const useSaveLocal = (...args: any[]) => getHook(HOOK_NAME.useSaveLocal, args)
|
||||
export const useBlock = (...args: any[]) => getHook(HOOK_NAME.useBlock, args)
|
||||
export const useTranslate = (...args: any[]) => getHook(HOOK_NAME.useTranslate, args)
|
||||
export const usePage = (...args: any[]) => getHook(HOOK_NAME.usePage, args)
|
||||
export const useDataSource = (...args: any[]) => getHook(HOOK_NAME.useDataSource, args)
|
||||
export const useBreadcrumb = (...args: any[]) => getHook(HOOK_NAME.useBreadcrumb, args)
|
||||
export const useProperty = (...args: any[]) => getHook(HOOK_NAME.useProperty, args)
|
||||
export const useHelp = (...args: any[]) => getHook(HOOK_NAME.useHelp, args)
|
||||
export const useLayout = (...args: any[]): UseLayoutApi => getHook(HOOK_NAME.useLayout, args)
|
||||
export const useCanvas = (...args: any[]): UseCanvasApi => getHook(HOOK_NAME.useCanvas, args)
|
||||
export const useResource = (...args: any[]): UseResourceApi => getHook(HOOK_NAME.useResource, args)
|
||||
export const useHistory = (...args: any[]): UseHistoryApi => getHook(HOOK_NAME.useHistory, args)
|
||||
export const useProperties = (...args: any[]): UsePropertiesApi => getHook(HOOK_NAME.useProperties, args)
|
||||
export const useSaveLocal = (...args: any[]): UseSaveLocalApi => getHook(HOOK_NAME.useSaveLocal, args)
|
||||
export const useBlock = (...args: any[]): UseBlockApi => getHook(HOOK_NAME.useBlock, args)
|
||||
export const useTranslate = (...args: any[]): UseTranslateApi => getHook(HOOK_NAME.useTranslate, args)
|
||||
export const usePage = (...args: any[]): UsePageApi => getHook(HOOK_NAME.usePage, args)
|
||||
export const useDataSource = (...args: any[]): UseDataSourceApi => getHook(HOOK_NAME.useDataSource, args)
|
||||
export const useBreadcrumb = (...args: any[]): UseBreadcrumbApi => getHook(HOOK_NAME.useBreadcrumb, args)
|
||||
export const useProperty = (...args: any[]): UsePropertyApi => getHook(HOOK_NAME.useProperty, args)
|
||||
export const useHelp = (...args: any[]): UseHelpApi => getHook(HOOK_NAME.useHelp, args)
|
||||
export const useHttp = (...args: any[]) => getHook(HOOK_NAME.useHttp, args)
|
||||
export const useEnv = (...args: any[]) => getHook(HOOK_NAME.useEnv, args)
|
||||
export const useModal = (...args: any[]) => getHook(HOOK_NAME.useModal, args)
|
||||
export const useNotify = (...args: any[]) => getHook(HOOK_NAME.useNotify, args)
|
||||
export const useMaterial = (...args: any[]) => getHook(HOOK_NAME.useMaterial, args)
|
||||
export const useEnv = (...args: any[]): ImportMetaEnv => getHook(HOOK_NAME.useEnv, args)
|
||||
export const useModal = (...args: any[]): UseModalApi => getHook(HOOK_NAME.useModal, args)
|
||||
export const useNotify = (...args: NotifyParams): NotifyResult => getHook(HOOK_NAME.useNotify, args)
|
||||
export const useMaterial = (...args: any[]): UseMaterialApi => getHook(HOOK_NAME.useMaterial, args)
|
||||
export const useCustom = (...args: any[]) => getHook(HOOK_NAME.useCustom, args)
|
||||
|
||||
export function initHook(
|
||||
hookName: string,
|
||||
hookName: HookName,
|
||||
hookContent: any,
|
||||
{ useDefaultExport } = {} as { useDefaultExport?: boolean }
|
||||
) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
import type { default as useCanvasApi } from '@opentiny/tiny-engine-canvas/DesignCanvas/src/api'
|
||||
import type { LayoutService } from '@opentiny/tiny-engine-layout'
|
||||
import type { BlockService } from '@opentiny/tiny-engine-plugin-block'
|
||||
import type { DataSourceService } from '@opentiny/tiny-engine-plugin-datasource'
|
||||
import type { HelpService } from '@opentiny/tiny-engine-plugin-help'
|
||||
import type { TranslateService } from '@opentiny/tiny-engine-plugin-i18n'
|
||||
import type { MaterialService, ResourceService } from '@opentiny/tiny-engine-plugin-materials'
|
||||
import type { PageService } from '@opentiny/tiny-engine-plugin-page'
|
||||
import type { PropertiesService, PropertyService } from '@opentiny/tiny-engine-setting-props'
|
||||
import type { BreadcrumbService } from '@opentiny/tiny-engine-toolbar-breadcrumb'
|
||||
import type { SaveLocalService } from '@opentiny/tiny-engine-toolbar-generate-code'
|
||||
import type { HistoryService } from '@opentiny/tiny-engine-toolbar-redoundo'
|
||||
import type { Modal, Notify } from '@opentiny/tiny-engine-common'
|
||||
|
||||
export type UseCanvasApi = ReturnType<typeof useCanvasApi>
|
||||
export type UseLayoutApi = typeof LayoutService['apis']
|
||||
|
||||
// plugin
|
||||
export type UseBlockApi = typeof BlockService['apis']
|
||||
export type UseDataSourceApi = typeof DataSourceService['apis']
|
||||
export type UseHelpApi = typeof HelpService['apis']
|
||||
export type UseTranslateApi = typeof TranslateService['apis']
|
||||
export type UseMaterialApi = typeof MaterialService['apis']
|
||||
export type UseResourceApi = typeof ResourceService['apis']
|
||||
export type UsePageApi = typeof PageService['apis']
|
||||
|
||||
// setting
|
||||
export type UsePropertiesApi = typeof PropertiesService['apis']
|
||||
export type UsePropertyApi = typeof PropertyService['apis']
|
||||
|
||||
// toolbar
|
||||
export type UseBreadcrumbApi = typeof BreadcrumbService['apis']
|
||||
export type UseSaveLocalApi = typeof SaveLocalService['apis']
|
||||
export type UseHistoryApi = typeof HistoryService['apis']
|
||||
|
||||
export type UseModalApi = typeof Modal
|
||||
export type NotifyParams = Parameters<typeof Notify>
|
||||
export type NotifyResult = ReturnType<typeof Notify>
|
||||
|
|
@ -16,65 +16,44 @@
|
|||
"paths": {
|
||||
"@/*": ["packages/*"],
|
||||
"@opentiny/tiny-engine": ["packages/design-core/index.js"],
|
||||
"@opentiny/tiny-engine-meta-register": ["packages/register/src/index.js"],
|
||||
"@opentiny/tiny-engine-canvas": ["packages/canvas/src/index"],
|
||||
"@opentiny/tiny-engine-plugin-materials": ["packages/plugins/materials/index"],
|
||||
"@opentiny/tiny-engine-plugin-state": ["packages/plugins/state/index"],
|
||||
"@opentiny/tiny-engine-plugin-script": ["packages/plugins/script/index"],
|
||||
"@opentiny/tiny-engine-plugin-tree": ["packages/plugins/tree/index"],
|
||||
"@opentiny/tiny-engine-plugin-help": ["packages/plugins/help/index"],
|
||||
"@opentiny/tiny-engine-plugin-schema": ["packages/plugins/schema/index"],
|
||||
"@opentiny/tiny-engine-plugin-page": ["packages/plugins/page/index"],
|
||||
"@opentiny/tiny-engine-plugin-i18n": ["packages/plugins/i18n/index"],
|
||||
"@opentiny/tiny-engine-canvas": ["packages/canvas/index"],
|
||||
"@opentiny/tiny-engine-canvas/*": ["packages/canvas/*"],
|
||||
"@opentiny/tiny-engine-common": ["packages/common/index"],
|
||||
"@opentiny/tiny-engine-common/*": ["packages/common/*"],
|
||||
"@opentiny/tiny-engine-i18n-host": ["packages/i18n/src/lib"],
|
||||
"@opentiny/tiny-engine-layout": ["packages/layout/index"],
|
||||
"@opentiny/tiny-engine-meta-register": ["packages/register/src/index"],
|
||||
"@opentiny/tiny-engine-plugin-block": ["packages/plugins/block/index"],
|
||||
"@opentiny/tiny-engine-plugin-bridge": ["packages/plugins/bridge/index"],
|
||||
"@opentiny/tiny-engine-plugin-datasource": ["packages/plugins/datasource/index"],
|
||||
"@opentiny/tiny-engine-plugin-help": ["packages/plugins/help/index"],
|
||||
"@opentiny/tiny-engine-plugin-i18n": ["packages/plugins/i18n/index"],
|
||||
"@opentiny/tiny-engine-plugin-materials": ["packages/plugins/materials/index"],
|
||||
"@opentiny/tiny-engine-plugin-page": ["packages/plugins/page/index"],
|
||||
"@opentiny/tiny-engine-plugin-schema": ["packages/plugins/schema/index"],
|
||||
"@opentiny/tiny-engine-plugin-script": ["packages/plugins/script/index"],
|
||||
"@opentiny/tiny-engine-plugin-state": ["packages/plugins/state/index"],
|
||||
"@opentiny/tiny-engine-plugin-tree": ["packages/plugins/tree/index"],
|
||||
"@opentiny/tiny-engine-setting-events": ["packages/settings/events/index"],
|
||||
"@opentiny/tiny-engine-setting-props": ["packages/settings/props/index"],
|
||||
"@opentiny/tiny-engine-common": ["packages/common/index"],
|
||||
"@opentiny/tiny-engine-setting-styles": ["packages/settings/styles/index"],
|
||||
"@opentiny/tiny-engine-svgs": ["packages/svgs/index"],
|
||||
"@opentiny/tiny-engine-toolbar-breadcrumb": ["packages/toolbars/breadcrumb/index"],
|
||||
"@opentiny/tiny-engine-toolbar-clean": ["packages/toolbars/clean/index"],
|
||||
"@opentiny/tiny-engine-toolbar-fullscreen": ["packages/toolbars/fullscreen/index"],
|
||||
"@opentiny/tiny-engine-toolbar-generate-code": ["packages/toolbars/generate-code/index"],
|
||||
"@opentiny/tiny-engine-toolbar-lang": ["packages/toolbars/lang/index"],
|
||||
"@opentiny/tiny-engine-toolbar-view-setting": ["packages/toolbars/view-setting/index"],
|
||||
"@opentiny/tiny-engine-toolbar-layout": ["packages/toolbars/layout/index"],
|
||||
"@opentiny/tiny-engine-toolbar-lock": ["packages/toolbars/lock/index"],
|
||||
"@opentiny/tiny-engine-toolbar-logo": ["packages/toolbars/logo/index"],
|
||||
"@opentiny/tiny-engine-toolbar-media": ["packages/toolbars/media/index"],
|
||||
"@opentiny/tiny-engine-toolbar-preview": ["packages/toolbars/preview/index"],
|
||||
"@opentiny/tiny-engine-toolbar-generate-code": ["packages/toolbars/generate-code/index"],
|
||||
"@opentiny/tiny-engine-toolbar-clean": ["packages/toolbars/clean/index"],
|
||||
"@opentiny/tiny-engine-toolbar-theme-switch": ["packages/toolbars/themeSwitch/index"],
|
||||
"@opentiny/tiny-engine-toolbar-redoundo": ["packages/toolbars/redoundo/index"],
|
||||
"@opentiny/tiny-engine-toolbar-save": ["packages/toolbars/save/index"],
|
||||
"tiny-engine-canvas": ["packages/canvas/index"],
|
||||
"@opentiny/tiny-engine-svgs": ["packages/svgs/index"],
|
||||
"@opentiny/tiny-engine-plugin-materials/*": ["packages/plugins/materials/*"],
|
||||
"@opentiny/tiny-engine-plugin-state/*": ["packages/plugins/state/*"],
|
||||
"@opentiny/tiny-engine-plugin-script/*": ["packages/plugins/script/*"],
|
||||
"@opentiny/tiny-engine-plugin-tree/*": ["packages/plugins/tree/*"],
|
||||
"@opentiny/tiny-engine-plugin-help/*": ["packages/plugins/help/*"],
|
||||
"@opentiny/tiny-engine-plugin-schema/*": ["packages/plugins/schema/*"],
|
||||
"@opentiny/tiny-engine-plugin-page/*": ["packages/plugins/page/*"],
|
||||
"@opentiny/tiny-engine-plugin-i18n/*": ["packages/plugins/i18n/*"],
|
||||
"@opentiny/tiny-engine-plugin-bridge/*": ["packages/plugins/bridge/*"],
|
||||
"@opentiny/tiny-engine-setting-events/*": ["packages/settings/events/*"],
|
||||
"@opentiny/tiny-engine-setting-props/*": ["packages/settings/props/*"],
|
||||
"@opentiny/tiny-engine-common/*": ["packages/common/*"],
|
||||
"@opentiny/tiny-engine-setting-styles/*": ["packages/settings/styles/*"],
|
||||
"@opentiny/tiny-engine-toolbar-breadcrumb/*": ["packages/toolbars/breadcrumb/*"],
|
||||
"@opentiny/tiny-engine-toolbar-fullscreen/*": ["packages/toolbars/fullscreen/*"],
|
||||
"@opentiny/tiny-engine-toolbar-lang/*": ["packages/toolbars/lang/*"],
|
||||
"@opentiny/tiny-engine-toolbar-view-setting/*": ["packages/toolbars/view-setting/*"],
|
||||
"@opentiny/tiny-engine-toolbar-layout/*": ["packages/toolbars/layout/*"],
|
||||
"@opentiny/tiny-engine-toolbar-lock/*": ["packages/toolbars/lock/*"],
|
||||
"@opentiny/tiny-engine-toolbar-logo/*": ["packages/toolbars/logo/*"],
|
||||
"@opentiny/tiny-engine-toolbar-media/*": ["packages/toolbars/media/*"],
|
||||
"@opentiny/tiny-engine-toolbar-preview/*": ["packages/toolbars/preview/*"],
|
||||
"@opentiny/tiny-engine-toolbar-clean/*": ["packages/toolbars/clean/*"],
|
||||
"@opentiny/tiny-engine-toolbar-theme-switch/*": ["packages/toolbars/themeSwitch/*"],
|
||||
"@opentiny/tiny-engine-toolbar-save/*": ["packages/toolbars/save/*"],
|
||||
"@opentiny/tiny-engine-svgs/*": ["packages/svgs/*"],
|
||||
"@opentiny/tiny-engine-utils": ["packages/utils/src/index.ts"],
|
||||
"@opentiny/tiny-engine-webcomponent-core": ["packages/webcomponent/src/lib"],
|
||||
"@opentiny/tiny-engine-i18n-host": ["packages/i18n/src/lib"]
|
||||
"@opentiny/tiny-engine-toolbar-theme-switch": ["packages/toolbars/themeSwitch/index"],
|
||||
"@opentiny/tiny-engine-toolbar-view-setting": ["packages/toolbars/view-setting/index"],
|
||||
"@opentiny/tiny-engine-utils": ["packages/utils/src/index"],
|
||||
"@opentiny/tiny-engine-webcomponent-core": ["packages/webcomponent/src/lib"]
|
||||
}
|
||||
},
|
||||
"include": ["packages/**/*"],
|
||||
|
|
|
|||
Loading…
Reference in New Issue