polotno 3.0.0-beta.36 → 3.0.0-beta.37

package/blueprint.polotno.css

@@ -3668,7 +3668,7 @@ a > .bp6-dark .bp6-running-text code{
   display:flex;
 }
 .bp6-breadcrumbs > li::after{
-  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71s-.11-.53-.29-.71' fill='%235f6b7c'/%3e%3c/svg%3e");
+  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%235f6b7c' d='m10.71 7.29-4-4a1.003 1.003 0 0 0-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l4-4c.18-.18.29-.43.29-.71s-.11-.53-.29-.71'/%3e%3c/svg%3e");
   content:"";
   display:block;
   height:16px;
@@ -3723,7 +3723,7 @@ a > .bp6-dark .bp6-running-text code{
   vertical-align:text-bottom;
 }
 .bp6-breadcrumbs-collapsed::before{
-  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M2 6a2 2 0 110 4 2 2 0 010-4m6 0a2 2 0 110 4 2 2 0 010-4m6 0a2 2 0 110 4 2 2 0 010-4' fill='%235f6b7c'/%3e%3c/svg%3e") center no-repeat;
+  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%235f6b7c' d='M2 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4'/%3e%3c/svg%3e") center no-repeat;
   content:"";
   display:block;
   height:16px;
@@ -3740,7 +3740,7 @@ a > .bp6-dark .bp6-running-text code{
   color:#abb3bf;
 }
 .bp6-dark .bp6-breadcrumbs > li::after{
-  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71s-.11-.53-.29-.71' fill='%23abb3bf'/%3e%3c/svg%3e");
+  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23abb3bf' d='m10.71 7.29-4-4a1.003 1.003 0 0 0-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l4-4c.18-.18.29-.43.29-.71s-.11-.53-.29-.71'/%3e%3c/svg%3e");
   color:#abb3bf;
 }
 .bp6-dark .bp6-breadcrumb.bp6-disabled{
@@ -3753,7 +3753,7 @@ a > .bp6-dark .bp6-running-text code{
   background:rgba(143, 153, 168, 0.2);
 }
 .bp6-dark .bp6-breadcrumbs-collapsed::before{
-  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M2 6a2 2 0 110 4 2 2 0 010-4m6 0a2 2 0 110 4 2 2 0 010-4m6 0a2 2 0 110 4 2 2 0 010-4' fill='%23abb3bf'/%3e%3c/svg%3e") center no-repeat;
+  background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23abb3bf' d='M2 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4m6 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4'/%3e%3c/svg%3e") center no-repeat;
 }
 .bp6-dark .bp6-breadcrumbs-collapsed:hover{
   background:rgba(143, 153, 168, 0.3);
@@ -4081,8 +4081,8 @@ a > .bp6-dark .bp6-running-text code{
 .bp6-button .bp6-icon:not([class*=bp6-intent-]){
   color:var(--bp-typography-color-muted);
 }
-.bp6-button .bp6-icon:first-child:last-child,
-.bp6-button .bp6-spinner + .bp6-icon:last-child{
+.bp6-button > .bp6-icon:first-child:last-child,
+.bp6-button > .bp6-spinner + .bp6-icon:last-child{
   margin:0 calc(-1 * (var(--bp-surface-spacing) * 7.5 - var(--bp-surface-spacing) * 4) * 0.5);
 }
 .bp6-dark .bp6-button:not([class*=bp6-intent-]), [data-bp-color-scheme=dark] .bp6-button:not([class*=bp6-intent-]){
@@ -4863,20 +4863,25 @@ a.bp6-button.bp6-disabled{
   z-index:8;
 }
 .bp6-button-group:not(.bp6-minimal) > .bp6-popover-wrapper:not(:first-child) .bp6-button,
+.bp6-button-group:not(.bp6-minimal) > .bp6-popover-target:not(:first-child) > .bp6-button,
 .bp6-button-group:not(.bp6-minimal) > .bp6-button:not(:first-child),
 .bp6-button-group.bp6-outlined > .bp6-popover-wrapper:not(:first-child) .bp6-button,
+.bp6-button-group.bp6-outlined > .bp6-popover-target:not(:first-child) > .bp6-button,
 .bp6-button-group.bp6-outlined > .bp6-button:not(:first-child){
   border-bottom-left-radius:0;
   border-top-left-radius:0;
 }
 .bp6-button-group:not(.bp6-minimal) > .bp6-popover-wrapper:not(:last-child) .bp6-button,
+.bp6-button-group:not(.bp6-minimal) > .bp6-popover-target:not(:last-child) > .bp6-button,
 .bp6-button-group:not(.bp6-minimal) > .bp6-button:not(:last-child),
 .bp6-button-group.bp6-outlined > .bp6-popover-wrapper:not(:last-child) .bp6-button,
+.bp6-button-group.bp6-outlined > .bp6-popover-target:not(:last-child) > .bp6-button,
 .bp6-button-group.bp6-outlined > .bp6-button:not(:last-child){
   border-bottom-right-radius:0;
   border-top-right-radius:0;
 }
 .bp6-button-group:not(.bp6-minimal):not(.bp6-outlined) > .bp6-popover-wrapper:not(:last-child) .bp6-button,
+.bp6-button-group:not(.bp6-minimal):not(.bp6-outlined) > .bp6-popover-target:not(:last-child) > .bp6-button,
 .bp6-button-group:not(.bp6-minimal):not(.bp6-outlined) > .bp6-button:not(:last-child){
   margin-right:calc(-1 * var(--bp-surface-border-width));
 }
@@ -5159,80 +5164,87 @@ a.bp6-button.bp6-disabled{
     margin-right:calc(-1 * var(--bp-surface-border-width));
   }
 }
-.bp6-button-group.bp6-outlined > .bp6-button{
+.bp6-button-group.bp6-outlined > .bp6-button,
+.bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button{
   border:var(--bp-surface-border-width) solid var(--bp-surface-border-color-strong);
   box-sizing:border-box;
 }
-.bp6-button-group.bp6-outlined > .bp6-button:disabled, .bp6-button-group.bp6-outlined > .bp6-button:disabled:hover, .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled:hover{
+.bp6-button-group.bp6-outlined > .bp6-button:disabled, .bp6-button-group.bp6-outlined > .bp6-button:disabled:hover, .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled:hover, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button:disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button:disabled:hover, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-disabled:hover{
   border-color:var(--bp-surface-border-color-default);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button{
   border-color:var(--bp-surface-border-color-strong);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button:disabled:hover, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled:hover, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button:disabled:hover, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled:hover{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button:disabled:hover, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled:hover, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button:disabled:hover, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-disabled:hover, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button:disabled:hover, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-disabled:hover, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button:disabled:hover, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-disabled:hover{
   border-color:var(--bp-surface-border-color-default);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary,
+.bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary{
   border-color:color-mix(in oklch, var(--bp-intent-primary-hover) 60%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary.bp6-disabled{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary:disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary.bp6-disabled{
   border-color:color-mix(in oklch, var(--bp-intent-primary-hover) 20%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-primary-rest) 51%, var(--bp-palette-white)) 60%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary.bp6-disabled{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-primary.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-primary.bp6-disabled{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-primary-rest) 51%, var(--bp-palette-white)) 20%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success,
+.bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success{
   border-color:color-mix(in oklch, var(--bp-intent-success-hover) 60%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success.bp6-disabled{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success:disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success.bp6-disabled{
   border-color:color-mix(in oklch, var(--bp-intent-success-hover) 20%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-success-rest) 54%, var(--bp-palette-white)) 60%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success.bp6-disabled{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-success.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-success.bp6-disabled{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-success-rest) 54%, var(--bp-palette-white)) 20%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning,
+.bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning{
   border-color:color-mix(in oklch, var(--bp-intent-warning-hover) 60%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning.bp6-disabled{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning:disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning.bp6-disabled{
   border-color:color-mix(in oklch, var(--bp-intent-warning-hover) 20%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-warning-rest) 53%, var(--bp-palette-white)) 60%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning.bp6-disabled{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-warning.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-warning.bp6-disabled{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-warning-rest) 53%, var(--bp-palette-white)) 20%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger,
+.bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger{
   border-color:color-mix(in oklch, var(--bp-intent-danger-hover) 60%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger.bp6-disabled{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger:disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger.bp6-disabled{
   border-color:color-mix(in oklch, var(--bp-intent-danger-hover) 20%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-danger-rest) 53%, var(--bp-palette-white)) 60%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger.bp6-disabled{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-danger.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-danger.bp6-disabled{
   border-color:color-mix(in oklch, color-mix(in oklch, var(--bp-intent-danger-rest) 53%, var(--bp-palette-white)) 20%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default,
+.bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default{
   border-color:color-mix(in oklch, var(--bp-intent-default-hover) 60%, transparent);
 }
-.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default.bp6-disabled{
+.bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default:disabled, .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default.bp6-disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default:disabled, .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default.bp6-disabled{
   border-color:color-mix(in oklch, var(--bp-intent-default-hover) 20%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default{
   border-color:color-mix(in oklch, color-mix(in srgb, var(--bp-intent-default-rest) 46%, var(--bp-palette-white)) 60%, transparent);
 }
-.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default.bp6-disabled{
+.bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-button.bp6-intent-default.bp6-disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default:disabled, .bp6-dark .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default.bp6-disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default:disabled, [data-bp-color-scheme=dark] .bp6-button-group.bp6-outlined > .bp6-popover-target > .bp6-button.bp6-intent-default.bp6-disabled{
   border-color:color-mix(in oklch, color-mix(in srgb, var(--bp-intent-default-rest) 46%, var(--bp-palette-white)) 20%, transparent);
 }
-.bp6-button-group.bp6-outlined:not(.bp6-vertical) > .bp6-button:not(:last-child){
+.bp6-button-group.bp6-outlined:not(.bp6-vertical) > .bp6-button:not(:last-child),
+.bp6-button-group.bp6-outlined:not(.bp6-vertical) > .bp6-popover-target:not(:last-child) > .bp6-button{
   border-right:none;
 }
 .bp6-button-group .bp6-popover-wrapper,
@@ -5261,22 +5273,28 @@ a.bp6-button.bp6-disabled{
   width:100%;
 }
 .bp6-button-group.bp6-vertical:not(.bp6-minimal) > .bp6-popover-wrapper:first-child .bp6-button,
+.bp6-button-group.bp6-vertical:not(.bp6-minimal) > .bp6-popover-target:first-child > .bp6-button,
 .bp6-button-group.bp6-vertical:not(.bp6-minimal) > .bp6-button:first-child,
 .bp6-button-group.bp6-vertical.bp6-outlined > .bp6-popover-wrapper:first-child .bp6-button,
+.bp6-button-group.bp6-vertical.bp6-outlined > .bp6-popover-target:first-child > .bp6-button,
 .bp6-button-group.bp6-vertical.bp6-outlined > .bp6-button:first-child{
   border-radius:var(--bp-surface-border-radius) var(--bp-surface-border-radius) 0 0;
 }
 .bp6-button-group.bp6-vertical:not(.bp6-minimal) > .bp6-popover-wrapper:last-child .bp6-button,
+.bp6-button-group.bp6-vertical:not(.bp6-minimal) > .bp6-popover-target:last-child > .bp6-button,
 .bp6-button-group.bp6-vertical:not(.bp6-minimal) > .bp6-button:last-child,
 .bp6-button-group.bp6-vertical.bp6-outlined > .bp6-popover-wrapper:last-child .bp6-button,
+.bp6-button-group.bp6-vertical.bp6-outlined > .bp6-popover-target:last-child > .bp6-button,
 .bp6-button-group.bp6-vertical.bp6-outlined > .bp6-button:last-child{
   border-radius:0 0 var(--bp-surface-border-radius) var(--bp-surface-border-radius);
 }
 .bp6-button-group.bp6-vertical:not(.bp6-minimal):not(.bp6-outlined) > .bp6-popover-wrapper:not(:last-child) .bp6-button,
+.bp6-button-group.bp6-vertical:not(.bp6-minimal):not(.bp6-outlined) > .bp6-popover-target:not(:last-child) > .bp6-button,
 .bp6-button-group.bp6-vertical:not(.bp6-minimal):not(.bp6-outlined) > .bp6-button:not(:last-child){
   margin-bottom:calc(-1 * var(--bp-surface-border-width));
 }
-.bp6-button-group.bp6-vertical.bp6-outlined > .bp6-button:not(:last-child){
+.bp6-button-group.bp6-vertical.bp6-outlined > .bp6-button:not(:last-child),
+.bp6-button-group.bp6-vertical.bp6-outlined > .bp6-popover-target:not(:last-child) > .bp6-button{
   border-bottom:none;
 }
 .bp6-button-group.bp6-align-left .bp6-button{
@@ -6793,12 +6811,10 @@ a.bp6-button.bp6-disabled{
   color:rgba(255, 255, 255, 0.6);
 }
 .bp6-control:not(.bp6-align-right){
-  -webkit-padding-start:24px;
-          padding-inline-start:24px;
+  padding-inline-start:24px;
 }
 .bp6-control:not(.bp6-align-right) .bp6-control-indicator{
-  -webkit-margin-start:-24px;
-          margin-inline-start:-24px;
+  margin-inline-start:-24px;
 }
 .bp6-control.bp6-align-right{
   padding-right:24px;
@@ -6807,8 +6823,7 @@ a.bp6-button.bp6-disabled{
   margin-right:-24px;
 }
 [dir=rtl] .bp6-control.bp6-align-left{
-  -webkit-padding-start:0;
-          padding-inline-start:0;
+  padding-inline-start:0;
   padding-left:24px;
 }
 [dir=rtl] .bp6-control.bp6-align-left .bp6-control-indicator{
@@ -6827,8 +6842,7 @@ a.bp6-button.bp6-disabled{
 }
 .bp6-control.bp6-inline{
   display:inline-block;
-  -webkit-margin-end:20px;
-          margin-inline-end:20px;
+  margin-inline-end:20px;
 }
 .bp6-control .bp6-control-input{
   left:0;
@@ -6846,8 +6860,7 @@ a.bp6-button.bp6-disabled{
   display:inline-block;
   font-size:16px;
   height:1em;
-  -webkit-margin-end:8px;
-          margin-inline-end:8px;
+  margin-inline-end:8px;
   margin-top:-3px;
   position:relative;
   -webkit-user-select:none;
@@ -6902,12 +6915,10 @@ a.bp6-button.bp6-disabled{
   margin-top:1px;
 }
 .bp6-control.bp6-large:not(.bp6-align-right){
-  -webkit-padding-start:28px;
-          padding-inline-start:28px;
+  padding-inline-start:28px;
 }
 .bp6-control.bp6-large:not(.bp6-align-right) .bp6-control-indicator{
-  -webkit-margin-start:-28px;
-          margin-inline-start:-28px;
+  margin-inline-start:-28px;
 }
 .bp6-control.bp6-large.bp6-align-right{
   padding-right:28px;
@@ -6916,8 +6927,7 @@ a.bp6-button.bp6-disabled{
   margin-right:-28px;
 }
 [dir=rtl] .bp6-control.bp6-large.bp6-align-left{
-  -webkit-padding-start:0;
-          padding-inline-start:0;
+  padding-inline-start:0;
   padding-left:28px;
 }
 [dir=rtl] .bp6-control.bp6-large.bp6-align-left .bp6-control-indicator{
@@ -6993,20 +7003,20 @@ a.bp6-button.bp6-disabled{
   border-radius:4px;
 }
 .bp6-control.bp6-checkbox input:checked ~ .bp6-control-indicator::before{
-  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5' fill='white'/%3e%3c/svg%3e");
+  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0 0 12 5'/%3e%3c/svg%3e");
 }
 .bp6-control.bp6-checkbox input:indeterminate ~ .bp6-control-indicator::before{
-  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1' fill='white'/%3e%3c/svg%3e");
+  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1'/%3e%3c/svg%3e");
 }
 .bp6-control.bp6-checkbox input:disabled ~ .bp6-control-indicator::before{
   opacity:0.5;
 }
 @media (forced-colors: active) and (prefers-color-scheme: dark){
   .bp6-control.bp6-checkbox input:checked:not(:disabled) ~ .bp6-control-indicator::before{
-    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5' fill='%23111418'/%3e%3c/svg%3e");
+    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23111418' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 0 0-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0 0 12 5'/%3e%3c/svg%3e");
   }
   .bp6-control.bp6-checkbox input:indeterminate:not(:disabled) ~ .bp6-control-indicator::before{
-    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1' fill='%23111418'/%3e%3c/svg%3e");
+    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23111418' d='M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1'/%3e%3c/svg%3e");
   }
   .bp6-control.bp6-checkbox input:disabled ~ .bp6-control-indicator{
     border-color:graytext;
@@ -7082,12 +7092,10 @@ a.bp6-button.bp6-disabled{
   box-shadow:none;
 }
 .bp6-control.bp6-switch:not(.bp6-align-right){
-  -webkit-padding-start:36px;
-          padding-inline-start:36px;
+  padding-inline-start:36px;
 }
 .bp6-control.bp6-switch:not(.bp6-align-right) .bp6-control-indicator{
-  -webkit-margin-start:-36px;
-          margin-inline-start:-36px;
+  margin-inline-start:-36px;
 }
 .bp6-control.bp6-switch.bp6-align-right{
   padding-right:36px;
@@ -7096,8 +7104,7 @@ a.bp6-button.bp6-disabled{
   margin-right:-36px;
 }
 [dir=rtl] .bp6-control.bp6-switch.bp6-align-left{
-  -webkit-padding-start:0;
-          padding-inline-start:0;
+  padding-inline-start:0;
   padding-left:36px;
 }
 [dir=rtl] .bp6-control.bp6-switch.bp6-align-left .bp6-control-indicator{
@@ -7156,12 +7163,10 @@ a.bp6-button.bp6-disabled{
   left:calc(2px + 100% - 1em);
 }
 .bp6-control.bp6-switch.bp6-large:not(.bp6-align-right){
-  -webkit-padding-start:43px;
-          padding-inline-start:43px;
+  padding-inline-start:43px;
 }
 .bp6-control.bp6-switch.bp6-large:not(.bp6-align-right) .bp6-control-indicator{
-  -webkit-margin-start:-43px;
-          margin-inline-start:-43px;
+  margin-inline-start:-43px;
 }
 .bp6-control.bp6-switch.bp6-large.bp6-align-right{
   padding-right:43px;
@@ -7170,8 +7175,7 @@ a.bp6-button.bp6-disabled{
   margin-right:-43px;
 }
 [dir=rtl] .bp6-control.bp6-switch.bp6-large.bp6-align-left{
-  -webkit-padding-start:0;
-          padding-inline-start:0;
+  padding-inline-start:0;
   padding-left:43px;
 }
 [dir=rtl] .bp6-control.bp6-switch.bp6-large.bp6-align-left .bp6-control-indicator{
@@ -11985,24 +11989,19 @@ span.bp6-icon:empty.bp6-icon-large{
   text-underline-position:from-font;
 }
 .bp6-link.bp6-link-underline-always{
-  -webkit-text-decoration-line:underline;
-          text-decoration-line:underline;
+  text-decoration-line:underline;
 }
 .bp6-link.bp6-link-underline-hover{
-  -webkit-text-decoration-line:none;
-          text-decoration-line:none;
+  text-decoration-line:none;
 }
 .bp6-link.bp6-link-underline-hover:hover{
-  -webkit-text-decoration-line:underline;
-          text-decoration-line:underline;
+  text-decoration-line:underline;
 }
 .bp6-link.bp6-link-underline-none{
-  -webkit-text-decoration-line:none;
-          text-decoration-line:none;
+  text-decoration-line:none;
 }
 .bp6-link.bp6-link-underline-none:hover{
-  -webkit-text-decoration-line:none;
-          text-decoration-line:none;
+  text-decoration-line:none;
 }
 .bp6-link.bp6-link-color-inherit{
   color:inherit;

package/canvas/context-menu/context-menu.js

@@ -1 +1 @@
-import{observer as e}from"mobx-react-lite";import{ContextMenuPopover as t,Menu as o,MenuDivider as l,MenuItem as n}from"@blueprintjs/core";import r from"react";import{t as a}from"../../utils/l10n.js";import{useDuplicateElement as i}from"../../toolbar/use-duplicate-element.js";import{ChevronDown as s,ChevronUp as c,DoubleChevronDown as m,DoubleChevronUp as d,Duplicate as u,Layers as v,Lock as E,Trash as b,Unlock as p}from"@blueprintjs/icons";import{useRemoveElement as C}from"../../toolbar/use-remove-element.js";import{useCopyStyle as x}from"../../toolbar/use-copy-style.js";import{useLock as k}from"../../toolbar/use-lock.js";export const ContextMenu=e(({store:e,isOpen:y,offset:f,setIsOpen:h})=>{var w,g,P,M,R;const{disabled:j,duplicate:D}=i({store:e}),{disabled:B,remove:O}=C({store:e}),{setElementToCopy:F}=x(e),{disabled:T,lock:I,locked:U}=k({store:e}),A=U?r.createElement(E,null):r.createElement(p,null),L=e.selectedElementsIds;return 0===e.selectedElements.length?null:r.createElement(t,{isOpen:y,onClose:()=>{h(!1)},content:r.createElement(o,null,r.createElement(n,{shouldDismissPopover:!1,icon:A,text:a(U?"contextMenu.unlock":"contextMenu.lock"),onClick:I,disabled:T}),r.createElement(n,{icon:r.createElement(u,null),text:a("contextMenu.duplicate"),onClick:D,disabled:j}),r.createElement(n,{icon:r.createElement(b,null),text:a("contextMenu.remove"),onClick:O,disabled:B}),r.createElement(l,null),r.createElement(n,{icon:r.createElement(v,null),text:a("toolbar.layering")},r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(d,null),text:a("toolbar.toForward"),disabled:!(null===(w=e.activePage)||void 0===w?void 0:w.canMoveElementsTop(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsTop(L)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(c,null),text:a("toolbar.up"),disabled:!(null===(g=e.activePage)||void 0===g?void 0:g.canMoveElementsUp(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsUp(L)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(s,null),text:a("toolbar.down"),disabled:!(null===(P=e.activePage)||void 0===P?void 0:P.canMoveElementsDown(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsDown(L)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(m,null),text:a("toolbar.toBottom"),disabled:!(null===(M=e.activePage)||void 0===M?void 0:M.canMoveElementsBottom(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsBottom(L)}})),"table"===(null===(R=e.selectedElements[0])||void 0===R?void 0:R.type)&&(()=>{const t=e.selectedElements[0],o=t.focusedCells[0],i=null==o?void 0:o.row,s=null==o?void 0:o.col,c=null!=o;return r.createElement(r.Fragment,null,c&&r.createElement(r.Fragment,null,r.createElement(l,null),r.createElement(n,{text:a("toolbar.insertRowAbove"),onClick:()=>{e.history.transaction(()=>{t.addRow(i)})}}),r.createElement(n,{text:a("toolbar.insertRowBelow"),onClick:()=>{e.history.transaction(()=>{t.addRow(i+1)})}}),r.createElement(n,{text:a("toolbar.deleteRow"),disabled:t.rows<=1,onClick:()=>{e.history.transaction(()=>{t.removeRow(i)})}}),r.createElement(l,null),r.createElement(n,{text:a("toolbar.insertColumnLeft"),onClick:()=>{e.history.transaction(()=>{t.addColumn(s)})}}),r.createElement(n,{text:a("toolbar.insertColumnRight"),onClick:()=>{e.history.transaction(()=>{t.addColumn(s+1)})}}),r.createElement(n,{text:a("toolbar.deleteColumn"),disabled:t.cols<=1,onClick:()=>{e.history.transaction(()=>{t.removeColumn(s)})}})),r.createElement(l,null),r.createElement(n,{text:a("toolbar.distributeRowsEvenly"),onClick:()=>{e.history.transaction(()=>{t.distributeRowsEvenly()})}}),r.createElement(n,{text:a("toolbar.distributeColumnsEvenly"),onClick:()=>{e.history.transaction(()=>{t.distributeColumnsEvenly()})}}))})()),targetOffset:{top:f.y,left:f.x}})});
+import{observer as e}from"mobx-react-lite";import{ContextMenuPopover as t,Menu as o,MenuDivider as l,MenuItem as n}from"@blueprintjs/core";import r from"react";import{t as a}from"../../utils/l10n.js";import{useDuplicateElement as i}from"../../toolbar/use-duplicate-element.js";import{ChevronDown as s,ChevronUp as m,DoubleChevronDown as c,DoubleChevronUp as d,Duplicate as u,Layers as v,Lock as E,Trash as b,Unlock as C}from"@blueprintjs/icons";import{useRemoveElement as p}from"../../toolbar/use-remove-element.js";import{useCopyStyle as x}from"../../toolbar/use-copy-style.js";import{useLock as w}from"../../toolbar/use-lock.js";export const ContextMenu=e(({store:e,isOpen:k,offset:R,setIsOpen:g})=>{var y,f,h,P,M;const{disabled:j,duplicate:D}=i({store:e}),{disabled:B,remove:F}=p({store:e}),{setElementToCopy:O}=x(e),{disabled:T,lock:I,locked:U}=w({store:e}),A=U?r.createElement(E,null):r.createElement(C,null),L=e.selectedElementsIds;return 0===e.selectedElements.length?null:r.createElement(t,{isOpen:k,onClose:()=>{g(!1)},content:r.createElement(o,null,r.createElement(n,{shouldDismissPopover:!1,icon:A,text:a(U?"contextMenu.unlock":"contextMenu.lock"),onClick:I,disabled:T}),r.createElement(n,{icon:r.createElement(u,null),text:a("contextMenu.duplicate"),onClick:D,disabled:j}),r.createElement(n,{icon:r.createElement(b,null),text:a("contextMenu.remove"),onClick:F,disabled:B}),r.createElement(l,null),r.createElement(n,{icon:r.createElement(v,null),text:a("toolbar.layering")},r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(d,null),text:a("toolbar.toForward"),disabled:!(null===(y=e.activePage)||void 0===y?void 0:y.canMoveElementsTop(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsTop(L)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(m,null),text:a("toolbar.up"),disabled:!(null===(f=e.activePage)||void 0===f?void 0:f.canMoveElementsUp(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsUp(L)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(s,null),text:a("toolbar.down"),disabled:!(null===(h=e.activePage)||void 0===h?void 0:h.canMoveElementsDown(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsDown(L)}}),r.createElement(n,{shouldDismissPopover:!1,icon:r.createElement(c,null),text:a("toolbar.toBottom"),disabled:!(null===(P=e.activePage)||void 0===P?void 0:P.canMoveElementsBottom(L)),onClick:()=>{var t;null===(t=e.activePage)||void 0===t||t.moveElementsBottom(L)}})),"table"===(null===(M=e.selectedElements[0])||void 0===M?void 0:M.type)&&(()=>{var t;const o=e.selectedElements[0],i=o.focusedCells[0],s=null!=i,m=null!==(t=o.getFocusedCellRange())&&void 0!==t?t:i?{minRow:i.row,maxRow:i.row,minCol:i.col,maxCol:i.col}:{minRow:0,maxRow:0,minCol:0,maxCol:0},{minRow:c,maxRow:d,minCol:u,maxCol:v}=m,E=d>c,b=v>u;return r.createElement(r.Fragment,null,s&&r.createElement(r.Fragment,null,r.createElement(l,null),r.createElement(n,{text:a("toolbar.insertRowAbove"),onClick:()=>{e.history.transaction(()=>{o.addRow(c)})}}),r.createElement(n,{text:a("toolbar.insertRowBelow"),onClick:()=>{e.history.transaction(()=>{o.addRow(d+1)})}}),r.createElement(n,{text:a(E?"toolbar.deleteRows":"toolbar.deleteRow"),disabled:o.rows<=d-c+1,onClick:()=>{e.history.transaction(()=>{o.removeRowRange(c,d)})}}),r.createElement(l,null),r.createElement(n,{text:a("toolbar.insertColumnLeft"),onClick:()=>{e.history.transaction(()=>{o.addColumn(u)})}}),r.createElement(n,{text:a("toolbar.insertColumnRight"),onClick:()=>{e.history.transaction(()=>{o.addColumn(v+1)})}}),r.createElement(n,{text:a(b?"toolbar.deleteColumns":"toolbar.deleteColumn"),disabled:o.cols<=v-u+1,onClick:()=>{e.history.transaction(()=>{o.removeColumnRange(u,v)})}})),r.createElement(l,null),r.createElement(n,{text:a("toolbar.distributeRowsEvenly"),onClick:()=>{e.history.transaction(()=>{o.distributeRowsEvenly()})}}),r.createElement(n,{text:a("toolbar.distributeColumnsEvenly"),onClick:()=>{e.history.transaction(()=>{o.distributeColumnsEvenly()})}}))})()),targetOffset:{top:R.y,left:R.x}})});

package/canvas/element.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react-lite";import o from"konva";import{TextElement as n}from"./text-element.js";import{ImageElement as r}from"./image-element.js";import{HTMLElement as i}from"./html-element.js";import{LineElement as m}from"./line-element.js";import{VideoElement as l}from"./video-element.js";import{FigureElement as s}from"./figure-element.js";import{GifElement as a}from"./gif-element.js";import{TableElement as c}from"./table-element.js";import{Group as f}from"react-konva";import{Highlighter as p}from"./highlighter.js";import{forEveryChild as d}from"../model/group-model.js";import{flags as u}from"../utils/flags.js";const g={text:n,image:r,svg:r,line:m,video:l,figure:s,group:t(t=>{const{element:o,store:n}=t,{children:r}=o,i=o.selectable||"admin"===n.role;return e.createElement(f,{opacity:o.opacity,listening:i,hideInExport:!o.showInExport,id:o.id},r.map(o=>e.createElement(y,Object.assign({},t,{key:o.id,store:n,element:o}))))}),gif:a,table:c};export function registerShapeComponent(e,t){g[e]=t}const h=(e,t)=>{const n=[];d(e,e=>{"group"!==e.type&&n.push(e.a)});const r=[];n.forEach(e=>{const t=[{x:0,y:0},{x:0+e.width,y:0},{x:0+e.width,y:0+e.height},{x:0,y:0+e.height}],n=new o.Transform;n.translate(e.x,e.y),n.rotate(o.Util.degToRad(e.rotation)),t.forEach(e=>{const t=n.point(e);r.push(t)})});const i=new o.Transform;i.rotate(-o.Util.degToRad(t));let m=1/0,l=1/0,s=-1/0,a=-1/0;r.forEach(e=>{const t=i.point(e);m=Math.min(m,t.x),l=Math.min(l,t.y),s=Math.max(s,t.x),a=Math.max(a,t.y)}),i.invert();const c=i.point({x:m,y:l});return{x:c.x,y:c.y,width:s-m,height:a-l,rotation:t}},y=t(t=>{var n,r;const{element:m,store:l}=t,[s,a]=e.useState(!1),c=m.isSelectedDirectly,d="group"===(null===(n=m.parent)||void 0===n?void 0:n.type),y=(t=>{const[n,r]=e.useState();return e.useEffect(()=>{const e=setTimeout(()=>{const e=t.page.id,n=o.stages.find(t=>t.getAttr("pageId")===e);n||console.error("No stage is found for element",t.id),r(n)});return()=>clearTimeout(e)},[t.id]),n})(m),v=e.useRef();e.useEffect(()=>{if(y){const e=e=>{const t=e.target.findAncestor(".element",!0),o=l.getElementById(null==t?void 0:t.id()),n=null==o?void 0:o.top,r=null==n?void 0:n.id;a(r===m.id)};y.on("mouseover",e);const t=()=>{a(!1)};return y.on("mouseleave",t),()=>{y.off("mouseover",e),y.off("mouseleave",t)}}},[y]);let x=g[t.element.type];return"text"===t.element.type&&u.htmlRenderEnabled&&(x=i),t.element.visible?x?e.createElement(f,{name:"element-container"},e.createElement(x,Object.assign({},t)),s&&!c&&!d&&e.createElement(p,{element:"group"===m.type?{a:h(m,(null===(v.current||(v.current=null==y?void 0:y.findOne("Transformer")),r=v.current)||void 0===r?void 0:r.rotation())||0)}:m})):(console.error("Can not find component for "+t.element.type),null):null});export default y;
+import e from"react";import{observer as t}from"mobx-react-lite";import{ROLES as o}from"../model/store.js";import r from"konva";import{TextElement as n}from"./text-element.js";import{ImageElement as i}from"./image-element.js";import{HTMLElement as m}from"./html-element.js";import{LineElement as l}from"./line-element.js";import{VideoElement as s}from"./video-element.js";import{FigureElement as a}from"./figure-element.js";import{GifElement as c}from"./gif-element.js";import{TableElement as f}from"./table-element.js";import{Group as p}from"react-konva";import{Highlighter as d}from"./highlighter.js";import{forEveryChild as u}from"../model/group-model.js";import{flags as g}from"../utils/flags.js";const h={text:n,image:i,svg:i,line:l,video:s,figure:a,group:t(t=>{const{element:r,store:n}=t,{children:i}=r,m=r.selectable||n.role===o.ADMIN;return e.createElement(p,{opacity:r.opacity,listening:m,hideInExport:!r.showInExport,id:r.id},i.map(o=>e.createElement(v,Object.assign({},t,{key:o.id,store:n,element:o}))))}),gif:c,table:f};export function registerShapeComponent(e,t){h[e]=t}const y=(e,t)=>{const o=[];u(e,e=>{"group"!==e.type&&o.push(e.a)});const n=[];o.forEach(e=>{const t=[{x:0,y:0},{x:0+e.width,y:0},{x:0+e.width,y:0+e.height},{x:0,y:0+e.height}],o=new r.Transform;o.translate(e.x,e.y),o.rotate(r.Util.degToRad(e.rotation)),t.forEach(e=>{const t=o.point(e);n.push(t)})});const i=new r.Transform;i.rotate(-r.Util.degToRad(t));let m=1/0,l=1/0,s=-1/0,a=-1/0;n.forEach(e=>{const t=i.point(e);m=Math.min(m,t.x),l=Math.min(l,t.y),s=Math.max(s,t.x),a=Math.max(a,t.y)}),i.invert();const c=i.point({x:m,y:l});return{x:c.x,y:c.y,width:s-m,height:a-l,rotation:t}},v=t(t=>{var o,n;const{element:i,store:l}=t,[s,a]=e.useState(!1),c=i.isSelectedDirectly,f="group"===(null===(o=i.parent)||void 0===o?void 0:o.type),u=(t=>{const[o,n]=e.useState();return e.useEffect(()=>{const e=setTimeout(()=>{const e=t.page.id,o=r.stages.find(t=>t.getAttr("pageId")===e);o||console.error("No stage is found for element",t.id),n(o)});return()=>clearTimeout(e)},[t.id]),o})(i),v=e.useRef();e.useEffect(()=>{if(u){const e=e=>{const t=e.target.findAncestor(".element",!0),o=l.getElementById(null==t?void 0:t.id()),r=null==o?void 0:o.top,n=null==r?void 0:r.id;a(n===i.id)};u.on("mouseover",e);const t=()=>{a(!1)};return u.on("mouseleave",t),()=>{u.off("mouseover",e),u.off("mouseleave",t)}}},[u]);let x=h[t.element.type];return"text"===t.element.type&&g.htmlRenderEnabled&&(x=m),t.element.visible?x?e.createElement(p,{name:"element-container"},e.createElement(x,Object.assign({},t)),s&&!c&&!f&&e.createElement(d,{element:"group"===i.type?{a:y(i,(null===(v.current||(v.current=null==u?void 0:u.findOne("Transformer")),n=v.current)||void 0===n?void 0:n.rotation())||0)}:i})):(console.error("Can not find component for "+t.element.type),null):null});export default v;

package/canvas/figure-element.js

@@ -1 +1 @@
-import t from"react";import{observer as e}from"mobx-react-lite";import{Group as a,Rect as r,Path as s}from"react-konva";import{subTypeToPathDataFunc as i}from"../utils/figure-to-svg.js";import{isTouchDevice as o}from"../utils/screen.js";import{useColor as h}from"./use-color.js";const n={};export const FigureElement=e(({element:l,store:c})=>{const d=t.useRef(null),g=l.selectable||"admin"===c.role,m=o(),p=l.isSelected,f=Math.min(l.strokeWidth,l.width/2,l.height/2),w=Math.max(0,Math.min(l.width/2,l.height/2,l.cornerRadius)),u=h(l,l.a.fill,"fill"),b=Object.assign(Object.assign({width:l.a.width,height:l.a.height},u),{cornerRadius:w,opacity:l.animated("opacity"),shadowEnabled:l.shadowEnabled,shadowBlur:l.shadowBlur,shadowOffsetX:l.shadowOffsetX,shadowOffsetY:l.shadowOffsetY,shadowColor:l.shadowColor,shadowOpacity:l.shadowOpacity,preventDefault:!m||p,hideInExport:!l.showInExport}),y=h(l,l.stroke,"stroke"),x=Object.assign(Object.assign({visible:f>0,x:f/2,y:f/2,width:l.a.width-f,height:l.a.height-f},y),{strokeWidth:f,cornerRadius:Math.max(0,w-f),dash:l.dash.map(t=>t*f),opacity:l.animated("opacity"),hideInExport:!l.showInExport,listening:!1}),k=Math.max(0,10-Math.min(l.a.width,l.a.height)),E=(v=l.subType,n[v]||(n[v]=(O=i(v),e(({element:e,fillProps:i,strokeProps:o,hitStrokeWidth:h})=>{let n=O({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),l=1,c=1;"string"!=typeof n&&(l=n.scaleX,c=n.scaleY,n=n.path);const d=t.useRef(null);return t.createElement(t.Fragment,null,t.createElement(r,{width:e.a.width,height:e.a.height,fill:"transparent",hitStrokeWidth:h}),t.createElement(s,Object.assign({},i,{ref:d,data:n,scaleX:l,scaleY:c})),t.createElement(a,{clipFunc:t=>{const e=d.current;if(e){var a=e.dataArray;t.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,i=a[r].points;switch(s){case"L":t.lineTo(i[0],i[1]);break;case"M":t.moveTo(i[0],i[1]);break;case"C":t.bezierCurveTo(i[0],i[1],i[2],i[3],i[4],i[5]);break;case"Q":t.quadraticCurveTo(i[0],i[1],i[2],i[3]);break;case"A":var o=i[0],h=i[1],n=i[2],l=i[3],c=i[4],g=i[5],m=i[6],p=i[7],f=n>l?n:l,w=n>l?1:n/l,u=n>l?l/n:1;t.translate(o,h),t.rotate(m),t.scale(w,u),t.arc(0,0,f,c,c+g,!p),t.scale(1/w,1/u),t.rotate(-m),t.translate(-o,-h);break;case"z":t.closePath()}}}},scaleX:l,scaleY:c},t.createElement(s,Object.assign({},o,{x:0,y:0,data:n,strokeWidth:2*o.strokeWidth,dash:o.dash.map(t=>t)}))))}))),n[v]||a);var v,O;return t.createElement(t.Fragment,null,t.createElement(a,{ref:d,id:l.id,x:l.a.x,y:l.a.y,rotation:l.a.rotation,opacity:l.a.opacity,listening:g,draggable:m?l.draggable&&p:l.draggable,name:"element",onDragMove:t=>{l.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{l.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{const e=t.target.scale();t.target.scaleX(1),t.target.scaleY(1),l.set({width:l.width*e.x,height:l.height*e.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}},t.createElement(E,{element:l,fillProps:b,strokeProps:x,hitStrokeWidth:k})))});
+import t from"react";import{observer as e}from"mobx-react-lite";import{Group as a,Rect as r,Path as s}from"react-konva";import{ROLES as o}from"../model/store.js";import{subTypeToPathDataFunc as i}from"../utils/figure-to-svg.js";import{isTouchDevice as h}from"../utils/screen.js";import{useColor as n}from"./use-color.js";const l={};export const FigureElement=e(({element:c,store:d})=>{const g=t.useRef(null),m=c.selectable||d.role===o.ADMIN,p=h(),f=c.isSelected,w=Math.min(c.strokeWidth,c.width/2,c.height/2),u=Math.max(0,Math.min(c.width/2,c.height/2,c.cornerRadius)),b=n(c,c.a.fill,"fill"),y=Object.assign(Object.assign({width:c.a.width,height:c.a.height},b),{cornerRadius:u,opacity:c.animated("opacity"),shadowEnabled:c.shadowEnabled,shadowBlur:c.shadowBlur,shadowOffsetX:c.shadowOffsetX,shadowOffsetY:c.shadowOffsetY,shadowColor:c.shadowColor,shadowOpacity:c.shadowOpacity,preventDefault:!p||f,hideInExport:!c.showInExport}),x=n(c,c.stroke,"stroke"),k=Object.assign(Object.assign({visible:w>0,x:w/2,y:w/2,width:c.a.width-w,height:c.a.height-w},x),{strokeWidth:w,cornerRadius:Math.max(0,u-w),dash:c.dash.map(t=>t*w),opacity:c.animated("opacity"),hideInExport:!c.showInExport,listening:!1}),E=Math.max(0,10-Math.min(c.a.width,c.a.height)),v=(O=c.subType,l[O]||(l[O]=(j=i(O),e(({element:e,fillProps:o,strokeProps:i,hitStrokeWidth:h})=>{let n=j({width:e.a.width,height:e.a.height,cornerRadius:e.cornerRadius}),l=1,c=1;"string"!=typeof n&&(l=n.scaleX,c=n.scaleY,n=n.path);const d=t.useRef(null);return t.createElement(t.Fragment,null,t.createElement(r,{width:e.a.width,height:e.a.height,fill:"transparent",hitStrokeWidth:h}),t.createElement(s,Object.assign({},o,{ref:d,data:n,scaleX:l,scaleY:c})),t.createElement(a,{clipFunc:t=>{const e=d.current;if(e){var a=e.dataArray;t.beginPath();for(var r=0;r<a.length;r++){var s=a[r].command,o=a[r].points;switch(s){case"L":t.lineTo(o[0],o[1]);break;case"M":t.moveTo(o[0],o[1]);break;case"C":t.bezierCurveTo(o[0],o[1],o[2],o[3],o[4],o[5]);break;case"Q":t.quadraticCurveTo(o[0],o[1],o[2],o[3]);break;case"A":var i=o[0],h=o[1],n=o[2],l=o[3],c=o[4],g=o[5],m=o[6],p=o[7],f=n>l?n:l,w=n>l?1:n/l,u=n>l?l/n:1;t.translate(i,h),t.rotate(m),t.scale(w,u),t.arc(0,0,f,c,c+g,!p),t.scale(1/w,1/u),t.rotate(-m),t.translate(-i,-h);break;case"z":t.closePath()}}}},scaleX:l,scaleY:c},t.createElement(s,Object.assign({},i,{x:0,y:0,data:n,strokeWidth:2*i.strokeWidth,dash:i.dash.map(t=>t)}))))}))),l[O]||a);var O,j;return t.createElement(t.Fragment,null,t.createElement(a,{ref:g,id:c.id,x:c.a.x,y:c.a.y,rotation:c.a.rotation,opacity:c.a.opacity,listening:m,draggable:p?c.draggable&&f:c.draggable,name:"element",onDragMove:t=>{c.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{c.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{const e=t.target.scale();t.target.scaleX(1),t.target.scaleY(1),c.set({width:c.width*e.x,height:c.height*e.y,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}},t.createElement(v,{element:c,fillProps:y,strokeProps:k,hitStrokeWidth:E})))});

package/canvas/gif-element.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react-lite";import{autorun as r}from"mobx";import{Image as a,Group as i,Rect as o,Arc as n,Text as h}from"react-konva";import d from"konva";import{parseGIF as s,decompressFrames as l}from"gifuct-js";import{useCornerRadiusAndCrop as c}from"./video-element.js";import{useImageLoader as m}from"./image-element.js";import{useWorkspaceStyle as g}from"./workspace-style.js";import{applyFilter as f}from"./apply-filters.js";import{useFadeIn as u}from"./use-fadein.js";import{isTouchDevice as p}from"../utils/screen.js";function w(e,t,r){const a=t.getContext("2d"),i=r.getContext("2d");if(!a||!i){return}2===e.disposalType&&a.clearRect(0,0,t.width,t.height),r.width=e.width,r.height=e.height;const o=i.createImageData(e.width,e.height);o.data.set(e.patch),i.putImageData(o,0,0),a.drawImage(r,e.left,e.top)}const y=t(({element:t})=>{const r=Math.min(30,t.width/4,t.height/4),a=e.useRef(null);e.useEffect(()=>{const e=a.current;if(!e){return}const t=new d.Animation(t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)},e.getLayer());return t.start(),()=>{t.stop()}},[]);const{mediaLoadingStyle:h}=g();return e.createElement(i,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(o,{width:t.width,height:t.height,fill:h.fill}),e.createElement(n,{ref:a,x:t.width/2,y:t.height/2,fill:h.textFill,outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),x=t(({element:t})=>{const{mediaErrorStyle:r}=g(),a=Math.max(10,Math.min(30,t.width/22));return e.createElement(i,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(o,{width:t.width,height:t.height,fill:r.fill}),e.createElement(h,{text:"Cannot load the GIF...",fontSize:a,width:t.width,height:t.height,align:"center",fill:r.textFill,verticalAlign:"middle",padding:5}))});export const GifElement=t(({element:t,store:i})=>{var n;const[h,g]=e.useState(!1),E=t.isSelected,b=e.useRef(null),S=e.useRef(),[v,I,M,R]=function(t){const[r,a]=e.useState([]),[i,o]=e.useState(0),[n,h]=e.useState("loading"),[d,c]=e.useState({width:0,height:0});return e.useEffect(()=>{(async()=>{try{const e=await fetch(t),r=await e.arrayBuffer(),i=s(r),n=l(i,!0),d=i.lsd.width,m=i.lsd.height;c({width:d,height:m});const g=n.map(e=>({patch:new Uint8ClampedArray(e.patch),delay:e.delay,width:e.dims.width,height:e.dims.height,left:e.dims.left,top:e.dims.top,disposalType:e.disposalType})),f=g.reduce((e,t)=>e+t.delay,0);a(g),o(f),h("loaded")}catch(e){console.error("Failed to load GIF:",e),h("failed")}})()},[t]),[r,i,d,n]}(t.src);m(R,t.src,t.id),e.useEffect(()=>(S.current=document.createElement("canvas"),()=>{S.current&&d.Util.releaseCanvas(S.current)}),[]),e.useEffect(()=>{if("loaded"===R&&S.current&&(S.current.width=M.width,S.current.height=M.height,v.length>0)){const e=S.current.getContext("2d");if(e){e.clearRect(0,0,M.width,M.height);const t=document.createElement("canvas");w(v[0],S.current,t)}}},[M,R,v]),e.useEffect(()=>{if(!v.length||!S.current){return}const e=S.current;e.width=M.width,e.height=M.height;const a=document.createElement("canvas"),o=e.getContext("2d");o&&o.clearRect(0,0,e.width,e.height);let n=-1;w(v[0],e,a),D(),n=0;const h=t=>{const r=(e=>{const t=e%I;let r=0;for(let a=0;a<v.length;a++){if(r+=v[a].delay,r>t){return a}}return 0})(t);r!==n&&(w(v[r],e,a),D(),b.current.getLayer().draw(),n=r)};if(i.isPlaying||t.page._exportingOrRendering){return r(()=>{h(i.currentTime-t.page.startTime)})}{const e=window.setInterval(()=>{h(i.currentTime||performance.now())},16);return()=>{clearInterval(e)}}},[i.isPlaying,v,I,t.page._exportingOrRendering]),e.useEffect(()=>{I&&i.history.ignore(()=>{t.set({duration:I})})},[I]);let{cropX:C,cropY:T,cropWidth:z,cropHeight:O}=t;"loaded"!==R&&(C=T=0,z=O=1);const j={x:M.width*C,y:M.height*T,width:M.width*z,height:M.height*O},X=null!==(n=t.cornerRadius)&&void 0!==n?n:0,[Y,D]=c(t,S.current,j,i._elementsPixelRatio,X,h||t._cropModeEnabled);e.useLayoutEffect(()=>{if(!h&&!t._cropModeEnabled&&b.current){return f(b.current,t),r(()=>{f(b.current,t)},{delay:100})}},[S.current,h,z,O,t._cropModeEnabled,M.width,M.height]);const F="loading"===R,_="failed"===R,k=F||_?0:t.a.opacity;u(b,k);const L=t.selectable||"admin"===i.role,A=p();return e.createElement(e.Fragment,null,F&&e.createElement(y,{element:t}),_&&e.createElement(x,{element:t}),e.createElement(a,{ref:b,name:"element",id:t.id,image:Y,x:t.a.x,y:t.a.y,width:t.a.width||1,height:t.a.height||1,rotation:t.a.rotation,opacity:k,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur,shadowOffsetX:t.shadowOffsetX,shadowOffsetY:t.shadowOffsetY,shadowColor:t.shadowColor,shadowOpacity:t.shadowOpacity,customCrop:j,listening:L,draggable:A?t.draggable&&E:t.draggable,preventDefault:!A||E,hideInExport:!t.showInExport,onDragMove:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{t.set({x:e.target.x(),y:e.target.y()})},onTransformStart:()=>g(!0),onTransform:e=>{const r=e.currentTarget,a=Math.abs(r.scaleX()-1)<1e-7?1:r.scaleX(),i=Math.abs(r.scaleY()-1)<1e-7?1:r.scaleY();r.scaleX(1),r.scaleY(1),t.set({x:r.x(),y:r.y(),width:r.width()*a,height:r.height()*i,rotation:r.rotation()})},onTransformEnd:()=>g(!1)}),e.createElement(o,{x:t.a.x,y:t.a.y,width:Math.max(t.a.width-t.borderSize,0),height:Math.max(t.a.height-t.borderSize,0),opacity:k,offsetX:-t.borderSize/2,offsetY:-t.borderSize/2,stroke:t.borderColor,strokeWidth:t.borderSize,listening:!1,visible:!!t.borderSize,rotation:t.rotation,cornerRadius:Math.max(0,X-t.borderSize),hideInExport:!t.showInExport}))});
+import e from"react";import{observer as t}from"mobx-react-lite";import{autorun as r}from"mobx";import{Image as a,Group as i,Rect as o,Arc as n,Text as h}from"react-konva";import{ROLES as s}from"../model/store.js";import d from"konva";import{parseGIF as l,decompressFrames as c}from"gifuct-js";import{useCornerRadiusAndCrop as m}from"./video-element.js";import{useImageLoader as g}from"./image-element.js";import{useWorkspaceStyle as f}from"./workspace-style.js";import{applyFilter as u}from"./apply-filters.js";import{useFadeIn as p}from"./use-fadein.js";import{isTouchDevice as w}from"../utils/screen.js";function y(e,t,r){const a=t.getContext("2d"),i=r.getContext("2d");if(!a||!i){return}2===e.disposalType&&a.clearRect(0,0,t.width,t.height),r.width=e.width,r.height=e.height;const o=i.createImageData(e.width,e.height);o.data.set(e.patch),i.putImageData(o,0,0),a.drawImage(r,e.left,e.top)}const x=t(({element:t})=>{const r=Math.min(30,t.width/4,t.height/4),a=e.useRef(null);e.useEffect(()=>{const e=a.current;if(!e){return}const t=new d.Animation(t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)},e.getLayer());return t.start(),()=>{t.stop()}},[]);const{mediaLoadingStyle:h}=f();return e.createElement(i,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(o,{width:t.width,height:t.height,fill:h.fill}),e.createElement(n,{ref:a,x:t.width/2,y:t.height/2,fill:h.textFill,outerRadius:Math.abs(r),innerRadius:Math.max(1,r-5),angle:270}))}),E=t(({element:t})=>{const{mediaErrorStyle:r}=f(),a=Math.max(10,Math.min(30,t.width/22));return e.createElement(i,{x:t.a.x,y:t.a.y,rotation:t.a.rotation,listening:!1,opacity:t.a.opacity,hideInExport:!t.showInExport},e.createElement(o,{width:t.width,height:t.height,fill:r.fill}),e.createElement(h,{text:"Cannot load the GIF...",fontSize:a,width:t.width,height:t.height,align:"center",fill:r.textFill,verticalAlign:"middle",padding:5}))});export const GifElement=t(({element:t,store:i})=>{var n;const[h,f]=e.useState(!1),b=t.isSelected,S=e.useRef(null),v=e.useRef(),[I,M,R,C]=function(t){const[r,a]=e.useState([]),[i,o]=e.useState(0),[n,h]=e.useState("loading"),[s,d]=e.useState({width:0,height:0});return e.useEffect(()=>{(async()=>{try{const e=await fetch(t),r=await e.arrayBuffer(),i=l(r),n=c(i,!0),s=i.lsd.width,m=i.lsd.height;d({width:s,height:m});const g=n.map(e=>({patch:new Uint8ClampedArray(e.patch),delay:e.delay,width:e.dims.width,height:e.dims.height,left:e.dims.left,top:e.dims.top,disposalType:e.disposalType})),f=g.reduce((e,t)=>e+t.delay,0);a(g),o(f),h("loaded")}catch(e){console.error("Failed to load GIF:",e),h("failed")}})()},[t]),[r,i,s,n]}(t.src);g(C,t.src,t.id),e.useEffect(()=>(v.current=document.createElement("canvas"),()=>{v.current&&d.Util.releaseCanvas(v.current)}),[]),e.useEffect(()=>{if("loaded"===C&&v.current&&(v.current.width=R.width,v.current.height=R.height,I.length>0)){const e=v.current.getContext("2d");if(e){e.clearRect(0,0,R.width,R.height);const t=document.createElement("canvas");y(I[0],v.current,t)}}},[R,C,I]),e.useEffect(()=>{if(!I.length||!v.current){return}const e=v.current;e.width=R.width,e.height=R.height;const a=document.createElement("canvas"),o=e.getContext("2d");o&&o.clearRect(0,0,e.width,e.height);let n=-1;y(I[0],e,a),F(),n=0;const h=t=>{const r=(e=>{const t=e%M;let r=0;for(let a=0;a<I.length;a++){if(r+=I[a].delay,r>t){return a}}return 0})(t);r!==n&&(y(I[r],e,a),F(),S.current.getLayer().draw(),n=r)};if(i.isPlaying||t.page._exportingOrRendering){return r(()=>{h(i.currentTime-t.page.startTime)})}{const e=window.setInterval(()=>{h(i.currentTime||performance.now())},16);return()=>{clearInterval(e)}}},[i.isPlaying,I,M,t.page._exportingOrRendering]),e.useEffect(()=>{M&&i.history.ignore(()=>{t.set({duration:M})})},[M]);let{cropX:T,cropY:j,cropWidth:z,cropHeight:O}=t;"loaded"!==C&&(T=j=0,z=O=1);const D={x:R.width*T,y:R.height*j,width:R.width*z,height:R.height*O},X=null!==(n=t.cornerRadius)&&void 0!==n?n:0,[Y,F]=m(t,v.current,D,i._elementsPixelRatio,X,h||t._cropModeEnabled);e.useLayoutEffect(()=>{if(!h&&!t._cropModeEnabled&&S.current){return u(S.current,t),r(()=>{u(S.current,t)},{delay:100})}},[v.current,h,z,O,t._cropModeEnabled,R.width,R.height]);const _="loading"===C,k="failed"===C,A=_||k?0:t.a.opacity;p(S,A);const L=t.selectable||i.role===s.ADMIN,B=w();return e.createElement(e.Fragment,null,_&&e.createElement(x,{element:t}),k&&e.createElement(E,{element:t}),e.createElement(a,{ref:S,name:"element",id:t.id,image:Y,x:t.a.x,y:t.a.y,width:t.a.width||1,height:t.a.height||1,rotation:t.a.rotation,opacity:A,shadowEnabled:t.shadowEnabled,shadowBlur:t.shadowBlur,shadowOffsetX:t.shadowOffsetX,shadowOffsetY:t.shadowOffsetY,shadowColor:t.shadowColor,shadowOpacity:t.shadowOpacity,customCrop:D,listening:L,draggable:B?t.draggable&&b:t.draggable,preventDefault:!B||b,hideInExport:!t.showInExport,onDragMove:e=>{t.set({x:e.target.x(),y:e.target.y()})},onDragEnd:e=>{t.set({x:e.target.x(),y:e.target.y()})},onTransformStart:()=>f(!0),onTransform:e=>{const r=e.currentTarget,a=Math.abs(r.scaleX()-1)<1e-7?1:r.scaleX(),i=Math.abs(r.scaleY()-1)<1e-7?1:r.scaleY();r.scaleX(1),r.scaleY(1),t.set({x:r.x(),y:r.y(),width:r.width()*a,height:r.height()*i,rotation:r.rotation()})},onTransformEnd:()=>f(!1)}),e.createElement(o,{x:t.a.x,y:t.a.y,width:Math.max(t.a.width-t.borderSize,0),height:Math.max(t.a.height-t.borderSize,0),opacity:A,offsetX:-t.borderSize/2,offsetY:-t.borderSize/2,stroke:t.borderColor,strokeWidth:t.borderSize,listening:!1,visible:!!t.borderSize,rotation:t.rotation,cornerRadius:Math.max(0,X-t.borderSize),hideInExport:!t.showInExport}))});

package/canvas/hotkeys.js

@@ -1 +1 @@
-import{copy as e,cut as t,paste as l}from"../utils/clipboard.js";import{duplicateElements as o}from"../utils/duplicate.js";import{alignBottom as n,alignCenter as r,alignLeft as i,alignMiddle as c,alignRight as a,alignTop as s}from"../utils/alignment.js";import{removeTags as d}from"../utils/text.js";const u="rgba(191, 191, 191, 100)";function f(e,t,l){const o=e.getCell(t,l);o&&e.focusCell(o.id)}function v(e,t,l){const o=e.getCell(t,l);o&&e.enterCellEdit(o.id)}export function handleHotkey(y,p){var m,h,w,g,D,E,k,K,C,x,A,b,S,P,T,L,M,R;const I=function(e){if(1!==e.selectedElements.length){return null}const t=e.selectedElements[0];return"table"!==t.type?null:t}(p);if(I&&function(e,t){const l=t._focusedCellIds.length>0,o=!!t._editingCellId;if(!l&&!o){return!1}if(o){if("Escape"===e.key){return e.preventDefault(),t.exitCellEdit(),!0}if("Tab"===e.key){e.preventDefault();const l=t.editingCell;if(t.exitCellEdit(),l){if(e.shiftKey){let e=l.col-1,o=l.row;e<0&&(o-=1,e=t.cols-1),o<0&&(o=t.rows-1,e=t.cols-1),v(t,o,e)}else{let e=l.col+1,o=l.row;e>=t.cols&&(o+=1,e=0),o>=t.rows&&(o=0,e=0),v(t,o,e)}}return!0}if(e.metaKey||e.ctrlKey){const l=t.editingCell;if(l){if("b"===e.key){return e.preventDefault(),l.set({fontWeight:"bold"===l.fontWeight?"normal":"bold"}),!0}if("i"===e.key){return e.preventDefault(),l.set({fontStyle:"italic"===l.fontStyle?"normal":"italic"}),!0}if("u"===e.key){e.preventDefault();const t=l.textDecoration.split(" ").filter(Boolean),o=t.includes("underline");return l.set({textDecoration:o?t.filter(e=>"underline"!==e).join(" "):[...t,"underline"].join(" ")}),!0}}}return!0}if("Escape"===e.key){return e.preventDefault(),t.clearCellFocus(),!0}const n=t.focusedCells[0];if(!n){return!1}const r=n.row,i=n.col;if("Enter"===e.key){return e.preventDefault(),t.enterCellEdit(n.id),!0}if("Tab"===e.key){if(e.preventDefault(),e.shiftKey){let e=i-1,l=r;e<0&&(l-=1,e=t.cols-1),l<0&&(l=t.rows-1,e=t.cols-1),f(t,l,e)}else{let e=i+1,l=r;e>=t.cols&&(l+=1,e=0),l>=t.rows&&(l=0,e=0),f(t,l,e)}return!0}if("ArrowRight"===e.key||"ArrowLeft"===e.key||"ArrowDown"===e.key||"ArrowUp"===e.key){if(e.preventDefault(),e.shiftKey){const l=function(e){const t=e.cells.find(t=>t.id===e._anchorCellId);if(!t){return null}const l=e.focusedCells;if(l.length<=1){return{row:t.row,col:t.col}}let o=1/0,n=-1,r=1/0,i=-1;for(const c of l){c.row<o&&(o=c.row),c.row>n&&(n=c.row),c.col<r&&(r=c.col),c.col>i&&(i=c.col)}return{row:t.row===o?n:o,col:t.col===r?i:r}}(t)||{row:r,col:i};let o=l.row,n=l.col;"ArrowRight"===e.key&&(n=Math.min(l.col+1,t.cols-1)),"ArrowLeft"===e.key&&(n=Math.max(l.col-1,0)),"ArrowDown"===e.key&&(o=Math.min(l.row+1,t.rows-1)),"ArrowUp"===e.key&&(o=Math.max(l.row-1,0)),t.focusCellRange(o,n)}else{"ArrowRight"===e.key&&f(t,r,Math.min(i+1,t.cols-1)),"ArrowLeft"===e.key&&f(t,r,Math.max(i-1,0)),"ArrowDown"===e.key&&f(t,Math.min(r+1,t.rows-1),i),"ArrowUp"===e.key&&f(t,Math.max(r-1,0),i)}return!0}if("Delete"===e.key||"Backspace"===e.key){return e.preventDefault(),t.focusedCells.forEach(e=>{e.set({text:""})}),!0}const c=e.ctrlKey||e.metaKey;if(c&&"KeyC"===e.code){e.preventDefault();const l=t.focusedCells.map(e=>d(e.text));return navigator.clipboard.writeText(l.join("\n")),!0}return c&&"KeyV"===e.code?(e.preventDefault(),navigator.clipboard.readText().then(e=>{const l=t.focusedCells[0];l&&l.set({text:e})}),!0):!(!c||"KeyA"!==e.code||(e.preventDefault(),t.cells.forEach(e=>{t.focusCell(e.id,!0)}),0))}(y,I)){return}if("INPUT"===(null===(m=document.activeElement)||void 0===m?void 0:m.tagName)||"TEXTAREA"===(null===(h=document.activeElement)||void 0===h?void 0:h.tagName)||"true"===(null===(w=document.activeElement)||void 0===w?void 0:w.contentEditable)){return}const j=document.querySelector(".polotno-workspace-container");if(document.activeElement!==j&&!(null==j?void 0:j.contains(document.activeElement))){const e=window.getSelection();if(e&&e.toString().length>0){return}}const W=p.selectedElements.filter(e=>e.removable).map(e=>e.id);46!==y.keyCode&&8!==y.keyCode||p.deleteElements(W);const U=y.ctrlKey||y.metaKey,B=y.shiftKey,z=y.altKey;if("Escape"===y.key){return y.preventDefault(),void("draw"===p.tool?p.setTool("selection"):p.selectElements([]))}if(!U||B||"z"!==y.key.toLowerCase()&&"y"!==y.key.toLowerCase()||(y.preventDefault(),p.history.undo()),U&&B&&("z"===y.key.toLowerCase()||"y"===y.key.toLowerCase())&&(y.preventDefault(),p.history.redo()),U&&"KeyA"===y.code){y.preventDefault();const e=null===(g=p.activePage)||void 0===g?void 0:g.children.filter(e=>e.selectable),t=(null==e?void 0:e.map(e=>e.id))||[];p.selectElements(t)}if(U&&"KeyC"===y.code&&(y.preventDefault(),e(p)),U&&"KeyX"===y.code&&(y.preventDefault(),t(p)),U&&"KeyV"===y.code&&(y.preventDefault(),l(p)),"ArrowDown"===y.code){y.preventDefault();const e=y.shiftKey?10:1;p.selectedShapes.forEach(t=>{t.draggable&&t.set({y:t.y+e})})}if("ArrowUp"===y.code){y.preventDefault();const e=y.shiftKey?10:1;p.selectedShapes.forEach(t=>{t.draggable&&t.set({y:t.y-e})})}if("ArrowLeft"===y.code){y.preventDefault();const e=y.shiftKey?10:1;p.selectedShapes.forEach(t=>{t.draggable&&t.set({x:t.x-e})})}if("ArrowRight"===y.code){y.preventDefault();const e=y.shiftKey?10:1;p.selectedShapes.forEach(t=>{t.draggable&&t.set({x:t.x+e})})}if(U&&"KeyG"===y.code){y.preventDefault();const e=p.selectedElements[0];if(e&&"group"===e.type){const t=e;p.ungroupElements([t.id])}else{p.groupElements(p.selectedElements.map(e=>e.id))}}if(U&&"KeyD"===y.code&&(y.preventDefault(),o(p.selectedElements,p)),"KeyT"===y.code&&!U){y.preventDefault();const e=30,t=p.width/2,l=p.width/2-t/2,o=p.height/2-e/2,n=2160,r=(p.width+p.height)/n;null===(D=p.activePage)||void 0===D||D.addElement({type:"text",x:l,y:o,width:t,fontSize:e*r,text:"Sample Text",fontFamily:"Roboto"})}if("KeyR"===y.code&&!U){y.preventDefault();const e={type:"figure",x:p.width/4,y:p.height/4,width:300,height:300,fill:u,stroke:"#0c0c0c",strokeWidth:0,subType:"rect"};null===(E=p.activePage)||void 0===E||E.addElement(e)}if("KeyL"===y.code&&!U){y.preventDefault();const e=(null!==(K=null===(k=p.activePage)||void 0===k?void 0:k.computedWidth)&&void 0!==K?K:0)/3,t={type:"line",x:(null!==(x=null===(C=p.activePage)||void 0===C?void 0:C.computedWidth)&&void 0!==x?x:0)/2-e/2,y:(null!==(b=null===(A=p.activePage)||void 0===A?void 0:A.computedHeight)&&void 0!==b?b:0)/2,width:e,color:u};null===(S=p.activePage)||void 0===S||S.addElement(t)}if("KeyO"===y.code&&!U){y.preventDefault(),y.preventDefault();const e={type:"figure",x:p.width/4,y:p.height/4,width:300,height:300,fill:u,stroke:"#0c0c0c",strokeWidth:0,subType:"circle"};null===(P=p.activePage)||void 0===P||P.addElement(e)}U&&"Equal"===y.code&&(y.preventDefault(),p.setScale(p.scale+.1)),U&&"Minus"===y.code&&(y.preventDefault(),p.setScale(p.scale-.1)),z&&("KeyA"===y.code&&(y.preventDefault(),i(p)),"KeyD"===y.code&&(y.preventDefault(),a(p)),"KeyS"===y.code&&(y.preventDefault(),n(p)),"KeyW"===y.code&&(y.preventDefault(),s(p)),"KeyV"===y.code&&(y.preventDefault(),c(p)),"KeyH"===y.code&&(y.preventDefault(),r(p))),"BracketRight"===y.code&&(y.preventDefault(),U?null===(T=p.activePage)||void 0===T||T.moveElementsUp(p.selectedElementsIds):null===(L=p.activePage)||void 0===L||L.moveElementsTop(p.selectedElementsIds)),"BracketLeft"===y.code&&(y.preventDefault(),U?null===(M=p.activePage)||void 0===M||M.moveElementsDown(p.selectedElementsIds):null===(R=p.activePage)||void 0===R||R.moveElementsBottom(p.selectedElementsIds))}
+import{ROLES as e}from"../model/store.js";import{copy as t,cut as o,paste as l}from"../utils/clipboard.js";import{duplicateElements as n}from"../utils/duplicate.js";import{alignBottom as r,alignCenter as i,alignLeft as c,alignMiddle as a,alignRight as s,alignTop as d}from"../utils/alignment.js";import{removeTags as u}from"../utils/text.js";const f="rgba(191, 191, 191, 100)";function v(e,t,o){const l=e.getCell(t,o);l&&e.focusCell(l.id)}function y(e,t,o){const l=e.getCell(t,o);l&&e.enterCellEdit(l.id)}export function handleHotkey(p,m){var h,w,g,D,E,K,k,C,x,R,A,b,S,P,T,L,I,M;if(m.role===e.VIEWER){return}const j=function(e){if(1!==e.selectedElements.length){return null}const t=e.selectedElements[0];return"table"!==t.type?null:t}(m);if(j&&function(e,t,o){const l=t._focusedCellIds.length>0,n=!!t._editingCellId;if(!l&&!n){return!1}if(n){if("Escape"===e.key){return e.preventDefault(),t.exitCellEdit(),!0}if("Tab"===e.key){e.preventDefault();const o=t.editingCell;if(t.exitCellEdit(),o){if(e.shiftKey){let e=o.col-1,l=o.row;e<0&&(l-=1,e=t.cols-1),l<0&&(l=t.rows-1,e=t.cols-1),y(t,l,e)}else{let e=o.col+1,l=o.row;e>=t.cols&&(l+=1,e=0),l>=t.rows&&(l=0,e=0),y(t,l,e)}}return!0}if(e.metaKey||e.ctrlKey){const o=t.editingCell;if(o){if("b"===e.key){return e.preventDefault(),o.set({fontWeight:"bold"===o.fontWeight?"normal":"bold"}),!0}if("i"===e.key){return e.preventDefault(),o.set({fontStyle:"italic"===o.fontStyle?"normal":"italic"}),!0}if("u"===e.key){e.preventDefault();const t=o.textDecoration.split(" ").filter(Boolean),l=t.includes("underline");return o.set({textDecoration:l?t.filter(e=>"underline"!==e).join(" "):[...t,"underline"].join(" ")}),!0}}}return!0}if("Escape"===e.key){return e.preventDefault(),t.clearCellFocus(),!0}const r=t.focusedCells[0];if(!r){return!1}const i=r.row,c=r.col;if("Enter"===e.key){return e.preventDefault(),t.enterCellEdit(r.id),!0}if("Tab"===e.key){if(e.preventDefault(),e.shiftKey){let e=c-1,o=i;e<0&&(o-=1,e=t.cols-1),o<0&&(o=t.rows-1,e=t.cols-1),v(t,o,e)}else{let e=c+1,o=i;e>=t.cols&&(o+=1,e=0),o>=t.rows&&(o=0,e=0),v(t,o,e)}return!0}if("ArrowRight"===e.key||"ArrowLeft"===e.key||"ArrowDown"===e.key||"ArrowUp"===e.key){if(e.preventDefault(),e.shiftKey){const o=function(e){const t=e.cells.find(t=>t.id===e._anchorCellId);if(!t){return null}const o=e.focusedCells;if(o.length<=1){return{row:t.row,col:t.col}}let l=1/0,n=-1,r=1/0,i=-1;for(const c of o){c.row<l&&(l=c.row),c.row>n&&(n=c.row),c.col<r&&(r=c.col),c.col>i&&(i=c.col)}return{row:t.row===l?n:l,col:t.col===r?i:r}}(t)||{row:i,col:c};let l=o.row,n=o.col;"ArrowRight"===e.key&&(n=Math.min(o.col+1,t.cols-1)),"ArrowLeft"===e.key&&(n=Math.max(o.col-1,0)),"ArrowDown"===e.key&&(l=Math.min(o.row+1,t.rows-1)),"ArrowUp"===e.key&&(l=Math.max(o.row-1,0)),t.focusCellRange(l,n)}else{"ArrowRight"===e.key&&v(t,i,Math.min(c+1,t.cols-1)),"ArrowLeft"===e.key&&v(t,i,Math.max(c-1,0)),"ArrowDown"===e.key&&v(t,Math.min(i+1,t.rows-1),c),"ArrowUp"===e.key&&v(t,Math.max(i-1,0),c)}return!0}const a=e.ctrlKey||e.metaKey;if(!(a||e.shiftKey||e.altKey||"Delete"!==e.key&&"Backspace"!==e.key)){return e.preventDefault(),t.focusedCells.forEach(e=>{e.set({text:""})}),!0}if(a&&e.shiftKey&&!e.altKey&&"Equal"===e.code){e.preventDefault();const l=t.getFocusedCellRange(),n=l?l.maxRow+1:i+1;return o.history.transaction(()=>{t.addRow(n)}),!0}if(a&&e.shiftKey&&e.altKey&&"Equal"===e.code){e.preventDefault();const l=t.getFocusedCellRange(),n=l?l.maxCol+1:c+1;return o.history.transaction(()=>{t.addColumn(n)}),!0}if(a&&!e.shiftKey&&"Backspace"===e.code){const l=t.getFocusedCellRange();if(l&&0===l.minCol&&l.maxCol===t.cols-1&&t.rows>1){return e.preventDefault(),o.history.transaction(()=>{t.removeRowRange(l.minRow,l.maxRow)}),!0}}if(a&&e.shiftKey&&"Backspace"===e.code){const l=t.getFocusedCellRange();if(l&&0===l.minRow&&l.maxRow===t.rows-1&&t.cols>1){return e.preventDefault(),o.history.transaction(()=>{t.removeColumnRange(l.minCol,l.maxCol)}),!0}}if(a&&"KeyC"===e.code){e.preventDefault();const o=t.focusedCells.map(e=>u(e.text));return navigator.clipboard.writeText(o.join("\n")),!0}return a&&"KeyV"===e.code?(e.preventDefault(),navigator.clipboard.readText().then(e=>{const o=t.focusedCells[0];o&&o.set({text:e})}),!0):!(!a||"KeyA"!==e.code||(e.preventDefault(),t.cells.forEach(e=>{t.focusCell(e.id,!0)}),0))}(p,j,m)){return}if("INPUT"===(null===(h=document.activeElement)||void 0===h?void 0:h.tagName)||"TEXTAREA"===(null===(w=document.activeElement)||void 0===w?void 0:w.tagName)||"true"===(null===(g=document.activeElement)||void 0===g?void 0:g.contentEditable)){return}const W=document.querySelector(".polotno-workspace-container"),B=document.activeElement===W||(null==W?void 0:W.contains(document.activeElement));if(!B){const e=window.getSelection();if(e&&e.toString().length>0){return}}if("Alt"===p.key){const e=W;return void((B||m.distanceGuidesVisible||e&&e.matches(":hover"))&&p.preventDefault())}const F=m.selectedElements.filter(e=>e.removable).map(e=>e.id);46!==p.keyCode&&8!==p.keyCode||m.deleteElements(F);const U=p.ctrlKey||p.metaKey,V=p.shiftKey,q=p.altKey;if("Escape"===p.key){return p.preventDefault(),void("draw"===m.tool?m.setTool("selection"):m.selectElements([]))}if(!U||V||"z"!==p.key.toLowerCase()&&"y"!==p.key.toLowerCase()||(p.preventDefault(),m.history.undo()),U&&V&&("z"===p.key.toLowerCase()||"y"===p.key.toLowerCase())&&(p.preventDefault(),m.history.redo()),U&&"KeyA"===p.code){p.preventDefault();const e=null===(D=m.activePage)||void 0===D?void 0:D.children.filter(e=>e.selectable),t=(null==e?void 0:e.map(e=>e.id))||[];m.selectElements(t)}if(U&&"KeyC"===p.code&&(p.preventDefault(),t(m)),U&&"KeyX"===p.code&&(p.preventDefault(),o(m)),U&&"KeyV"===p.code&&(p.preventDefault(),l(m)),"ArrowDown"===p.code){p.preventDefault();const e=p.shiftKey?10:1;m.selectedShapes.forEach(t=>{t.draggable&&t.set({y:t.y+e})})}if("ArrowUp"===p.code){p.preventDefault();const e=p.shiftKey?10:1;m.selectedShapes.forEach(t=>{t.draggable&&t.set({y:t.y-e})})}if("ArrowLeft"===p.code){p.preventDefault();const e=p.shiftKey?10:1;m.selectedShapes.forEach(t=>{t.draggable&&t.set({x:t.x-e})})}if("ArrowRight"===p.code){p.preventDefault();const e=p.shiftKey?10:1;m.selectedShapes.forEach(t=>{t.draggable&&t.set({x:t.x+e})})}if(U&&"KeyG"===p.code){p.preventDefault();const e=m.selectedElements[0];if(e&&"group"===e.type){const t=e;m.ungroupElements([t.id])}else{m.groupElements(m.selectedElements.map(e=>e.id))}}if(U&&"KeyD"===p.code&&(p.preventDefault(),n(m.selectedElements,m)),"KeyT"===p.code&&!U){p.preventDefault();const e=30,t=m.width/2,o=m.width/2-t/2,l=m.height/2-e/2,n=2160,r=(m.width+m.height)/n;null===(E=m.activePage)||void 0===E||E.addElement({type:"text",x:o,y:l,width:t,fontSize:e*r,text:"Sample Text",fontFamily:"Roboto"})}if("KeyR"===p.code&&!U){p.preventDefault();const e={type:"figure",x:m.width/4,y:m.height/4,width:300,height:300,fill:f,stroke:"#0c0c0c",strokeWidth:0,subType:"rect"};null===(K=m.activePage)||void 0===K||K.addElement(e)}if("KeyL"===p.code&&!U){p.preventDefault();const e=(null!==(C=null===(k=m.activePage)||void 0===k?void 0:k.computedWidth)&&void 0!==C?C:0)/3,t={type:"line",x:(null!==(R=null===(x=m.activePage)||void 0===x?void 0:x.computedWidth)&&void 0!==R?R:0)/2-e/2,y:(null!==(b=null===(A=m.activePage)||void 0===A?void 0:A.computedHeight)&&void 0!==b?b:0)/2,width:e,color:f};null===(S=m.activePage)||void 0===S||S.addElement(t)}if("KeyO"===p.code&&!U){p.preventDefault(),p.preventDefault();const e={type:"figure",x:m.width/4,y:m.height/4,width:300,height:300,fill:f,stroke:"#0c0c0c",strokeWidth:0,subType:"circle"};null===(P=m.activePage)||void 0===P||P.addElement(e)}U&&"Equal"===p.code&&(p.preventDefault(),m.setScale(m.scale+.1)),U&&"Minus"===p.code&&(p.preventDefault(),m.setScale(m.scale-.1)),q&&("KeyA"===p.code&&(p.preventDefault(),c(m)),"KeyD"===p.code&&(p.preventDefault(),s(m)),"KeyS"===p.code&&(p.preventDefault(),r(m)),"KeyW"===p.code&&(p.preventDefault(),d(m)),"KeyV"===p.code&&(p.preventDefault(),a(m)),"KeyH"===p.code&&(p.preventDefault(),i(m))),"BracketRight"===p.code&&(p.preventDefault(),U?null===(T=m.activePage)||void 0===T||T.moveElementsUp(m.selectedElementsIds):null===(L=m.activePage)||void 0===L||L.moveElementsTop(m.selectedElementsIds)),"BracketLeft"===p.code&&(p.preventDefault(),U?null===(I=m.activePage)||void 0===I||I.moveElementsDown(m.selectedElementsIds):null===(M=m.activePage)||void 0===M||M.moveElementsBottom(m.selectedElementsIds))}