lsadmin/canvas-editor_fex765
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat:add style namespace

Browse Source
This commit is contained in:
Hufe921
2022-12-16 16:05:56 +08:00
parent 790d669401
commit ca676f5993
27 changed files with 511 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cypress/integration/control/select.spec.ts
+1 -1
View File
@@ -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')
})
cypress/integration/control/text.spec.ts
+1 -1
View File
@@ -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')
})
cypress/integration/editor.spec.ts
+2 -2
View File
@@ -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('页面缩放', () => {
index.html
+1 -1
View File
@@ -219,7 +219,7 @@
</div>
</div>
</div>
<div class="editor" editor-component="main"></div>
<div class="editor"></div>
<div class="footer" editor-component="footer">
<div>
<div class="page-mode">
src/editor/assets/css/block/block.css
+1 -1
View File
@@ -1,4 +1,4 @@
.block-item {
.ce-block-item {
position: absolute;
z-index: 0;
overflow: hidden;
src/editor/assets/css/contextmenu/contextmenu.css
+132
View File
@@ -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);
}
src/editor/assets/css/control/select.css
+5 -5
View File
@@ -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;
}
src/editor/assets/css/date/datePicker.css
+38 -38
View File
@@ -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;
}
src/editor/assets/css/hyperlink/hyperlink.css
+24
View File
@@ -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;
}
src/editor/assets/css/index.css
+8 -398
View File
@@ -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;
@@ -61,398 +66,3 @@
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;
}
src/editor/assets/css/previewer/previewer.css
+98
View File
@@ -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);
}
src/editor/assets/css/resizer/resizer.css
+51
View File
@@ -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;
}
src/editor/assets/css/table/table.css
+85
View File
@@ -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;
}
src/editor/core/contextmenu/ContextMenu.ts
+9 -9
View File
@@ -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 {
src/editor/core/cursor/Cursor.ts
+4 -3
View File
@@ -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`)
}
}
src/editor/core/cursor/CursorAgent.ts
+2 -1
View File
@@ -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
src/editor/core/draw/Draw.ts
+2 -2
View File
@@ -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
}
src/editor/core/draw/control/select/SelectControl.ts
+2 -2
View File
@@ -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树：<div><ul><li>item</li></ul></div>
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++) {
src/editor/core/draw/particle/HyperlinkParticle.ts
+2 -1
View File
@@ -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)
src/editor/core/draw/particle/block/BlockParticle.ts
+2 -1
View File
@@ -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
}
src/editor/core/draw/particle/block/modules/BaseBlock.ts
+2 -1
View File
@@ -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
}
src/editor/core/draw/particle/date/DatePicker.ts
+16 -15
View File
@@ -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)
src/editor/core/draw/particle/previewer/Previewer.ts
+6 -5
View File
@@ -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 = () => {
src/editor/core/draw/particle/table/TableTool.ts
+10 -9
View File
@@ -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
src/editor/core/event/GlobalEvent.ts
+4
View File
@@ -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 = () => {
src/editor/dataset/constant/Editor.ts
+1
View File
@@ -1 +1,2 @@
export const EDITOR_COMPONENT = 'editor-component'
export const EDITOR_PREFIX = 'ce'
src/style.css
+2 -5
View File
@@ -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');
}