Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: customized canvas entry #850

Merged
merged 12 commits into from
Oct 10, 2024
Merged
Show file tree
Hide file tree
Changes from 11 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const getDevAlias = (useSourceAlias) => {
'@opentiny/tiny-engine-svgs': path.resolve(basePath, 'packages/svgs/index.js'),
'@opentiny/tiny-engine-http': path.resolve(basePath, 'packages/http/src/index.js'),
'@opentiny/tiny-engine-canvas': path.resolve(basePath, 'packages/canvas/index.js'),
'@opentiny/tiny-engine-canvas/render': path.resolve(basePath, 'packages/canvas/render/index.js'),
'@opentiny/tiny-engine-utils': path.resolve(basePath, 'packages/utils/src/index.js'),
'@opentiny/tiny-engine-webcomponent-core': path.resolve(basePath, 'packages/webcomponent/src/lib.js'),
'@opentiny/tiny-engine-i18n-host': path.resolve(basePath, 'packages/i18n/src/lib.js'),
Expand Down
File renamed without changes.
20 changes: 14 additions & 6 deletions packages/canvas/DesignCanvas/src/DesignCanvas.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
:is="CanvasContainer.entry"
:controller="controller"
:materials-panel="materialsPanel"
:canvas-src="canvasUrl"
:canvas-src="canvasSrc"
:canvas-src-doc="canvasSrcDoc"
@remove="removeNode"
@selected="nodeSelected"
></component>
Expand All @@ -26,13 +27,15 @@ import {
useHistory,
useModal,
getMergeRegistry,
getMergeMeta
getMergeMeta,
getOptions
} from '@opentiny/tiny-engine-meta-register'
import { useHttp } from '@opentiny/tiny-engine-http'
import { constants } from '@opentiny/tiny-engine-utils'
import * as ast from '@opentiny/tiny-engine-common/js/ast'
import { initCanvas } from '../../init-canvas/init-canvas'
import { getImportMapData } from './importMap'
import meta from '../meta'

const { PAGE_STATUS } = constants

Expand All @@ -52,6 +55,13 @@ export default {
const showMask = ref(true)
const canvasRef = ref(null)
let showModal = false // 弹窗标识
const { canvasSrc = '' } = getOptions(meta.id) || {}
let canvasSrcDoc = ''

if (!canvasSrc) {
const { importMap, importStyles } = getImportMapData(getMergeMeta('engine.config')?.importMapVersion)
canvasSrcDoc = initCanvas(importMap, importStyles)
}

const removeNode = (node) => {
const { pageState } = useCanvas()
Expand Down Expand Up @@ -158,12 +168,10 @@ export default {
canvasResizeObserver?.disconnect?.()
})

const { importMap, importStyles } = getImportMapData(getMergeMeta('engine.config')?.importMapVersion)
const { html: canvasUrl } = initCanvas(importMap, importStyles)

return {
removeNode,
canvasUrl,
canvasSrc,
canvasSrcDoc,
nodeSelected,
footData,
materialsPanel,
Expand Down
20 changes: 12 additions & 8 deletions packages/canvas/container/src/CanvasContainer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,14 @@
<canvas-divider :selectState="selectState"></canvas-divider>
<canvas-resize-border :iframe="iframe"></canvas-resize-border>
<canvas-resize>
<iframe
v-if="!loading"
id="canvas"
ref="iframe"
:srcdoc="canvasSrc"
style="border: none; width: 100%; height: 100%"
></iframe>
<template v-if="!loading">
<iframe
id="canvas"
ref="iframe"
:[srcAttrName]="canvasSrc || canvasSrcDoc"
style="border: none; width: 100%; height: 100%"
></iframe>
</template>
<div v-else class="datainit-tip">应用数据初始化中...</div>
</canvas-resize>
<canvas-menu @insert="insertComponent"></canvas-menu>
Expand Down Expand Up @@ -63,6 +64,7 @@ export default {
props: {
controller: Object,
canvasSrc: String,
canvasSrcDoc: String,
materialsPanel: Object
},
emits: ['selected', 'remove'],
Expand All @@ -73,6 +75,7 @@ export default {
const loading = computed(() => useCanvas().isLoading())
let showSettingModel = ref(false)
let target = ref(null)
const srcAttrName = computed(() => (props.canvasSrc ? 'src' : 'srcdoc'))

const setCurrentNode = async (event) => {
const { clientX, clientY } = event
Expand Down Expand Up @@ -241,7 +244,8 @@ export default {
target,
showSettingModel,
insertPosition,
loading
loading,
srcAttrName
}
}
}
Expand Down
8 changes: 8 additions & 0 deletions packages/canvas/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,14 @@
"files": [
"dist"
],
"exports": {
".": {
"import": "./dist/index.js"
},
"./render": {
"import": "./dist/render.js"
}
},
"repository": {
"type": "git",
"url": "https://github.com/opentiny/tiny-engine",
Expand Down
4 changes: 4 additions & 0 deletions packages/canvas/render/src/RenderMain.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import {
setContext,
getContext,
setCondition,
getCondition,
getConditions,
context,
setNode
} from './context'
Expand Down Expand Up @@ -441,6 +443,8 @@ export const api = {
getRoot,
setPagecss,
setCondition,
getCondition,
getConditions,
getGlobalState,
getDataSourceMap,
setDataSourceMap,
Expand Down
4 changes: 4 additions & 0 deletions packages/canvas/render/src/context.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,7 @@ export const getContext = () => context
export const setCondition = (id, visible = false) => {
conditions[id] = visible
}

export const getCondition = (id) => conditions[id] !== false

export const getConditions = () => conditions
4 changes: 2 additions & 2 deletions packages/canvas/render/src/runner.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
*
*/

import { createApp, h } from 'vue'
import { createApp } from 'vue'
import { addScript, addStyle, dynamicImportComponents, updateDependencies } from '../../common'
import TinyI18nHost, { I18nInjectionKey } from '@opentiny/tiny-engine-common/js/i18n'
import Main, { api } from './RenderMain'
Expand Down Expand Up @@ -49,7 +49,7 @@ const renderer = {
const create = async (config) => {
const { beforeAppCreate, appCreated } = config.lifeCycles || {}
if (typeof beforeAppCreate === 'function') {
await beforeAppCreate({ Vue: { h }, canvasWin: window, api })
await beforeAppCreate({ api: renderer })
}
App && App.unmount()
App = null
Expand Down
3 changes: 2 additions & 1 deletion packages/canvas/vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ export default defineConfig({
cssCodeSplit: true,
lib: {
entry: {
index: path.resolve(__dirname, './index.js')
index: path.resolve(__dirname, './index.js'),
render: path.resolve(__dirname, './render/index.js'),
},
name: 'canvas',
fileName: () => 'index.js',
yy-wow marked this conversation as resolved.
Show resolved Hide resolved
Expand Down
2 changes: 1 addition & 1 deletion packages/design-core/src/canvas/canvas.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
// 不能在 index.js 导出,不然主应用样式会污染画布
export { createRender } from '@opentiny/tiny-engine-canvas'
export { createRender } from '@opentiny/tiny-engine-canvas/render'
24 changes: 16 additions & 8 deletions packages/settings/events/src/components/BindEventsDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
选择已有方法或者添加新方法(点击 确定 之后将在JS面板中创建一个该名称的新方法)。
</div>
<div class="bind-event-dialog-content">
<component :is="BindEventsDialogSidebar" :eventBinding="eventBinding"></component>
<component :is="BindEventsDialogSidebar" :dialogVisible="dialogVisible" :eventBinding="eventBinding"></component>
<component :is="BindEventsDialogContent" :dialogVisible="dialogVisible"></component>
</div>
<template #footer>
Expand All @@ -32,6 +32,7 @@ import {
useCanvas,
useHistory,
useLayout,
getOptions,
getMetaApi,
META_APP
} from '@opentiny/tiny-engine-meta-register'
Expand Down Expand Up @@ -171,7 +172,7 @@ export default {
})
}

const confirm = () => {
const confirm = async () => {
if (state.tipError) {
return
}
Expand All @@ -193,13 +194,20 @@ export default {

// 需要在bindMethod之后
const functionBody = getFunctionBody()

saveMethod?.({
name: state.bindMethodInfo.name,
const { name } = state.bindMethodInfo
const method = {
name,
content: state.enableExtraParams
? `function ${state.bindMethodInfo.name}(eventArgs,${formatParams}) ${functionBody}`
: `function ${state.bindMethodInfo.name}(${formatParams}) ${functionBody}`
})
? `function ${name}(eventArgs,${formatParams}) ${functionBody}`
: `function ${name}(${formatParams}) ${functionBody}`
}
const { beforeSaveMethod } = getOptions(meta.id)

if (typeof beforeSaveMethod === 'function') {
await beforeSaveMethod(method, state.bindMethodInfo)
}

saveMethod?.(method)

activePagePlugin()
close()
Expand Down
37 changes: 35 additions & 2 deletions packages/toolbars/preview/src/Main.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
<script>
import { previewPage, previewBlock } from '@opentiny/tiny-engine-common/js/preview'
import { useBlock, useCanvas, useLayout, useNotify } from '@opentiny/tiny-engine-meta-register'
import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
import { getMergeMeta, getOptions } from '@opentiny/tiny-engine-meta-register'
hexqi marked this conversation as resolved.
Show resolved Hide resolved
import meta from '../meta'
import { ToolbarBase } from '@opentiny/tiny-engine-common'

export default {
Expand All @@ -30,7 +31,28 @@ export default {
const { isBlock, getCurrentPage, canvasApi } = useCanvas()
const { getCurrentBlock } = useBlock()

const preview = () => {
const preview = async () => {
const { beforePreview, previewMethod, afterPreview } = getOptions(meta.id)

try {
if (typeof beforePreview === 'function') {
await beforePreview()
}

if (typeof previewMethod === 'function') {
const stop = await previewMethod()

if (stop) {
return
}
}
} catch (error) {
useNotify({
type: 'error',
message: `Error in previewing: ${error}`
})
}

if (useLayout().isEmptyPage()) {
useNotify({
type: 'warning',
Expand Down Expand Up @@ -59,6 +81,17 @@ export default {
params.pageInfo.name = page?.name
previewPage(params)
}

if (typeof afterPreview === 'function') {
try {
await afterPreview()
} catch (error) {
useNotify({
type: 'error',
message: `Error in afterPreview: ${error}`
})
}
}
}

return {
Expand Down
1 change: 1 addition & 0 deletions packages/toolbars/save/src/Main.vue
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ import { useCanvas } from '@opentiny/tiny-engine-meta-register'
import { ToolbarBase } from '@opentiny/tiny-engine-common'
import { openCommon, saveCommon } from './js/index'
import { isLoading } from './js/index'

yy-wow marked this conversation as resolved.
Show resolved Hide resolved
export const api = {
saveCommon,
openCommon
Expand Down
34 changes: 34 additions & 0 deletions packages/toolbars/save/src/js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,13 @@ import {
useLayout,
useNotify,
usePage,
getOptions,
getMetaApi,
META_APP
} from '@opentiny/tiny-engine-meta-register'
import { constants } from '@opentiny/tiny-engine-utils'
import { handlePageUpdate } from '@opentiny/tiny-engine-common/js/http'
import meta from '../../meta'

const { PAGE_STATUS } = constants
const state = reactive({
Expand Down Expand Up @@ -95,6 +97,27 @@ export const openCommon = async () => {
return
}

const { beforeSave, saveMethod, saved } = getOptions(meta.id)

try {
if (typeof beforeSave === 'function') {
await beforeSave()
}

if (typeof saveMethod === 'function') {
const stop = await saveMethod()

if (stop) {
return
}
}
} catch (error) {
useNotify({
type: 'error',
message: `Error in saving: ${error}`
})
}

const pageStatus = useLayout().layoutState?.pageStatus
const curPageState = pageStatus?.state
const pageInfo = pageStatus?.data
Expand Down Expand Up @@ -138,5 +161,16 @@ export const openCommon = async () => {

saveCommon(state.code).finally(() => {
state.disabled = false

if (typeof saved === 'function') {
try {
saved()
} catch (error) {
useNotify({
type: 'error',
message: `Error in saved: ${error}`
})
}
}
})
}