可視化拖拽組件庫一些技術要點原理分析

// 獲取編輯器的位移信息const rectInfo = this.editor.getBoundingClientRect()this.editorX = rectInfo.xthis.editorY = rectInfo.y
const startX = e.clientXconst startY = e.clientYthis.start.x = startX - this.editorXthis.start.y = startY - this.editorY// 展示選中區(qū)域this.isShowArea = true
const move = (moveEvent) => {    this.width = Math.abs(moveEvent.clientX - startX)    this.height = Math.abs(moveEvent.clientY - startY)    if (moveEvent.clientX < startX) {        this.start.x = moveEvent.clientX - this.editorX    }
    if (moveEvent.clientY < startY) {        this.start.y = moveEvent.clientY - this.editorY    }}

createGroup() {  // 獲取選中區(qū)域的組件數(shù)據(jù)  const areaData = this.getSelectArea()  if (areaData.length <= 1) {      this.hideArea()      return  }
  // 根據(jù)選中區(qū)域和區(qū)域中每個組件的位移信息來創(chuàng)建 Group 組件  // 要遍歷選擇區(qū)域的每個組件，獲取它們的 left top right bottom 信息來進行比較  let top = Infinity, left = Infinity  let right = -Infinity, bottom = -Infinity  areaData.forEach(component => {      let style = {}      if (component.component == 'Group') {          component.propValue.forEach(item => {              const rectInfo = $(`#component${item.id}`).getBoundingClientRect()              style.left = rectInfo.left - this.editorX              style.top = rectInfo.top - this.editorY              style.right = rectInfo.right - this.editorX              style.bottom = rectInfo.bottom - this.editorY
              if (style.left < left) left = style.left              if (style.top < top) top = style.top              if (style.right > right) right = style.right              if (style.bottom > bottom) bottom = style.bottom          })      } else {          style = getComponentRotatedStyle(component.style)      }
      if (style.left < left) left = style.left      if (style.top < top) top = style.top      if (style.right > right) right = style.right      if (style.bottom > bottom) bottom = style.bottom  })
  this.start.x = left  this.start.y = top  this.width = right - left  this.height = bottom - top
  // 設置選中區(qū)域位移大小信息和區(qū)域內(nèi)的組件數(shù)據(jù)  this.$store.commit('setAreaData', {      style: {          left,          top,          width: this.width,          height: this.height,      },      components: areaData,  })},
getSelectArea() {    const result = []    // 區(qū)域起點坐標    const { x, y } = this.start    // 計算所有的組件數(shù)據(jù)，判斷是否在選中區(qū)域內(nèi)    this.componentData.forEach(component => {        if (component.isLock) return        const { left, top, width, height } = component.style        if (x <= left && y <= top && (left + width <= x + this.width) && (top + height <= y + this.height)) {            result.push(component)        }    })
    // 返回在選中區(qū)域內(nèi)的所有組件    return result}

<template>    <div class="group">        <div>             <template v-for="item in propValue">                <component                    class="component"                    :is="item.component"                    :style="item.groupStyle"                    :propValue="item.propValue"                    :key="item.id"                    :id="'component' + item.id"                    :element="item"                />            </template>        </div>    </div></template>
<script>import { getStyle } from '@/utils/style'
export default {    props: {        propValue: {            type: Array,            default: () => [],        },        element: {            type: Object,        },    },    created() {        const parentStyle = this.element.style        this.propValue.forEach(component => {            // component.groupStyle 的 top left 是相對于 group 組件的位置            // 如果已存在 component.groupStyle，說明已經(jīng)計算過一次了。不需要再次計算            if (!Object.keys(component.groupStyle).length) {                const style = { ...component.style }                component.groupStyle = getStyle(style)                component.groupStyle.left = this.toPercent((style.left - parentStyle.left) / parentStyle.width)                component.groupStyle.top = this.toPercent((style.top - parentStyle.top) / parentStyle.height)                component.groupStyle.width = this.toPercent(style.width / parentStyle.width)                component.groupStyle.height = this.toPercent(style.height / parentStyle.height)            }        })    },    methods: {        toPercent(val) {            return val * 100 + '%'        },    },}</script>
<style lang="scss" scoped>.group {    & > div {        position: relative;        width: 100%;        height: 100%;
        .component {            position: absolute;        }    }}</style>

created() {    const parentStyle = this.element.style    this.propValue.forEach(component => {        // component.groupStyle 的 top left 是相對于 group 組件的位置        // 如果已存在 component.groupStyle，說明已經(jīng)計算過一次了。不需要再次計算        if (!Object.keys(component.groupStyle).length) {            const style = { ...component.style }            component.groupStyle = getStyle(style)            component.groupStyle.left = this.toPercent((style.left - parentStyle.left) / parentStyle.width)            component.groupStyle.top = this.toPercent((style.top - parentStyle.top) / parentStyle.height)            component.groupStyle.width = this.toPercent(style.width / parentStyle.width)            component.groupStyle.height = this.toPercent(style.height / parentStyle.height)        }    })},methods: {        toPercent(val) {            return val * 100 + '%'        },    },

transform: rotate(-75.1967deg);width: 51.2267%;height: 32.2679%;top: 33.8661%;left: -10.6496%;

// 組件寬高比const proportion = style.width / style.height
const center = {    x: style.left + style.width / 2,    y: style.top + style.height / 2,}

// 獲取畫布位移信息const editorRectInfo = document.querySelector('#editor').getBoundingClientRect()
// 當前點擊坐標const curPoint = {    x: e.clientX - editorRectInfo.left,    y: e.clientY - editorRectInfo.top,}
// 獲取對稱點的坐標const symmetricPoint = {    x: center.x - (curPoint.x - center.x),    y: center.y - (curPoint.y - center.y),}

const curPositon = {    x: moveEvent.clientX - editorRectInfo.left,    y: moveEvent.clientY - editorRectInfo.top,}
const newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
// 求兩點之間的中點坐標function getCenterPoint(p1, p2) {    return {        x: p1.x + ((p2.x - p1.x) / 2),        y: p1.y + ((p2.y - p1.y) / 2),    }}

/** * 計算根據(jù)圓心旋轉(zhuǎn)后的點的坐標 * @param   {Object}  point  旋轉(zhuǎn)前的點坐標 * @param   {Object}  center 旋轉(zhuǎn)中心 * @param   {Number}  rotate 旋轉(zhuǎn)的角度 * @return  {Object}         旋轉(zhuǎn)后的坐標 * https://www.zhihu.com/question/67425734/answer/252724399 旋轉(zhuǎn)矩陣公式 */export function calculateRotatedPointCoordinate(point, center, rotate) {    /**     * 旋轉(zhuǎn)公式：     *  點a(x, y)     *  旋轉(zhuǎn)中心c(x, y)     *  旋轉(zhuǎn)后點n(x, y)     *  旋轉(zhuǎn)角度θ                tan ??     * nx = cosθ * (ax - cx) - sinθ * (ay - cy) + cx     * ny = sinθ * (ax - cx) + cosθ * (ay - cy) + cy     */
    return {        x: (point.x - center.x) * Math.cos(angleToRadian(rotate)) - (point.y - center.y) * Math.sin(angleToRadian(rotate)) + center.x,        y: (point.x - center.x) * Math.sin(angleToRadian(rotate)) + (point.y - center.y) * Math.cos(angleToRadian(rotate)) + center.y,    }}

function calculateLeftTop(style, curPositon, pointInfo) {    const { symmetricPoint } = pointInfo    const newCenterPoint = getCenterPoint(curPositon, symmetricPoint)    const newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)    const newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
    const newWidth = newBottomRightPoint.x - newTopLeftPoint.x    const newHeight = newBottomRightPoint.y - newTopLeftPoint.y    if (newWidth > 0 && newHeight > 0) {        style.width = Math.round(newWidth)        style.height = Math.round(newHeight)        style.left = Math.round(newTopLeftPoint.x)        style.top = Math.round(newTopLeftPoint.y)    }}

if (newWidth / newHeight > proportion) {    newTopLeftPoint.x += Math.abs(newWidth - newHeight * proportion)    newWidth = newHeight * proportion} else {    newTopLeftPoint.y += Math.abs(newHeight - newWidth / proportion)    newHeight = newWidth / proportion}

function calculateLeftTop(style, curPositon, proportion, needLockProportion, pointInfo) {    const { symmetricPoint } = pointInfo    let newCenterPoint = getCenterPoint(curPositon, symmetricPoint)    let newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)    let newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
    let newWidth = newBottomRightPoint.x - newTopLeftPoint.x    let newHeight = newBottomRightPoint.y - newTopLeftPoint.y
    if (needLockProportion) {        if (newWidth / newHeight > proportion) {            newTopLeftPoint.x += Math.abs(newWidth - newHeight * proportion)            newWidth = newHeight * proportion        } else {            newTopLeftPoint.y += Math.abs(newHeight - newWidth / proportion)            newHeight = newWidth / proportion        }
        // 由于現(xiàn)在求的未旋轉(zhuǎn)前的坐標是以沒按比例縮減寬高前的坐標來計算的        // 所以縮減寬高后，需要按照原來的中心點旋轉(zhuǎn)回去，獲得縮減寬高并旋轉(zhuǎn)后對應的坐標        // 然后以這個坐標和對稱點獲得新的中心點，并重新計算未旋轉(zhuǎn)前的坐標        const rotatedTopLeftPoint = calculateRotatedPointCoordinate(newTopLeftPoint, newCenterPoint, style.rotate)        newCenterPoint = getCenterPoint(rotatedTopLeftPoint, symmetricPoint)        newTopLeftPoint = calculateRotatedPointCoordinate(rotatedTopLeftPoint, newCenterPoint, -style.rotate)        newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
        newWidth = newBottomRightPoint.x - newTopLeftPoint.x        newHeight = newBottomRightPoint.y - newTopLeftPoint.y    }
    if (newWidth > 0 && newHeight > 0) {        style.width = Math.round(newWidth)        style.height = Math.round(newHeight)        style.left = Math.round(newTopLeftPoint.x)        style.top = Math.round(newTopLeftPoint.y)    }}

isNeedLockProportion() {    if (this.element.component != 'Group') return false    const ratates = [0, 90, 180, 360]    for (const component of this.element.propValue) {        if (!ratates.includes(mod360(parseInt(component.style.rotate)))) {            return true        }    }
    return false}

// storedecompose({ curComponent, editor }) {    const parentStyle = { ...curComponent.style }    const components = curComponent.propValue    const editorRect = editor.getBoundingClientRect()
    store.commit('deleteComponent')    components.forEach(component => {        decomposeComponent(component, editorRect, parentStyle)        store.commit('addComponent', { component })    })}
// 將組合中的各個子組件拆分出來，并計算它們新的 styleexport default function decomposeComponent(component, editorRect, parentStyle) {    // 子組件相對于瀏覽器視口的樣式    const componentRect = $(`#component${component.id}`).getBoundingClientRect()    // 獲取元素的中心點坐標    const center = {        x: componentRect.left - editorRect.left + componentRect.width / 2,        y: componentRect.top - editorRect.top + componentRect.height / 2,    }
    component.style.rotate = mod360(component.style.rotate + parentStyle.rotate)    component.style.width = parseFloat(component.groupStyle.width) / 100 * parentStyle.width    component.style.height = parseFloat(component.groupStyle.height) / 100 * parentStyle.height    // 計算出元素新的 top left 坐標    component.style.left = center.x - component.style.width / 2    component.style.top = center.y - component.style.height / 2    component.groupStyle = {}}

<template>    <div v-if="editMode == 'edit'" class="v-text" @keydown="handleKeydown" @keyup="handleKeyup">        <!-- tabindex >= 0 使得雙擊時聚集該元素 -->        <div :contenteditable="canEdit" :class="{ canEdit }" @dblclick="setEdit" :tabindex="element.id" @paste="clearStyle"            @mousedown="handleMousedown" @blur="handleBlur" ref="text" v-html="element.propValue" @input="handleInput"            :style="{ verticalAlign: element.style.verticalAlign }"        ></div>    </div>    <div v-else class="v-text">        <div v-html="element.propValue" :style="{ verticalAlign: element.style.verticalAlign }"></div>    </div></template>
<script>import { mapState } from 'vuex'import { keycodes } from '@/utils/shortcutKey.js'
export default {    props: {        propValue: {            type: String,            require: true,        },        element: {            type: Object,        },    },    data() {        return {            canEdit: false,            ctrlKey: 17,            isCtrlDown: false,        }    },    computed: {        ...mapState([            'editMode',        ]),    },    methods: {        handleInput(e) {            this.$emit('input', this.element, e.target.innerHTML)        },
        handleKeydown(e) {            if (e.keyCode == this.ctrlKey) {                this.isCtrlDown = true            } else if (this.isCtrlDown && this.canEdit && keycodes.includes(e.keyCode)) {                e.stopPropagation()            } else if (e.keyCode == 46) { // deleteKey                e.stopPropagation()            }        },
        handleKeyup(e) {            if (e.keyCode == this.ctrlKey) {                this.isCtrlDown = false            }        },
        handleMousedown(e) {            if (this.canEdit) {                e.stopPropagation()            }        },
        clearStyle(e) {            e.preventDefault()            const clp = e.clipboardData            const text = clp.getData('text/plain') || ''            if (text !== '') {                document.execCommand('insertText', false, text)            }
            this.$emit('input', this.element, e.target.innerHTML)        },
        handleBlur(e) {            this.element.propValue = e.target.innerHTML || ' '            this.canEdit = false        },
        setEdit() {            this.canEdit = true            // 全選            this.selectText(this.$refs.text)        },
        selectText(element) {            const selection = window.getSelection()            const range = document.createRange()            range.selectNodeContents(element)            selection.removeAllRanges()            selection.addRange(range)        },    },}</script>
<style lang="scss" scoped>.v-text {    width: 100%;    height: 100%;    display: table;
    div {        display: table-cell;        width: 100%;        height: 100%;        outline: none;    }
    .canEdit {        cursor: text;        height: 100%;    }}</style>

<template>    <div class="rect-shape">        <v-text :propValue="element.propValue" :element="element" />    </div></template>
<script>export default {    props: {        element: {            type: Object,        },    },}</script>
<style lang="scss" scoped>.rect-shape {    width: 100%;    height: 100%;    overflow: auto;}</style>

export const commonAttr = {    animations: [],    events: {},    groupStyle: {}, // 當一個組件成為 Group 的子組件時使用    isLock: false, // 是否鎖定組件}

<el-button @click="decompose" :disabled="!curComponent || curComponent.isLock || curComponent.component != 'Group'">拆分</el-button>
<el-button @click="lock" :disabled="!curComponent || curComponent.isLock">鎖定</el-button><el-button @click="unlock" :disabled="!curComponent || !curComponent.isLock">解鎖</el-button>

<template>    <div class="contextmenu" v-show="menuShow" :style="{ top: menuTop + 'px', left: menuLeft + 'px' }">        <ul @mouseup="handleMouseUp">            <template v-if="curComponent">                <template v-if="!curComponent.isLock">                    <li @click="copy">復制</li>                    <li @click="paste">粘貼</li>                    <li @click="cut">剪切</li>                    <li @click="deleteComponent">刪除</li>                    <li @click="lock">鎖定</li>                    <li @click="topComponent">置頂</li>                    <li @click="bottomComponent">置底</li>                    <li @click="upComponent">上移</li>                    <li @click="downComponent">下移</li>                </template>                <li v-else @click="unlock">解鎖</li>            </template>            <li v-else @click="paste">粘貼</li>        </ul>    </div></template>

const ctrlKey = 17,     vKey = 86, // 粘貼    cKey = 67, // 復制    xKey = 88, // 剪切
    yKey = 89, // 重做    zKey = 90, // 撤銷
    gKey = 71, // 組合    bKey = 66, // 拆分
    lKey = 76, // 鎖定    uKey = 85, // 解鎖
    sKey = 83, // 保存    pKey = 80, // 預覽    dKey = 68, // 刪除    deleteKey = 46, // 刪除    eKey = 69 // 清空畫布

// 與組件狀態(tài)無關的操作const basemap = {    [vKey]: paste,    [yKey]: redo,    [zKey]: undo,    [sKey]: save,    [pKey]: preview,    [eKey]: clearCanvas,}
// 組件鎖定狀態(tài)下可以執(zhí)行的操作const lockMap = {    ...basemap,    [uKey]: unlock,}
// 組件未鎖定狀態(tài)下可以執(zhí)行的操作const unlockMap = {    ...basemap,    [cKey]: copy,    [xKey]: cut,    [gKey]: compose,    [bKey]: decompose,    [dKey]: deleteComponent,    [deleteKey]: deleteComponent,    [lKey]: lock,}
let isCtrlDown = false// 全局監(jiān)聽按鍵操作并執(zhí)行相應命令export function listenGlobalKeyDown() {    window.onkeydown = (e) => {        const { curComponent } = store.state        if (e.keyCode == ctrlKey) {            isCtrlDown = true        } else if (e.keyCode == deleteKey && curComponent) {            store.commit('deleteComponent')            store.commit('recordSnapshot')        } else if (isCtrlDown) {            if (!curComponent || !curComponent.isLock) {                e.preventDefault()                unlockMap[e.keyCode] && unlockMap[e.keyCode]()            } else if (curComponent && curComponent.isLock) {                e.preventDefault()                lockMap[e.keyCode] && lockMap[e.keyCode]()            }        }    }
    window.onkeyup = (e) => {        if (e.keyCode == ctrlKey) {            isCtrlDown = false        }    }}

<template>    <svg class="grid" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">        <defs>            <pattern id="smallGrid" width="7.236328125" height="7.236328125" patternUnits="userSpaceOnUse">                <path                     d="M 7.236328125 0 L 0 0 0 7.236328125"                     fill="none"                     stroke="rgba(207, 207, 207, 0.3)"                     stroke-width="1">                </path>            </pattern>            <pattern id="grid" width="36.181640625" height="36.181640625" patternUnits="userSpaceOnUse">                <rect width="36.181640625" height="36.181640625" fill="url(#smallGrid)"></rect>                <path                     d="M 36.181640625 0 L 0 0 0 36.181640625"                     fill="none"                     stroke="rgba(186, 186, 186, 0.5)"                     stroke-width="1">                </path>            </pattern>        </defs>        <rect width="100%" height="100%" fill="url(#grid)"></rect>    </svg></template>
<style lang="scss" scoped>.grid {    position: absolute;    top: 0;    left: 0;}</style>

snapshotData: [], // 編輯器快照數(shù)據(jù)snapshotIndex: -1, // 快照索引
undo(state) {    if (state.snapshotIndex >= 0) {        state.snapshotIndex--        store.commit('setComponentData', deepCopy(state.snapshotData[state.snapshotIndex]))    }},
redo(state) {    if (state.snapshotIndex < state.snapshotData.length - 1) {        state.snapshotIndex++        store.commit('setComponentData', deepCopy(state.snapshotData[state.snapshotIndex]))    }},
setComponentData(state, componentData = []) {    Vue.set(state, 'componentData', componentData)},
recordSnapshot(state) {    // 添加新的快照    state.snapshotData[++state.snapshotIndex] = deepCopy(state.componentData)    // 在 undo 過程中，添加新的快照時，要將它后面的快照清理掉    if (state.snapshotIndex < state.snapshotData.length - 1) {        state.snapshotData = state.snapshotData.slice(0, state.snapshotIndex + 1)    }},

// snapshotData[  [a],  [a, b],  [a, b, c],  [a, b, c, d],]

// snapshotData[  [{ type: 'add', value: a }],  [{ type: 'add', value: b }],  [{ type: 'add', value: c }],  [{ type: 'add', value: d }],]

// snapshotData[  [{ type: 'add', value: a }],  [{ type: 'add', value: b }],  [{ type: 'add', value: c }],  [{ type: 'add', value: d }],  [{ type: 'remove', value: c }],]

// snapshotData// 快照索引 snapshotIndex 此時為 3[  [{ type: 'add', value: a }],  [{ type: 'add', value: b }],  [{ type: 'add', value: c }],  [{ type: 'add', value: d }],  [{ type: 'remove', value: c }],]