mce 0.18.3 → 0.18.5

package/dist/components/EditorLayout.vue.d.ts

@@ -10,38 +10,16 @@ type __VLS_Slots = Slots & {
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     editor: typeof Editor;
     resizeStrategy: import("vue").PropType<import("../composables").ResizeStrategy>;
-    activeStrategy: {
-        type: import("vue").PropType<import("../composables").ActiveStrategy>;
-        default: import("../composables").ActiveStrategy;
-    };
-    doubleclickStrategy: {
-        type: import("vue").PropType<import("../composables").DoubleclickStrategy>;
-        default: import("../composables").DoubleclickStrategy;
-    };
-    hoverStrategy: {
-        type: import("vue").PropType<import("../composables").HoverStrategy>;
-        default: import("../composables").HoverStrategy;
-    };
+    activeStrategy: import("vue").PropType<import("../composables").ActiveStrategy>;
+    doubleclickStrategy: import("vue").PropType<import("../composables").DoubleclickStrategy>;
+    hoverStrategy: import("vue").PropType<import("../composables").HoverStrategy>;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     editor: typeof Editor;
     resizeStrategy: import("vue").PropType<import("../composables").ResizeStrategy>;
-    activeStrategy: {
-        type: import("vue").PropType<import("../composables").ActiveStrategy>;
-        default: import("../composables").ActiveStrategy;
-    };
-    doubleclickStrategy: {
-        type: import("vue").PropType<import("../composables").DoubleclickStrategy>;
-        default: import("../composables").DoubleclickStrategy;
-    };
-    hoverStrategy: {
-        type: import("vue").PropType<import("../composables").HoverStrategy>;
-        default: import("../composables").HoverStrategy;
-    };
-}>> & Readonly<{}>, {
-    activeStrategy: import("../composables").ActiveStrategy;
-    doubleclickStrategy: import("../composables").DoubleclickStrategy;
-    hoverStrategy: import("../composables").HoverStrategy;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    activeStrategy: import("vue").PropType<import("../composables").ActiveStrategy>;
+    doubleclickStrategy: import("vue").PropType<import("../composables").DoubleclickStrategy>;
+    hoverStrategy: import("vue").PropType<import("../composables").HoverStrategy>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/PathEditor.vue.d.ts

@@ -0,0 +1,13 @@
+import type { Element2D } from 'modern-canvas';
+type __VLS_Props = {
+    element: Element2D;
+    scale: [number, number];
+    offset: [number, number];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    end: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onEnd?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/Selection.vue.d.ts

@@ -4,13 +4,13 @@ declare var __VLS_8: {
     ok: () => void;
     cancel: () => void;
     setAspectRatio: (ratio: 0 | [number, number]) => void;
-}, __VLS_10: {}, __VLS_25: {};
+}, __VLS_10: {}, __VLS_32: {};
 type __VLS_Slots = {} & {
     'foreground-cropper'?: (props: typeof __VLS_8) => any;
 } & {
     default?: (props: typeof __VLS_10) => any;
 } & {
-    transform?: (props: typeof __VLS_25) => any;
+    transform?: (props: typeof __VLS_32) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {
     transform: Readonly<import("vue").ShallowRef<({
@@ -100,8 +100,8 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             movable: boolean;
             rotatable: boolean;
             resizable: boolean;
-            tag: string | any;
             resizeStrategy: "free" | "lockAspectRatio";
+            tag: string | any;
             lockAspectRatioStrategy: "all" | "diagonal";
             handleShape: "rect" | "circle";
             handles: ("move" | "resize-b" | "resize-r" | "resize-l" | "resize-t" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
@@ -133,8 +133,8 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         movable: boolean;
         rotatable: boolean;
         resizable: boolean;
-        tag: string | any;
         resizeStrategy: "free" | "lockAspectRatio";
+        tag: string | any;
         lockAspectRatioStrategy: "all" | "diagonal";
         handleShape: "rect" | "circle";
         handles: ("move" | "resize-b" | "resize-r" | "resize-l" | "resize-t" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
@@ -166,7 +166,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         onStart?: ((context: Mce.TransformContext) => any) | undefined;
         onEnd?: ((context: Mce.TransformContext) => any) | undefined;
         "onUpdate:modelValue"?: ((value: Partial<Mce.TransformValue> | undefined) => any) | undefined;
-    }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "threshold" | "ui" | "movable" | "rotatable" | "resizable" | "tag" | "resizeStrategy" | "lockAspectRatioStrategy" | "handleShape" | "handles")> & {
+    }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "threshold" | "ui" | "movable" | "rotatable" | "resizable" | "resizeStrategy" | "tag" | "lockAspectRatioStrategy" | "handleShape" | "handles")> & {
         start: (event?: MouseEvent, index?: number) => boolean;
         activeHandle: ("move" | "resize-b" | "resize-r" | "resize-l" | "resize-t" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined;
         transforming: boolean;
@@ -285,8 +285,8 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
             movable: boolean;
             rotatable: boolean;
             resizable: boolean;
-            tag: string | any;
             resizeStrategy: "free" | "lockAspectRatio";
+            tag: string | any;
             lockAspectRatioStrategy: "all" | "diagonal";
             handleShape: "rect" | "circle";
             handles: ("move" | "resize-b" | "resize-r" | "resize-l" | "resize-t" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
@@ -318,8 +318,8 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         movable: boolean;
         rotatable: boolean;
         resizable: boolean;
-        tag: string | any;
         resizeStrategy: "free" | "lockAspectRatio";
+        tag: string | any;
         lockAspectRatioStrategy: "all" | "diagonal";
         handleShape: "rect" | "circle";
         handles: ("move" | "resize-b" | "resize-r" | "resize-l" | "resize-t" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl")[];
@@ -351,7 +351,7 @@ declare const __VLS_base: import("vue").DefineComponent<{}, {
         onStart?: ((context: Mce.TransformContext) => any) | undefined;
         onEnd?: ((context: Mce.TransformContext) => any) | undefined;
         "onUpdate:modelValue"?: ((value: Partial<Mce.TransformValue> | undefined) => any) | undefined;
-    }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "threshold" | "ui" | "movable" | "rotatable" | "resizable" | "tag" | "resizeStrategy" | "lockAspectRatioStrategy" | "handleShape" | "handles")> & {
+    }>, "transforming" | "start" | "activeHandle" | ("offset" | "scale" | "threshold" | "ui" | "movable" | "rotatable" | "resizable" | "resizeStrategy" | "tag" | "lockAspectRatioStrategy" | "handleShape" | "handles")> & {
         start: (event?: MouseEvent, index?: number) => boolean;
         activeHandle: ("move" | "resize-b" | "resize-r" | "resize-l" | "resize-t" | "resize-br" | "resize-tr" | "resize-tl" | "resize-bl" | "rotate-br" | "rotate-tr" | "rotate-tl" | "rotate-bl" | "round-br" | "round-tr" | "round-tl" | "round-bl") | undefined;
         transforming: boolean;

package/dist/components/Workflow.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/shared/Transform.vue.d.ts

@@ -76,8 +76,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     movable: boolean;
     rotatable: boolean;
     resizable: boolean;
-    tag: string | any;
     resizeStrategy: "free" | "lockAspectRatio";
+    tag: string | any;
     lockAspectRatioStrategy: "all" | "diagonal";
     handleShape: "rect" | "circle";
     handles: Handle[];

package/dist/components/timeline/Segment.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     endTime: number;
     msPerPx?: number;
     active?: boolean;
+    rev?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     msPerPx: number;

package/dist/composables/icons.d.ts

@@ -5,12 +5,17 @@ export interface IconAliases {
     close: IconValue;
     play: IconValue;
     pause: IconValue;
+    skipPrevious: IconValue;
+    skipNext: IconValue;
+    stepBackward: IconValue;
+    stepForward: IconValue;
     gps: IconValue;
     arrowRight: IconValue;
     arrowDown: IconValue;
     mouseLeftClick: IconValue;
     mouseRightClick: IconValue;
     check: IconValue;
+    plus: IconValue;
     collapse: IconValue;
     frame: IconValue;
     group: IconValue;

package/dist/index.css

@@ -535,7 +535,6 @@
   height: 100%;
   --text-color: rgba(var(--m-theme-on-background), var(--m-low-emphasis-opacity));
   --border-color: rgba(var(--m-border-color), var(--m-border-opacity));
-  cursor: pointer;
 }
 .m-ruler--vertical {
   width: var(--size);
@@ -754,6 +753,44 @@
 .m-cropper__transform_rect {
   width: 100%;
   height: 100%;
+}.m-path-editor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  color: rgba(var(--m-theme-primary), 1);
+}
+.m-path-editor__hit {
+  fill: none;
+  stroke: transparent;
+  stroke-width: 12;
+  pointer-events: stroke;
+  cursor: copy;
+}
+.m-path-editor__handle-line {
+  stroke: currentColor;
+  stroke-width: 1;
+  stroke-dasharray: 3 2;
+  opacity: 0.6;
+}
+.m-path-editor__anchor {
+  fill: white;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  pointer-events: auto;
+  cursor: move;
+}
+.m-path-editor__anchor--selected {
+  fill: rgba(var(--m-theme-primary), 1);
+}
+.m-path-editor__control {
+  fill: currentColor;
+  stroke: white;
+  stroke-width: 1;
+  pointer-events: auto;
+  cursor: move;
 }.m-selection {
   position: absolute;
   left: 0;
@@ -1020,7 +1057,6 @@
   top: 0;
   width: 10px;
   color: rgb(var(--m-theme-on-surface));
-  cursor: col-resize;
 }
 .m-payhead__header {
   position: relative;
@@ -1073,75 +1109,6 @@
 .m-segment--active {
   outline: 1px solid rgb(var(--m-theme-on-surface));
 }
-.m-segment__animation {
-  position: absolute;
-  bottom: 2px;
-}
-.m-segment__animation--in {
-  width: 0;
-  left: 4px;
-  background-color: white;
-  height: 2px;
-}
-.m-segment__animation--in:after {
-  border-color: transparent transparent transparent white;
-  border-style: solid;
-  border-width: 5px 0 0 6px;
-  bottom: 0;
-  content: "";
-  display: block;
-  height: 0;
-  left: 100%;
-  position: absolute;
-  width: 0;
-}
-.m-segment__animation--out {
-  width: 0;
-  right: 4px;
-  background-color: white;
-  height: 2px;
-}
-.m-segment__animation--out:before {
-  border-color: transparent white transparent transparent;
-  border-style: solid;
-  border-width: 5px 6px 0 0;
-  bottom: 0;
-  content: "";
-  display: block;
-  height: 0;
-  position: absolute;
-  right: 100%;
-  width: 0;
-}
-.m-segment__animation--stay {
-  left: 0;
-  background-color: white;
-  height: 2px;
-}
-.m-segment__animation--stay:before {
-  border-color: transparent white transparent transparent;
-  border-style: solid;
-  border-width: 5px 6px 0 0;
-  bottom: 0;
-  content: "";
-  display: block;
-  height: 0;
-  position: absolute;
-  right: 100%;
-  width: 0;
-}
-.m-segment__animation--stay:after {
-  border-color: transparent transparent transparent white;
-  border-style: solid;
-  border-width: 5px 0 0 6px;
-  bottom: 0;
-  content: "";
-  display: block;
-  height: 0;
-  left: 100%;
-  position: absolute;
-  width: 0;
-}
 .m-segment__edge {
   align-items: center;
   background-color: rgb(var(--m-theme-on-surface));
@@ -1173,6 +1140,9 @@
   right: 0;
 }
 .m-segment__node {
+  position: relative;
+  z-index: 1;
+  cursor: move;
   border-radius: 2px;
   padding: 2px 8px;
   white-space: nowrap;
@@ -1181,13 +1151,31 @@
 }
 .m-segment__block {
   position: absolute;
-  left: 0;
   top: 0;
-  font-size: 12px;
-  padding: 0 8px;
-  text-wrap: nowrap;
-  overflow: visible;
-  border-bottom: 1px solid rgb(var(--m-theme-surface));
+  height: 100%;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  border-radius: 2px;
+  box-sizing: border-box;
+  pointer-events: auto;
+  overflow: hidden;
+}
+.m-segment__block--animation {
+  background-color: rgba(255, 255, 255, 0.18);
+}
+.m-segment__block--animation:hover {
+  background-color: rgba(255, 255, 255, 0.28);
+}
+.m-segment__block--media {
+  background-color: rgba(64, 156, 96, 0.85);
+}
+.m-segment__block--media:hover {
+  background-color: rgb(64, 156, 96);
+}
+.m-segment__block--video {
+  background-color: rgba(116, 84, 196, 0.85);
+}
+.m-segment__block--video:hover {
+  background-color: rgb(116, 84, 196);
 }.m-track {
   position: relative;
   display: flex;
@@ -1195,15 +1183,92 @@
   background-color: rgb(var(--m-theme-background));
 }.m-trackhead {
   display: flex;
+  align-items: center;
   height: 22px;
   min-height: 22px;
-  align-items: center;
-  color: rgba(var(--m-theme-on-surface), 0.6);
+  padding: 0 4px;
+  color: rgba(var(--m-theme-on-surface), 0.8);
   font-size: 0.75rem;
   width: 100%;
+  border-radius: 4px;
+  user-select: none;
+}
+.m-trackhead:hover {
+  background-color: rgba(var(--m-theme-on-surface), 0.06);
+}
+.m-trackhead--selected {
+  background-color: rgba(var(--m-theme-primary), calc(var(--m-activated-opacity) * 3));
+}
+.m-trackhead--dropping {
+  box-shadow: 0 1px 0 0 rgb(var(--m-theme-on-background));
+}
+.m-trackhead__thumbnail {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  flex: none;
+  margin-right: 6px;
+  font-size: 0.875rem;
+  opacity: 0.7;
+}
+.m-trackhead__name {
+  flex: 1;
+  min-width: 0;
+  position: relative;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+.m-trackhead__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0 2px;
+  margin: 0;
+  border: none;
+  outline: 1px solid rgb(var(--m-theme-primary));
+  background: rgb(var(--m-theme-surface));
+  color: inherit;
+  font: inherit;
+  border-radius: 2px;
+}
+.m-trackhead__action {
+  display: flex;
+  align-items: center;
+  flex: none;
+  gap: 1px;
+  margin-left: 4px;
+}
+.m-trackhead__action .m-trackhead__btn {
+  opacity: 0;
+  pointer-events: none;
+}
+.m-trackhead__action--show .m-trackhead__btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+.m-trackhead__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: inherit;
+  font-size: 0.75rem;
+}
+.m-trackhead__btn:hover {
+  background-color: rgba(var(--m-theme-on-surface), 0.12);
+}
+.m-trackhead__btn--show {
+  opacity: 1 !important;
+  pointer-events: auto !important;
 }.m-timeline {
   position: relative;
   color: rgb(var(--m-theme-on-surface));
@@ -1216,15 +1281,58 @@
 .m-timeline__toolbar {
   display: flex;
   align-items: center;
-  height: 24px;
+  gap: 8px;
+  height: 28px;
+  padding: 0 8px;
   border-bottom: 1px solid rgba(var(--m-border-color), var(--m-border-opacity));
+  font-size: 0.75rem;
+  user-select: none;
 }
-.m-timeline__play {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
+.m-timeline__time {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-variant-numeric: tabular-nums;
+  min-width: 120px;
+}
+.m-timeline__time-sep {
+  opacity: 0.5;
+}
+.m-timeline__time--muted {
+  opacity: 0.5;
+}
+.m-timeline__controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.m-timeline__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
   cursor: pointer;
 }
+.m-timeline__btn:hover {
+  background-color: rgba(var(--m-theme-on-surface), 0.08);
+}
+.m-timeline__btn:active {
+  background-color: rgba(var(--m-theme-on-surface), 0.16);
+}
+.m-timeline__btn--primary {
+  width: 26px;
+  height: 26px;
+}
+.m-timeline__toolbar-spacer {
+  flex: 1;
+}
 .m-timeline__main {
   position: relative;
   display: flex;
@@ -1267,6 +1375,9 @@
   height: 24px;
   min-height: 24px;
 }
+.m-timeline__ruler, .m-timeline__ruler * {
+  cursor: default;
+}
 .m-timeline__track {
   position: relative;
   display: flex;
@@ -1347,6 +1458,81 @@
 .m-text-editor__editor {
   pointer-events: auto !important;
   cursor: move;
+}.m-workflow {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+.m-workflow__preview {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+.m-workflow__preview path {
+  fill: none;
+  stroke: rgb(var(--m-theme-primary, 30 200 230));
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+.m-workflow__port {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin: -9px 0 0 -9px;
+  border-radius: 50%;
+  background: rgb(var(--m-theme-primary, 30 200 230));
+  color: #fff;
+  font-size: 12px;
+  cursor: crosshair;
+  pointer-events: auto;
+  user-select: none;
+  box-shadow: 0 0 0 2px #fff;
+}
+.m-workflow__backdrop {
+  position: fixed;
+  inset: 0;
+  pointer-events: auto;
+}
+.m-workflow__menu {
+  position: absolute;
+  min-width: 200px;
+  padding: 6px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
+  pointer-events: auto;
+}
+.m-workflow__menu-title {
+  padding: 6px 10px;
+  font-size: 12px;
+  color: #9ca3af;
+}
+.m-workflow__menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  font-size: 14px;
+  color: #1f2937;
+  cursor: pointer;
+}
+.m-workflow__menu-item:hover {
+  background: #f3f4f6;
+}
+.m-workflow__menu-kbd {
+  font-size: 12px;
+  color: #9ca3af;
 }.m-floatbar .m-overlay-content {
   overflow: visible;
 }.m-float-panel {

package/dist/index.d.ts

@@ -18,5 +18,6 @@ export * from './plugin';
 export * from './plugins';
 export * from './scene';
 export * from './types';
+export * from './utils/create';
 export type { Camera2D, Element2D, Engine } from 'modern-canvas';
 export type { Document, Element, NormalizedElement } from 'modern-idoc';