自定义事件“抽奖成功”(app.emit('draw:success', node)) --> 触发蒙层弹窗方法“打开蒙层”（成功） --> 再触发“中奖弹窗”组件自定义方法“弹窗警告”（失败）

原因调试定位到：
package/core/src/App.ts里面的bindEvents()方法判断响应方法的地方，204行：
if (typeof toNode.instance?.[methodName] === 'function') {

这里的toNode.instance 为 undefined，所以无法调用对应的方法：toNode.instance?.[methodName]

但是如果修改一下bindEvents() 里面代码，把上面的判断条件放到setTimeout里面调用toNode.instance?.[methodName]可以调用到。

现在问题是：
能不能在不修改package/core里面的代码情况下，实现自定义组件的自定义事件触发组件方法？

@tmegic/editor 库中services 的ui.ts文件里面的setColumnWidth方法建议修改代码为
if (left && left >= 0) { columnWidth.left = left; }else{ columnWidth.left = defaultColumnWidth.left; } if (right && right >= 0) { columnWidth.right = right; }else{ columnWidth.right = defaultColumnWidth.right; }

报错路径是：
src/main.ts:
import MagicEditor from '@tmagic/editor';
...
app.use(MagicEditor);
->

@tmagic/editor/dist/tmagic-editor.es.js:
import serialize from 'serialize-javascript';
->

serialize-javascript/index.js:
var randomBytes = require('randombytes');
->

randombytes/browser.js:
var Buffer = require('safe-buffer').Buffer
->Uncaught TypeError: Cannot read properties of undefined (reading 'from')

报错信息：

@tmagic_editor.js?v=c6492491:707 Uncaught TypeError: Cannot read properties of undefined (reading 'from')

Uncaught TypeError: Cannot read properties of undefined (reading 'from')
at node_modules/safe-buffer/index.js (@tmagic_editor.js?v=c6492491:707:16)
at __require2 (chunk-TMRFOBSY.js?v=9ed9471b:47:50)
at node_modules/randombytes/browser.js (@tmagic_editor.js?v=c6492491:764:18)
at __require2 (chunk-TMRFOBSY.js?v=9ed9471b:47:50)
at node_modules/serialize-javascript/index.js (@tmagic_editor.js?v=c6492491:798:23)
at __require2 (chunk-TMRFOBSY.js?v=9ed9471b:47:50)
at @tmagic_editor.js?v=c6492491:2893:43

我觉得可以把使用的数据库版本号,也写到对应的文档上

bug描述

cd runtime/vue3目录下执行yarn build报错，报错如下：

yarn run v1.22.17
$ node scripts/build.js && vite build
node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module 'recast'

自我诊断

yarn build后会执行runtime/scripts/generateEntry.js，脚本中的const { parse, prettyPrint, types } = require('recast');命令所需依赖在子目录中，而在当前目录找不到该依赖导致报错

本地启动runtime-vue2
修改如下：
package.json "playground": "lerna run dev --scope tmagic-playground --scope runtime-vue2 --parallel", 默认vue3 改为runtime-vue2
playground\src\pages\Editor.vue const RUNTIME_PATH = '/tmagic-editor/playground/runtime/vue2'; 默认vue3改为vue2
npm run playground 启动正常，页面中间的工作区域为空。

控制台报错如下：
GET http://localhost:8101/tmagic-editor/playground/runtime/vue2/assets/event.js net::ERR_ABORTED 404 (Not Found)

[Vue warn]: Error in data(): "TypeError: Cannot read properties of null (reading 'config')"
found in
--->

TypeError: Cannot read properties of null (reading 'config')
[Vue warn]: Error in render: "TypeError: e.display is not a function"

以上，麻烦看一下。
谢谢！

环境如下
CPU: M1 max
系统：MacOS Monterey
node: v16.13.2
npm: 8.1.2
yarn: 1.22.17

运行 yarn 安装依赖后 运行 yarn bootstrap 报错如下

lerna notice cli v4.0.0
lerna info Bootstrapping 14 packages
lerna info Installing external dependencies
lerna info hoist Installing hoisted dependencies into root
lerna info hoist Pruning hoisted dependencies
lerna info hoist Finished pruning hoisted dependencies
lerna ERR! npm install exited 1 in 'tmagic'
lerna ERR! npm install stderr:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   peer vue@">= 2.5 < 3" from @vue/[email protected]
npm ERR!   node_modules/@vue/composition-api
npm ERR!     @vue/composition-api@"1.0.5" from the root project
npm ERR!     peerOptional @vue/composition-api@"^1.0.0-rc.1" from [email protected]
npm ERR!     packages/editor/node_modules/element-plus/node_modules/@vueuse/core/node_modules/vue-demi
npm ERR!       vue-demi@"*" from @vueuse/[email protected]
npm ERR!       packages/editor/node_modules/element-plus/node_modules/@vueuse/core
npm ERR!         @vueuse/core@"^8.2.6" from [email protected]
npm ERR!         packages/editor/node_modules/element-plus
npm ERR!       1 more (@vueuse/shared)
npm ERR!     1 more (vue-demi)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! @vue/vue3-jest@"^27.0.0-alpha.4" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vue
npm ERR!   peer vue@"^3.0.0-0" from @vue/[email protected]
npm ERR!   node_modules/@vue/vue3-jest
npm ERR!     @vue/vue3-jest@"^27.0.0-alpha.4" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

这是什么垃圾？组件还要自己写？不开源？被百度的amis甩十八条街

比如点击A组件，把选择的结果作为B组件的动作入参，好像没看到具体的参数配置

个人认为吸附、旋转等功能是很有必要的

如图所示：

进magic-admin的时候执行setup.sh即web build的时候报一堆Unable to compile TypeScript问题

node版本:14.19.3
安装依赖无任何报错
报错信息:
/magic-admin/server/node_modules/_ts-node@8.10.2@ts-node/src/index.ts:434
return new TSError(diagnosticText, diagnosticCodes)
^
TSError: ⨯ Unable to compile TypeScript:
src/service/act.ts:185:9 - error TS2322: Type '{ actId: number; }' is not assignable to type 'AllowArray<Fn | Literal | Where | Json | WhereAttributeHash | { [or]: AllowArray<AllowArray<Fn | Literal | Where | ... 4 more ... | { ...; }>>; } | { ...; } | { ...; }>'.
Property 'clone' is missing in type '{ actId: number; }' but required in type 'Fn'.

.....

node_modules/sequelize/types/model.d.ts:52:3
52 where?: WhereOptions;
~~~~~
The expected type comes from property 'where' which is declared here on type 'FindOptions'
src/service/act.ts:346:14 - error TS2339: Property 'toJSON' does not exist on type 'ActInfo'.

346 return act.toJSON() as ActInfoIncludePage;

在runtime vue3模块中打包完成后，并没有vendorxxx.js这个文件，不知道是不是这个文件导致无法访问

Install fail! Error: [@tmagic/editor@next] Can't find package @tmagic/editor@next

使用 setup.sh 运行的项目，但是在编辑页面出现错误！

希望能够再详细说一下项目中runtimeUrl的配置

目前项目中需要用到多端发布能力，如果近期没有计划支持，可以简单介绍下实现思路吗？

代码编辑功能使用频率本来不高（或者只需一个简单的json/js编辑器），build打包出来的文件大小，monaco-editor占比却非常高，包含各种无用语言的scripts文件。

我看了里面的内容，在ui-vue2中的Component.vue中，会提示找不到config，导致page中无法渲染，

使用vite就会报错, 使用vue-cli就不会报错

import MagicEditor from "@tmagic/editor";

Uncaught Error: Secure random number generation is not supported by this browser.
Use Chrome, Firefox or Internet Explorer 11
at oldBrowser (browser.js:12:9)
at generateUID (index.js:38:17)
at node_modules/_serialize-javascript@6.0.0@serialize-javascript/index.js (index.js:13:27)
at __require2 (chunk-JZING22Y.js?v=cd9a69f8:47:50)
at dep:@tmagic_editor:1:1

我使用官网上的教程https://tencent.github.io/tmagic-editor/docs/tutorial/hello-world.html#%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE
然后我的项目报错

如题

下面是错误提示新消息

> [email protected] playground
> lerna run dev --scope tmagic-playground --scope runtime-vue3 --parallel

lerna notice cli v4.0.0
lerna notice filter including ["tmagic-playground","runtime-vue3"]
lerna info filter [ 'tmagic-playground', 'runtime-vue3' ]
lerna info Executing command in 2 packages: "npm run dev"
runtime-vue3: > [email protected] dev
runtime-vue3: > npm run build && npm run serve
tmagic-playground: > [email protected] dev
tmagic-playground: > vite
runtime-vue3: > [email protected] build
runtime-vue3: > export NODE_OPTIONS=--openssl-legacy-provider && node scripts/build.js && vite build
runtime-vue3: node:internal/modules/cjs/loader:936
runtime-vue3:   throw err;
runtime-vue3:   ^
runtime-vue3: Error: Cannot find module 'recast'
runtime-vue3: Require stack:
runtime-vue3: - /Users/IvanChu/Documents/angularjs2_demo/tmagic-editor/runtime/scripts/generateEntry.js
runtime-vue3: - /Users/IvanChu/Documents/angularjs2_demo/tmagic-editor/runtime/vue3/scripts/build.js
runtime-vue3:     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
runtime-vue3:     at Function.Module._load (node:internal/modules/cjs/loader:778:27)
runtime-vue3:     at Module.require (node:internal/modules/cjs/loader:999:19)
runtime-vue3:     at require (node:internal/modules/cjs/helpers:102:18)
runtime-vue3:     at Object.<anonymous> (/Users/IvanChu/Documents/angularjs2_demo/tmagic-editor/runtime/scripts/generateEntry.js:24:39)
runtime-vue3:     at Module._compile (node:internal/modules/cjs/loader:1097:14)
runtime-vue3:     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1151:10)
runtime-vue3:     at Module.load (node:internal/modules/cjs/loader:975:32)
runtime-vue3:     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
runtime-vue3:     at Module.require (node:internal/modules/cjs/loader:999:19) {
runtime-vue3:   code: 'MODULE_NOT_FOUND',
runtime-vue3:   requireStack: [
runtime-vue3:     '/Users/IvanChu/Documents/angularjs2_demo/tmagic-editor/runtime/scripts/generateEntry.js',
runtime-vue3:     '/Users/IvanChu/Documents/angularjs2_demo/tmagic-editor/runtime/vue3/scripts/build.js'
runtime-vue3:   ]
runtime-vue3: }
runtime-vue3: Node.js v17.6.0
runtime-vue3: npm notice 

根据https://tencent.github.io/tmagic-editor/docs/tutorial/runtime.html教程搭建项目，runtime项目以打包产物的形式放入editor项目的public文件夹下，正常运行后，添加组件成功，但有以下现象：
1、新建页面后，滚动鼠标滚轮，报错：
Uncaught Error: page 未初始化
at StageMask.mouseWheelHandler (StageMask.ts:324:27)
2、焦点在页面的情况下，拖动，报错：
Uncaught (in promise) Error: 没有配置或者配置缺少id值
at Editor$1.update (editor.ts:391:28)
at dispatch (compose.ts:27:32)
at compose.ts:19:12
at doAction (BaseService.ts:53:34)
at BaseService.ts:147:37
at Editor$1.doTask (BaseService.ts:181:13)
at Editor$1.value (BaseService.ts:156:18)
at Editor$1.sort (editor.ts:464:16)
at dispatch (compose.ts:27:32)
at compose.ts:19:12
3、修改组件高度，能改变并且反馈到右侧样式面板，反之，没有反应
4、组件依旧如教程helloworld一般，不能拖动

 ERR_PNPM_FETCH_403  GET https://registry-node.aliyun.com/org/1166572487057521/registry/comall/ansi-styles/-/ansi-styles-3.2.1.tgz: Forbidden - 403

act_id 自增ID导致 Crypto.encode 方法报错

执行的测试runtime: vue3 runtime

一直刷新页面,有时runtime下的vue3的playground App.vue的onMounted 会早于 StageRender里的 loadHandler执行,造成onMounted 时, window还未挂载magic, 导致不会执行onRuntimeReady, 导致页面有时空白.

另问一下: 为什么 runtime vue3里的playground里的App.vue ,要使用:

const componentUrl = '/tmagic-editor/playground/runtime/vue3/assets/components.js';
import(componentUrl)

为什么不像page的 app.vue里一直直接使用

import entry from '../comp-entry';
const { components, plugins } = entry;

是有其它原因吗?

我把这种加载方式改掉, 然后onMounted 里添加

window.addEventListener('message', ({ data }) => {
        if (!data.tmagicRuntimeReady) {
          return;
        }
        window.magic?.onRuntimeReady({
          getApp() {
            return app;
          },
...

就可以解决这个有时白屏的现象, 但是没有发pr, 不知道原来的写法是不是有别的用途

前置操作：

1. 修改 db 配置
2. npm i 安装依赖
3. npm run dev

报错信息：

[email protected] dev
nodemon

[nodemon] 1.19.4
[nodemon] to restart at any time, enter rs
[nodemon] watching dir(s): src/**/*
[nodemon] watching extensions: ts
[nodemon] starting ts-node -r tsconfig-paths/register src/index.ts --files

/Users/yuzf/walle/tmagic-editor/magic-admin/server/node_modules/ts-node/src/index.ts:434
return new TSError(diagnosticText, diagnosticCodes)
^
TSError: ⨯ Unable to compile TypeScript:
src/index.ts:26:9 - error TS2354: This syntax requires an imported helper but module 'tslib' cannot be found.

26 const { PORT } = process.env;
~~~~

at createTSError (/Users/yuzf/walle/tmagic-editor/magic-admin/server/node_modules/ts-node/src/index.ts:434:12)
at reportTSError (/Users/yuzf/walle/tmagic-editor/magic-admin/server/node_modules/ts-node/src/index.ts:438:19)
at getOutput (/Users/yuzf/walle/tmagic-editor/magic-admin/server/node_modules/ts-node/src/index.ts:578:36)
at Object.compile (/Users/yuzf/walle/tmagic-editor/magic-admin/server/node_modules/ts-node/src/index.ts:775:32)
at Module.m._compile (/Users/yuzf/walle/tmagic-editor/magic-admin/server/node_modules/ts-node/src/index.ts:858:43)
at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Object.require.extensions.<computed> [as .ts] (/Users/yuzf/walle/tmagic-editor/magic-admin/server/node_modules/ts-node/src/index.ts:861:12)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)

node 版本：v16.15.0
npm 版本：8.5.5
操作系统：Darwin MacBook-Pro.local 19.6.0 Darwin Kernel Version 19.6.0: Thu Oct 29 22:56:45 PDT 2020; root:xnu-6153.141.2.2~1/RELEASE_X86_64 x86_64

阿里云的lowcode-engine相关文章低代码渲染那些事里说:

渲染方式主要有两个大类:

• 出码渲染
• 运行时渲染
  其中在阿里内部大多数低代码平台中，我们主要使用的都是运行时渲染，包括宜搭低代码产品，只有少部分对性能要求较高的产品才会使用出码渲染的方式。

tmagic-editor 没有考虑过出码渲染?

！文档容易崩！文档容易崩！文档容易崩！文档容易崩

在packages/ui/src中新增组件，组件包含默认class样式，组件完成后在playground中配置使用，发现在editor编辑器中定义的class样式无法加载，能解释下这样处理的原因吗？如果样式全靠配置，配置工作量太大了，不太合理吧？

体验版

再次打扰，抱歉

我想在自定义组件中使用其他UI库，如将ElementPlus中的Image组件包装为自定义组件

那我应该怎样做才能保证其elementPlus的ui能够正确渲染呢？

我试过在组件中引入了elementplus、在runtime中引入、在主体项目中引用，都无法正确渲染，希望能得到解答，谢谢！

组件列表,展示根据当前编辑的模式进行加载相应组件,避免有些定制化组件在pc或者mobile下不支持的问题

比如,组件在pc模式下的显示控制,
专属于pc模式的组件,
专属于mobile模式下的组件

如图
设置宽度无效, 画布不会改变大小, 也无滚动条

设置高度过小时会导致组件无法选中

使用 magic-admin/server端，发布项目页面，打开浏览器控制台报错

系统环境

• NodeJs v16.13.0
• @vue/cli 5.0.6
• 谷歌浏览器：101.0.4951.54（正式版本） (arm64)

问题描述

• 执行 setup.sh 脚本
• 运行 magic-admin/server 端， 以开发环境运行 npm run dev。
• 访问 localhost:3001 中 web端页面，新建活动并编辑页面保存并发布。
• 访问项目页面 http://localhost:3001/publish/hello.html
• 使用 magic-admin 自带的 runtime 模板渲染项目页面报错。

生成的项目页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magic App</title>
    <script type="module" src="./uiconfig_hello.js"></script>
    <script src="https://unpkg.com/vue@next/dist/vue.runtime.global.js"></script>
    <script
      type="module"
      crossorigin
      src="/runtime/vue3/assets/page.js"
    ></script>
    <link rel="modulepreload" href="/runtime/vue3/assets/vendor.3f0d9265.js" />
    <link
      rel="modulepreload"
      href="/runtime/vue3/assets/resetcss.b08d57c8.js"
    />
    <link
      rel="modulepreload"
      href="/runtime/vue3/assets/plugin-vue_export-helper.3811b543.js"
    />
    <link rel="modulepreload" href="/runtime/vue3/assets/components.js" />
    <link rel="stylesheet" href="/runtime/vue3/assets/resetcss.52e41e6b.css" />
    <link rel="stylesheet" href="/runtime/vue3/assets/page.6c73043b.css" />
    <script>
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

生成项目页面对应的 DSL描述文件

window.magicUiconfig=[{type:"app",id:17,items:[{id:19,type:"page",name:"hello",title:"helloWorld",style:{height:"728",width:"375",position:"relative",layout:"absolute",left:0,top:0,right:"",bottom:"",backgroundImage:"",backgroundColor:"",backgroundRepeat:"no-repeat",backgroundSize:"100% 100%",color:"",fontSize:"",fontWeight:"",transform:{rotate:"",scale:""}},items:[{type:"text",id:"text_5222",style:{position:"absolute",width:"100",height:"auto",top:121.44186401367188,left:83.43206787109375,right:"",bottom:"",backgroundImage:"",backgroundColor:"",backgroundRepeat:"no-repeat",backgroundSize:"100% 100%",color:"",fontSize:"",fontWeight:"",transform:{rotate:"",scale:""}},name:"文本",text:"HelloWorld",multiple:!0,events:[],created:""}],layout:"absolute",events:[],created:""}],abTest:[]}];

一处是execSync(node -e "require.resolve('${package}')", { stdio: 'ignore' });
我临时修改为

还有一处是generateEntryFile里面，我临时增加了转义

请问右边的样式区里的固定定位如何赋初始值，组件中的initValue.ts赋style: {position: 'fixed',}不生效

操作界面：

报错信息：

你好，
看了Playground演示页面，页面被解析成了JSON格式，引擎能否支持导出.vue 或者 .jsx格式的web代码？

最新的 master 执行 npm run pg 然后修改，然后出现报错

请问这个是版本问题吗 ？

错误消息：Field 'act_crypto_id' doesn't have a default value

请教一下关于packages/form使用，看了一下目前的相关文档没有说明和是否能直接在playground引入使用，谢谢

无论是根据hellowworld文档写出来的代码，还是复制教程代码（https://github.com/jia000/tmagic-tutorial）运行，点击组件的时候都报以下错误：
Uncaught (in promise) Error: app下不能添加组件
at Editor$1.add (editor.ts:297:13)
at async doAction (BaseService.ts:53:28)
add @ editor.ts:297

如题

缺少 pm2.config.js