@leafer-ui/image 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/image",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "@leafer-ui/image",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,11 +22,11 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.1",
-    "@leafer-ui/draw": "1.0.1"
+    "@leafer/core": "1.0.3",
+    "@leafer-ui/draw": "1.0.3"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.1",
-    "@leafer-ui/interface": "1.0.1"
+    "@leafer/interface": "1.0.3",
+    "@leafer-ui/interface": "1.0.3"
   }
 }

package/src/check.ts

@@ -11,8 +11,9 @@ const { abs } = Math
 
 export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, allowPaint?: boolean): boolean {
     const { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld
+    const { pixelRatio } = canvas
 
-    if (!paint.data || (paint.patternId === scaleX + '-' + scaleY && !Export.running)) {
+    if (!paint.data || (paint.patternId === scaleX + '-' + scaleY + '-' + pixelRatio && !Export.running)) {
         return false
     } else {
 
@@ -21,8 +22,8 @@ export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, al
         if (allowPaint) {
             if (!data.repeat) {
                 let { width, height } = data
-                width *= abs(scaleX) * canvas.pixelRatio
-                height *= abs(scaleY) * canvas.pixelRatio
+                width *= abs(scaleX) * pixelRatio
+                height *= abs(scaleY) * pixelRatio
                 if (data.scaleX) {
                     width *= data.scaleX
                     height *= data.scaleY
@@ -43,13 +44,13 @@ export function checkImage(ui: IUI, canvas: ILeaferCanvas, paint: ILeafPaint, al
             canvas.restore()
             return true
         } else {
-            if (!paint.style || Export.running) {
-                createPattern(ui, paint, canvas.pixelRatio)
+            if (!paint.style || paint.sync || Export.running) {
+                createPattern(ui, paint, pixelRatio)
             } else {
                 if (!paint.patternTask) {
                     paint.patternTask = ImageManager.patternTasker.add(async () => {
                         paint.patternTask = null
-                        if (canvas.bounds.hit(ui.__nowWorld)) createPattern(ui, paint, canvas.pixelRatio)
+                        if (canvas.bounds.hit(ui.__nowWorld)) createPattern(ui, paint, pixelRatio)
                         ui.forceUpdate('surface')
                     }, 300)
                 }

package/src/data.ts

@@ -1,5 +1,5 @@
-import { IBoundsData, ILeaferImage, IPointData } from '@leafer/interface'
-import { MatrixHelper, Bounds, AlignHelper } from '@leafer/core'
+import { IBoundsData, ILeaferImage, IPointData, IScaleData } from '@leafer/interface'
+import { MatrixHelper, MathHelper, Bounds, AlignHelper } from '@leafer/core'
 
 import { IImagePaint, ILeafPaint, ILeafPaintPatternData } from '@leafer-ui/interface'
 
@@ -9,16 +9,19 @@ import { clipMode, fillOrFitMode, repeatMode } from './mode'
 const { get, translate } = MatrixHelper
 const tempBox = new Bounds()
 const tempPoint = {} as IPointData
+const tempScaleData = {} as IScaleData
 
 export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: IImagePaint, box: IBoundsData): void {
-    const { blendMode } = paint
+    const { blendMode, sync } = paint
     if (blendMode) leafPaint.blendMode = blendMode
+    if (sync) leafPaint.sync = sync
     leafPaint.data = getPatternData(paint, box, image)
 }
 
 export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILeaferImage): ILeafPaintPatternData {
     let { width, height } = image
     if (paint.padding) box = tempBox.set(box).shrink(paint.padding)
+    if (paint.mode === 'strench' as string) paint.mode = 'stretch' // 兼容代码，后续可移除
 
     const { opacity, mode, align, offset, scale, size, rotation, repeat } = paint
     const sameBox = box.width === width && box.height === height
@@ -35,12 +38,10 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
             scaleX = scaleY = mode === 'fit' ? Math.min(sw, sh) : Math.max(sw, sh)
             x += (box.width - width * scaleX) / 2, y += (box.height - height * scaleY) / 2
         }
-    } else if (size) {
-        scaleX = (typeof size === 'number' ? size : size.width) / width
-        scaleY = (typeof size === 'number' ? size : size.height) / height
-    } else if (scale) {
-        scaleX = typeof scale === 'number' ? scale : scale.x
-        scaleY = typeof scale === 'number' ? scale : scale.y
+    } else if (scale || size) {
+        MathHelper.getScaleData(scale, size, image, tempScaleData)
+        scaleX = tempScaleData.scaleX
+        scaleY = tempScaleData.scaleY
     }
 
     if (align) {
@@ -53,7 +54,7 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
     if (offset) x += offset.x, y += offset.y
 
     switch (mode) {
-        case 'strench':
+        case 'stretch':
             if (!sameBox) width = box.width, height = box.height
             break
         case 'normal':
@@ -77,7 +78,7 @@ export function getPatternData(paint: IImagePaint, box: IBoundsData, image: ILea
         }
     }
 
-    if (scaleX && mode !== 'strench') {
+    if (scaleX && mode !== 'stretch') {
         data.scaleX = scaleX
         data.scaleY = scaleY
     }

package/src/pattern.ts

@@ -10,7 +10,7 @@ export function createPattern(ui: IUI, paint: ILeafPaint, pixelRatio: number): b
 
     let { scaleX, scaleY } = ImageManager.patternLocked ? ui.__world : ui.__nowWorld
 
-    const id = scaleX + '-' + scaleY
+    const id = scaleX + '-' + scaleY + '-' + pixelRatio
 
     if (paint.patternId !== id && !ui.destroyed) {