mce 0.15.25 → 0.15.27

package/dist/index.css

@@ -116,25 +116,20 @@
   min-width: max-content;
   border-radius: 4px;
 }
-.mce-layer__underlay {
+.mce-layer__underlay, .mce-layer__overlay {
   position: absolute;
-  left: 0;
+  left: 12px;
   right: 0;
   top: 4px;
   bottom: 4px;
-  background-color: var(--underlay-color, transparent);
   pointer-events: none;
   border-radius: inherit;
 }
+.mce-layer__underlay {
+  background-color: var(--underlay-color, transparent);
+}
 .mce-layer__overlay {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 4px;
-  bottom: 4px;
   background-color: var(--overlay-color, transparent);
-  pointer-events: none;
-  border-radius: inherit;
 }
 .mce-layer--root {
   font-weight: bold;
@@ -145,6 +140,12 @@
 .mce-layer--hover {
   --overlay-color: rgba(var(--mce-theme-on-background), var(--mce-hover-opacity));
 }
+.mce-layer--active {
+  --underlay-color: rgba(var(--mce-theme-primary), calc(var(--mce-activated-opacity) * 2));
+}
+.mce-layer--active:hover {
+  --overlay-color: rgba(var(--mce-theme-primary), calc(var(--mce-hover-opacity) * 2));
+}
 .mce-layer--active .mce-layer__underlay {
   top: 0;
   bottom: 0;
@@ -160,15 +161,16 @@
   border-bottom-right-radius: 4px;
   bottom: 4px;
 }
-.mce-layer--active {
+.mce-layer--selected {
   --underlay-color: rgba(var(--mce-theme-primary), calc(var(--mce-activated-opacity) * 3));
 }
-.mce-layer--active:hover {
-  --overlay-color: rgba(var(--mce-theme-primary), var(--mce-hover-opacity));
-}
 .mce-layer--open .mce-layer__prepend .mce-icon {
   transform: rotate(90deg);
 }
+.mce-layer__arrow {
+  margin-left: 2px;
+  opacity: 0.6;
+}
 .mce-layer__prepend {
   display: flex;
   align-items: center;
@@ -253,9 +255,9 @@
   min-width: auto;
   overflow: auto;
   background-color: rgb(var(--mce-theme-surface));
+  padding-right: 8px;
 }
 .mce-layers__wrapper {
-  padding: 8px;
   width: max-content;
   min-width: 100%;
 }
@@ -290,7 +292,13 @@
 .mce-made-with div:last-child {
   font-weight: bold;
   letter-spacing: 1px;
-}.mce-overlay > * {
+}.mce-overlay {
+  position: absolute;
+  display: flex;
+  inset: 0;
+  pointer-events: none;
+}
+.mce-overlay > * {
   pointer-events: auto;
 }.mce-menu {
   user-select: none;
@@ -358,6 +366,15 @@
   justify-content: center;
   font-size: 0.75rem;
   margin-right: -6px;
+}.mce-context-menu {
+  pointer-events: auto;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.mce-context-menu .mce-overlay-content {
+  max-height: var(--max-height);
 }.mce-node-creator {
   position: relative;
   width: 100%;
@@ -423,7 +440,7 @@
   padding: 8px;
   flex-basis: max-content;
   border-top: 1px solid rgba(var(--mce-border-color), var(--mce-border-opacity));
-}.mce-tooltip {
+}.mce-tooltip .mce-overlay-content {
   background: rgb(var(--mce-theme-surface-variant));
   color: rgb(var(--mce-theme-on-surface-variant));
   border-radius: 4px;
@@ -1049,13 +1066,13 @@
   height: 100%;
   font-size: 0.75rem;
   border-radius: 4px;
-}.mce-floatbar {
+}.mce-floatbar .mce-overlay-content {
   overflow: visible;
-}.mce-transformable {
+}.mce-transform-controls {
   left: 0;
   top: 0;
 }
-.mce-transformable__svg {
+.mce-transform-controls__svg {
   position: absolute;
   left: 0;
   top: 0;
@@ -1066,25 +1083,29 @@
   color: rgb(var(--mce-theme-primary));
   stroke: currentColor;
 }
-.mce-transformable__diagonal {
+.mce-transform-controls__diagonal {
   stroke-width: 1px;
   stroke-dasharray: 2px;
   visibility: hidden;
 }
-.mce-transformable__rect {
+.mce-transform-controls__rect {
   stroke-width: 1px;
 }
-.mce-transformable__handle {
+.mce-transform-controls__handle {
   fill: white;
   stroke-width: 1px;
-  pointer-events: none;
 }
-.mce-transformable__handle-rect {
+.mce-transform-controls__handle-rect {
   stroke-width: 1px;
   fill: transparent;
   stroke: transparent;
 }
-.mce-transformable__tip {
+.mce-transform-controls__rotator {
+  fill: white;
+  stroke-width: 0.5px;
+  stroke: currentColor;
+}
+.mce-transform-controls__tip {
   position: absolute;
   bottom: 0;
   left: 50%;
@@ -1096,33 +1117,33 @@
   border-radius: 3px;
   text-wrap: nowrap;
 }
-.mce-transformable--dashed .mce-transformable__rect {
+.mce-transform-controls--dashed .mce-transform-controls__rect {
   stroke-dasharray: 4px;
 }
-.mce-transformable--resizing .mce-transformable__diagonal {
+.mce-transform-controls--resizing .mce-transform-controls__diagonal {
   visibility: visible;
 }
-.mce-transformable--moving .mce-transformable__handle {
+.mce-transform-controls--moving .mce-transform-controls__handle {
   visibility: hidden;
 }
-.mce-transformable--moving .mce-transformable__handle-rect {
+.mce-transform-controls--moving .mce-transform-controls__handle-rect {
   visibility: hidden;
 }
-.mce-transformable--moving .mce-transformable__rect {
+.mce-transform-controls--moving .mce-transform-controls__rect {
   opacity: 0.4;
   stroke-width: 0.5px;
 }
-.mce-transformable--moving .mce-transformable__svg-slot {
+.mce-transform-controls--moving .mce-transform-controls__svg-slot {
   opacity: 0.4;
   stroke-width: 0.5px;
 }
-.mce-transformable--hide-ui .mce-transformable__handle {
+.mce-transform-controls--hide-ui .mce-transform-controls__handle {
   visibility: hidden;
 }
-.mce-transformable--hide-ui .mce-transformable__handle-rect {
+.mce-transform-controls--hide-ui .mce-transform-controls__handle-rect {
   visibility: hidden;
 }
-.mce-transformable--hide-ui .mce-transformable__rect {
+.mce-transform-controls--hide-ui .mce-transform-controls__rect {
   visibility: hidden;
 }.mce-cropper {
   pointer-events: auto;
@@ -1319,14 +1340,6 @@
 .mce-editor * {
   box-sizing: border-box;
 }
-.mce-editor__overlay-container {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
 .mce-editor__drawboard {
   position: relative;
   width: 100%;
@@ -1343,6 +1356,14 @@
   width: 100%;
   height: 100%;
   display: block;
+}
+.mce-overlay-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
 }.mce-dialog > * {
   box-shadow: var(--mce-shadow);
 }

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { default as EditorLayoutItem } from './components/shared/LayoutItem.vue'
 export { default as Menu } from './components/shared/Menu.vue';
 export { default as Ruler } from './components/shared/Ruler.vue';
 export { default as Scrollbar } from './components/shared/Scrollbar.vue';
-export { default as Transformable } from './components/shared/Transformable.vue';
+export { default as TransformControls } from './components/shared/TransformControls.vue';
 export { default as EditorToolbelt } from './components/Toolbelt.vue';
 export * from './composables';
 export * from './crdt';