@widgetic/editor 4.1.9 → 4.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -905,7 +905,7 @@
|
|
|
905
905
|
{:else if effectiveSrc || (mode === 'standalone' && isResolvingUrl)}
|
|
906
906
|
<div
|
|
907
907
|
bind:this={resizeStageEl}
|
|
908
|
-
class="{enableResize ? 'preview-resize-stage-ct absolute inset-0 overflow-
|
|
908
|
+
class="{enableResize ? 'preview-resize-stage-ct absolute inset-0 overflow-visible' : 'preview-resize-stage-ct relative flex items-center justify-center w-full h-full'}"
|
|
909
909
|
>
|
|
910
910
|
<div
|
|
911
911
|
class="preview-iframe-shell relative flex flex-col {enableResize ? 'preview-iframe-shell-positioned' : ''}"
|
|
@@ -914,6 +914,24 @@
|
|
|
914
914
|
? `position: absolute; left: ${previewShellLeft}px; top: ${previewShellTop}px; width: ${resizeWidth ? resizeWidth + 'px' : '100%'};`
|
|
915
915
|
: `width: ${resizeWidth ? resizeWidth + 'px' : '100%'}; height: ${resizeHeight ? resizeHeight + 'px' : '100%'};`} transition: {isResizing || isDraggingPreview ? 'none' : 'width 0.2s, height 0.2s, left 0.15s, top 0.15s'};"
|
|
916
916
|
>
|
|
917
|
+
{#if showResizeHandles}
|
|
918
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
919
|
+
<div class="preview-resize-handle preview-resize-handle-tl" onpointerdown={(e) => startResize(e, -1, -1)}></div>
|
|
920
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
921
|
+
<div class="preview-resize-handle preview-resize-handle-n" onpointerdown={(e) => startResize(e, 0, -1)}></div>
|
|
922
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
923
|
+
<div class="preview-resize-handle preview-resize-handle-tr" onpointerdown={(e) => startResize(e, 1, -1)}></div>
|
|
924
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
925
|
+
<div class="preview-resize-handle preview-resize-handle-w" onpointerdown={(e) => startResize(e, -1, 0)}></div>
|
|
926
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
927
|
+
<div class="preview-resize-handle preview-resize-handle-e" onpointerdown={(e) => startResize(e, 1, 0)}></div>
|
|
928
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
929
|
+
<div class="preview-resize-handle preview-resize-handle-bl" onpointerdown={(e) => startResize(e, -1, 1)}></div>
|
|
930
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
931
|
+
<div class="preview-resize-handle preview-resize-handle-s" onpointerdown={(e) => startResize(e, 0, 1)}></div>
|
|
932
|
+
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
933
|
+
<div class="preview-resize-handle preview-resize-handle-br" onpointerdown={(e) => startResize(e, 1, 1)}></div>
|
|
934
|
+
{/if}
|
|
917
935
|
{#if showPreviewChrome}
|
|
918
936
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
919
937
|
<div
|
|
@@ -955,17 +973,7 @@
|
|
|
955
973
|
class="preview-iframe-wrapper relative"
|
|
956
974
|
style="width: 100%; height: {resizeHeight ? resizeHeight + 'px' : '100%'};"
|
|
957
975
|
>
|
|
958
|
-
|
|
959
|
-
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
960
|
-
<div class="preview-resize-handle preview-resize-handle-tl" onpointerdown={(e) => startResize(e, -1, -1)}></div>
|
|
961
|
-
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
962
|
-
<div class="preview-resize-handle preview-resize-handle-tr" onpointerdown={(e) => startResize(e, 1, -1)}></div>
|
|
963
|
-
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
964
|
-
<div class="preview-resize-handle preview-resize-handle-bl" onpointerdown={(e) => startResize(e, -1, 1)}></div>
|
|
965
|
-
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
966
|
-
<div class="preview-resize-handle preview-resize-handle-br" onpointerdown={(e) => startResize(e, 1, 1)}></div>
|
|
967
|
-
{/if}
|
|
968
|
-
|
|
976
|
+
|
|
969
977
|
{#if (resizeWidth || resizeHeight) && !showDimensionInputs}
|
|
970
978
|
<div
|
|
971
979
|
class="widget-preview-dimension-badge absolute left-1/2 -translate-x-1/2 text-[10px] bg-black/70 px-1.5 py-px rounded text-gray-300 select-none pointer-events-none z-20 whitespace-nowrap"
|
|
@@ -1139,10 +1147,28 @@
|
|
|
1139
1147
|
}
|
|
1140
1148
|
|
|
1141
1149
|
/* The four corner handles of the preview are on the four corners of the box, a place on the screen: the set is the same in both directions. */
|
|
1142
|
-
.preview-resize-handle-tl { top: -5px; left: -5px; cursor: nwse-resize; } /* rtl-ok: top left corner */
|
|
1143
|
-
.preview-resize-handle-tr { top: -5px; right: -5px; cursor: nesw-resize; } /* rtl-ok: top right corner */
|
|
1150
|
+
.preview-resize-handle-tl { top: -5px; left: -5px; cursor: nwse-resize; } /* rtl-ok: top left corner, above the top bar */
|
|
1151
|
+
.preview-resize-handle-tr { top: -5px; right: -5px; cursor: nesw-resize; } /* rtl-ok: top right corner, above the top bar */
|
|
1144
1152
|
.preview-resize-handle-bl { bottom: -5px; left: -5px; cursor: nesw-resize; } /* rtl-ok: bottom left corner */
|
|
1145
1153
|
.preview-resize-handle-br { bottom: -5px; right: -5px; cursor: nwse-resize; } /* rtl-ok: bottom right corner */
|
|
1154
|
+
.preview-resize-handle-n,
|
|
1155
|
+
.preview-resize-handle-s {
|
|
1156
|
+
width: 28px;
|
|
1157
|
+
height: 8px;
|
|
1158
|
+
left: 50%;
|
|
1159
|
+
margin-left: -14px;
|
|
1160
|
+
}
|
|
1161
|
+
.preview-resize-handle-n { top: -5px; cursor: ns-resize; } /* rtl-ok: top edge, above the top bar */
|
|
1162
|
+
.preview-resize-handle-s { bottom: -5px; cursor: ns-resize; }
|
|
1163
|
+
.preview-resize-handle-e,
|
|
1164
|
+
.preview-resize-handle-w {
|
|
1165
|
+
width: 8px;
|
|
1166
|
+
height: 28px;
|
|
1167
|
+
top: 50%;
|
|
1168
|
+
margin-top: -14px;
|
|
1169
|
+
}
|
|
1170
|
+
.preview-resize-handle-e { right: -5px; cursor: ew-resize; } /* rtl-ok: right edge */
|
|
1171
|
+
.preview-resize-handle-w { left: -5px; cursor: ew-resize; } /* rtl-ok: left edge */
|
|
1146
1172
|
|
|
1147
1173
|
.preview-resize-handle:hover {
|
|
1148
1174
|
background: #eff6ff;
|