From ca676f5993681246f50861c6fb570a40903c9327 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Fri, 16 Dec 2022 16:05:56 +0800 Subject: [PATCH] feat:add style namespace --- cypress/integration/control/select.spec.ts | 2 +- cypress/integration/control/text.spec.ts | 2 +- cypress/integration/editor.spec.ts | 4 +- index.html | 2 +- src/editor/assets/css/block/block.css | 2 +- .../assets/css/contextmenu/contextmenu.css | 132 ++++++ src/editor/assets/css/control/select.css | 10 +- src/editor/assets/css/date/datePicker.css | 76 ++-- src/editor/assets/css/hyperlink/hyperlink.css | 24 ++ src/editor/assets/css/index.css | 406 +----------------- src/editor/assets/css/previewer/previewer.css | 98 +++++ src/editor/assets/css/resizer/resizer.css | 51 +++ src/editor/assets/css/table/table.css | 85 ++++ src/editor/core/contextmenu/ContextMenu.ts | 18 +- src/editor/core/cursor/Cursor.ts | 7 +- src/editor/core/cursor/CursorAgent.ts | 3 +- src/editor/core/draw/Draw.ts | 4 +- .../core/draw/control/select/SelectControl.ts | 4 +- .../core/draw/particle/HyperlinkParticle.ts | 3 +- .../core/draw/particle/block/BlockParticle.ts | 3 +- .../draw/particle/block/modules/BaseBlock.ts | 3 +- .../core/draw/particle/date/DatePicker.ts | 31 +- .../core/draw/particle/previewer/Previewer.ts | 11 +- .../core/draw/particle/table/TableTool.ts | 19 +- src/editor/core/event/GlobalEvent.ts | 4 + src/editor/dataset/constant/Editor.ts | 1 + src/style.css | 7 +- 27 files changed, 511 insertions(+), 501 deletions(-) create mode 100644 src/editor/assets/css/contextmenu/contextmenu.css create mode 100644 src/editor/assets/css/hyperlink/hyperlink.css create mode 100644 src/editor/assets/css/previewer/previewer.css create mode 100644 src/editor/assets/css/resizer/resizer.css create mode 100644 src/editor/assets/css/table/table.css diff --git a/cypress/integration/control/select.spec.ts b/cypress/integration/control/select.spec.ts index 0910363..07a55f6 100644 --- a/cypress/integration/control/select.spec.ts +++ b/cypress/integration/control/select.spec.ts @@ -45,7 +45,7 @@ describe('控件-列举型', () => { cy.get('@canvas').type(`{leftArrow}`) - cy.get('.select-control-popup li').eq(0).click() + cy.get('.ce-select-control-popup li').eq(0).click() cy.get('@canvas').type('{ctrl}s') }) diff --git a/cypress/integration/control/text.spec.ts b/cypress/integration/control/text.spec.ts index fb392f6..db98101 100644 --- a/cypress/integration/control/text.spec.ts +++ b/cypress/integration/control/text.spec.ts @@ -36,7 +36,7 @@ describe('控件-文本型', () => { cy.get('@canvas').type(`{leftArrow}`) - cy.get('.inputarea').type(text) + cy.get('.ce-inputarea').type(text) cy.get('@canvas').type('{ctrl}s') }) diff --git a/cypress/integration/editor.spec.ts b/cypress/integration/editor.spec.ts index 1c77356..04a1111 100644 --- a/cypress/integration/editor.spec.ts +++ b/cypress/integration/editor.spec.ts @@ -29,7 +29,7 @@ describe('基础功能', () => { it('模式切换', () => { cy.get('@canvas').click() - cy.get('.cursor').should('have.css', 'display', 'block') + cy.get('.ce-cursor').should('have.css', 'display', 'block') cy.get('.editor-mode').click().click() @@ -37,7 +37,7 @@ describe('基础功能', () => { cy.get('@canvas').click() - cy.get('.cursor').should('have.css', 'display', 'none') + cy.get('.ce-cursor').should('have.css', 'display', 'none') }) it('页面缩放', () => { diff --git a/index.html b/index.html index ea30d9b..cdff544 100644 --- a/index.html +++ b/index.html @@ -219,7 +219,7 @@ -
+
diff --git a/src/editor/assets/css/block/block.css b/src/editor/assets/css/block/block.css index d889140..5cf9012 100644 --- a/src/editor/assets/css/block/block.css +++ b/src/editor/assets/css/block/block.css @@ -1,4 +1,4 @@ -.block-item { +.ce-block-item { position: absolute; z-index: 0; overflow: hidden; diff --git a/src/editor/assets/css/contextmenu/contextmenu.css b/src/editor/assets/css/contextmenu/contextmenu.css new file mode 100644 index 0000000..346004f --- /dev/null +++ b/src/editor/assets/css/contextmenu/contextmenu.css @@ -0,0 +1,132 @@ +.ce-contextmenu-container { + z-index: 9; + position: fixed; + display: none; + padding: 4px; + overflow-x: hidden; + overflow-y: auto; + background: #fff; + box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%); + border: 1px solid #e2e6ed; + border-radius: 2px; +} + +.ce-contextmenu-content { + display: flex; + flex-direction: column; +} + +.ce-contextmenu-content .ce-contextmenu-sub-item::after { + position: absolute; + content: ""; + width: 16px; + height: 16px; + right: 12px; + background: url(../../images/submenu-dropdown.svg); +} + +.ce-contextmenu-content .ce-contextmenu-item { + min-width: 140px; + padding: 0 32px 0 16px; + height: 30px; + display: flex; + align-items: center; + white-space: nowrap; + box-sizing: border-box; + cursor: pointer; +} + +.ce-contextmenu-content .ce-contextmenu-item.hover { + background: rgba(25, 55, 88, .04); +} + +.ce-contextmenu-content .ce-contextmenu-item span { + max-width: 300px; + font-size: 12px; + color: #3d4757; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.ce-contextmenu-content .ce-contextmenu-item span.ce-shortcut { + color: #767c85; + height: 30px; + flex: 1; + text-align: right; + line-height: 30px; + margin-left: 20px; +} + +.ce-contextmenu-content .ce-contextmenu-item i { + width: 16px; + height: 16px; + vertical-align: middle; + display: inline-block; + background-repeat: no-repeat; + background-size: 100% 100%; + flex-shrink: 0; + margin-right: 8px; +} + +.ce-contextmenu-divider { + background-color: #e2e6ed; + margin: 4px 16px; + height: 1px; +} + +.ce-contextmenu-print { + background-image: url(../../../assets/images/print.svg); +} + +.ce-contextmenu-image { + background-image: url(../../../assets/images/image.svg); +} + +.ce-contextmenu-image-change { + background-image: url(../../../assets/images/image-change.svg); +} + +.ce-contextmenu-insert-row-col { + background-image: url(../../../assets/images/insert-row-col.svg); +} + +.ce-contextmenu-insert-top-row { + background-image: url(../../../assets/images/insert-top-row.svg); +} + +.ce-contextmenu-insert-bottom-row { + background-image: url(../../../assets/images/insert-bottom-row.svg); +} + +.ce-contextmenu-insert-left-col { + background-image: url(../../../assets/images/insert-left-col.svg); +} + +.ce-contextmenu-insert-right-col { + background-image: url(../../../assets/images/insert-right-col.svg); +} + +.ce-contextmenu-delete-row-col { + background-image: url(../../../assets/images/delete-row-col.svg); +} + +.ce-contextmenu-delete-row { + background-image: url(../../../assets/images/delete-row.svg); +} + +.ce-contextmenu-delete-col { + background-image: url(../../../assets/images/delete-col.svg); +} + +.ce-contextmenu-delete-table { + background-image: url(../../../assets/images/delete-table.svg); +} + +.ce-contextmenu-merge-cell { + background-image: url(../../../assets/images/merge-cell.svg); +} + +.ce-contextmenu-merge-cancel-cell { + background-image: url(../../../assets/images/merge-cancel-cell.svg); +} \ No newline at end of file diff --git a/src/editor/assets/css/control/select.css b/src/editor/assets/css/control/select.css index 010c9ad..af47877 100644 --- a/src/editor/assets/css/control/select.css +++ b/src/editor/assets/css/control/select.css @@ -1,4 +1,4 @@ -.select-control-popup { +.ce-select-control-popup { max-width: 160px; min-width: 69px; max-height: 225px; @@ -13,14 +13,14 @@ overflow-y: auto; } -.select-control-popup ul { +.ce-select-control-popup ul { list-style: none; padding: 3px 0; margin: 0; box-sizing: border-box; } -.select-control-popup ul li { +.ce-select-control-popup ul li { font-size: 13px; padding: 0 20px; position: relative; @@ -34,11 +34,11 @@ cursor: pointer; } -.select-control-popup ul li:hover { +.ce-select-control-popup ul li:hover { background-color: #EEF2FD; } -.select-control-popup ul li.active { +.ce-select-control-popup ul li.active { color: var(--COLOR-HOVER, #5175f4); font-weight: 700; } \ No newline at end of file diff --git a/src/editor/assets/css/date/datePicker.css b/src/editor/assets/css/date/datePicker.css index be44cc4..0c22969 100644 --- a/src/editor/assets/css/date/datePicker.css +++ b/src/editor/assets/css/date/datePicker.css @@ -1,4 +1,4 @@ -.date-container { +.ce-date-container { display: none; width: 300px; overflow: hidden; @@ -15,19 +15,19 @@ box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); } -.date-container.active { +.ce-date-container.active { display: block; } -.date-wrap { +.ce-date-wrap { display: none; } -.date-wrap.active { +.ce-date-wrap.active { display: block; } -.date-title { +.ce-date-title { display: flex; justify-content: center; align-items: center; @@ -36,40 +36,40 @@ font-size: 16px; } -.date-title>span { +.ce-date-title>span { display: inline-block; } -.date-title>span:not(.date-title__now) { +.ce-date-title>span:not(.ce-date-title__now) { font-family: cursive; cursor: pointer; } -.date-title>span:not(.date-title__now):hover { +.ce-date-title>span:not(.ce-date-title__now):hover { color: #5175F4; } -.date-title .date-title__pre-year { +.ce-date-title .ce-date-title__pre-year { width: 15%; } -.date-title .date-title__pre-month { +.ce-date-title .ce-date-title__pre-month { width: 15%; } -.date-title .date-title__now { +.ce-date-title .ce-date-title__now { width: 40%; } -.date-title .date-title__next-year { +.ce-date-title .ce-date-title__next-year { width: 15%; } -.date-title .date-title__next-month { +.ce-date-title .ce-date-title__next-month { width: 15%; } -.date-week { +.ce-date-week { width: 100%; display: flex; justify-content: center; @@ -78,7 +78,7 @@ border-bottom: 1px solid #e4e7ed; } -.date-week>span { +.ce-date-week>span { list-style: none; width: calc(100%/7); text-align: center; @@ -86,7 +86,7 @@ font-size: 14px; } -.date-day { +.ce-date-day { width: 100%; display: flex; flex-wrap: wrap; @@ -94,7 +94,7 @@ margin-top: 5px; } -.date-day>div { +.ce-date-day>div { width: calc(100%/7); height: 40px; text-align: center; @@ -105,85 +105,85 @@ border-radius: 4px; } -.date-day>div:hover { +.ce-date-day>div:hover { color: #5175F4; opacity: .8; } -.date-day>div.active { +.ce-date-day>div.active { color: #5175F4; font-weight: 700; } -.date-day>div.disable { +.ce-date-day>div.disable { color: #c0c4cc; } -.date-day>div.select { +.ce-date-day>div.select { color: #fff; background-color: #5175F4; } -.time-wrap { +.ce-time-wrap { display: none; padding: 10px; height: 286px; } -.time-wrap ::-webkit-scrollbar { +.ce-time-wrap ::-webkit-scrollbar { width: 0; } -.time-wrap.active { +.ce-time-wrap.active { display: flex; } -.time-wrap li { +.ce-time-wrap li { list-style: none; } -.time-wrap>li { +.ce-time-wrap>li { width: 33.3%; height: 100%; text-align: center; } -.time-wrap>li>span { +.ce-time-wrap>li>span { transform: translateY(-5px); display: inline-block; } -.time-wrap>li>ol { +.ce-time-wrap>li>ol { height: calc(100% - 20px); overflow-y: auto; border: 1px solid #e2e2e2; position: relative; } -.time-wrap>li:first-child>ol { +.ce-time-wrap>li:first-child>ol { border-right: 0; } -.time-wrap>li:last-child>ol { +.ce-time-wrap>li:last-child>ol { border-left: 0; } -.time-wrap>li>ol>li { +.ce-time-wrap>li>ol>li { line-height: 30px; cursor: pointer; transition: all .3s; } -.time-wrap>li>ol>li:hover { +.ce-time-wrap>li>ol>li:hover { background-color: #eaeaea; } -.time-wrap>li>ol>li.active { +.ce-time-wrap>li>ol>li.active { color: #ffffff; background: #5175F4; } -.date-menu { +.ce-date-menu { width: 100%; height: 28px; display: flex; @@ -194,7 +194,7 @@ border-top: 1px solid #e4e7ed; } -.date-menu button { +.ce-date-menu button { display: inline-block; line-height: 1; white-space: nowrap; @@ -216,18 +216,18 @@ margin-left: 10px; } -.date-menu button:hover { +.ce-date-menu button:hover { color: #5175F4; border-color: #5175F4; } -.date-menu button.date-menu__time { +.ce-date-menu button.ce-date-menu__time { border: 1px solid transparent; position: absolute; left: 0; margin-left: 0; } -.date-menu button.date-menu__time:hover { +.ce-date-menu button.ce-date-menu__time:hover { color: #5175F4; } \ No newline at end of file diff --git a/src/editor/assets/css/hyperlink/hyperlink.css b/src/editor/assets/css/hyperlink/hyperlink.css new file mode 100644 index 0000000..76c98bc --- /dev/null +++ b/src/editor/assets/css/hyperlink/hyperlink.css @@ -0,0 +1,24 @@ +.ce-hyperlink-popup { + min-width: 100px; + font-size: 12px; + line-height: 20px; + background: #fff; + box-shadow: 0 2px 12px 0 rgb(98 107 132 / 20%); + border-radius: 2px; + color: #3d4757; + padding: 16px; + white-space: nowrap; + position: absolute; + z-index: 1; + text-align: center; + display: none; +} + +.ce-hyperlink-popup a { + cursor: pointer; + text-decoration: none; + border-bottom-width: 1px; + border-bottom-style: solid; + padding-bottom: 2px; + color: #0000ff; +} \ No newline at end of file diff --git a/src/editor/assets/css/index.css b/src/editor/assets/css/index.css index 751c963..0192535 100644 --- a/src/editor/assets/css/index.css +++ b/src/editor/assets/css/index.css @@ -1,8 +1,13 @@ @import './control/select.css'; @import './date/datePicker.css'; @import './block/block.css'; +@import './table/table.css'; +@import './resizer/resizer.css'; +@import './previewer/previewer.css'; +@import './contextmenu/contextmenu.css'; +@import './hyperlink/hyperlink.css'; -.inputarea { +.ce-inputarea { width: 0; height: 12px; min-width: 0; @@ -23,7 +28,7 @@ background-color: transparent; } -.cursor { +.ce-cursor { width: 1px; height: 20px; left: 0; @@ -34,7 +39,7 @@ pointer-events: none; } -.cursor--animation { +.ce-cursor.ce-cursor--animation { animation-duration: 1s; animation-iteration-count: infinite; animation-name: cursorAnimation; @@ -60,399 +65,4 @@ to { opacity: 1 } -} - -.resizer-selection { - position: absolute; - border: 1px solid; -} - -.resizer-selection>div { - position: absolute; - width: 10px; - height: 10px; - box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%); - border-radius: 5px; - border: 2px solid #ffffff; - box-sizing: border-box; -} - -.resizer-selection .handle-0 { - cursor: nw-resize; -} - -.resizer-selection .handle-1 { - cursor: n-resize; -} - -.resizer-selection .handle-2 { - cursor: ne-resize; -} - -.resizer-selection .handle-3 { - cursor: e-resize; -} - -.resizer-selection .handle-4 { - cursor: se-resize; -} - -.resizer-selection .handle-5 { - cursor: s-resize; -} - -.resizer-selection .handle-6 { - cursor: sw-resize; -} - -.resizer-selection .handle-7 { - cursor: w-resize; -} - -.resizer-image { - position: absolute; - opacity: 0.5; -} - -.image-previewer { - position: fixed; - left: 0; - top: 0; - z-index: 1000; - width: 100%; - height: 100%; - overflow: hidden; - background: #f2f4f7; - display: flex; - align-items: center; - justify-content: center; - animation: previewerAnimation .3s; -} - -@keyframes previewerAnimation { - 0% { - opacity: 0.1; - } - - 100% { - opacity: 1; - } -} - -.image-previewer .image-close { - width: 24px; - height: 24px; - display: inline-block; - position: absolute; - right: 50px; - top: 30px; - z-index: 99; - cursor: pointer; - background: url(../images/close.svg) no-repeat; - background-size: 100% 100%; - transition: all .3s; - border-radius: 50%; -} - -.image-previewer .image-close:hover { - background-color: #e2e6ed; -} - -.image-previewer .image-container { - position: relative; -} - -.image-previewer .image-container img { - cursor: move; - position: relative; -} - -.image-previewer .image-menu { - height: 50px; - position: absolute; - bottom: 50px; - z-index: 99; - display: flex; - align-items: center; - justify-content: center; -} - -.image-previewer .image-menu i { - width: 32px; - height: 32px; - margin: 0 8px; - cursor: pointer; - display: inline-block; - background-repeat: no-repeat; - background-size: 100% 100%; - transition: all .3s; - border-radius: 50%; -} - -.image-previewer .image-menu i:hover { - background-color: #e2e6ed; -} - -.image-previewer .image-menu i.zoom-in { - background-image: url(../images/zoom-in.svg); -} - -.image-previewer .image-menu i.zoom-out { - background-image: url(../images/zoom-out.svg); -} - -.image-previewer .image-menu i.rotate { - background-image: url(../images/rotate.svg); -} - -.image-previewer .image-menu i.original-size { - background-image: url(../images/original-size.svg); -} - -.image-previewer .image-menu i.image-download { - background-image: url(../images/image-download.svg); -} - -.table-tool__row { - position: absolute; - width: 12px; - border-radius: 6.5px; - overflow: hidden; - background-color: #E2E6ED; -} - -.table-tool__row .table-tool__row__item { - width: 100%; - position: relative; -} - -.table-tool__row .table-tool__row__item::after { - content: ''; - position: absolute; - bottom: 0; - left: 2px; - width: 8px; - height: 1px; - background-color: #C0C6CF; -} - -.table-tool__row .table-tool__row__item:last-child:after { - display: none; -} - -.table-tool__col { - position: absolute; - height: 12px; - border-radius: 6.5px; - overflow: hidden; - background-color: #E2E6ED; - display: flex; -} - -.table-tool__col .table-tool__col__item { - height: 100%; - position: relative; -} - -.table-tool__col .table-tool__col__item::after { - content: ''; - position: absolute; - top: 2px; - left: -1px; - width: 1px; - height: 8px; - z-index: 1; - background-color: #C0C6CF; -} - -.table-tool__col .table-tool__col__item:first-child:after { - display: none; -} - -.table-tool__row .table-tool__row__item.active, -.table-tool__col .table-tool__col__item.active { - background-color: #C4D7FA; -} - -.table-tool__col .table-tool__anchor { - right: -5px; - width: 10px; - height: 12px; - z-index: 9; - position: absolute; - cursor: col-resize; -} - -.table-tool__row .table-tool__anchor { - bottom: -5px; - left: 0; - width: 12px; - height: 10px; - z-index: 9; - position: absolute; - cursor: row-resize; -} - -.table-anchor__line { - z-index: 9; - position: absolute; - border: 1px dotted #000000; -} - -.contextmenu-container { - z-index: 9; - position: fixed; - display: none; - padding: 4px; - overflow-x: hidden; - overflow-y: auto; - background: #fff; - box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%); - border: 1px solid #e2e6ed; - border-radius: 2px; -} - -.contextmenu-content { - display: flex; - flex-direction: column; -} - -.contextmenu-content .contextmenu-sub-item::after { - position: absolute; - content: ""; - width: 16px; - height: 16px; - right: 12px; - background: url(../images/submenu-dropdown.svg); -} - -.contextmenu-content .contextmenu-item { - min-width: 140px; - padding: 0 32px 0 16px; - height: 30px; - display: flex; - align-items: center; - white-space: nowrap; - box-sizing: border-box; - cursor: pointer; -} - -.contextmenu-content .contextmenu-item.hover { - background: rgba(25, 55, 88, .04); -} - -.contextmenu-content .contextmenu-item span { - max-width: 300px; - font-size: 12px; - color: #3d4757; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.contextmenu-content .contextmenu-item span.shortcut { - color: #767c85; - height: 30px; - flex: 1; - text-align: right; - line-height: 30px; - margin-left: 20px; -} - -.contextmenu-content .contextmenu-item i { - width: 16px; - height: 16px; - vertical-align: middle; - display: inline-block; - background-repeat: no-repeat; - background-size: 100% 100%; - flex-shrink: 0; - margin-right: 8px; -} - -.contextmenu-divider { - background-color: #e2e6ed; - margin: 4px 16px; - height: 1px; -} - -.contextmenu-print { - background-image: url(../../assets/images/print.svg); -} - -.contextmenu-image { - background-image: url(../../assets/images/image.svg); -} - -.contextmenu-image-change { - background-image: url(../../assets/images/image-change.svg); -} - -.contextmenu-insert-row-col { - background-image: url(../../assets/images/insert-row-col.svg); -} - -.contextmenu-insert-top-row { - background-image: url(../../assets/images/insert-top-row.svg); -} - -.contextmenu-insert-bottom-row { - background-image: url(../../assets/images/insert-bottom-row.svg); -} - -.contextmenu-insert-left-col { - background-image: url(../../assets/images/insert-left-col.svg); -} - -.contextmenu-insert-right-col { - background-image: url(../../assets/images/insert-right-col.svg); -} - -.contextmenu-delete-row-col { - background-image: url(../../assets/images/delete-row-col.svg); -} - -.contextmenu-delete-row { - background-image: url(../../assets/images/delete-row.svg); -} - -.contextmenu-delete-col { - background-image: url(../../assets/images/delete-col.svg); -} - -.contextmenu-delete-table { - background-image: url(../../assets/images/delete-table.svg); -} - -.contextmenu-merge-cell { - background-image: url(../../assets/images/merge-cell.svg); -} - -.contextmenu-merge-cancel-cell { - background-image: url(../../assets/images/merge-cancel-cell.svg); -} - -.hyperlink-popup { - min-width: 100px; - font-size: 12px; - line-height: 20px; - background: #fff; - box-shadow: 0 2px 12px 0 rgb(98 107 132 / 20%); - border-radius: 2px; - color: #3d4757; - padding: 16px; - white-space: nowrap; - position: absolute; - z-index: 1; - text-align: center; - display: none; -} - -.hyperlink-popup a { - cursor: pointer; - text-decoration: none; - border-bottom-width: 1px; - border-bottom-style: solid; - padding-bottom: 2px; - color: #0000ff; } \ No newline at end of file diff --git a/src/editor/assets/css/previewer/previewer.css b/src/editor/assets/css/previewer/previewer.css new file mode 100644 index 0000000..8bdb81b --- /dev/null +++ b/src/editor/assets/css/previewer/previewer.css @@ -0,0 +1,98 @@ +.ce-image-previewer { + position: fixed; + left: 0; + top: 0; + z-index: 1000; + width: 100%; + height: 100%; + overflow: hidden; + background: #f2f4f7; + display: flex; + align-items: center; + justify-content: center; + animation: previewerAnimation .3s; +} + +@keyframes previewerAnimation { + 0% { + opacity: 0.1; + } + + 100% { + opacity: 1; + } +} + +.ce-image-previewer .image-close { + width: 24px; + height: 24px; + display: inline-block; + position: absolute; + right: 50px; + top: 30px; + z-index: 99; + cursor: pointer; + background: url(../../images/close.svg) no-repeat; + background-size: 100% 100%; + transition: all .3s; + border-radius: 50%; +} + +.ce-image-previewer .image-close:hover { + background-color: #e2e6ed; +} + +.ce-image-previewer .ce-image-container { + position: relative; +} + +.ce-image-previewer .ce-image-container img { + cursor: move; + position: relative; +} + +.ce-image-previewer .ce-image-menu { + height: 50px; + position: absolute; + bottom: 50px; + z-index: 99; + display: flex; + align-items: center; + justify-content: center; +} + +.ce-image-previewer .ce-image-menu i { + width: 32px; + height: 32px; + margin: 0 8px; + cursor: pointer; + display: inline-block; + background-repeat: no-repeat; + background-size: 100% 100%; + transition: all .3s; + border-radius: 50%; +} + +.ce-image-previewer .ce-image-menu i:hover { + background-color: #e2e6ed; +} + +.ce-image-previewer .ce-image-menu i.zoom-in { + background-image: url(../../images/zoom-in.svg); +} + +.ce-image-previewer .ce-image-menu i.zoom-out { + background-image: url(../../images/zoom-out.svg); +} + +.ce-image-previewer .ce-image-menu i.rotate { + background-image: url(../../images/rotate.svg); +} + +.ce-image-previewer .ce-image-menu i.original-size { + background-image: url(../../images/original-size.svg); +} + +.ce-image-previewer .ce-image-menu i.image-download { + background-image: url(../../images/image-download.svg); +} \ No newline at end of file diff --git a/src/editor/assets/css/resizer/resizer.css b/src/editor/assets/css/resizer/resizer.css new file mode 100644 index 0000000..a27f13a --- /dev/null +++ b/src/editor/assets/css/resizer/resizer.css @@ -0,0 +1,51 @@ +.ce-resizer-selection { + position: absolute; + border: 1px solid; +} + +.ce-resizer-selection>div { + position: absolute; + width: 10px; + height: 10px; + box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%); + border-radius: 5px; + border: 2px solid #ffffff; + box-sizing: border-box; +} + +.ce-resizer-selection .handle-0 { + cursor: nw-resize; +} + +.ce-resizer-selection .handle-1 { + cursor: n-resize; +} + +.ce-resizer-selection .handle-2 { + cursor: ne-resize; +} + +.ce-resizer-selection .handle-3 { + cursor: e-resize; +} + +.ce-resizer-selection .handle-4 { + cursor: se-resize; +} + +.ce-resizer-selection .handle-5 { + cursor: s-resize; +} + +.ce-resizer-selection .handle-6 { + cursor: sw-resize; +} + +.ce-resizer-selection .handle-7 { + cursor: w-resize; +} + +.ce-resizer-image { + position: absolute; + opacity: 0.5; +} \ No newline at end of file diff --git a/src/editor/assets/css/table/table.css b/src/editor/assets/css/table/table.css new file mode 100644 index 0000000..7b47297 --- /dev/null +++ b/src/editor/assets/css/table/table.css @@ -0,0 +1,85 @@ +.ce-table-tool__row { + position: absolute; + width: 12px; + border-radius: 6.5px; + overflow: hidden; + background-color: #E2E6ED; +} + +.ce-table-tool__row .ce-table-tool__row__item { + width: 100%; + position: relative; +} + +.ce-table-tool__row .ce-table-tool__row__item::after { + content: ''; + position: absolute; + bottom: 0; + left: 2px; + width: 8px; + height: 1px; + background-color: #C0C6CF; +} + +.ce-table-tool__row .ce-table-tool__row__item:last-child:after { + display: none; +} + +.ce-table-tool__col { + position: absolute; + height: 12px; + border-radius: 6.5px; + overflow: hidden; + background-color: #E2E6ED; + display: flex; +} + +.ce-table-tool__col .ce-table-tool__col__item { + height: 100%; + position: relative; +} + +.ce-table-tool__col .ce-table-tool__col__item::after { + content: ''; + position: absolute; + top: 2px; + left: -1px; + width: 1px; + height: 8px; + z-index: 1; + background-color: #C0C6CF; +} + +.ce-table-tool__col .ce-table-tool__col__item:first-child:after { + display: none; +} + +.ce-table-tool__row .ce-table-tool__row__item.active, +.ce-table-tool__col .ce-table-tool__col__item.active { + background-color: #C4D7FA; +} + +.ce-table-tool__col .ce-table-tool__anchor { + right: -5px; + width: 10px; + height: 12px; + z-index: 9; + position: absolute; + cursor: col-resize; +} + +.ce-table-tool__row .ce-table-tool__anchor { + bottom: -5px; + left: 0; + width: 12px; + height: 10px; + z-index: 9; + position: absolute; + cursor: row-resize; +} + +.ce-table-anchor__line { + z-index: 9; + position: absolute; + border: 1px dotted #000000; +} \ No newline at end of file diff --git a/src/editor/core/contextmenu/ContextMenu.ts b/src/editor/core/contextmenu/ContextMenu.ts index 39c9939..403549f 100644 --- a/src/editor/core/contextmenu/ContextMenu.ts +++ b/src/editor/core/contextmenu/ContextMenu.ts @@ -1,5 +1,5 @@ import { NAME_PLACEHOLDER } from '../../dataset/constant/ContextMenu' -import { EDITOR_COMPONENT } from '../../dataset/constant/Editor' +import { EDITOR_COMPONENT, EDITOR_PREFIX } from '../../dataset/constant/Editor' import { EditorComponent } from '../../dataset/enum/Editor' import { IContextMenuContext, IRegisterContextMenu } from '../../interface/contextmenu/ContextMenu' import { findParent } from '../../utils' @@ -137,7 +137,7 @@ export class ContextMenu { private _createContextMenuContainer(): HTMLDivElement { const contextMenuContainer = document.createElement('div') - contextMenuContainer.classList.add('contextmenu-container') + contextMenuContainer.classList.add(`${EDITOR_PREFIX}-contextmenu-container`) contextMenuContainer.setAttribute(EDITOR_COMPONENT, EditorComponent.CONTEXTMENU) this.container.append(contextMenuContainer) return contextMenuContainer @@ -147,7 +147,7 @@ export class ContextMenu { const { contextMenuList, left, top, parentMenuContainer } = payload const contextMenuContainer = this._createContextMenuContainer() const contextMenuContent = document.createElement('div') - contextMenuContent.classList.add('contextmenu-content') + contextMenuContent.classList.add(`${EDITOR_PREFIX}-contextmenu-content`) // 直接子菜单 let childMenuContainer: HTMLDivElement | null = null // 父菜单添加子菜单映射关系 @@ -160,15 +160,15 @@ export class ContextMenu { // 首尾分隔符不渲染 if (c !== 0 && c !== contextMenuList.length - 1) { const divider = document.createElement('div') - divider.classList.add('contextmenu-divider') + divider.classList.add(`${EDITOR_PREFIX}-contextmenu-divider`) contextMenuContent.append(divider) } } else { const menuItem = document.createElement('div') - menuItem.classList.add('contextmenu-item') + menuItem.classList.add(`${EDITOR_PREFIX}-contextmenu-item`) // 菜单事件 if (menu.childMenus) { - menuItem.classList.add('contextmenu-sub-item') + menuItem.classList.add(`${EDITOR_PREFIX}-contextmenu-sub-item`) menuItem.onmouseenter = () => { this._setHoverStatus(menuItem, true) this._removeSubMenu(contextMenuContainer) @@ -208,7 +208,7 @@ export class ContextMenu { const icon = document.createElement('i') menuItem.append(icon) if (menu.icon) { - icon.classList.add(`contextmenu-${menu.icon}`) + icon.classList.add(`${EDITOR_PREFIX}-contextmenu-${menu.icon}`) } // 文本 const span = document.createElement('span') @@ -218,7 +218,7 @@ export class ContextMenu { // 快捷方式提示 if (menu.shortCut) { const span = document.createElement('span') - span.classList.add('shortcut') + span.classList.add(`${EDITOR_PREFIX}-shortcut`) span.append(document.createTextNode(menu.shortCut)) menuItem.append(span) } @@ -250,7 +250,7 @@ export class ContextMenu { private _setHoverStatus(payload: HTMLDivElement, status: boolean) { if (status) { - payload.parentNode?.querySelectorAll('.contextmenu-item') + payload.parentNode?.querySelectorAll(`${EDITOR_PREFIX}-contextmenu-item`) .forEach(child => child.classList.remove('hover')) payload.classList.add('hover') } else { diff --git a/src/editor/core/cursor/Cursor.ts b/src/editor/core/cursor/Cursor.ts index 428230c..0e91df1 100644 --- a/src/editor/core/cursor/Cursor.ts +++ b/src/editor/core/cursor/Cursor.ts @@ -1,4 +1,5 @@ import { CURSOR_AGENT_HEIGHT } from '../../dataset/constant/Cursor' +import { EDITOR_PREFIX } from '../../dataset/constant/Editor' import { IEditorOption } from '../../interface/Editor' import { Draw } from '../draw/Draw' import { CanvasEvent } from '../event/CanvasEvent' @@ -21,7 +22,7 @@ export class Cursor { this.options = draw.getOptions() this.cursorDom = document.createElement('div') - this.cursorDom.classList.add('cursor') + this.cursorDom.classList.add(`${EDITOR_PREFIX}-cursor`) this.container.append(this.cursorDom) this.cursorAgent = new CursorAgent(draw, canvasEvent) } @@ -64,13 +65,13 @@ export class Cursor { this.cursorDom.style.display = isReadonly ? 'none' : 'block' this.cursorDom.style.height = `${cursorHeight}px` setTimeout(() => { - this.cursorDom.classList.add('cursor--animation') + this.cursorDom.classList.add(`${EDITOR_PREFIX}-cursor--animation`) }, 200) } public recoveryCursor() { this.cursorDom.style.display = 'none' - this.cursorDom.classList.remove('cursor--animation') + this.cursorDom.classList.remove(`${EDITOR_PREFIX}-cursor--animation`) } } \ No newline at end of file diff --git a/src/editor/core/cursor/CursorAgent.ts b/src/editor/core/cursor/CursorAgent.ts index 3bb5e4f..55e1a62 100644 --- a/src/editor/core/cursor/CursorAgent.ts +++ b/src/editor/core/cursor/CursorAgent.ts @@ -1,3 +1,4 @@ +import { EDITOR_PREFIX } from '../../dataset/constant/Editor' import { ElementType } from '../../dataset/enum/Element' import { debounce } from '../../utils' import { getElementListByHTML } from '../../utils/clipboard' @@ -18,7 +19,7 @@ export class CursorAgent { // 代理光标绘制 const agentCursorDom = document.createElement('textarea') agentCursorDom.autocomplete = 'off' - agentCursorDom.classList.add('inputarea') + agentCursorDom.classList.add(`${EDITOR_PREFIX}-inputarea`) agentCursorDom.innerText = '' this.container.append(agentCursorDom) this.agentCursorDom = agentCursorDom diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 4d8b278..fab0d11 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -47,7 +47,7 @@ import { Previewer } from './particle/previewer/Previewer' import { DateParticle } from './particle/date/DateParticle' import { IMargin } from '../../interface/Margin' import { BlockParticle } from './particle/block/BlockParticle' -import { EDITOR_COMPONENT } from '../../dataset/constant/Editor' +import { EDITOR_COMPONENT, EDITOR_PREFIX } from '../../dataset/constant/Editor' export class Draw { @@ -531,7 +531,7 @@ export class Draw { private _createPageContainer(): HTMLDivElement { const pageContainer = document.createElement('div') - pageContainer.classList.add('page-container') + pageContainer.classList.add(`${EDITOR_PREFIX}-page-container`) this.container.append(pageContainer) return pageContainer } diff --git a/src/editor/core/draw/control/select/SelectControl.ts b/src/editor/core/draw/control/select/SelectControl.ts index c204e82..a9bce28 100644 --- a/src/editor/core/draw/control/select/SelectControl.ts +++ b/src/editor/core/draw/control/select/SelectControl.ts @@ -1,4 +1,4 @@ -import { EDITOR_COMPONENT } from '../../../../dataset/constant/Editor' +import { EDITOR_COMPONENT, EDITOR_PREFIX } from '../../../../dataset/constant/Editor' import { ControlComponent } from '../../../../dataset/enum/Control' import { EditorComponent } from '../../../../dataset/enum/Editor' import { KeyMap } from '../../../../dataset/enum/KeyMap' @@ -210,7 +210,7 @@ export class SelectControl implements IControlInstance { if (!position) return // dom树：
  • item
const selectPopupContainer = document.createElement('div') - selectPopupContainer.classList.add('select-control-popup') + selectPopupContainer.classList.add(`${EDITOR_PREFIX}-select-control-popup`) selectPopupContainer.setAttribute(EDITOR_COMPONENT, EditorComponent.POPUP) const ul = document.createElement('ul') for (let v = 0; v < valueSets.length; v++) { diff --git a/src/editor/core/draw/particle/HyperlinkParticle.ts b/src/editor/core/draw/particle/HyperlinkParticle.ts index 1686e7b..686ee6e 100644 --- a/src/editor/core/draw/particle/HyperlinkParticle.ts +++ b/src/editor/core/draw/particle/HyperlinkParticle.ts @@ -1,4 +1,5 @@ import { IElement } from '../../..' +import { EDITOR_PREFIX } from '../../../dataset/constant/Editor' import { IEditorOption } from '../../../interface/Editor' import { IElementPosition } from '../../../interface/Element' import { IRowElement } from '../../../interface/Row' @@ -23,7 +24,7 @@ export class HyperlinkParticle { private _createHyperlinkPopupDom() { const hyperlinkPopupContainer = document.createElement('div') - hyperlinkPopupContainer.classList.add('hyperlink-popup') + hyperlinkPopupContainer.classList.add(`${EDITOR_PREFIX}-hyperlink-popup`) const hyperlinkDom = document.createElement('a') hyperlinkDom.target = '_blank' hyperlinkPopupContainer.append(hyperlinkDom) diff --git a/src/editor/core/draw/particle/block/BlockParticle.ts b/src/editor/core/draw/particle/block/BlockParticle.ts index d55c9fe..597fddd 100644 --- a/src/editor/core/draw/particle/block/BlockParticle.ts +++ b/src/editor/core/draw/particle/block/BlockParticle.ts @@ -1,3 +1,4 @@ +import { EDITOR_PREFIX } from '../../../../dataset/constant/Editor' import { ElementType } from '../../../../dataset/enum/Element' import { IRowElement } from '../../../../interface/Row' import { Draw } from '../../Draw' @@ -20,7 +21,7 @@ export class BlockParticle { private _createBlockContainer(): HTMLDivElement { const blockContainer = document.createElement('div') - blockContainer.classList.add('block-container') + blockContainer.classList.add(`${EDITOR_PREFIX}-block-container`) return blockContainer } diff --git a/src/editor/core/draw/particle/block/modules/BaseBlock.ts b/src/editor/core/draw/particle/block/modules/BaseBlock.ts index 20952cc..17b9d4b 100644 --- a/src/editor/core/draw/particle/block/modules/BaseBlock.ts +++ b/src/editor/core/draw/particle/block/modules/BaseBlock.ts @@ -1,3 +1,4 @@ +import { EDITOR_PREFIX } from '../../../../../dataset/constant/Editor' import { BlockType } from '../../../../../dataset/enum/Block' import { IRowElement } from '../../../../../interface/Row' import { Draw } from '../../../Draw' @@ -28,7 +29,7 @@ export class BaseBlock { private _createBlockItem(): HTMLDivElement { const blockItem = document.createElement('div') - blockItem.classList.add('block-item') + blockItem.classList.add(`${EDITOR_PREFIX}-block-item`) return blockItem } diff --git a/src/editor/core/draw/particle/date/DatePicker.ts b/src/editor/core/draw/particle/date/DatePicker.ts index 4bbf79e..c262a2e 100644 --- a/src/editor/core/draw/particle/date/DatePicker.ts +++ b/src/editor/core/draw/particle/date/DatePicker.ts @@ -1,3 +1,4 @@ +import { EDITOR_PREFIX } from '../../../../dataset/constant/Editor' import { IElement, IElementPosition } from '../../../../interface/Element' export interface IDatePickerOption { @@ -60,25 +61,25 @@ export class DatePicker { private _createDom(): IDatePickerDom { const datePickerContainer = document.createElement('div') - datePickerContainer.classList.add('date-container') + datePickerContainer.classList.add(`${EDITOR_PREFIX}-date-container`) // title-切换年月、年月显示 const dateWrap = document.createElement('div') - dateWrap.classList.add('date-wrap') + dateWrap.classList.add(`${EDITOR_PREFIX}-date-wrap`) const datePickerTitle = document.createElement('div') - datePickerTitle.classList.add('date-title') + datePickerTitle.classList.add(`${EDITOR_PREFIX}-date-title`) const preYearTitle = document.createElement('span') - preYearTitle.classList.add('date-title__pre-year') + preYearTitle.classList.add(`${EDITOR_PREFIX}-date-title__pre-year`) preYearTitle.innerText = `<<` const preMonthTitle = document.createElement('span') - preMonthTitle.classList.add('date-title__pre-month') + preMonthTitle.classList.add(`${EDITOR_PREFIX}-date-title__pre-month`) preMonthTitle.innerText = `<` const nowTitle = document.createElement('span') - nowTitle.classList.add('date-title__now') + nowTitle.classList.add(`${EDITOR_PREFIX}-date-title__now`) const nextMonthTitle = document.createElement('span') - nextMonthTitle.classList.add('date-title__next-month') + nextMonthTitle.classList.add(`${EDITOR_PREFIX}-date-title__next-month`) nextMonthTitle.innerText = `>` const nextYearTitle = document.createElement('span') - nextYearTitle.classList.add('date-title__next-year') + nextYearTitle.classList.add(`${EDITOR_PREFIX}-date-title__next-year`) nextYearTitle.innerText = `>>` datePickerTitle.append(preYearTitle) datePickerTitle.append(preMonthTitle) @@ -87,7 +88,7 @@ export class DatePicker { datePickerTitle.append(nextYearTitle) // week-星期显示 const datePickerWeek = document.createElement('div') - datePickerWeek.classList.add('date-week') + datePickerWeek.classList.add(`${EDITOR_PREFIX}-date-week`) const weekList = ['日', '一', '二', '三', '四', '五', '六'] weekList.forEach(week => { const weekDom = document.createElement('span') @@ -96,14 +97,14 @@ export class DatePicker { }) // day-天数显示 const datePickerDay = document.createElement('div') - datePickerDay.classList.add('date-day') + datePickerDay.classList.add(`${EDITOR_PREFIX}-date-day`) // 日期内容构建 dateWrap.append(datePickerTitle) dateWrap.append(datePickerWeek) dateWrap.append(datePickerDay) // time-时间选择 const timeWrap = document.createElement('ul') - timeWrap.classList.add('time-wrap') + timeWrap.classList.add(`${EDITOR_PREFIX}-time-wrap`) let hourTime: HTMLOListElement let minuteTime: HTMLOListElement let secondTime: HTMLOListElement @@ -135,15 +136,15 @@ export class DatePicker { }) // menu-选择时间、现在、确定 const datePickerMenu = document.createElement('div') - datePickerMenu.classList.add('date-menu') + datePickerMenu.classList.add(`${EDITOR_PREFIX}-date-menu`) const timeMenu = document.createElement('button') - timeMenu.classList.add('date-menu__time') + timeMenu.classList.add(`${EDITOR_PREFIX}-date-menu__time`) timeMenu.innerText = '时间选择' const nowMenu = document.createElement('button') - nowMenu.classList.add('date-menu__now') + nowMenu.classList.add(`${EDITOR_PREFIX}-date-menu__now`) nowMenu.innerText = '此刻' const submitMenu = document.createElement('button') - submitMenu.classList.add('date-menu__submit') + submitMenu.classList.add(`${EDITOR_PREFIX}-date-menu__submit`) submitMenu.innerText = '确定' datePickerMenu.append(timeMenu) datePickerMenu.append(nowMenu) diff --git a/src/editor/core/draw/particle/previewer/Previewer.ts b/src/editor/core/draw/particle/previewer/Previewer.ts index 6af0cd8..b9b24df 100644 --- a/src/editor/core/draw/particle/previewer/Previewer.ts +++ b/src/editor/core/draw/particle/previewer/Previewer.ts @@ -1,3 +1,4 @@ +import { EDITOR_PREFIX } from '../../../../dataset/constant/Editor' import { IEditorOption } from '../../../../interface/Editor' import { IElement, IElementPosition } from '../../../../interface/Element' import { IPreviewerCreateResult, IPreviewerDrawOption } from '../../../../interface/Previewer' @@ -57,7 +58,7 @@ export class Previewer { private _createResizerDom(): IPreviewerCreateResult { // 拖拽边框 const resizerSelection = document.createElement('div') - resizerSelection.classList.add('resizer-selection') + resizerSelection.classList.add(`${EDITOR_PREFIX}-resizer-selection`) resizerSelection.style.display = 'none' resizerSelection.style.borderColor = this.options.resizerColor const resizerHandleList: HTMLDivElement[] = [] @@ -73,7 +74,7 @@ export class Previewer { this.container.append(resizerSelection) // 拖拽镜像 const resizerImageContainer = document.createElement('div') - resizerImageContainer.classList.add('resizer-image') + resizerImageContainer.classList.add(`${EDITOR_PREFIX}-resizer-image`) resizerImageContainer.style.display = 'none' const resizerImage = document.createElement('img') resizerImageContainer.append(resizerImage) @@ -175,7 +176,7 @@ export class Previewer { private _drawPreviewer() { const previewerContainer = document.createElement('div') - previewerContainer.classList.add('image-previewer') + previewerContainer.classList.add(`${EDITOR_PREFIX}-image-previewer`) // 关闭按钮 const closeBtn = document.createElement('i') closeBtn.classList.add('image-close') @@ -185,7 +186,7 @@ export class Previewer { previewerContainer.append(closeBtn) // 图片 const imgContainer = document.createElement('div') - imgContainer.classList.add('image-container') + imgContainer.classList.add(`${EDITOR_PREFIX}-image-container`) const img = document.createElement('img') img.src = this.curElementSrc img.draggable = false @@ -198,7 +199,7 @@ export class Previewer { let scaleSize = 1 let rotateSize = 0 const menuContainer = document.createElement('div') - menuContainer.classList.add('image-menu') + menuContainer.classList.add(`${EDITOR_PREFIX}-image-menu`) const zoomIn = document.createElement('i') zoomIn.classList.add('zoom-in') zoomIn.onclick = () => { diff --git a/src/editor/core/draw/particle/table/TableTool.ts b/src/editor/core/draw/particle/table/TableTool.ts index 8c45140..5751f0c 100644 --- a/src/editor/core/draw/particle/table/TableTool.ts +++ b/src/editor/core/draw/particle/table/TableTool.ts @@ -1,4 +1,5 @@ import { IElement } from '../../../..' +import { EDITOR_PREFIX } from '../../../../dataset/constant/Editor' import { TableOrder } from '../../../../dataset/enum/table/TableTool' import { IEditorOption } from '../../../../interface/Editor' import { IElementPosition } from '../../../../interface/Element' @@ -65,17 +66,17 @@ export class TableTool { const colList = colgroup!.map(col => col.width) // 渲染行 const rowContainer = document.createElement('div') - rowContainer.classList.add('table-tool__row') + rowContainer.classList.add(`${EDITOR_PREFIX}-table-tool__row`) rowContainer.style.transform = `translateX(-${this.translate * scale}px)` for (let r = 0; r < rowList.length; r++) { const rowHeight = rowList[r] * scale const rowItem = document.createElement('div') - rowItem.classList.add('table-tool__row__item') + rowItem.classList.add(`${EDITOR_PREFIX}-table-tool__row__item`) if (r === rowIndex) { rowItem.classList.add('active') } const rowItemAnchor = document.createElement('div') - rowItemAnchor.classList.add('table-tool__anchor') + rowItemAnchor.classList.add(`${EDITOR_PREFIX}-table-tool__anchor`) rowItemAnchor.onmousedown = (evt) => { this._mousedown({ evt, @@ -96,17 +97,17 @@ export class TableTool { // 渲染列 const colContainer = document.createElement('div') - colContainer.classList.add('table-tool__col') + colContainer.classList.add(`${EDITOR_PREFIX}-table-tool__col`) colContainer.style.transform = `translateY(-${this.translate * scale}px)` for (let c = 0; c < colList.length; c++) { const colHeight = colList[c] * scale const colItem = document.createElement('div') - colItem.classList.add('table-tool__col__item') + colItem.classList.add(`${EDITOR_PREFIX}-table-tool__col__item`) if (c === colIndex) { colItem.classList.add('active') } const colItemAnchor = document.createElement('div') - colItemAnchor.classList.add('table-tool__anchor') + colItemAnchor.classList.add(`${EDITOR_PREFIX}-table-tool__anchor`) colItemAnchor.onmousedown = (evt) => { this._mousedown({ evt, @@ -146,14 +147,14 @@ export class TableTool { let startX = 0 let startY = 0 const anchorLine = document.createElement('div') - anchorLine.classList.add('table-anchor__line') + anchorLine.classList.add(`${EDITOR_PREFIX}-table-anchor__line`) if (order === TableOrder.ROW) { - anchorLine.classList.add('table-anchor__line__row') + anchorLine.classList.add(`${EDITOR_PREFIX}-table-anchor__line__row`) anchorLine.style.width = `${width}px` startX = 0 startY = prePageHeight + this.mousedownY - canvasRect.top } else { - anchorLine.classList.add('table-anchor__line__col') + anchorLine.classList.add(`${EDITOR_PREFIX}-table-anchor__line__col`) anchorLine.style.height = `${height}px` startX = this.mousedownX - canvasRect.left startY = prePageHeight diff --git a/src/editor/core/event/GlobalEvent.ts b/src/editor/core/event/GlobalEvent.ts index 0f67c2f..01d4a8f 100644 --- a/src/editor/core/event/GlobalEvent.ts +++ b/src/editor/core/event/GlobalEvent.ts @@ -5,6 +5,7 @@ import { Cursor } from '../cursor/Cursor' import { Control } from '../draw/control/Control' import { Draw } from '../draw/Draw' import { HyperlinkParticle } from '../draw/particle/HyperlinkParticle' +import { DateParticle } from '../draw/particle/date/DateParticle' import { Previewer } from '../draw/particle/previewer/Previewer' import { TableTool } from '../draw/particle/table/TableTool' import { RangeManager } from '../range/RangeManager' @@ -22,6 +23,7 @@ export class GlobalEvent { private tableTool: TableTool private hyperlinkParticle: HyperlinkParticle private control: Control + private dateParticle: DateParticle constructor(draw: Draw, canvasEvent: CanvasEvent) { this.draw = draw @@ -33,6 +35,7 @@ export class GlobalEvent { this.previewer = draw.getPreviewer() this.tableTool = draw.getTableTool() this.hyperlinkParticle = draw.getHyperlinkParticle() + this.dateParticle = draw.getDateParticle() this.control = draw.getControl() } @@ -81,6 +84,7 @@ export class GlobalEvent { this.tableTool.dispose() this.hyperlinkParticle.clearHyperlinkPopup() this.control.destroyControl() + this.dateParticle.clearDatePicker() } public setDragState = () => { diff --git a/src/editor/dataset/constant/Editor.ts b/src/editor/dataset/constant/Editor.ts index 2d36111..1b96168 100644 --- a/src/editor/dataset/constant/Editor.ts +++ b/src/editor/dataset/constant/Editor.ts @@ -1 +1,2 @@ export const EDITOR_COMPONENT = 'editor-component' +export const EDITOR_PREFIX = 'ce' \ No newline at end of file diff --git a/src/style.css b/src/style.css index 7d0e05e..6310c01 100644 --- a/src/style.css +++ b/src/style.css @@ -609,11 +609,8 @@ ul { margin: 80px auto; } -.page-container { - width: 100%; -} -.page-container canvas { +.ce-page-container canvas { box-shadow: rgb(158 161 165 / 40%) 0px 2px 12px 0px; } @@ -761,6 +758,6 @@ ul { left: unset; } -.contextmenu-signature { +.ce-contextmenu-signature { background-image: url('./assets/images/signature.svg'); } \ No newline at end of file