{"version":3,"sources":["webpack:///./src/custom-component/basic/Group.vue?0e71","webpack:///./src/utils/style.js","webpack:///./src/custom-component/basic/Group.vue","webpack:///src/custom-component/basic/Group.vue","webpack:///./src/custom-component/basic/Group.vue?50af","webpack:///./src/custom-component/basic/Group.vue?50d2"],"names":["getStyle","style","filter","arguments","length","undefined","needUnit","result","Object","keys","forEach","key","includes","transform","getComponentRotatedStyle","styles","_objectSpread","rotate","newWidth","width","cos","height","sin","diffX","left","right","newHeight","diffY","top","bottom","render","_vm","this","_c","_self","staticClass","_l","propValue","item","component","id","tag","groupStyle","attrs","staticRenderFns","props","type","Array","default","element","created","_this","parentStyle","toPercent","methods","val"],"mappings":"gHAAA,W,kICEO,SAASA,EAASC,GAAoB,IAAbC,EAAMC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,GAC/BG,EAAW,CAGb,WACA,QACA,SACA,MACA,OACA,cACA,gBACA,gBAGEC,EAAS,GAef,OAdAC,OAAOC,KAAKR,GAAOS,SAAQ,SAAUC,GAC5BT,EAAOU,SAASD,KACL,WAARA,GACAJ,EAAOI,GAAOV,EAAMU,GAEhBL,EAASM,SAASD,KAClBJ,EAAOI,IAAQ,OAGnBJ,EAAOM,UAAYF,EAAM,IAAMV,EAAMU,GAAO,WAKjDJ,EAIJ,SAASO,EAAyBC,GACrC,IAAId,EAAKe,eAAA,GAAQD,GACjB,GAAqB,IAAjBd,EAAMgB,OAAc,CACpB,IAAMC,EAAWjB,EAAMkB,MAAQC,eAAInB,EAAMgB,QAAUhB,EAAMoB,OAASC,eAAIrB,EAAMgB,QACtEM,GAAStB,EAAMkB,MAAQD,GAAY,EACzCjB,EAAMuB,MAAQD,EACdtB,EAAMwB,MAAQxB,EAAMuB,KAAON,EAE3B,IAAMQ,EAAYzB,EAAMoB,OAASD,eAAInB,EAAMgB,QAAUhB,EAAMkB,MAAQG,eAAIrB,EAAMgB,QACvEU,GAASD,EAAYzB,EAAMoB,QAAU,EAC3CpB,EAAM2B,KAAOD,EACb1B,EAAM4B,OAAS5B,EAAM2B,IAAMF,EAE3BzB,EAAMkB,MAAQD,EACdjB,EAAMoB,OAASK,OAEfzB,EAAM4B,OAAS5B,EAAM2B,IAAM3B,EAAMoB,OACjCpB,EAAMwB,MAAQxB,EAAMuB,KAAOvB,EAAMkB,MAGrC,OAAOlB,I,gECvDX,IAAI6B,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,SAAS,CAACF,EAAG,MAAM,CAACF,EAAIK,GAAIL,EAAIM,WAAW,SAASC,GAAM,MAAO,CAACL,EAAGK,EAAKC,UAAU,CAAC5B,IAAI2B,EAAKE,GAAGC,IAAI,YAAYN,YAAY,YAAYlC,MAAOqC,EAAKI,WAAYC,MAAM,CAAC,UAAYL,EAAKD,UAAU,GAAK,YAAcC,EAAKE,GAAG,QAAUF,UAAY,MAEzUM,EAAkB,G,wBCmBP,GACfC,MAAA,CACAR,UAAA,CACAS,KAAAC,MACAC,QAAA,sBAEAC,QAAA,CACAH,KAAAtC,SAGA0C,QAAA,eAAAC,EAAA,KACAC,EAAA,KAAAH,QAAAhD,MACA,KAAAoC,UAAA3B,SAAA,SAAA6B,GAGA,IAAA/B,OAAAC,KAAA8B,EAAAG,YAAAtC,OAAA,CACA,IAAAH,EAAAe,eAAA,GAAAuB,EAAAtC,OACAsC,EAAAG,WAAA1C,eAAAC,GACAsC,EAAAG,WAAAlB,KAAA2B,EAAAE,WAAApD,EAAAuB,KAAA4B,EAAA5B,MAAA4B,EAAAjC,OACAoB,EAAAG,WAAAd,IAAAuB,EAAAE,WAAApD,EAAA2B,IAAAwB,EAAAxB,KAAAwB,EAAA/B,QACAkB,EAAAG,WAAAvB,MAAAgC,EAAAE,UAAApD,EAAAkB,MAAAiC,EAAAjC,OACAoB,EAAAG,WAAArB,OAAA8B,EAAAE,UAAApD,EAAAoB,OAAA+B,EAAA/B,aAIAiC,QAAA,CACAD,UAAA,SAAAE,GACA,WAAAA,EAAA,OChD8V,I,wBCQ1V,EAAY,eACd,EACAzB,EACAc,GACA,EACA,KACA,WACA,MAIa,e","file":"js/chunk-14bb840a.a0f638fc.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Group.vue?vue&type=style&index=0&id=d835d25c&prod&lang=scss&scoped=true&\"","import { sin, cos } from '@/utils/translate';\r\n\r\nexport function getStyle(style, filter = []) {\r\n    const needUnit = [\r\n        // 可以按需扩展\r\n        // 以下字段会加单位 px\r\n        'fontSize',\r\n        'width',\r\n        'height',\r\n        'top',\r\n        'left',\r\n        'borderWidth',\r\n        'letterSpacing',\r\n        'borderRadius',\r\n    ];\r\n\r\n    const result = {};\r\n    Object.keys(style).forEach(function (key) {\r\n        if (!filter.includes(key)) {\r\n            if (key !== 'rotate') {\r\n                result[key] = style[key];\r\n\r\n                if (needUnit.includes(key)) {\r\n                    result[key] += 'px';\r\n                }\r\n            } else {\r\n                result.transform = key + '(' + style[key] + 'deg)';\r\n            }\r\n        }\r\n    });\r\n    // console.log(result)\r\n    return result;\r\n}\r\n\r\n// 获取一个组件旋转 rotate 后的样式\r\nexport function getComponentRotatedStyle(styles) {\r\n    let style = { ...styles };\r\n    if (style.rotate !== 0) {\r\n        const newWidth = style.width * cos(style.rotate) + style.height * sin(style.rotate);\r\n        const diffX = (style.width - newWidth) / 2; // 旋转后范围变小是正值，变大是负值\r\n        style.left += diffX;\r\n        style.right = style.left + newWidth;\r\n\r\n        const newHeight = style.height * cos(style.rotate) + style.width * sin(style.rotate);\r\n        const diffY = (newHeight - style.height) / 2; // 始终是正\r\n        style.top -= diffY;\r\n        style.bottom = style.top + newHeight;\r\n\r\n        style.width = newWidth;\r\n        style.height = newHeight;\r\n    } else {\r\n        style.bottom = style.top + style.height;\r\n        style.right = style.left + style.width;\r\n    }\r\n\r\n    return style;\r\n}\r\n","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"group\"},[_c('div',[_vm._l((_vm.propValue),function(item){return [_c(item.component,{key:item.id,tag:\"component\",staticClass:\"component\",style:(item.groupStyle),attrs:{\"propValue\":item.propValue,\"id\":'component' + item.id,\"element\":item}})]})],2)])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <div class=\"group\">\r\n        <div>\r\n             <template v-for=\"item in propValue\">\r\n                <component\r\n                    class=\"component\"\r\n                    :is=\"item.component\"\r\n                    :style=\"item.groupStyle\"\r\n                    :propValue=\"item.propValue\"\r\n                    :key=\"item.id\"\r\n                    :id=\"'component' + item.id\"\r\n                    :element=\"item\"\r\n                />\r\n            </template>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport { getStyle } from '@/utils/style';\r\n\r\nexport default {\r\n    props: {\r\n        propValue: {\r\n            type: Array,\r\n            default: () => [],\r\n        },\r\n        element: {\r\n            type: Object,\r\n        },\r\n    },\r\n    created() {\r\n        const parentStyle = this.element.style;\r\n        this.propValue.forEach(component => {\r\n            // component.groupStyle 的 top left 是相对于 group 组件的位置\r\n            // 如果已存在 component.groupStyle，说明已经计算过一次了。不需要再次计算\r\n            if (!Object.keys(component.groupStyle).length) {\r\n                const style = { ...component.style };\r\n                component.groupStyle = getStyle(style);\r\n                component.groupStyle.left = this.toPercent((style.left - parentStyle.left) / parentStyle.width);\r\n                component.groupStyle.top = this.toPercent((style.top - parentStyle.top) / parentStyle.height);\r\n                component.groupStyle.width = this.toPercent(style.width / parentStyle.width);\r\n                component.groupStyle.height = this.toPercent(style.height / parentStyle.height);\r\n            }\r\n        });\r\n    },\r\n    methods: {\r\n        toPercent(val) {\r\n            return val * 100 + '%';\r\n        },\r\n    },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.group {\r\n    & > div {\r\n        position: relative;\r\n        width: 100%;\r\n        height: 100%;\r\n\r\n        .component {\r\n            position: absolute;\r\n        }\r\n    }\r\n}\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Group.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Group.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Group.vue?vue&type=template&id=d835d25c&scoped=true&\"\nimport script from \"./Group.vue?vue&type=script&lang=js&\"\nexport * from \"./Group.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Group.vue?vue&type=style&index=0&id=d835d25c&prod&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"d835d25c\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}