forked from opentiny/tiny-engine
feat(canvasApi): use canvasApi to access canvas methods (#425)
* feat(canvasApi): use canvasApi to access canvas methods * fix(canvas): optimize import order * fix(canvasApi): change by review comment tips
This commit is contained in:
parent
c271054870
commit
30cfeb19df
|
@ -55,7 +55,8 @@ import {
|
|||
initCanvas,
|
||||
clearLineState,
|
||||
querySelectById,
|
||||
getCurrent
|
||||
getCurrent,
|
||||
canvasApi
|
||||
} from './container'
|
||||
|
||||
export default {
|
||||
|
@ -105,6 +106,8 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
useCanvas().initCanvasApi(canvasApi)
|
||||
|
||||
const beforeCanvasReady = () => {
|
||||
if (iframe.value) {
|
||||
const win = iframe.value.contentWindow
|
||||
|
@ -119,7 +122,6 @@ export default {
|
|||
iframeMonitoring()
|
||||
|
||||
initCanvas({ emit, renderer: detail, iframe: iframe.value, controller: props.controller })
|
||||
useCanvas().renderer.value = { ...detail, ...window.canvasApi }
|
||||
|
||||
const doc = iframe.value.contentDocument
|
||||
const win = iframe.value.contentWindow
|
||||
|
|
|
@ -20,6 +20,9 @@ import {
|
|||
NODE_LOOP
|
||||
} from '../common'
|
||||
import { useCanvas, useLayout, useResource, useTranslate } from '@opentiny/tiny-engine-controller'
|
||||
import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
|
||||
import Builtin from '../builtin/builtin.json'
|
||||
|
||||
export const POSITION = Object.freeze({
|
||||
TOP: 'top',
|
||||
BOTTOM: 'bottom',
|
||||
|
@ -27,7 +30,6 @@ export const POSITION = Object.freeze({
|
|||
RIGHT: 'right',
|
||||
IN: 'in'
|
||||
})
|
||||
import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
|
||||
|
||||
const initialDragState = {
|
||||
keydown: false,
|
||||
|
@ -853,6 +855,49 @@ export const canvasDispatch = (name, data, doc = getDocument()) => {
|
|||
doc.dispatchEvent(new CustomEvent(name, data))
|
||||
}
|
||||
|
||||
export const canvasApi = {
|
||||
dragStart,
|
||||
updateRect,
|
||||
getContext,
|
||||
getNodePath,
|
||||
dragMove,
|
||||
setLocales,
|
||||
setState,
|
||||
deleteState,
|
||||
getRenderer,
|
||||
clearSelect,
|
||||
selectNode,
|
||||
hoverNode,
|
||||
insertNode,
|
||||
removeNode,
|
||||
addComponent,
|
||||
setPageCss,
|
||||
addScript,
|
||||
addStyle,
|
||||
getNode,
|
||||
getCurrent,
|
||||
setSchema,
|
||||
setUtils,
|
||||
updateUtils,
|
||||
deleteUtils,
|
||||
getSchema,
|
||||
setI18n,
|
||||
getCanvasType,
|
||||
setCanvasType,
|
||||
setProps,
|
||||
setGlobalState,
|
||||
getGlobalState,
|
||||
getDocument,
|
||||
canvasDispatch,
|
||||
Builtin,
|
||||
setDataSourceMap: (...args) => {
|
||||
return canvasState.renderer.setDataSourceMap(...args)
|
||||
},
|
||||
getDataSourceMap: (...args) => {
|
||||
return canvasState.renderer.getDataSourceMap(...args)
|
||||
}
|
||||
}
|
||||
|
||||
export const initCanvas = ({ renderer, iframe, emit, controller }) => {
|
||||
const currentSchema = getSchema()
|
||||
|
||||
|
|
|
@ -18,8 +18,6 @@ import { generateFunction } from '@opentiny/tiny-engine-controller/utils'
|
|||
import renderer, { parseData, setConfigure, setController, globalNotify, isStateAccessor } from './render'
|
||||
import { getNode as getNodeById, clearNodes, getRoot, setContext, getContext, setCondition, context } from './context'
|
||||
import CanvasEmpty from './CanvasEmpty.vue'
|
||||
import { getCurrent, setLocales, updateRect, addStyle, addScript, canvasDispatch } from '../container/container'
|
||||
import Builtin from '../builtin/builtin.json'
|
||||
|
||||
const { BROADCAST_CHANNEL } = constants
|
||||
|
||||
|
@ -426,17 +424,3 @@ export const api = {
|
|||
setDataSourceMap,
|
||||
setGlobalState
|
||||
}
|
||||
|
||||
const canvasApi = {
|
||||
getCurrent,
|
||||
setLocales,
|
||||
getNodeById: getNode,
|
||||
updateRect,
|
||||
addStyle,
|
||||
addScript,
|
||||
canvasDispatch
|
||||
}
|
||||
|
||||
window.api = api
|
||||
window.canvasApi = canvasApi
|
||||
window.Builtin = Builtin
|
||||
|
|
|
@ -10,93 +10,7 @@
|
|||
*
|
||||
*/
|
||||
|
||||
import CanvasContainer from './components/container/CanvasContainer.vue'
|
||||
import CanvasAction from './components/container/CanvasAction.vue'
|
||||
import CanvasDragItem from './components/container/CanvasDragItem.vue'
|
||||
import CanvasFooter from './components/container/CanvasFooter.vue'
|
||||
import CanvasResize from './components/container/CanvasResize.vue'
|
||||
import Builtin from './components/builtin/builtin.json'
|
||||
import RenderMain, { api as renderApi } from './components/render/RenderMain'
|
||||
import { createRender } from './components/render/runner'
|
||||
import {
|
||||
dragStart,
|
||||
updateRect,
|
||||
getContext,
|
||||
getNodePath,
|
||||
dragMove,
|
||||
setLocales,
|
||||
setState,
|
||||
deleteState,
|
||||
getRenderer,
|
||||
clearSelect,
|
||||
selectNode,
|
||||
hoverNode,
|
||||
insertNode,
|
||||
removeNode,
|
||||
addComponent,
|
||||
setPageCss,
|
||||
addScript,
|
||||
addStyle,
|
||||
getNode,
|
||||
getCurrent,
|
||||
setSchema,
|
||||
setUtils,
|
||||
updateUtils,
|
||||
deleteUtils,
|
||||
getSchema,
|
||||
setI18n,
|
||||
getCanvasType,
|
||||
setCanvasType,
|
||||
setProps,
|
||||
setGlobalState,
|
||||
getGlobalState,
|
||||
getDocument,
|
||||
canvasDispatch
|
||||
} from './components/container/container'
|
||||
|
||||
export {
|
||||
CanvasContainer,
|
||||
CanvasAction,
|
||||
CanvasFooter,
|
||||
CanvasDragItem,
|
||||
CanvasResize,
|
||||
RenderMain,
|
||||
renderApi,
|
||||
Builtin,
|
||||
dragStart,
|
||||
dragMove,
|
||||
updateRect,
|
||||
getContext,
|
||||
getNodePath,
|
||||
getNode,
|
||||
getCurrent,
|
||||
setSchema,
|
||||
setUtils,
|
||||
updateUtils,
|
||||
deleteUtils,
|
||||
getSchema,
|
||||
setLocales,
|
||||
setState,
|
||||
deleteState,
|
||||
setI18n,
|
||||
getRenderer,
|
||||
clearSelect,
|
||||
selectNode,
|
||||
insertNode,
|
||||
removeNode,
|
||||
hoverNode,
|
||||
addComponent,
|
||||
setPageCss,
|
||||
addScript,
|
||||
addStyle,
|
||||
getCanvasType,
|
||||
setCanvasType,
|
||||
setProps,
|
||||
setGlobalState,
|
||||
getGlobalState,
|
||||
getDocument,
|
||||
canvasDispatch,
|
||||
createRender
|
||||
}
|
||||
|
||||
export default CanvasContainer
|
||||
export { default as CanvasContainer } from './components/container/CanvasContainer.vue'
|
||||
export { default as CanvasDragItem } from './components/container/CanvasDragItem.vue'
|
||||
export { default as CanvasFooter } from './components/container/CanvasFooter.vue'
|
||||
export { createRender } from './components/render/runner'
|
||||
|
|
|
@ -82,8 +82,7 @@ import {
|
|||
FormItem as TinyFormItem
|
||||
} from '@opentiny/vue'
|
||||
import { theme } from '@opentiny/tiny-engine-controller/adapter'
|
||||
import { useLayout, useNotify } from '@opentiny/tiny-engine-controller'
|
||||
import { getSchema, setSchema } from '@opentiny/tiny-engine-canvas'
|
||||
import { useLayout, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
|
||||
import { constants } from '@opentiny/tiny-engine-utils'
|
||||
import VueMonaco from './VueMonaco.vue'
|
||||
|
||||
|
@ -188,9 +187,10 @@ export default {
|
|||
const remote = await api.getBlockById(block?.id)
|
||||
const originalObj = remote?.content || {}
|
||||
state.originalCode = JSON.stringify(originalObj, null, 2)
|
||||
const getSchema = useCanvas().canvasApi.value.getSchema
|
||||
|
||||
// 转为普通对象,和线上代码顺序保持一致
|
||||
const pageSchema = getSchema() || {}
|
||||
const pageSchema = getSchema?.() || {}
|
||||
if (pageSchema.componentName === 'Block') {
|
||||
state.code = JSON.stringify(pageSchema, null, 2)
|
||||
} else {
|
||||
|
@ -220,7 +220,8 @@ export default {
|
|||
}
|
||||
try {
|
||||
const pageSchema = JSON.parse(state.newCode)
|
||||
setSchema({ ...pageSchema, componentName: COMPONENT_NAME.Block })
|
||||
const setSchema = useCanvas().canvasApi.value.setSchema
|
||||
setSchema?.({ ...pageSchema, componentName: COMPONENT_NAME.Block })
|
||||
close()
|
||||
} catch (err) {
|
||||
useNotify({
|
||||
|
|
|
@ -21,7 +21,6 @@ import { capitalize } from '@vue/shared'
|
|||
import { extend } from '@opentiny/vue-renderless/common/object'
|
||||
import { Input as TinyInput, Form as TinyForm, FormItem as TinyFormItem, Popover as TinyPopover } from '@opentiny/vue'
|
||||
import { useLayout, useModal, useCanvas, useBlock } from '@opentiny/tiny-engine-controller'
|
||||
import { getSchema, getCurrent } from '@opentiny/tiny-engine-canvas'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
@ -38,7 +37,8 @@ export default {
|
|||
const { pageState } = useCanvas()
|
||||
const { addBlockEvent, removeEventLink, getCurrentBlock, appendEventEmit } = useBlock()
|
||||
const { PLUGIN_NAME, activePlugin } = useLayout()
|
||||
const { schema } = getSchema()
|
||||
|
||||
const { schema } = useCanvas().canvasApi.value?.getSchema?.() || {}
|
||||
const events = schema?.events || []
|
||||
const eventsList = Object.entries(events).map(([key, value]) => {
|
||||
return {
|
||||
|
@ -88,7 +88,7 @@ export default {
|
|||
|
||||
const {
|
||||
schema: { id, componentName }
|
||||
} = getCurrent()
|
||||
} = useCanvas().canvasApi.value?.getCurrent?.() || {}
|
||||
|
||||
const newEvent = extend(true, {}, data.metaEvent, {
|
||||
linked: {
|
||||
|
@ -117,7 +117,7 @@ export default {
|
|||
const editEvent = (item, data) => {
|
||||
const {
|
||||
schema: { id, componentName }
|
||||
} = getCurrent()
|
||||
} = useCanvas().canvasApi.value?.getCurrent?.() || {}
|
||||
|
||||
const oldEventName = data.linkedEventName
|
||||
|
||||
|
|
|
@ -22,7 +22,6 @@ import { reactive, computed } from 'vue'
|
|||
import { extend } from '@opentiny/vue-renderless/common/object'
|
||||
import { Input as TinyInput, Popover as TinyPopover } from '@opentiny/vue'
|
||||
import { useLayout, useModal, useCanvas, useBlock, useHistory } from '@opentiny/tiny-engine-controller'
|
||||
import { getSchema, getCurrent } from '@opentiny/tiny-engine-canvas'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
@ -36,10 +35,10 @@ export default {
|
|||
},
|
||||
setup(props) {
|
||||
const { confirm } = useModal()
|
||||
const { pageState } = useCanvas()
|
||||
const { pageState, canvasApi } = useCanvas()
|
||||
const { addBlockProperty, removePropertyLink, getCurrentBlock, editBlockProperty } = useBlock()
|
||||
const { PLUGIN_NAME, activePlugin } = useLayout()
|
||||
const { schema } = getSchema()
|
||||
const { schema } = canvasApi.value.getSchema?.() || {}
|
||||
|
||||
const state = reactive({
|
||||
newPropertyName: ''
|
||||
|
@ -68,7 +67,7 @@ export default {
|
|||
exec() {
|
||||
const {
|
||||
schema: { id, componentName }
|
||||
} = getCurrent()
|
||||
} = canvasApi.value?.getCurrent?.() || {}
|
||||
const newProperty = extend(true, {}, property, {
|
||||
property: state.newPropertyName || `${property.property}${id}`,
|
||||
linked: {
|
||||
|
@ -87,7 +86,7 @@ export default {
|
|||
const editProperty = (property) => {
|
||||
const {
|
||||
schema: { id, componentName }
|
||||
} = getCurrent()
|
||||
} = canvasApi.value?.getCurrent?.() || {}
|
||||
|
||||
// 如果之前有关联关系,则需要去除关联
|
||||
if (props.data?.linked) {
|
||||
|
|
|
@ -78,9 +78,8 @@
|
|||
<script lang="jsx">
|
||||
import { reactive, ref, watchEffect, onBeforeUnmount } from 'vue'
|
||||
import { Button, DialogBox, Popover, Search, Alert } from '@opentiny/vue'
|
||||
import { getGlobalConfig, useModal, usePage, useNotify } from '@opentiny/tiny-engine-controller'
|
||||
import { getGlobalConfig, useModal, usePage, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
|
||||
import { theme } from '@opentiny/tiny-engine-controller/adapter'
|
||||
import { getSchema } from '@opentiny/tiny-engine-canvas'
|
||||
import MetaListItems from './MetaListItems.vue'
|
||||
import { iconYes } from '@opentiny/vue-icon'
|
||||
import VueMonaco from './VueMonaco.vue'
|
||||
|
@ -130,7 +129,7 @@ export default {
|
|||
})
|
||||
|
||||
watchEffect(() => {
|
||||
state.bindLifeCycles = props.bindLifeCycles || getSchema()?.lifeCycles || {}
|
||||
state.bindLifeCycles = props.bindLifeCycles || useCanvas().canvasApi.value?.getSchema()?.lifeCycles || {}
|
||||
})
|
||||
|
||||
const searchLifeCyclesList = (value) => {
|
||||
|
@ -142,7 +141,7 @@ export default {
|
|||
}
|
||||
|
||||
const syncLifeCycle = () => {
|
||||
const currentSchema = getSchema()
|
||||
const currentSchema = useCanvas().canvasApi.value?.getSchema?.()
|
||||
const pageContent = getPageContent()
|
||||
const { id, fileName } = pageContent
|
||||
if (id === currentSchema.id || fileName === currentSchema.fileName) {
|
||||
|
@ -165,7 +164,8 @@ export default {
|
|||
|
||||
const openLifeCyclesPanel = (item) => {
|
||||
state.title = item
|
||||
const bindLifeCycleSource = props.bindLifeCycles?.[item] || getSchema().lifeCycles?.[item]
|
||||
const bindLifeCycleSource =
|
||||
props.bindLifeCycles?.[item] || useCanvas().canvasApi.value?.getSchema?.()?.lifeCycles?.[item]
|
||||
state.editorValue =
|
||||
bindLifeCycleSource?.value ||
|
||||
`function ${item} (${item === 'setup' ? '{ props, state, watch, onMounted }' : ''}) {} `
|
||||
|
|
|
@ -124,7 +124,6 @@ import { reactive, ref, computed, nextTick, watch } from 'vue'
|
|||
import { camelize, capitalize } from '@vue/shared'
|
||||
import { Button, DialogBox, Search, Switch, Input, Tooltip, Alert } from '@opentiny/vue'
|
||||
import { useHttp } from '@opentiny/tiny-engine-http'
|
||||
import { getSchema, getGlobalState, setState, getNode, getCurrent } from '@opentiny/tiny-engine-canvas'
|
||||
import { useCanvas, useResource, useLayout, useApp, useProperties, useData } from '@opentiny/tiny-engine-controller'
|
||||
import { theme } from '@opentiny/tiny-engine-controller/adapter'
|
||||
import { constants } from '@opentiny/tiny-engine-utils'
|
||||
|
@ -150,6 +149,12 @@ const CONSTANTS = {
|
|||
}
|
||||
|
||||
const getJsSlot = () => {
|
||||
const { getNode, getCurrent } = useCanvas().canvasApi.value || {}
|
||||
|
||||
if (!getNode || !getCurrent) {
|
||||
return [false, {}]
|
||||
}
|
||||
|
||||
const jsSlot = getNode(getCurrent()?.parent?.id, true)?.parent
|
||||
|
||||
return [jsSlot?.type === 'JSSlot', jsSlot]
|
||||
|
@ -398,10 +403,9 @@ export default {
|
|||
const confirm = () => {
|
||||
let variableContent = state.isEditorEditMode ? editor.value?.getEditor().getValue() : state.variable
|
||||
|
||||
const { setSaved, canvasApi } = useCanvas()
|
||||
// 如果新旧值不一样就显示未保存状态
|
||||
if (oldValue !== variableContent) {
|
||||
const { setSaved } = useCanvas()
|
||||
|
||||
setSaved(false)
|
||||
variableContent = formatString(variableContent, 'javascript')
|
||||
}
|
||||
|
@ -411,14 +415,14 @@ export default {
|
|||
|
||||
if (variableContent) {
|
||||
if (state.bindPrefix === CONSTANTS.DATASOUCEPREFIX) {
|
||||
const pageSchema = getSchema()
|
||||
const pageSchema = canvasApi.value.getSchema()
|
||||
const stateName = state.variable.replace(`${CONSTANTS.STATE}`, '')
|
||||
const staticData = state.variableContent.map(({ _id, ...other }) => other)
|
||||
|
||||
pageSchema.state[stateName] = staticData
|
||||
|
||||
// 设置画布上下文环境,让画布触发更新渲染
|
||||
setState({ [stateName]: staticData })
|
||||
canvasApi.value.setState({ [stateName]: staticData })
|
||||
|
||||
// 这里在setup生命周期函数内部处理用户真实环境中的数据源请求
|
||||
genRemoteMethodToLifeSetup(stateName, state.dataSouce, pageSchema)
|
||||
|
@ -453,7 +457,7 @@ export default {
|
|||
state.isVisible = true
|
||||
state.variableName = bindKey.value
|
||||
state.variable = getInitVariable()
|
||||
state.variables = getSchema()?.state || {}
|
||||
state.variables = useCanvas().canvasApi.value.getSchema()?.state || {}
|
||||
state.bindPrefix = CONSTANTS.STATE
|
||||
state.variableContent = state.variables[bindKey.value]
|
||||
nextTick(() => window.dispatchEvent(new Event('resize')))
|
||||
|
@ -461,6 +465,8 @@ export default {
|
|||
|
||||
const selectItem = (item) => {
|
||||
state.active = item.id
|
||||
const { canvasApi } = useCanvas()
|
||||
|
||||
if (item.id === 'function') {
|
||||
state.bindPrefix = CONSTANTS.THIS
|
||||
const { PLUGIN_NAME, getPluginApi } = useLayout()
|
||||
|
@ -476,7 +482,7 @@ export default {
|
|||
state.variables = bridge
|
||||
} else if (item.id === 'props') {
|
||||
state.bindPrefix = CONSTANTS.PROPS
|
||||
const properties = getSchema()?.schema?.properties
|
||||
const properties = canvasApi.value.getSchema()?.schema?.properties
|
||||
const bindProperties = {}
|
||||
properties?.forEach(({ content }) => {
|
||||
content.forEach(({ property }) => {
|
||||
|
@ -502,7 +508,7 @@ export default {
|
|||
state.bindPrefix = CONSTANTS.STORE
|
||||
state.variables = {}
|
||||
|
||||
const stores = getGlobalState()
|
||||
const stores = canvasApi.value.getGlobalState()
|
||||
stores.forEach(({ id, state: storeState = {}, getters = {} }) => {
|
||||
const loadProp = (prop) => {
|
||||
const propBinding = `${id}.${prop}`
|
||||
|
@ -523,7 +529,7 @@ export default {
|
|||
state.variables = params.reduce((variables, param) => ({ ...variables, [param]: param }), {})
|
||||
} else {
|
||||
state.bindPrefix = CONSTANTS.STATE
|
||||
state.variables = getSchema()?.[item.id]
|
||||
state.variables = canvasApi.value.getSchema()?.[item.id]
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -22,7 +22,6 @@
|
|||
<script>
|
||||
import { onMounted, ref, watchEffect } from 'vue'
|
||||
import { useMessage, useCanvas } from '@opentiny/tiny-engine-controller'
|
||||
import { getSchema } from '@opentiny/tiny-engine-canvas'
|
||||
import MetaCodeEditor from './MetaCodeEditor.vue'
|
||||
import MetaBindVariable from './MetaBindVariable.vue'
|
||||
|
||||
|
@ -91,7 +90,7 @@ export default {
|
|||
let newValue = value
|
||||
|
||||
if (value?.type === CONSTANT.JSEXPRESSION) {
|
||||
const pageSchema = getSchema()
|
||||
const pageSchema = useCanvas().canvasApi.value.getSchema()
|
||||
const stateName = value?.value?.replace(CONSTANT.STATE, '')
|
||||
newValue = pageSchema?.state?.[stateName]
|
||||
}
|
||||
|
|
|
@ -25,8 +25,7 @@
|
|||
<script>
|
||||
import { ref, watchEffect, nextTick } from 'vue'
|
||||
import { Popover } from '@opentiny/vue'
|
||||
import { useProperties, useResource, useModal } from '@opentiny/tiny-engine-controller'
|
||||
import { updateRect } from '@opentiny/tiny-engine-canvas'
|
||||
import { useProperties, useResource, useModal, useCanvas } from '@opentiny/tiny-engine-controller'
|
||||
import { iconHelpCircle } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
|
@ -121,7 +120,7 @@ export default {
|
|||
})
|
||||
}
|
||||
|
||||
updateRect()
|
||||
useCanvas().canvasApi.value.updateRect()
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
@ -4,8 +4,7 @@
|
|||
|
||||
<script setup>
|
||||
import { nextTick } from 'vue'
|
||||
import { updateRect } from '@opentiny/tiny-engine-canvas'
|
||||
import { useProperties, useResource } from '@opentiny/tiny-engine-controller'
|
||||
import { useProperties, useResource, useCanvas } from '@opentiny/tiny-engine-controller'
|
||||
import MetaArrayItem from './MetaArrayItem.vue'
|
||||
|
||||
const { children: schemaChildren, componentName, props } = useProperties().getSchema()
|
||||
|
@ -26,7 +25,7 @@ const updateColumns = (columns) => {
|
|||
})
|
||||
|
||||
useProperties().getSchema().children = children
|
||||
nextTick(updateRect)
|
||||
nextTick(useCanvas().canvasApi.value.updateRect)
|
||||
}
|
||||
|
||||
updateColumns(props?.columns)
|
||||
|
|
|
@ -278,7 +278,7 @@ const initBlock = async (block = {}, _langs = {}, isEdit) => {
|
|||
// 把区块的schema传递给画布
|
||||
await resetBlockCanvasState({ pageSchema: getBlockPageSchema(block) })
|
||||
// 这一步操作很重要,让区块管理面板和画布共同维护同一份区块schema
|
||||
block.content = useCanvas().renderer.value?.getSchema()
|
||||
block.content = useCanvas().canvasApi.value?.getSchema()
|
||||
|
||||
setCurrentBlock(block)
|
||||
setBreadcrumbBlock([block[nameCn] || block.label], block.histories)
|
||||
|
@ -361,7 +361,7 @@ const createEmptyBlock = ({ name_cn, label, path, categories }) => {
|
|||
}
|
||||
|
||||
const setComponentLinkedValue = ({ propertyName, value }) => {
|
||||
const { schema } = useCanvas().renderer.value?.getCurrent() || {}
|
||||
const { schema } = useCanvas().canvasApi.value?.getCurrent() || {}
|
||||
|
||||
if (!propertyName || !schema) {
|
||||
return
|
||||
|
|
|
@ -51,14 +51,20 @@ const defaultSchema = {
|
|||
outputs: []
|
||||
}
|
||||
|
||||
const renderer = ref(null)
|
||||
const canvasApi = ref({})
|
||||
const isCanvasApiReady = ref(false)
|
||||
|
||||
const initCanvasApi = (newCanvasApi) => {
|
||||
canvasApi.value = newCanvasApi
|
||||
isCanvasApiReady.value = true
|
||||
}
|
||||
|
||||
const pageState = reactive({ ...defaultPageState, loading: true })
|
||||
// 重置画布数据
|
||||
const resetCanvasState = async (state = {}) => {
|
||||
Object.assign(pageState, defaultPageState, state)
|
||||
|
||||
await renderer.value?.setSchema(pageState.pageSchema)
|
||||
await canvasApi.value?.setSchema(pageState.pageSchema)
|
||||
}
|
||||
|
||||
// 页面重置画布数据
|
||||
|
@ -142,7 +148,6 @@ const getCurrentPage = () => pageState.currentPage
|
|||
export default function () {
|
||||
return {
|
||||
pageState,
|
||||
renderer,
|
||||
isBlock,
|
||||
isSaved,
|
||||
isLoading,
|
||||
|
@ -153,10 +158,11 @@ export default function () {
|
|||
resetPageCanvasState,
|
||||
resetBlockCanvasState,
|
||||
clearCurrentState,
|
||||
getDataSourceMap: renderer.value?.getDataSourceMap,
|
||||
setDataSourceMap: renderer.value?.setDataSourceMap,
|
||||
getCurrentSchema,
|
||||
setCurrentSchema,
|
||||
getCurrentPage
|
||||
getCurrentPage,
|
||||
initCanvasApi,
|
||||
canvasApi,
|
||||
isCanvasApiReady
|
||||
}
|
||||
}
|
||||
|
|
|
@ -61,7 +61,7 @@ const push = (schema) => {
|
|||
|
||||
const go = (addend, valid) => {
|
||||
historyState.index = historyState.index + addend
|
||||
useCanvas().renderer.value?.setSchema(string2Schema(list[historyState.index]))
|
||||
useCanvas().canvasApi.value?.setSchema(string2Schema(list[historyState.index]))
|
||||
|
||||
// 不是锁定状态,撤销操作后,传递第二个标识位,将 list 的长度减一,置灰 undoredo 操作按钮
|
||||
if (typeof valid === 'boolean') {
|
||||
|
@ -95,7 +95,7 @@ const clear = () => {
|
|||
const addHistory = (schema) => {
|
||||
if (!schema) {
|
||||
useCanvas().setSaved(false)
|
||||
push(useCanvas().renderer.value?.getSchema())
|
||||
push(useCanvas().canvasApi.value?.getSchema())
|
||||
} else {
|
||||
clear()
|
||||
// 初始 schema 需要设置为第一条历史记录
|
||||
|
|
|
@ -191,7 +191,7 @@ const setProp = (name, value, type) => {
|
|||
}
|
||||
|
||||
// 没有父级,或者不在节点上面,要更新内容。就用setState
|
||||
const { getNode, setState, updateRect } = useCanvas().renderer.value || {}
|
||||
const { getNode, setState, updateRect } = useCanvas().canvasApi.value || {}
|
||||
getNode(properties.schema.id, true)?.parent || setState(useCanvas().getPageSchema().state)
|
||||
propsUpdateKey.value++
|
||||
|
||||
|
|
|
@ -137,7 +137,7 @@ const registerBlock = async (data, notFetchResouce) => {
|
|||
return block
|
||||
} else {
|
||||
if (!blockResource.get(label)) {
|
||||
const { addScript, addStyle } = useCanvas().renderer.value
|
||||
const { addScript, addStyle } = useCanvas().canvasApi.value
|
||||
const promises = scripts
|
||||
.filter((item) => item.includes('umd.js'))
|
||||
.map(addScript)
|
||||
|
@ -372,7 +372,7 @@ const fetchResource = async ({ isInit = true } = {}) => {
|
|||
const { id, type } = useEditorInfo().useInfo()
|
||||
useApp().appInfoState.selectedId = id
|
||||
|
||||
const Builtin = window.Builtin
|
||||
const { Builtin } = useCanvas().canvasApi.value
|
||||
Builtin.data.materials.components[0].children.map(registerComponent)
|
||||
BuiltinComponentMaterials.components[0].children.map(registerComponent)
|
||||
|
||||
|
@ -452,7 +452,7 @@ const updateCanvasDependencies = (blocks) => {
|
|||
getBlockDeps(block.content.dependencies)
|
||||
})
|
||||
|
||||
useCanvas().renderer.value?.canvasDispatch('updateDependencies', { detail: resState.thirdPartyDeps })
|
||||
useCanvas().canvasApi.value?.canvasDispatch('updateDependencies', { detail: resState.thirdPartyDeps })
|
||||
}
|
||||
|
||||
export default function () {
|
||||
|
|
|
@ -101,7 +101,7 @@ const ensureI18n = (obj, send) => {
|
|||
}
|
||||
})
|
||||
|
||||
useCanvas().renderer.value?.setLocales(messages, true)
|
||||
useCanvas().canvasApi.value?.setLocales(messages, true)
|
||||
} catch (e) {
|
||||
// 不需要处理,有报错的词条会在画布初始化的时候统一调setLocales这个方法
|
||||
}
|
||||
|
@ -171,7 +171,7 @@ const initAppI18n = async (appId) => {
|
|||
host: appId,
|
||||
hostType: HOST_TYPE.App
|
||||
})
|
||||
useCanvas().renderer.value?.setLocales(i18nResource.messages)
|
||||
useCanvas().canvasApi.value?.setLocales(i18nResource.messages)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -181,7 +181,7 @@ const initBlockI18n = async (blockId) => {
|
|||
host: blockId,
|
||||
hostType: HOST_TYPE.Block
|
||||
})
|
||||
useCanvas().renderer.value?.setLocales(i18nResource.messages)
|
||||
useCanvas().canvasApi.value?.setLocales(i18nResource.messages)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -192,7 +192,7 @@ const initBlockLocalI18n = async (langs = {}) => {
|
|||
hostType: HOST_TYPE.Block,
|
||||
local: true
|
||||
})
|
||||
useCanvas().renderer.value?.setLocales(i18nResource.messages)
|
||||
useCanvas().canvasApi.value?.setLocales(i18nResource.messages)
|
||||
}
|
||||
|
||||
const format = (str = '', params = {}) => str.replace(/\$\{(.+?)\}/g, (substr, key) => params[key] || '')
|
||||
|
|
|
@ -21,7 +21,15 @@
|
|||
import { reactive, ref, watch, onUnmounted } from 'vue'
|
||||
import { ConfigProvider as TinyConfigProvider } from '@opentiny/vue'
|
||||
import designSmbConfig from '@opentiny/vue-design-smb'
|
||||
import { useResource, useLayout, useEditorInfo, useModal, useApp, useNotify } from '@opentiny/tiny-engine-controller'
|
||||
import {
|
||||
useResource,
|
||||
useLayout,
|
||||
useEditorInfo,
|
||||
useModal,
|
||||
useApp,
|
||||
useNotify,
|
||||
useCanvas
|
||||
} from '@opentiny/tiny-engine-controller'
|
||||
import AppManage from '@opentiny/tiny-engine-plugin-page'
|
||||
import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
|
||||
import DesignToolbars from './DesignToolbars.vue'
|
||||
|
@ -90,7 +98,18 @@ export default {
|
|||
}
|
||||
|
||||
useEditorInfo().getUserInfo()
|
||||
useResource().fetchResource()
|
||||
|
||||
watch(
|
||||
useCanvas().isCanvasApiReady,
|
||||
(ready) => {
|
||||
if (ready) {
|
||||
useResource().fetchResource()
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
const handlePopStateEvent = () => {
|
||||
useResource().handlePopStateEvent()
|
||||
|
|
|
@ -14,15 +14,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import {
|
||||
CanvasContainer,
|
||||
CanvasFooter,
|
||||
selectNode,
|
||||
getNodePath,
|
||||
updateRect,
|
||||
getSchema
|
||||
} from '@opentiny/tiny-engine-canvas'
|
||||
import { ref, watch, onUnmounted } from 'vue'
|
||||
import { CanvasContainer, CanvasFooter } from '@opentiny/tiny-engine-canvas'
|
||||
import {
|
||||
useProperties,
|
||||
useCanvas,
|
||||
|
@ -62,7 +55,7 @@ export default {
|
|||
|
||||
const removeNode = (node) => {
|
||||
const { pageState } = useCanvas()
|
||||
footData.value = getNodePath(node?.id)
|
||||
footData.value = useCanvas().canvasApi.value.getNodePath(node?.id)
|
||||
pageState.currentSchema = {}
|
||||
pageState.properties = null
|
||||
}
|
||||
|
@ -133,6 +126,8 @@ export default {
|
|||
useLayout().closePlugin()
|
||||
}
|
||||
|
||||
const { getSchema, getNodePath } = useCanvas().canvasApi.value
|
||||
|
||||
const schema = getSchema()
|
||||
// 如果选中的节点是画布,就设置成默认选中最外层schema
|
||||
useProperties().getProps(node || schema, parent)
|
||||
|
@ -142,12 +137,31 @@ export default {
|
|||
}
|
||||
|
||||
const selectFooterNode = ({ node }) => {
|
||||
const { selectNode } = useCanvas().canvasApi.value
|
||||
|
||||
selectNode(node)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('canvasResize', updateRect)
|
||||
new ResizeObserver(updateRect).observe(canvasRef.value)
|
||||
let canvasResizeObserver = null
|
||||
watch(
|
||||
() => [useCanvas().isCanvasApiReady.value, canvasRef.value],
|
||||
([ready]) => {
|
||||
if (!ready || !canvasRef.value) {
|
||||
return
|
||||
}
|
||||
|
||||
// 先取消监听,再增加监听事件,避免重复监听
|
||||
document.removeEventListener('canvasResize', useCanvas().canvasApi.value.updateRect)
|
||||
canvasResizeObserver?.disconnect?.()
|
||||
|
||||
document.addEventListener('canvasResize', useCanvas().canvasApi.value.updateRect)
|
||||
canvasResizeObserver = new ResizeObserver(useCanvas().canvasApi.value.updateRect).observe(canvasRef.value)
|
||||
}
|
||||
)
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('canvasResize', useCanvas().canvasApi.value.updateRect)
|
||||
canvasResizeObserver?.disconnect?.()
|
||||
})
|
||||
|
||||
return {
|
||||
|
|
|
@ -11,9 +11,8 @@
|
|||
*/
|
||||
|
||||
import { reactive } from 'vue'
|
||||
import { useApp, useResource, useNotify } from '@opentiny/tiny-engine-controller'
|
||||
import { useApp, useResource, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
|
||||
import { isVsCodeEnv } from '@opentiny/tiny-engine-controller/js/environments'
|
||||
import { updateUtils, deleteUtils } from '@opentiny/tiny-engine-canvas'
|
||||
import {
|
||||
fetchResourceList,
|
||||
requestDeleteReSource,
|
||||
|
@ -175,6 +174,8 @@ const generateBridgeUtil = (...args) => {
|
|||
}
|
||||
|
||||
export const saveResource = (data, callback, emit) => {
|
||||
const { updateUtils } = useCanvas().canvasApi.value
|
||||
|
||||
if (getActionType() === ACTION_TYPE.Edit) {
|
||||
data.id = state.resource.id
|
||||
requestUpdateReSource(data).then((result) => {
|
||||
|
@ -218,6 +219,8 @@ export const saveResource = (data, callback, emit) => {
|
|||
|
||||
export const deleteData = (name, callback, emit) => {
|
||||
const params = `app=${useApp().appInfoState.selectedId}&id=${state.resource?.id}`
|
||||
const { deleteUtils } = useCanvas().canvasApi.value
|
||||
|
||||
requestDeleteReSource(params).then((data) => {
|
||||
if (data) {
|
||||
const index = useResource().resState[state.type].findIndex((item) => item.name === data.name)
|
||||
|
|
|
@ -80,7 +80,6 @@ import {
|
|||
useLayout,
|
||||
useHelp
|
||||
} from '@opentiny/tiny-engine-controller'
|
||||
import { setState, getSchema, deleteState, setGlobalState, getGlobalState } from '@opentiny/tiny-engine-canvas'
|
||||
import { iconSearch } from '@opentiny/vue-icon'
|
||||
import { CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
|
||||
import DataSourceList from './DataSourceList.vue'
|
||||
|
@ -162,6 +161,8 @@ export default {
|
|||
}
|
||||
|
||||
const add = (name, variable) => {
|
||||
const { getSchema } = useCanvas().canvasApi.value
|
||||
|
||||
if (getSchema()) {
|
||||
if (updateKey.value !== name && flag.value === OPTION_TYPE.UPDATE) {
|
||||
delete state.dataSource[updateKey.value]
|
||||
|
@ -188,6 +189,7 @@ export default {
|
|||
|
||||
const confirm = () => {
|
||||
const { name } = state.createData
|
||||
const { setState, setGlobalState } = useCanvas().canvasApi.value
|
||||
|
||||
if (!name || errorMessage.value) {
|
||||
notifySaveError('变量名未填写或名称不符合规范,请按照提示修改后重试。')
|
||||
|
@ -257,6 +259,8 @@ export default {
|
|||
}
|
||||
|
||||
const remove = (key) => {
|
||||
const { deleteState, getSchema } = useCanvas().canvasApi.value
|
||||
|
||||
delete state.dataSource[key]
|
||||
// 删除变量也需要同步触发画布渲染
|
||||
deleteState(key)
|
||||
|
@ -285,6 +289,7 @@ export default {
|
|||
}
|
||||
|
||||
const setGlobalStateToDataSource = () => {
|
||||
const { getGlobalState } = useCanvas().canvasApi.value
|
||||
const globalState = getGlobalState()
|
||||
|
||||
if (!globalState) {
|
||||
|
@ -299,6 +304,7 @@ export default {
|
|||
const removeStore = (key) => {
|
||||
const storeListt = [...useResource().resState.globalState] || []
|
||||
const index = storeListt.findIndex((store) => store.id === key)
|
||||
const { setGlobalState } = useCanvas().canvasApi.value
|
||||
|
||||
if (index !== -1) {
|
||||
const { id } = useEditorInfo().useInfo()
|
||||
|
@ -321,6 +327,8 @@ export default {
|
|||
}
|
||||
|
||||
const initDataSource = (tabsName = activeName.value) => {
|
||||
const { getSchema } = useCanvas().canvasApi.value
|
||||
|
||||
if (tabsName === STATE.GLOBAL_STATE) {
|
||||
setGlobalStateToDataSource()
|
||||
} else {
|
||||
|
|
|
@ -51,7 +51,7 @@ export const refresh = () => {
|
|||
const selectedId = appInfoState.selectedId || url.get('id')
|
||||
fetchDataSourceList(selectedId).then((data) => {
|
||||
dataSourceList.value = data
|
||||
useCanvas().setDataSourceMap(data)
|
||||
useCanvas().canvasApi.value.setDataSourceMap(data)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
@ -99,8 +99,7 @@ import { Grid, Pager, Input, Numeric, DatePicker, Switch, Slider, Link } from '@
|
|||
import { IconPlusCircle, IconImport } from '@opentiny/vue-icon'
|
||||
import { PluginSetting } from '@opentiny/tiny-engine-common'
|
||||
import { utils } from '@opentiny/tiny-engine-utils'
|
||||
import { useModal, useLayout, useNotify } from '@opentiny/tiny-engine-controller'
|
||||
import { getSchema } from '@opentiny/tiny-engine-canvas'
|
||||
import { useModal, useLayout, useNotify, useCanvas } from '@opentiny/tiny-engine-controller'
|
||||
import useClipboard from 'vue-clipboard3'
|
||||
import { fetchDataSourceDetail, requestUpdateDataSource } from './js/http'
|
||||
import { downloadFn, handleImportedData, overrideOrMergeData, getDataAfterPage } from './js/datasource'
|
||||
|
@ -437,7 +436,7 @@ export default {
|
|||
}
|
||||
|
||||
const key = `datasource${capitalize(camelize(name))}`
|
||||
const pageSchema = getSchema()
|
||||
const pageSchema = useCanvas().canvasApi.value.getSchema()
|
||||
|
||||
if (pageSchema.state[key]) {
|
||||
pageSchema.state[key] = data.map(({ _id, ...other }) => other)
|
||||
|
|
|
@ -17,9 +17,8 @@
|
|||
|
||||
<script lang="jsx">
|
||||
import { computed, inject, reactive, ref } from 'vue'
|
||||
import { useBlock, useResource, useModal, useApp } from '@opentiny/tiny-engine-controller'
|
||||
import { useBlock, useResource, useModal, useApp, useCanvas } from '@opentiny/tiny-engine-controller'
|
||||
import { PluginBlockList } from '@opentiny/tiny-engine-common'
|
||||
import { dragStart, addComponent } from '@opentiny/tiny-engine-canvas'
|
||||
import { requestUpdateGroup, fetchGroupBlocksById } from './http'
|
||||
import { setBlockPanelVisible, setBlockVersionPanelVisible } from './js/usePanel'
|
||||
|
||||
|
@ -93,6 +92,7 @@ export default {
|
|||
registerBlock(block).then(() => {
|
||||
const blockName = block.component || block.blockName
|
||||
const node = generateNode({ type: 'block', component: blockName })
|
||||
const { addComponent, dragStart } = useCanvas().canvasApi.value
|
||||
if (isShortcutPanel) {
|
||||
emitEvent('close')
|
||||
addComponent(node, isShortcutPanel)
|
||||
|
|
|
@ -34,8 +34,8 @@ import { inject, onMounted, reactive, ref } from 'vue'
|
|||
import { Collapse, CollapseItem, Search } from '@opentiny/vue'
|
||||
import { SearchEmpty } from '@opentiny/tiny-engine-common'
|
||||
import { iconSearch } from '@opentiny/vue-icon'
|
||||
import { useResource } from '@opentiny/tiny-engine-controller'
|
||||
import { CanvasDragItem, addComponent } from '@opentiny/tiny-engine-canvas'
|
||||
import { useResource, useCanvas } from '@opentiny/tiny-engine-controller'
|
||||
import { CanvasDragItem } from '@opentiny/tiny-engine-canvas'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
@ -94,6 +94,8 @@ export default {
|
|||
|
||||
const componentClick = (data) => {
|
||||
const { isShortcutPanel, emitEvent } = panelState
|
||||
const { addComponent } = useCanvas().canvasApi.value
|
||||
|
||||
if (isShortcutPanel) {
|
||||
addComponent(data, isShortcutPanel)
|
||||
emitEvent('close')
|
||||
|
|
|
@ -44,7 +44,6 @@ import { Popover } from '@opentiny/vue'
|
|||
import { VueMonaco, CloseIcon } from '@opentiny/tiny-engine-common'
|
||||
import { useCanvas, useModal, useHistory, useNotify } from '@opentiny/tiny-engine-controller'
|
||||
import { obj2String, string2Obj, theme } from '@opentiny/tiny-engine-controller/adapter'
|
||||
import { getSchema } from '@opentiny/tiny-engine-canvas'
|
||||
import { iconSave, iconDownloadLink } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
|
@ -114,7 +113,7 @@ export default {
|
|||
}
|
||||
|
||||
onActivated(() => {
|
||||
pageState.pageSchema = getSchema()
|
||||
pageState.pageSchema = useCanvas().canvasApi.value?.getSchema?.() || {}
|
||||
state.pageData = obj2String(pageState.pageSchema)
|
||||
nextTick(() => {
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
|
|
|
@ -14,7 +14,6 @@ import { ref, reactive, watchEffect, onActivated, nextTick } from 'vue'
|
|||
import { useCanvas, useModal, useNotify } from '@opentiny/tiny-engine-controller'
|
||||
import { string2Ast, ast2String, insertName, formatString } from '@opentiny/tiny-engine-controller/js/ast'
|
||||
import { constants } from '@opentiny/tiny-engine-utils'
|
||||
import { getSchema } from '@opentiny/tiny-engine-canvas'
|
||||
import { lint } from '@opentiny/tiny-engine-controller/js/linter'
|
||||
import { isFunction } from '@opentiny/vue-renderless/grid/static'
|
||||
|
||||
|
@ -35,7 +34,7 @@ const monaco = ref(null)
|
|||
let scriptAst = null
|
||||
|
||||
export const getMethods = () => {
|
||||
const pageSchema = getSchema?.() || {}
|
||||
const pageSchema = useCanvas().canvasApi.value.getSchema?.() || {}
|
||||
|
||||
pageSchema.methods = pageSchema?.methods || {}
|
||||
return pageSchema.methods
|
||||
|
@ -97,7 +96,7 @@ const saveMethods = () => {
|
|||
|
||||
const editorContent = monaco.value.getEditor().getValue()
|
||||
const ast = string2Ast(editorContent)
|
||||
getSchema().methods = {}
|
||||
useCanvas().canvasApi.value.getSchema().methods = {}
|
||||
|
||||
ast.program.body.forEach((declaration, index) => {
|
||||
const name = declaration?.id?.name
|
||||
|
|
|
@ -80,8 +80,6 @@ import { IconChevronDown, iconEyeopen, iconEyeclose } from '@opentiny/vue-icon'
|
|||
import { useCanvas, useResource, useLayout } from '@opentiny/tiny-engine-controller'
|
||||
import { extend } from '@opentiny/vue-renderless/common/object'
|
||||
import { typeOf } from '@opentiny/vue-renderless/common/type'
|
||||
import { getRenderer, clearSelect, selectNode, hoverNode } from '@opentiny/tiny-engine-canvas'
|
||||
import { getSchema } from '@opentiny/tiny-engine-canvas'
|
||||
|
||||
const { PAGE_STATUS } = constants
|
||||
export default {
|
||||
|
@ -141,12 +139,14 @@ export default {
|
|||
})
|
||||
|
||||
onActivated(() => {
|
||||
const { getSchema } = useCanvas().canvasApi.value
|
||||
state.pageSchema = filterSchema(getSchema())
|
||||
})
|
||||
|
||||
watch(
|
||||
() => pageState.currentSchema,
|
||||
() => {
|
||||
const { getSchema } = useCanvas().canvasApi.value
|
||||
state.pageSchema = filterSchema(getSchema())
|
||||
}
|
||||
)
|
||||
|
@ -158,6 +158,9 @@ export default {
|
|||
const showNode = (data) => {
|
||||
data.show = !data.show
|
||||
pageState.nodesStatus[data.id] = data.show
|
||||
|
||||
const { getRenderer, clearSelect } = useCanvas().canvasApi.value
|
||||
|
||||
getRenderer().setCondition(data.id, data.show)
|
||||
clearSelect()
|
||||
}
|
||||
|
@ -173,6 +176,8 @@ export default {
|
|||
return
|
||||
}
|
||||
|
||||
const { hoverNode } = useCanvas().canvasApi.value
|
||||
|
||||
hoverNode(data.id)
|
||||
const handleEl = event.target.querySelector('.tree-handle')
|
||||
handleEl && (handleEl.style.display = 'block')
|
||||
|
@ -189,6 +194,8 @@ export default {
|
|||
if (state.isLock) {
|
||||
return
|
||||
}
|
||||
|
||||
const { selectNode } = useCanvas().canvasApi.value
|
||||
selectNode(row?.id, 'clickTree')
|
||||
}
|
||||
|
||||
|
|
|
@ -68,7 +68,6 @@ import { MetaSwitch, MetaBindVariable, MetaInput, MetaCodeEditor } from '@openti
|
|||
import { useProperties, useCanvas } from '@opentiny/tiny-engine-controller'
|
||||
import { PROP_DATA_TYPE } from '@opentiny/tiny-engine-controller/utils'
|
||||
import { string2Obj } from '@opentiny/tiny-engine-controller/adapter'
|
||||
import { updateRect } from '@opentiny/tiny-engine-canvas'
|
||||
import { constants } from '@opentiny/tiny-engine-utils'
|
||||
import { Tooltip } from '@opentiny/vue'
|
||||
|
||||
|
@ -167,7 +166,8 @@ export default {
|
|||
} else {
|
||||
delete useProperties().getSchema().condition
|
||||
}
|
||||
updateRect()
|
||||
|
||||
useCanvas().canvasApi.value.updateRect()
|
||||
condition.value = value
|
||||
}
|
||||
|
||||
|
|
|
@ -68,7 +68,6 @@
|
|||
import { ref, watch } from 'vue'
|
||||
import { Collapse, CollapseItem, Input } from '@opentiny/vue'
|
||||
import { useHistory, useCanvas, useProperties } from '@opentiny/tiny-engine-controller'
|
||||
import { getSchema as getCanvasPageSchema, updateRect } from '@opentiny/tiny-engine-canvas'
|
||||
import { MetaCodeEditor, MetaBindVariable } from '@opentiny/tiny-engine-common'
|
||||
import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
|
||||
import {
|
||||
|
@ -126,6 +125,7 @@ export default {
|
|||
|
||||
// 保存编辑器内容,并回写到 schema
|
||||
const save = ({ content }) => {
|
||||
const { getSchema: getCanvasPageSchema, updateRect } = useCanvas().canvasApi.value
|
||||
const pageSchema = getCanvasPageSchema()
|
||||
const schema = getSchema() || pageSchema
|
||||
const styleString = formatString(styleStrRemoveRoot(content), 'css')
|
||||
|
@ -148,9 +148,11 @@ export default {
|
|||
}
|
||||
|
||||
const setConfig = (value) => {
|
||||
const { getSchema: getCanvasPageSchema, updateRect } = useCanvas().canvasApi.value
|
||||
const pageSchema = getCanvasPageSchema()
|
||||
const currentSchema = getCurrentSchema() || pageSchema
|
||||
const schema = getSchema() || pageSchema
|
||||
|
||||
if (value !== '') {
|
||||
schema.props.style = value
|
||||
currentSchema.props.style = value
|
||||
|
|
|
@ -104,7 +104,6 @@
|
|||
<script setup>
|
||||
import { computed, reactive, ref, nextTick, watch, watchEffect } from 'vue'
|
||||
import { Select as TinySelect } from '@opentiny/vue'
|
||||
import { setPageCss, getSchema as getCanvasPageSchema, updateRect } from '@opentiny/tiny-engine-canvas'
|
||||
import { useProperties, useCanvas, useHistory, useHelp } from '@opentiny/tiny-engine-controller'
|
||||
import { MetaCodeEditor, LinkButton } from '@opentiny/tiny-engine-common'
|
||||
import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
|
||||
|
@ -171,6 +170,7 @@ watch(
|
|||
)
|
||||
|
||||
const setSelectorProps = (type, value) => {
|
||||
const { getSchema: getCanvasPageSchema } = useCanvas().canvasApi.value
|
||||
const schema = getSchema() || getCanvasPageSchema()
|
||||
|
||||
if (!schema.props) {
|
||||
|
@ -183,6 +183,7 @@ const setSelectorProps = (type, value) => {
|
|||
|
||||
// 编辑 className 新增、删除、或修改
|
||||
const editClassName = (curClassName, optionType = OPTION_TYPE.ADD, oldSelector = '') => {
|
||||
const { getSchema: getCanvasPageSchema } = useCanvas().canvasApi.value
|
||||
const schema = getSchema() || getCanvasPageSchema()
|
||||
let type = ''
|
||||
|
||||
|
@ -441,6 +442,7 @@ const save = ({ content }) => {
|
|||
const cssString = formatString(content.replace(/"/g, "'"), 'css')
|
||||
const { getPageSchema } = useCanvas()
|
||||
const { addHistory } = useHistory()
|
||||
const { updateRect, setPageCss, getSchema: getCanvasPageSchema } = useCanvas().canvasApi.value
|
||||
getPageSchema().css = cssString
|
||||
getCanvasPageSchema().css = cssString
|
||||
setPageCss(cssString)
|
||||
|
|
|
@ -11,8 +11,7 @@
|
|||
*/
|
||||
|
||||
import { reactive, watch } from 'vue'
|
||||
import { useHistory } from '@opentiny/tiny-engine-controller'
|
||||
import { setPageCss } from '@opentiny/tiny-engine-canvas'
|
||||
import { useHistory, useCanvas } from '@opentiny/tiny-engine-controller'
|
||||
import { obj2StyleStr, styleStrRemoveRoot } from './cssConvert'
|
||||
import { CSS_TYPE } from './cssType'
|
||||
|
||||
|
@ -57,6 +56,8 @@ export default ({ style, pageState }) => {
|
|||
}
|
||||
} else if (editor.type === CSS_TYPE.Css) {
|
||||
pageState.pageSchema.css = content
|
||||
const { setPageCss } = useCanvas().canvasApi.value
|
||||
|
||||
setPageCss(content)
|
||||
addHistory()
|
||||
}
|
||||
|
|
|
@ -12,7 +12,6 @@
|
|||
|
||||
import { computed, reactive, watch } from 'vue'
|
||||
import { useBroadcastChannel } from '@vueuse/core'
|
||||
import { getSchema as getCanvasPageSchema, updateRect, setPageCss } from '@opentiny/tiny-engine-canvas'
|
||||
import { useCanvas, useHistory, useProperties as useProps } from '@opentiny/tiny-engine-controller'
|
||||
import { formatString } from '@opentiny/tiny-engine-controller/js/ast'
|
||||
import { constants, utils } from '@opentiny/tiny-engine-utils'
|
||||
|
@ -134,17 +133,17 @@ const getClassNameAndIdList = (schema) => {
|
|||
}
|
||||
}
|
||||
|
||||
const { getPageSchema, getCurrentSchema } = useCanvas()
|
||||
const { getPageSchema, getCurrentSchema, canvasApi } = useCanvas()
|
||||
const { getSchema, propsUpdateKey } = useProps()
|
||||
const { addHistory } = useHistory()
|
||||
|
||||
watch(
|
||||
() => [getCurrentSchema(), state.schemaUpdateKey, propsUpdateKey.value, getCanvasPageSchema(), schemaLength],
|
||||
() => [getCurrentSchema(), state.schemaUpdateKey, propsUpdateKey.value, canvasApi.value?.getSchema?.(), schemaLength],
|
||||
([curSchema], [oldCurSchema] = []) => {
|
||||
let schema = getCurrentSchema()
|
||||
|
||||
if (!schema || Object.keys(schema).length === 0) {
|
||||
schema = getCanvasPageSchema()
|
||||
schema = canvasApi.value?.getSchema?.()
|
||||
}
|
||||
|
||||
if (!schema) {
|
||||
|
@ -260,9 +259,10 @@ watch(
|
|||
|
||||
export const updateGlobalStyleStr = (styleStr) => {
|
||||
const pageSchema = getPageSchema()
|
||||
const { getSchema, setPageCss } = canvasApi.value
|
||||
|
||||
pageSchema.css = styleStr
|
||||
getCanvasPageSchema().css = styleStr
|
||||
getSchema().css = styleStr
|
||||
setPageCss(styleStr)
|
||||
state.schemaUpdateKey++
|
||||
}
|
||||
|
@ -296,6 +296,7 @@ const updateGlobalStyle = (newSelector) => {
|
|||
|
||||
// 更新 style 对象到 schema
|
||||
const updateStyle = (properties) => {
|
||||
const { getSchema: getCanvasPageSchema, updateRect } = canvasApi.value
|
||||
const schema = getSchema() || getCanvasPageSchema()
|
||||
schema.props = schema.props || {}
|
||||
|
||||
|
|
|
@ -25,7 +25,6 @@ import { reactive } from 'vue'
|
|||
import { Popover } from '@opentiny/vue'
|
||||
import { getGlobalConfig, useBlock, useCanvas, useNotify, useLayout } from '@opentiny/tiny-engine-controller'
|
||||
import { fs } from '@opentiny/tiny-engine-utils'
|
||||
import { getSchema } from '@opentiny/tiny-engine-canvas'
|
||||
import { generateVuePage, generateVueBlock } from './generateCode'
|
||||
import { fetchCode, fetchMetaData, fetchPageList } from './http'
|
||||
import FileSelector from './FileSelector.vue'
|
||||
|
@ -53,6 +52,7 @@ export default {
|
|||
})
|
||||
|
||||
const getParams = () => {
|
||||
const { getSchema } = useCanvas().canvasApi.value
|
||||
const params = {
|
||||
framework: getGlobalConfig()?.dslMode,
|
||||
platform: getGlobalConfig()?.platformId,
|
||||
|
|
|
@ -87,8 +87,7 @@
|
|||
import { ref, reactive, computed, toRaw, watchEffect, onMounted, onUnmounted, watch } from 'vue'
|
||||
import { Popover, Input, Switch } from '@opentiny/vue'
|
||||
import { IconWebPlus } from '@opentiny/vue-icon'
|
||||
import { useLayout } from '@opentiny/tiny-engine-controller'
|
||||
import { getCanvasType, setCanvasType } from '@opentiny/tiny-engine-canvas'
|
||||
import { useLayout, useCanvas } from '@opentiny/tiny-engine-controller'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
@ -114,7 +113,8 @@ export default {
|
|||
const visible = ref(false)
|
||||
const active = ref(false)
|
||||
const flag = ref(false)
|
||||
const isAbsolute = ref(getCanvasType() === 'absolute')
|
||||
const { getCanvasType } = useCanvas().canvasApi.value
|
||||
const isAbsolute = ref(getCanvasType?.() === 'absolute')
|
||||
|
||||
const dimension = computed(() => useLayout().getDimension())
|
||||
const scale = computed(() => dimension.value.scale * 100)
|
||||
|
@ -350,6 +350,7 @@ export default {
|
|||
}
|
||||
|
||||
const changeCanvasType = (value) => {
|
||||
const { setCanvasType } = useCanvas().canvasApi.value
|
||||
setCanvasType(value ? 'absolute' : 'normal')
|
||||
}
|
||||
|
||||
|
|
|
@ -18,7 +18,6 @@
|
|||
import { Popover } from '@opentiny/vue'
|
||||
import { previewPage, previewBlock } from '@opentiny/tiny-engine-controller/js/preview'
|
||||
import { getGlobalConfig, useBlock, useCanvas, useLayout, useNotify } from '@opentiny/tiny-engine-controller'
|
||||
import { getSchema } from '@opentiny/tiny-engine-canvas'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
@ -31,7 +30,7 @@ export default {
|
|||
}
|
||||
},
|
||||
setup() {
|
||||
const { isBlock, getCurrentPage } = useCanvas()
|
||||
const { isBlock, getCurrentPage, canvasApi } = useCanvas()
|
||||
const { getCurrentBlock } = useBlock()
|
||||
|
||||
const preview = () => {
|
||||
|
@ -48,7 +47,7 @@ export default {
|
|||
framework: getGlobalConfig()?.dslMode,
|
||||
platform: getGlobalConfig()?.platformId,
|
||||
pageInfo: {
|
||||
schema: getSchema()
|
||||
schema: canvasApi.value?.getSchema?.()
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -17,7 +17,6 @@
|
|||
<script>
|
||||
import { Popover } from '@opentiny/vue'
|
||||
import { useResource, useCanvas, useModal, useLayout, useBlock } from '@opentiny/tiny-engine-controller'
|
||||
import { getDocument } from '@opentiny/tiny-engine-canvas'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
@ -39,7 +38,7 @@ export default {
|
|||
// 清空区块缓存(不能清空组件缓存),保证画布刷新后可以重新注册最新的区块资源
|
||||
useResource().clearBlockResources()
|
||||
// 因为webcomponents无法重复注册,所以需要刷新内部iframe
|
||||
getDocument().location.reload()
|
||||
useCanvas().canvasApi.value.getDocument().location.reload()
|
||||
}
|
||||
|
||||
const refreshBlock = async () => {
|
||||
|
|
|
@ -12,11 +12,10 @@
|
|||
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useBlock, useCanvas, useLayout, useNotify, usePage } from '@opentiny/tiny-engine-controller'
|
||||
import { getSchema, setSchema, selectNode } from '@opentiny/tiny-engine-canvas'
|
||||
import { constants } from '@opentiny/tiny-engine-utils'
|
||||
import { handlePageUpdate } from '@opentiny/tiny-engine-controller/js/http'
|
||||
|
||||
const { pageState, isSaved, isBlock } = useCanvas()
|
||||
const { pageState, isSaved, isBlock, canvasApi } = useCanvas()
|
||||
const { PLUGIN_NAME, getPluginApi } = useLayout()
|
||||
const { getCurrentBlock } = useBlock()
|
||||
const { PAGE_STATUS } = constants
|
||||
|
@ -58,6 +57,7 @@ const savePage = async (pageSchema) => {
|
|||
|
||||
export const saveCommon = (value) => {
|
||||
const pageSchema = JSON.parse(value)
|
||||
const { setSchema, selectNode } = canvasApi.value
|
||||
|
||||
pageState.pageSchema = pageSchema
|
||||
// setSchema 是异步,保存直接传递当前 schema
|
||||
|
@ -90,6 +90,7 @@ export const openCommon = async () => {
|
|||
const pageStatus = useLayout().layoutState?.pageStatus
|
||||
const curPageState = pageStatus?.state
|
||||
const pageInfo = pageStatus?.data
|
||||
const { getSchema } = canvasApi.value
|
||||
const ERR_MSG = {
|
||||
[PAGE_STATUS.Release]: '当前页面未锁定,请先锁定再保存',
|
||||
[PAGE_STATUS.Empty]: '当前应用无页面,请先新建页面再保存',
|
||||
|
|
Loading…
Reference in New Issue