editor-svg 1.0.0

package/src/editor/assets/css/previewer/previewer.css

@@ -0,0 +1,122 @@
+.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);
+}
+
+.ce-image-previewer .ce-image-menu .image-navigate {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ce-image-previewer .ce-image-menu i.image-pre {
+  background-image: url(../../images/image-pre.svg);
+}
+
+.ce-image-previewer .ce-image-menu i.image-next {
+  background-image: url(../../images/image-next.svg);
+}
+
+.ce-image-previewer .ce-image-menu .image-count {
+  color: #000000;
+  font-size: 20px;
+}
+
+.ce-image-previewer .ce-image-menu i.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/src/editor/assets/css/resizer/resizer.css

@@ -0,0 +1,74 @@
+.ce-resizer-selection {
+  position: absolute;
+  border: 1px solid;
+  pointer-events: none;
+}
+
+.ce-resizer-selection .resizer-handle {
+  position: absolute;
+  z-index: 9;
+  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;
+  pointer-events: initial;
+}
+
+.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-size-view {
+  display: flex;
+  align-items: center;
+  height: 20px;
+  white-space: nowrap;
+  position: absolute;
+  z-index: 9;
+  top: -30px;
+  left: 0;
+  opacity: .9;
+  background-color: #000000;
+  padding: 0 5px;
+  border-radius: 4px;
+}
+
+.ce-resizer-size-view span {
+  color: #ffffff;
+  font-size: 12px;
+}
+
+.ce-resizer-image {
+  position: absolute;
+  opacity: 0.5;
+}

package/src/editor/assets/css/table/table.css

@@ -0,0 +1,155 @@
+.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;
+  cursor: pointer;
+  transition: all .3s;
+}
+
+.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:hover {
+  background-color: #dadce0;
+}
+
+.ce-table-tool__row .ce-table-tool__row__item:last-child:after {
+  display: none;
+}
+
+.ce-table-tool__quick__add {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  border-radius: 50%;
+  background-color: #E2E6ED;
+  cursor: pointer;
+}
+
+.ce-table-tool__quick__add::after {
+  content: '+';
+  color: #ffffff;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -55%);
+}
+
+.ce-table-tool__select {
+  width: 16px;
+  height: 18px;
+  position: absolute;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.ce-table-tool__select:hover {
+  background-color: #E2E6ED;
+}
+
+.ce-table-tool__select::after {
+  content: ':::';
+  color: #AAAAAB;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-75%, -50%) rotate(-90deg);
+}
+
+.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;
+  cursor: pointer;
+  transition: all .3s;
+}
+
+.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:hover {
+  background-color: #dadce0;
+}
+
+.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;
+}
+
+.ce-table-tool__border {
+  position: absolute;
+  z-index: 1;
+  background: transparent;
+  pointer-events: none;
+}
+
+.ce-table-tool__border__row {
+  position: absolute;
+  cursor: row-resize;
+  pointer-events: auto;
+}
+
+.ce-table-tool__border__col {
+  position: absolute;
+  cursor: col-resize;
+  pointer-events: auto;
+}

package/src/editor/assets/css/zone/zone.css

@@ -0,0 +1,61 @@
+.ce-zone-indicator>div {
+  padding: 3px 6px;
+  color: #000000;
+  font-size: 12px;
+  background: rgb(218 231 252);
+  position: absolute;
+  transform-origin: 0 0;
+}
+
+.ce-zone-indicator-border__top,
+.ce-zone-indicator-border__bottom,
+.ce-zone-indicator-border__left,
+.ce-zone-indicator-border__right {
+  display: block;
+  position: absolute;
+  z-index: 0;
+}
+
+.ce-zone-indicator-border__top {
+  border-top: 2px dashed rgb(238, 238, 238);
+}
+
+.ce-zone-indicator-border__bottom {
+  border-top: 2px dashed rgb(238, 238, 238);
+  width: 100%;
+}
+
+.ce-zone-indicator-border__left {
+  border-left: 2px dashed rgb(238, 238, 238);
+}
+
+.ce-zone-indicator-border__right {
+  border-right: 2px dashed rgb(238, 238, 238);
+}
+
+.ce-zone-tip {
+  display: none;
+  align-items: center;
+  height: 30px;
+  white-space: nowrap;
+  position: fixed;
+  opacity: .9;
+  background-color: #000000;
+  padding: 0 5px;
+  border-radius: 4px;
+  z-index: 9;
+  transition: all .3s;
+  outline: none;
+  user-select: none;
+  pointer-events: none;
+  transform: translate(10px, 10px);
+}
+
+.ce-zone-tip.show {
+  display: flex;
+}
+
+.ce-zone-tip span {
+  color: #ffffff;
+  font-size: 12px;
+}

package/src/editor/assets/images/close.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M23.97 7l1.415 1.414-7.779 7.778 7.779 7.779-1.414 1.414-7.779-7.779-7.778 7.779L7 23.97l7.778-7.779L7 8.414 8.414 7l7.778 7.778L23.971 7z" fill="#3D4757" fill-rule="evenodd"/></svg>

package/src/editor/assets/images/delete-col.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path stroke="#929AA8" d="M5.5 7.5v-6h4v6z"/><path fill="#3D4757" d="M13 15V3h1v12zM1 15V3h1v12zm4 0v-1h1v1zm1-1v-1h1v1zm1-1v-1h1v1zm-1-1v-1h1v1zm-1-1v-1h1v1zm3 1v-1h1v1zm0 2v-1h1v1zm1-3v-1h1v1zm0 4v-1h1v1z"/></g></svg>

package/src/editor/assets/images/delete-row-col.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path stroke="#929AA8" d="M8.5 6.5h6v2h-6z"/><path fill="#3D4757" d="M2 12h11v1H2zM2 2h11v1H2zm.63 3L7 9.35l-.635.65L2 5.63z"/><path fill="#3D4757" d="M2 9.363L6.355 5 7 5.707 2.695 10z"/></g></svg>

package/src/editor/assets/images/delete-row.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path stroke="#929AA8" d="M8.5 5.5h6v4h-6z"/><path fill="#3D4757" d="M1 13h12v1H1zM1 1h12v1H1zm0 4h1v1H1zm1 1h1v1H2zm1 1h1v1H3zm1-1h1v1H4zm1-1h1v1H5zM4 8h1v1H4zM2 8h1v1H2zm3 1h1v1H5zM1 9h1v1H1z"/></g></svg>

package/src/editor/assets/images/delete-table.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M14 13h-1v-3H2v3H1v-3a1 1 0 011-1h11a1 1 0 011 1v3z" fill-rule="nonzero"/><path d="M5.625 2L10 6.375 9.375 7 5 2.625z"/><path d="M5 6.375L9.375 2l.625.625L5.625 7z"/></g></svg>

package/src/editor/assets/images/image-change.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g transform="translate(2 4)" fill="#3D4757"><circle fill-rule="nonzero" cx="3" cy="1" r="1"/><path d="M7.473 8.223L3.47 4.107 0 7.667v-1.5C1.715 4.6 2.707 3.664 2.975 3.358c.402-.457.651-.39 1.042 0L7.473 7 9.96 4.349c.414-.462.62-.462 1.011-.071L13 7.06v1.5l-2.51-3.41-3.017 3.072z"/></g><path d="M6 1.5H1.5v12h13v-4V13a.5.5 0 01-.5.5H2a.5.5 0 01-.5-.5V2a.5.5 0 01.5-.5h4zm8.5 8V6l-.5.5h1l-.5-.5v3.5zM6 1.5h4L9.5 1v1l.5-.5H6z" stroke="#3D4757"/><path d="M13.085 1.316l-3.814 4a1 1 0 001.458 1.368l3.815-4a1 1 0 10-1.459-1.368z" fill="#3D4757" fill-rule="nonzero"/></g></svg>

package/src/editor/assets/images/image-download.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 15v3.5h15V15H21v5H3v-5h1.5zm8.232-11.226v9.196l4.05-4.05 1.06 1.06-5.834 5.834-5.833-5.833 1.06-1.06 3.998 3.996V3.774h1.5z" fill="#3D4757"/></svg>

package/src/editor/assets/images/image-next.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 4.063L13.125 10 7.5 15.938" stroke="#3D4757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/editor/assets/images/image-pre.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 4.063L6.875 10l5.625 5.938" stroke="#3D4757" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/editor/assets/images/image.svg

@@ -0,0 +1 @@
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 16 16" xml:space="preserve"><style>.st0{fill:#3d4757}</style><g id="_x30_0-公共_x2F_02工具栏_x2F_插入图片-16px-"><g id="Group-19" transform="translate(1 1)"><path id="Combined-Shape" class="st0" d="M1 0h12c.6 0 1 .4 1 1v11c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1zm0 1v11h12V1H1z"/><circle id="椭圆形" class="st0" cx="10" cy="4" r="1"/><path id="Path" class="st0" d="M8.5 11.2l-4-4.1L1 10.7V9.2c1.7-1.6 2.7-2.5 3-2.8.4-.5.7-.4 1 0L8.5 10 11 7.3c.4-.5.6-.5 1-.1l2 2.8v1.5l-2.5-3.4-3 3.1z"/></g></g></svg>

package/src/editor/assets/images/insert-bottom-row.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#3D4757" d="M7 11h1V8H7zm.5 3L5 11h5z"/><rect stroke="#3D4757" x="1.5" y="2.5" width="12" height="3" rx="1"/></g></svg>

package/src/editor/assets/images/insert-left-col.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#3D4757" d="M11 7v1h3V7zm-3 .5L11 5v5z"/><rect stroke="#3D4757" transform="rotate(90 4 7.5)" x="-2" y="6" width="12" height="3" rx="1"/></g></svg>

package/src/editor/assets/images/insert-right-col.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#3D4757" d="M5 8V7H2v1zm3-.5L5 10V5z"/><rect stroke="#3D4757" transform="rotate(90 12 7.5)" x="6" y="6" width="12" height="3" rx="1"/></g></svg>

package/src/editor/assets/images/insert-row-col.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path stroke="#3D4757" d="M8.5 5.5h6v4h-6z"/><path fill="#3D4757" d="M4 7v1h2V7zm-3 .5L4 5v5zM1 1h12v1H1zm0 12h12v1H1z"/></g></svg>

package/src/editor/assets/images/insert-top-row.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#3D4757" d="M8 5H7v3h1zm-.5-3L10 5H5z"/><rect stroke="#3D4757" x="1.5" y="10.5" width="12" height="3" rx="1"/></g></svg>

package/src/editor/assets/images/merge-cancel-cell.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M6 1v1H2v11h4v1H2a1 1 0 01-1-1V2a1 1 0 011-1h4zm3 0h4a1 1 0 011 1v11a1 1 0 01-1 1H9v-1h4V2H9V1z"/><path fill-rule="nonzero" d="M6 1h1v4H6zm2 0h1v4H8z"/><path d="M3 7.5L5 6v3zm9 0L10 6v3z"/><path d="M4 7h3v1H4zm4 0h3v1H8z"/><path fill-rule="nonzero" d="M8 10h1v4H8zm-2 0h1v4H6z"/></g></svg>

package/src/editor/assets/images/merge-cell.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M6 1v1H2v11h4v1H2a1 1 0 01-1-1V2a1 1 0 011-1h4zm3 0h4a1 1 0 011 1v11a1 1 0 01-1 1H9v-1h4V2H9V1z"/><path fill-rule="nonzero" d="M6 1h1v4H6zm2 0h1v4H8z"/><path d="M8 7.5L10 6v3zm-1 0L5 6v3z"/><path d="M9 7h3v1H9zM3 7h3v1H3z"/><path fill-rule="nonzero" d="M8 10h1v4H8zm-2 0h1v4H6z"/></g></svg>

package/src/editor/assets/images/original-size.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M4 4h24v24H4V4zm2 2v20h20V6H6zm4 5h2v10h-2V11zm5 2h2v2h-2v-2zm0 4h2v2h-2v-2zm5-6h2v10h-2V11z" fill="#3D4757"/></svg>

package/src/editor/assets/images/print.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M12 4h-1V2H5v2H4V2a1 1 0 011-1h6a1 1 0 011 1v2zm0 5v4a1 1 0 01-1 1H5a1 1 0 01-1-1V9h1v4h6V9h1z"/><path d="M12 12v-1h2V5H2v6h2v1H2a1 1 0 01-1-1V5a1 1 0 011-1h12a1 1 0 011 1v6a1 1 0 01-1 1h-2z"/><path d="M3 8h10v1H3zm8-2h2v1h-2z"/></g></svg>

package/src/editor/assets/images/rotate.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757" fill-rule="evenodd"><path d="M16 4c6.627 0 12 5.373 12 12a11.97 11.97 0 01-4 8.944V23h-.86A9.968 9.968 0 0026 16c0-5.523-4.477-10-10-10S6 10.477 6 16c0 5.185 3.947 9.449 9 9.95v2.009C8.84 27.451 4 22.291 4 16 4 9.373 9.373 4 16 4z" fill-rule="nonzero"/><path d="M19.879 27.328l1.767-6.717 4.95 4.95z"/></g></svg>

package/src/editor/assets/images/submenu-dropdown.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h16v16H0z"/><g fill="#767C85"><path d="M7 12.243l-.707-.707 4.243-4.243.707.707z"/><path d="M6.293 4.464L7 3.757 11.243 8l-.707.707z"/></g></g></svg>

package/src/editor/assets/images/table-border-all.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#3D4757"/><path fill="#3D4757" d="M3 8h11v1H3z"/><path fill="#3D4757" d="M9 3v11H8V3z"/></svg>

package/src/editor/assets/images/table-border-dash.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 3h-1V2h1a1 1 0 011 1v1h-1V3zm-3-1v1H8.5v2h-1V3H6V2h4zM4 2v1H3v1H2V3a1 1 0 011-1h1zM2 6h1v1.5h2v1H3V10H2V6zm0 6h1v1h1v1H3a1 1 0 01-1-1v-1zm4 2v-1h1.5v-2h1v2H10v1H6zm6 0v-1h1v-1h1v1a1 1 0 01-1 1h-1zm2-4h-1V8.5h-2v-1h2V6h1v4zM8.5 7.5v-1h-1v1h-1v1h1v1h1v-1h1v-1h-1z" fill="#000000"/></svg>

package/src/editor/assets/images/table-border-empty.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 3h-1V2h1a1 1 0 011 1v1h-1V3zm-3-1v1H8.5v2h-1V3H6V2h4zM4 2v1H3v1H2V3a1 1 0 011-1h1zM2 6h1v1.5h2v1H3V10H2V6zm0 6h1v1h1v1H3a1 1 0 01-1-1v-1zm4 2v-1h1.5v-2h1v2H10v1H6zm6 0v-1h1v-1h1v1a1 1 0 01-1 1h-1zm2-4h-1V8.5h-2v-1h2V6h1v4zM8.5 7.5v-1h-1v1h-1v1h1v1h1v-1h1v-1h-1z" fill="#AAACB0"/></svg>

package/src/editor/assets/images/table-border-external.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#3D4757"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9 5V3H8v2h1zm0 9v-2H8v2h1zM5 8H3v1h2V8zm9 0h-2v1h2V8zM9 7v1h1v1H9v1H8V9H7V8h1V7h1z" fill="#AAACB0"/></svg>

package/src/editor/assets/images/table-border-internal.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#AAACB0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9 5V3H8v2h1zm0 9v-2H8v2h1zM5 8H3v1h2V8zm9 0h-2v1h2V8zM9 7v1h1v1H9v1H8V9H7V8h1V7h1z" fill="#3D4757"/></svg>

package/src/editor/assets/images/table-border-td-back.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#AAACB0" /><path stroke="#3D4757" d="M3 3 l11 11" /></svg>

package/src/editor/assets/images/table-border-td-bottom.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#AAACB0"/><path stroke="#3D4757" stroke-width="2" d="M2.5 14 h12"/></svg>

package/src/editor/assets/images/table-border-td-forward.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#AAACB0" /><path stroke="#3D4757" d="M14 3 l-11 11" /></svg>

package/src/editor/assets/images/table-border-td-left.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#AAACB0"/><path stroke="#3D4757" stroke-width="2" d="M3 3 v11"/></svg>

package/src/editor/assets/images/table-border-td-right.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#AAACB0"/><path stroke="#3D4757" stroke-width="2" d="M14 3 v11"/></svg>

package/src/editor/assets/images/table-border-td-top.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#AAACB0"/><path stroke="#3D4757" stroke-width="2" d="M2.5 3 h12"/></svg>

package/src/editor/assets/images/table-border-td.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 3a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3z" stroke="#AAACB0"/><path stroke="#3D4757" d="M8.5 2.5 v6 h-6"/></svg>

package/src/editor/assets/images/vertical-align-bottom.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 9h1V3H7zm.5 3L5 9h5zM2 13h11v1H2z" fill="#3D4757" fill-rule="evenodd"/></svg>

package/src/editor/assets/images/vertical-align-middle.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 12H7v3h1zm-.5-3l2.5 3H5zM7 3h1V0H7zm.5 3L5 3h5zM2 7h11v1H2z" fill="#3D4757" fill-rule="evenodd"/></svg>

package/src/editor/assets/images/vertical-align-top.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M8 8H7v6h1zm-.5-3L10 8H5zM2 3h11v1H2z" fill="#3D4757" fill-rule="evenodd"/></svg>

package/src/editor/assets/images/vertical-align.svg

@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M2 13h12v1H2zm0-3h8v1H2zm0-3h12v1H2zm0-6h12v1H2zm0 3h8v1H2z" fill="#3d4757" fill-rule="evenodd"/></svg>

package/src/editor/assets/images/zoom-in.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M14 14v-4h2v4h4v2h-4v4h-2v-4h-4v-2h4zm8.749 10.163A11.952 11.952 0 0115 27C8.373 27 3 21.627 3 15S8.373 3 15 3s12 5.373 12 12c0 2.954-1.067 5.658-2.837 7.749l4.908 4.908-1.414 1.414-4.908-4.908zM15 25c5.523 0 10-4.477 10-10S20.523 5 15 5 5 9.477 5 15s4.477 10 10 10z" fill="#3D4757"/></svg>

package/src/editor/assets/images/zoom-out.svg

@@ -0,0 +1 @@
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M22.749 24.163A11.952 11.952 0 0115 27C8.373 27 3 21.627 3 15S8.373 3 15 3s12 5.373 12 12c0 2.954-1.067 5.658-2.837 7.749l4.908 4.908-1.414 1.414-4.908-4.908zM15 25c5.523 0 10-4.477 10-10S20.523 5 15 5 5 9.477 5 15s4.477 10 10 10zm-5-11h10v2H10v-2z" fill="#3D4757"/></svg>

package/src/editor/core/actuator/Actuator.ts

@@ -0,0 +1,21 @@
+import { EventBusMap } from '../../interface/EventBus'
+import { Draw } from '../draw/Draw'
+import { EventBus } from '../event/eventbus/EventBus'
+import { positionContextChange } from './handlers/positionContextChange'
+
+export class Actuator {
+  private draw: Draw
+  private eventBus: EventBus<EventBusMap>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.eventBus = draw.getEventBus()
+    this.execute()
+  }
+
+  private execute() {
+    this.eventBus.on('positionContextChange', payload => {
+      positionContextChange(this.draw, payload)
+    })
+  }
+}

package/src/editor/core/actuator/handlers/positionContextChange.ts

@@ -0,0 +1,13 @@
+import { IPositionContextChangePayload } from '../../../interface/Listener'
+import { Draw } from '../../draw/Draw'
+
+export function positionContextChange(
+  draw: Draw,
+  payload: IPositionContextChangePayload
+) {
+  const { value, oldValue } = payload
+  // 表格工具移除
+  if (oldValue.isTable && !value.isTable) {
+    draw.getTableTool().dispose()
+  }
+}