@univerjs/sheets-drawing-ui 1.0.3 → 1.1.0

package/lib/es/locale/ar-SA.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "يمكن رفع {0} صور فقط في المرة الواحدة",
 		invalidImage: "صورة غير صالحة"
 	},
+	"image-transparency": { title: "الشفافية" },
 	"drawing-anchor": {
 		title: "خصائص المرساة",
 		both: "النقل والتحجيم مع الخلايا",

package/lib/es/locale/ca-ES.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "Només es poden pujar {0} imatges alhora",
 		invalidImage: "Imatge no vàlida"
 	},
+	"image-transparency": { title: "Transparència" },
 	"drawing-anchor": {
 		title: "Propietats d’ancoratge",
 		both: "Mou i canvia la mida amb les cel·les",

package/lib/es/locale/de-DE.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "Es können nur {0} Bilder gleichzeitig hochgeladen werden",
 		invalidImage: "Ungültiges Bild"
 	},
+	"image-transparency": { title: "Transparenz" },
 	"drawing-anchor": {
 		title: "Anker-Eigenschaften",
 		both: "Mit Zellen verschieben und skalieren",

package/lib/es/locale/en-US.js

@@ -54,6 +54,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "Only {0} images can be uploaded at a time",
 		invalidImage: "Invalid image"
 	},
+	"image-transparency": { title: "Transparency" },
 	"drawing-anchor": {
 		title: "Anchor Properties",
 		both: "Move and size with cells",

package/lib/es/locale/es-ES.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "Solo se pueden subir {0} imágenes a la vez",
 		invalidImage: "Imagen no válida"
 	},
+	"image-transparency": { title: "Transparencia" },
 	"drawing-anchor": {
 		title: "Propiedades de anclaje",
 		both: "Mover y cambiar tamaño con las celdas",

package/lib/es/locale/fa-IR.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "فقط {0} تصویر می‌توانند همزمان آپلود شوند",
 		invalidImage: "تصویر نامعتبر است"
 	},
+	"image-transparency": { title: "شفافیت" },
 	"drawing-anchor": {
 		title: "خواص لنگر",
 		both: "جابه‌جایی و تغییر اندازه با سلول‌ها",

package/lib/es/locale/fr-FR.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "Seulement {0} images peuvent être téléchargées à la fois",
 		invalidImage: "Image invalide"
 	},
+	"image-transparency": { title: "Transparence" },
 	"drawing-anchor": {
 		title: "Propriétés de l'ancre",
 		both: "Déplacer et redimensionner avec les cellules",

package/lib/es/locale/id-ID.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "Hanya {0} gambar yang dapat diunggah dalam satu waktu",
 		invalidImage: "Gambar tidak valid"
 	},
+	"image-transparency": { title: "Transparansi" },
 	"drawing-anchor": {
 		title: "Properti Jangkar",
 		both: "Pindah dan ukur bersama sel",

package/lib/es/locale/it-IT.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "È possibile caricare solo {0} immagini alla volta",
 		invalidImage: "Immagine non valida"
 	},
+	"image-transparency": { title: "Trasparenza" },
 	"drawing-anchor": {
 		title: "Proprietà ancoraggio",
 		both: "Sposta e ridimensiona con le celle",

package/lib/es/locale/ja-JP.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "一度にアップロードできるのは {0} 個までです",
 		invalidImage: "無効な画像です"
 	},
+	"image-transparency": { title: "透明度" },
 	"drawing-anchor": {
 		title: "プロパティ",
 		both: "セルに合わせて移動やサイズ変更をする",

package/lib/es/locale/ko-KR.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "한 번에 {0}개까지만 업로드할 수 있습니다",
 		invalidImage: "유효하지 않은 이미지입니다"
 	},
+	"image-transparency": { title: "투명도" },
 	"drawing-anchor": {
 		title: "고정 위치 설정",
 		both: "셀과 함께 이동 및 크기 조절",

package/lib/es/locale/pl-PL.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "Jednocześnie można przesłać tylko {0} obrazów",
 		invalidImage: "Nieprawidłowy obraz"
 	},
+	"image-transparency": { title: "Przezroczystość" },
 	"drawing-anchor": {
 		title: "Właściwości kotwicy",
 		both: "Przesuwaj i zmieniaj rozmiar razem z komórkami",

package/lib/es/locale/pt-BR.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "Apenas {0} imagens podem ser enviadas de cada vez",
 		invalidImage: "Imagem inválida"
 	},
+	"image-transparency": { title: "Transparência" },
 	"drawing-anchor": {
 		title: "Propriedades da âncora",
 		both: "Mover e dimensionar com as células",

package/lib/es/locale/ru-RU.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "За один раз можно загрузить только {0} изображений",
 		invalidImage: "Недопустимое изображение"
 	},
+	"image-transparency": { title: "Прозрачность" },
 	"drawing-anchor": {
 		title: "Свойства привязки",
 		both: "Перемещать и изменять размер с ячейками",

package/lib/es/locale/sk-SK.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "Naraz možno nahrať iba {0} obrázkov",
 		invalidImage: "Neplatný obrázok"
 	},
+	"image-transparency": { title: "Priehľadnosť" },
 	"drawing-anchor": {
 		title: "Vlastnosti ukotvenia",
 		both: "Presúvať a meniť veľkosť s bunkami",

package/lib/es/locale/vi-VN.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "Chỉ có thể tải lên {0} hình ảnh một lần",
 		invalidImage: "Hình ảnh không hợp lệ"
 	},
+	"image-transparency": { title: "Độ trong suốt" },
 	"drawing-anchor": {
 		title: "Thuộc tính neo",
 		both: "Di chuyển và thay đổi kích thước cùng với ô",

package/lib/es/locale/zh-CN.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "图片只能一次上传{0}张",
 		invalidImage: "无效图片"
 	},
+	"image-transparency": { title: "透明度" },
 	"drawing-anchor": {
 		title: "锚点属性",
 		both: "与单元格一起移动和调整大小",

package/lib/es/locale/zh-HK.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "圖片只能一次上傳{0}張",
 		invalidImage: "無效圖片"
 	},
+	"image-transparency": { title: "透明度" },
 	"drawing-anchor": {
 		title: "錨點屬性",
 		both: "與儲存格一起移動和調整大小",

package/lib/es/locale/zh-TW.js

@@ -39,6 +39,7 @@ const locale = { "sheets-drawing-ui": {
 		exceedMaxCount: "圖片只能一次上傳{0}張",
 		invalidImage: "無效圖片"
 	},
+	"image-transparency": { title: "透明度" },
 	"drawing-anchor": {
 		title: "錨點屬性",
 		both: "與儲存格一起移動和調整大小",

package/lib/facade.js

@@ -13,16 +13,23 @@ import { IRenderManagerService, getCurrentTypeOfRenderer } from "@univerjs/engin
 var FWorksheetDrawingUIMixin = class extends FWorksheet {
 	getFloatDomById(id) {
 		const info = this._injector.get(SheetCanvasFloatDomManagerService).getFloatDomInfo(id);
-		if (!info) return null;
-		const { unitId, subUnitId } = info;
-		const { rect } = info;
-		const { left = 0, top = 0, width = 0, height = 0, flipX = false, flipY = false, angle = 0, skewX = 0, skewY = 0 } = rect.getState();
-		const drawingParm = this._injector.get(ISheetDrawingService).getDrawingByParam({
-			drawingId: info.id,
+		return info ? this._getFloatDomResult(info) : null;
+	}
+	getAllFloatDoms() {
+		const floatDomService = this._injector.get(SheetCanvasFloatDomManagerService);
+		const unitId = this._workbook.getUnitId();
+		const subUnitId = this._worksheet.getSheetId();
+		return floatDomService.getFloatDomsBySubUnitId(unitId, subUnitId).map((info) => this._getFloatDomResult(info)).filter((dom) => dom != null);
+	}
+	_getFloatDomResult(info) {
+		const { unitId, subUnitId, id, rect, runtimeMetadata } = info;
+		const metadata = runtimeMetadata ?? this._injector.get(ISheetDrawingService).getDrawingByParam({
+			drawingId: id,
 			unitId,
 			subUnitId
 		});
-		if (!drawingParm) return null;
+		if (!metadata) return null;
+		const { left = 0, top = 0, width = 0, height = 0, flipX = false, flipY = false, angle = 0, skewX = 0, skewY = 0 } = rect.getState();
 		return {
 			position: {
 				left,
@@ -35,44 +42,12 @@ var FWorksheetDrawingUIMixin = class extends FWorksheet {
 				skewX,
 				skewY
 			},
-			componentKey: drawingParm.componentKey,
-			allowTransform: drawingParm.allowTransform,
-			data: drawingParm.data,
-			id: info.id
+			componentKey: metadata.componentKey,
+			allowTransform: metadata.allowTransform,
+			data: metadata.data,
+			id
 		};
 	}
-	getAllFloatDoms() {
-		const floatDomService = this._injector.get(SheetCanvasFloatDomManagerService);
-		const unitId = this._workbook.getUnitId();
-		const subUnitId = this._worksheet.getSheetId();
-		return Array.from(floatDomService.getFloatDomsBySubUnitId(unitId, subUnitId).values()).map((info) => {
-			const { rect } = info;
-			const drawingParm = this._injector.get(ISheetDrawingService).getDrawingByParam({
-				drawingId: info.id,
-				unitId,
-				subUnitId
-			});
-			if (!drawingParm) return null;
-			const { left, top, width, height, flipX, flipY, angle, skewX, skewY } = rect.getState();
-			return {
-				position: {
-					left,
-					top,
-					width,
-					height,
-					flipX,
-					flipY,
-					angle,
-					skewX,
-					skewY
-				},
-				componentKey: drawingParm.componentKey,
-				allowTransform: drawingParm.allowTransform,
-				data: drawingParm.data,
-				id: info.id
-			};
-		}).filter((dom) => dom != null);
-	}
 	updateFloatDom(id, config) {
 		const sheetSkeletonService = this._injector.get(SheetSkeletonService);
 		const info = this._injector.get(SheetCanvasFloatDomManagerService).getFloatDomInfo(id);

package/lib/index.css

@@ -1,3 +1,31 @@
+.univer-absolute {
+  position: absolute;
+}
+
+.univer-relative {
+  position: relative;
+}
+
+.univer-left-0 {
+  left: 0;
+}
+
+.univer-right-0 {
+  right: 0;
+}
+
+.univer-top-0 {
+  top: 0;
+}
+
+.univer-top-1\/2 {
+  top: 50%;
+}
+
+.univer-box-border {
+  box-sizing: border-box;
+}
+
 .univer-flex {
   display: flex;
 }
@@ -10,26 +38,160 @@
   display: none;
 }
 
+.univer-size-3 {
+  width: .75rem;
+  height: .75rem;
+}
+
+.univer-size-3\.5 {
+  width: .875rem;
+  height: .875rem;
+}
+
+.univer-h-1\.5 {
+  height: .375rem;
+}
+
+.univer-h-6 {
+  height: 1.5rem;
+}
+
+.univer-h-full {
+  height: 100%;
+}
+
+.univer-w-4 {
+  width: 1rem;
+}
+
+.univer-w-\[68px\] {
+  width: 68px;
+}
+
+.univer-w-full {
+  width: 100%;
+}
+
+.univer-min-w-0 {
+  min-width: 0;
+}
+
+.univer-flex-1 {
+  flex: 1;
+}
+
+.univer-flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.-univer-translate-x-1\/2 {
+  --univer-tw-translate-x: -50%;
+  transform: translate(-50%, var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+}
+
+.-univer-translate-y-1\/2 {
+  --univer-tw-translate-y: -50%;
+  transform: translate(var(--univer-tw-translate-x), -50%) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+}
+
+.univer-scale-105 {
+  --univer-tw-scale-x: 1.05;
+  --univer-tw-scale-y: 1.05;
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(1.05) scaleY(1.05);
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+}
+
+.univer-cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.univer-cursor-pointer {
+  cursor: pointer;
+}
+
+.univer-select-none {
+  user-select: none;
+}
+
 .univer-flex-col {
   flex-direction: column;
 }
 
+.univer-items-center {
+  align-items: center;
+}
+
 .univer-justify-end {
   justify-content: flex-end;
 }
 
+.univer-gap-1\.5 {
+  gap: .375rem;
+}
+
 .univer-gap-2 {
   gap: .5rem;
 }
 
+.univer-overflow-hidden {
+  overflow: hidden;
+}
+
+.univer-rounded-full {
+  border-radius: 9999px;
+}
+
+.univer-rounded-md {
+  border-radius: .375rem;
+}
+
+.univer-rounded-none {
+  border-radius: 0;
+}
+
+.univer-border {
+  border-width: 1px;
+}
+
 .univer-border-t {
   border-top-width: 1px;
 }
 
+.univer-border-none {
+  border-style: none;
+}
+
 .univer-border-gray-200 {
   border-color: var(--univer-gray-200);
 }
 
+.univer-border-primary-600 {
+  border-color: var(--univer-primary-600);
+}
+
+.univer-bg-gray-0 {
+  background-color: var(--univer-gray-0);
+}
+
+.univer-bg-gray-200 {
+  background-color: var(--univer-gray-200);
+}
+
+.univer-bg-transparent {
+  background-color: #0000;
+}
+
+.univer-p-0 {
+  padding: 0;
+}
+
+.univer-px-1\.5 {
+  padding-left: .375rem;
+  padding-right: .375rem;
+}
+
 .univer-py-2 {
   padding-top: .5rem;
   padding-bottom: .5rem;
@@ -53,6 +215,10 @@
   color: var(--univer-gray-400);
 }
 
+.univer-text-gray-500 {
+  color: var(--univer-gray-500);
+}
+
 .univer-text-gray-600 {
   color: var(--univer-gray-600);
 }
@@ -61,6 +227,130 @@
   color: var(--univer-red-500);
 }
 
+.univer-opacity-60 {
+  opacity: .6;
+}
+
+.univer-shadow-md {
+  --univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;
+  --univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 6px -2px #1e284d14, 0 2px 6px -1px #1e284d1a;
+  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
+}
+
+.univer-shadow-sm {
+  --univer-tw-shadow: 0px 1px 2px 0px #1e284d14;
+  --univer-tw-shadow-colored: 0px 1px 2px 0px var(--univer-tw-shadow-color);
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px #1e284d14;
+  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
+}
+
+.univer-transition-all {
+  transition-property: all;
+  transition-duration: .15s;
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.univer-transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-duration: .15s;
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
+.univer-transition-none {
+  transition-property: none;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .hover\:univer-border-primary-600:hover {
+    border-color: var(--univer-primary-600);
+  }
+
+  .hover\:univer-shadow-md:hover {
+    --univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;
+    --univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);
+    box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 6px -2px #1e284d14, 0 2px 6px -1px #1e284d1a;
+    box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
+  }
+}
+
+.focus-visible\:univer-outline-none:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid #0000;
+}
+
+.focus-visible\:univer-ring-2:focus-visible {
+  --univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);
+  --univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);
+  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), 0 0 #0000;
+  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:univer-ring-primary-100:focus-visible {
+  --univer-tw-ring-color: var(--univer-primary-100);
+}
+
+.dark\:\!univer-border-gray-600:where(.univer-dark, .univer-dark *) {
+  border-color: var(--univer-gray-600) !important;
+}
+
+.dark\:\!univer-bg-gray-600:where(.univer-dark, .univer-dark *) {
+  background-color: var(--univer-gray-600) !important;
+}
+
+.dark\:\!univer-bg-gray-800:where(.univer-dark, .univer-dark *) {
+  background-color: var(--univer-gray-800) !important;
+}
+
 .dark\:\!univer-text-gray-200:where(.univer-dark, .univer-dark *) {
   color: var(--univer-gray-200) !important;
 }
+
+.dark\:\!univer-text-gray-300:where(.univer-dark, .univer-dark *) {
+  color: var(--univer-gray-300) !important;
+}
+
+.\[\&_input\:focus\]\:\!univer-ring-0 input:focus {
+  --univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color) !important;
+  --univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(0px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color) !important;
+  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), 0 0 #0000 !important;
+  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000) !important;
+}
+
+.\[\&_input\]\:univer-h-6 input {
+  height: 1.5rem;
+}
+
+.\[\&_input\]\:univer-w-full input {
+  width: 100%;
+}
+
+.\[\&_input\]\:univer-border-none input {
+  border-style: none;
+}
+
+.\[\&_input\]\:\!univer-bg-transparent input {
+  background-color: #0000 !important;
+}
+
+.\[\&_input\]\:univer-px-1 input {
+  padding-left: .25rem;
+  padding-right: .25rem;
+}
+
+.\[\&_input\]\:univer-text-center input {
+  text-align: center;
+}
+
+.\[\&_input\]\:univer-text-xs input {
+  font-size: .75rem;
+  line-height: 1rem;
+}
+
+.\[\&_input\]\:univer-tabular-nums input {
+  --univer-tw-numeric-spacing: tabular-nums;
+  font-feature-settings: var(--univer-tw-ordinal) var(--univer-tw-slashed-zero) var(--univer-tw-numeric-figure) tabular-nums var(--univer-tw-numeric-fraction);
+  font-feature-settings: var(--univer-tw-ordinal) var(--univer-tw-slashed-zero) var(--univer-tw-numeric-figure) var(--univer-tw-numeric-spacing) var(--univer-tw-numeric-fraction);
+  font-variant-numeric: var(--univer-tw-ordinal) var(--univer-tw-slashed-zero) var(--univer-tw-numeric-figure) tabular-nums var(--univer-tw-numeric-fraction);
+  font-variant-numeric: var(--univer-tw-ordinal) var(--univer-tw-slashed-zero) var(--univer-tw-numeric-figure) var(--univer-tw-numeric-spacing) var(--univer-tw-numeric-fraction);
+}