@leafer-ui/paint 1.0.0-rc.8 → 1.0.0-rc.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafer-ui/paint",
-  "version": "1.0.0-rc.8",
+  "version": "1.0.0-rc.9",
   "description": "@leafer-ui/paint",
   "author": "Chao (Leafer) Wan",
   "license": "MIT",
@@ -22,10 +22,10 @@
     "leaferjs"
   ],
   "dependencies": {
-    "@leafer/core": "1.0.0-rc.8"
+    "@leafer/core": "1.0.0-rc.9"
   },
   "devDependencies": {
-    "@leafer/interface": "1.0.0-rc.8",
-    "@leafer-ui/interface": "1.0.0-rc.8"
+    "@leafer/interface": "1.0.0-rc.9",
+    "@leafer-ui/interface": "1.0.0-rc.9"
   }
 }

package/src/paint/image/data.ts

@@ -11,12 +11,23 @@ const { get, translate } = MatrixHelper
 export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: IImagePaint, box: IBoundsData): void {
     let { width, height } = image
 
-    const { opacity, mode, offset, scale, rotation, blendMode, repeat } = paint
+
+    const { opacity, mode, offset, scale, size, rotation, blendMode, repeat } = paint
     const sameBox = box.width === width && box.height === height
     if (blendMode) leafPaint.blendMode = blendMode
 
     const data: ILeafPaintPatternData = leafPaint.data = { mode }
 
+    let x: number, y: number, scaleX: number, scaleY: number
+    if (offset) x = offset.x, y = offset.y
+    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
+    }
+
     switch (mode) {
         case 'strench':
             if (!sameBox) width = box.width, height = box.height
@@ -26,10 +37,10 @@ export function createData(leafPaint: ILeafPaint, image: ILeaferImage, paint: II
             }
             break
         case 'clip':
-            if (offset || scale || rotation) clipMode(data, box, offset, scale, rotation)
+            if (offset || scaleX || rotation) clipMode(data, box, x, y, scaleX, scaleY, rotation)
             break
         case 'repeat':
-            if (!sameBox || scale || rotation) repeatMode(data, box, width, height, scale as number, rotation)
+            if (!sameBox || scaleX || rotation) repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation)
             if (!repeat) data.repeat = 'repeat'
             break
         case 'fit':

package/src/paint/image/mode.ts

@@ -1,9 +1,10 @@
-import { IBoundsData } from '@leafer/interface'
+import { IBoundsData, IPointData, IMatrixData, } from '@leafer/interface'
 import { MatrixHelper } from '@leafer/core'
 
-import { IMatrixData, IImagePaintMode, IPointData, ILeafPaintPatternData } from '@leafer-ui/interface'
+import { IImagePaintMode, ILeafPaintPatternData } from '@leafer-ui/interface'
 
 
+let origin = {} as IPointData
 const { get, rotateOfOuter, translate, scaleOfOuter, scale: scaleHelper, rotate } = MatrixHelper
 
 export function fillOrFitMode(data: ILeafPaintPatternData, mode: IImagePaintMode, box: IBoundsData, width: number, height: number, rotation: number): void {
@@ -22,12 +23,12 @@ export function fillOrFitMode(data: ILeafPaintPatternData, mode: IImagePaintMode
 }
 
 
-export function clipMode(data: ILeafPaintPatternData, box: IBoundsData, offset: IPointData, scale: number | IPointData, rotation: number): void {
+export function clipMode(data: ILeafPaintPatternData, box: IBoundsData, x: number, y: number, scaleX: number, scaleY: number, rotation: number): void {
     const transform: IMatrixData = get()
     translate(transform, box.x, box.y)
-    if (offset) translate(transform, offset.x, offset.y)
-    if (scale) {
-        typeof scale === 'number' ? scaleHelper(transform, scale) : scaleHelper(transform, scale.x, scale.y)
+    if (x || y) translate(transform, x, y)
+    if (scaleX) {
+        scaleHelper(transform, scaleX, scaleY)
         data.scaleX = transform.a
         data.scaleY = transform.d
     }
@@ -36,9 +37,8 @@ export function clipMode(data: ILeafPaintPatternData, box: IBoundsData, offset:
 }
 
 
-export function repeatMode(data: ILeafPaintPatternData, box: IBoundsData, width: number, height: number, scale: number, rotation: number): void {
+export function repeatMode(data: ILeafPaintPatternData, box: IBoundsData, width: number, height: number, x: number, y: number, scaleX: number, scaleY: number, rotation: number): void {
     const transform = get()
-
     if (rotation) {
         rotate(transform, rotation)
         switch (rotation) {
@@ -53,10 +53,14 @@ export function repeatMode(data: ILeafPaintPatternData, box: IBoundsData, width:
                 break
         }
     }
-    translate(transform, box.x, box.y)
-    if (scale) {
-        scaleOfOuter(transform, box, scale)
-        data.scaleX = data.scaleY = scale
+    origin.x = box.x
+    origin.y = box.y
+    if (x || y) origin.x += x, origin.y += y
+    translate(transform, origin.x, origin.y)
+    if (scaleX) {
+        scaleOfOuter(transform, origin, scaleX, scaleY)
+        data.scaleX = scaleX
+        data.scaleY = scaleY
     }
     data.transform = transform
 }