{"version":3,"mappings":"yEAAA,KAAM,GAAY,gBAAsB,EAAO,CAAE,EAAO,EAAO,YAAyB,EAAgB,SAAiB,EAAY,EAAM,CAEvI,MAAI,CAAwB,GAAQ,EAAK,SAAW,EACzC,EAAU,EAEd,QAAQ,IAAI,EAAK,IAAI,CAAC,EAAQ,CAIjC,GAFA,EAAM,GAAG,IAAO,IAEZ,IAAO,GACP,OAEJ,EAAK,GAAO,GACZ,KAAM,GAAQ,EAAI,SAAS,MAAM,EAC3B,EAAc,EAAQ,qBAAuB,GAEnD,GAAI,SAAS,cAAc,cAAc,MAAQ,GAAa,EAC1D,OAGJ,KAAM,GAAO,SAAS,cAAc,MAAM,EAU1C,GARA,EAAK,IAAM,EAAQ,aAAe,EAC7B,GACD,GAAK,GAAK,SACV,EAAK,YAAc,IAEvB,EAAK,KAAO,EAEZ,SAAS,KAAK,YAAY,CAAI,EAC1B,EACA,MAAO,IAAI,SAAQ,CAAC,EAAK,IAAQ,CAC7B,EAAK,iBAAiB,OAAQ,CAAG,EACjC,EAAK,iBAAiB,QAAS,IAAM,EAAI,GAAI,OAAM,6BAA6B,GAAK,CAAC,CAAC,CACvG,CAAa,CAER,EAAC,EAAE,KAAK,IAAM,EAAY,EAC/B,ECnBA,QAAkB,IAAa,yBAE3B,QAAa,IAAU,MACvB,EAAkB,IAAQ,MAC1B,EAAmB,IAAQ,MAE3B,EAAmB,IACjB,0KAGF,SAAqB,eACN,iBACH,GAGZ,4BAEA,sBACE,KAAM,KAAS,WACf,iDACA,iCAAwC,GAG1C,yBACE,0CAA6B,SAEzB,QAAO,EACT,oBAGE,+BACA,UACA,+BAAsC,EACxC,gBAGE,gCACA,UACA,qBAAe,EACjB,kBAGE,qEAAiF,EACnF,UAGE,+BACA,UACA,wCACA,UAEO,wDAAqE,EAC9E,sBAIE,GADA,4BACA,SAAiB,yBACjB,YAAuB,yBACvB,6BACA,UACA,6BACA,MAAa,wDACb,4BAAyB,EAC3B,yBAIE,GADA,+BACA,SAAiB,yBACjB,0BACA,UACA,UACA,MAAW,8DACX,MAAa,wDACb,6DACA,mBAA8B,gBAAgB,EAChD,qBAGE,YAAiB,yBACjB,uBACA,UACA,MAAW,8DACX,gBACA,MAAa,wDACb,6DACA,mBAA4B,CAC9B,EACD,GAGH,CAAO,YACL,CACF,CAEJ,yEA/GuB,qCAArB,IAAsE,wCAA5B,6JCqB5C,mIACE,wCACA,EAAiB,iBAEjB,6BACE,qBAA4C,GAG9C,6BACE,QAAmB,GAGrB,eACF","names":[],"sources":["../../vite/preload-helper","../../src/playground/App.vue","../../src/playground/main.ts"],"sourcesContent":["const scriptRel = 'modulepreload';const seen = {};const base = '/runtime/';export const __vitePreload = function preload(baseModule, deps) {\n    // @ts-ignore\n    if (!__VITE_IS_MODERN__ || !deps || deps.length === 0) {\n        return baseModule();\n    }\n    return Promise.all(deps.map((dep) => {\n        // @ts-ignore\n        dep = `${base}${dep}`;\n        // @ts-ignore\n        if (dep in seen)\n            return;\n        // @ts-ignore\n        seen[dep] = true;\n        const isCss = dep.endsWith('.css');\n        const cssSelector = isCss ? '[rel=\"stylesheet\"]' : '';\n        // @ts-ignore check if the file is already preloaded by SSR markup\n        if (document.querySelector(`link[href=\"${dep}\"]${cssSelector}`)) {\n            return;\n        }\n        // @ts-ignore\n        const link = document.createElement('link');\n        // @ts-ignore\n        link.rel = isCss ? 'stylesheet' : scriptRel;\n        if (!isCss) {\n            link.as = 'script';\n            link.crossOrigin = '';\n        }\n        link.href = dep;\n        // @ts-ignore\n        document.head.appendChild(link);\n        if (isCss) {\n            return new Promise((res, rej) => {\n                link.addEventListener('load', res);\n                link.addEventListener('error', () => rej(new Error(`Unable to preload CSS for ${dep}`)));\n            });\n        }\n    })).then(() => baseModule());\n}","<template>\n  <magic-ui-page v-if=\"pageConfig\" :config=\"pageConfig\"></magic-ui-page>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, nextTick, onMounted, provide, reactive, ref, watch } from 'vue';\n\nimport Core from '@tmagic/core';\nimport type { Id, MApp, MNode } from '@tmagic/schema';\nimport { Magic, RemoveData, UpdateData } from '@tmagic/stage';\nimport { getNodePath } from '@tmagic/utils';\n\ndeclare global {\n  interface Window {\n    magic: Magic;\n  }\n}\n\nexport default defineComponent({\n  setup() {\n    const root = ref<MApp>();\n    const curPageId = ref<Id>();\n    const selectedId = ref<Id>();\n\n    const pageConfig = computed(\n      () => root.value?.items?.find((item: MNode) => item.id === curPageId.value) || root.value?.items?.[0],\n    );\n\n    const app = new Core({\n      config: root.value,\n      platform: 'editor',\n    });\n\n    provide('app', app);\n\n    watch(pageConfig, async () => {\n      await nextTick();\n      const page = document.querySelector<HTMLElement>('.magic-ui-page');\n      page && window.magic.onPageElUpdate(page);\n    });\n\n    onMounted(() => {\n      window.magic?.onRuntimeReady({\n        getApp() {\n          return app;\n        },\n\n        updateRootConfig(config: MApp) {\n          console.log('update config', config);\n          root.value = config;\n          app?.setConfig(config, curPageId.value);\n        },\n\n        updatePageId(id: Id) {\n          console.log('update page id', id);\n          curPageId.value = id;\n          app?.setPage(id);\n        },\n\n        getSnapElements() {\n          return Array.from(document.querySelectorAll<HTMLElement>('[class*=magic-ui][id]'));\n        },\n\n        select(id: Id) {\n          console.log('select config', id);\n          selectedId.value = id;\n          const el = document.getElementById(`${id}`);\n          if (el) return el;\n          // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取\n          return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);\n        },\n\n        add({ config }: UpdateData) {\n          console.log('add config', config);\n          if (!root.value) throw new Error('error');\n          if (!selectedId.value) throw new Error('error');\n          const path = getNodePath(selectedId.value, [root.value]);\n          const node = path.pop();\n          const parent = node?.items ? node : path.pop();\n          if (!parent) throw new Error('未找到父节点');\n          parent.items?.push(config);\n        },\n\n        update({ config }: UpdateData) {\n          console.log('update config', config);\n          if (!root.value) throw new Error('error');\n          const path = getNodePath(config.id, [root.value]);\n          const node = path.pop();\n          const parent = path.pop();\n          if (!node) throw new Error('未找到目标节点');\n          if (!parent) throw new Error('未找到父节点');\n          const index = parent.items?.findIndex((child: MNode) => child.id === node.id);\n          parent.items.splice(index, 1, reactive(config));\n        },\n\n        remove({ id }: RemoveData) {\n          if (!root.value) throw new Error('error');\n          const path = getNodePath(id, [root.value]);\n          const node = path.pop();\n          if (!node) throw new Error('未找到目标元素');\n          const parent = path.pop();\n          if (!parent) throw new Error('未找到父元素');\n          const index = parent.items?.findIndex((child: MNode) => child.id === node.id);\n          parent.items.splice(index, 1);\n        },\n      });\n    });\n\n    return {\n      pageConfig,\n    };\n  },\n});\n</script>\n\n<style lang=\"scss\">\nhtml,\nbody,\n#app {\n  width: 100%;\n  height: 100%;\n}\n\n#app {\n  position: relative;\n  overflow: auto;\n\n  &::-webkit-scrollbar {\n    width: 0;\n  }\n}\n\n.magic-ui-container {\n  background-color: rgba(136, 136, 136, 0.5);\n}\n\n.action-area {\n  background-color: rgba(51, 153, 255, 0.5) !important;\n}\n</style>\n","/*\n * Tencent is pleased to support the open source community by making TMagicEditor available.\n *\n * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { createApp } from 'vue';\n\nimport App from './App.vue';\n\nimport('../comp-entry').then((entry) => {\n  const { components, plugins } = entry.default;\n  const magicApp = createApp(App);\n\n  Object.values(components).forEach((component: any) => {\n    magicApp.component(component.name, component);\n  });\n\n  Object.values(plugins).forEach((plugin: any) => {\n    magicApp.use(plugin);\n  });\n\n  magicApp.mount('#app');\n});\n"],"file":"assets/playground.js"}