feat: rename texture to paint

F-star · Apr 3, 2024 · 87f2316 · 87f2316
1 parent 647162f
commit 87f2316
Show file tree

Hide file tree

Showing 27 changed files with 250 additions and 254 deletions.
diff --git a/packages/core/src/commands/set_elements_attrs.ts b/packages/core/src/commands/set_elements_attrs.ts
@@ -1,7 +1,7 @@
 import { cloneDeep } from '@suika/common';
 
 import { type Graph, type IPathItem } from '../graphs';
-import { type ITexture } from '../texture';
+import { type IPaint } from '../paint';
 import { type ICommand } from './type';
 
 export type ISetElementsAttrsType = Partial<{
@@ -11,8 +11,8 @@ export type ISetElementsAttrsType = Partial<{
   height: number;
   rotation: number;
   cornerRadius: number;
-  fill: ITexture[];
-  stroke: ITexture[];
+  fill: IPaint[];
+  stroke: IPaint[];
   strokeWidth: number;
   objectName: string;
   visible: boolean;

diff --git a/packages/core/src/control_handle_manager/util.ts b/packages/core/src/control_handle_manager/util.ts
@@ -3,7 +3,7 @@ import { type IRectWithRotation, normalizeDegree, rad2Deg } from '@suika/geo';
 
 import { type ICursor } from '../cursor_manager';
 import { Rect } from '../graphs';
-import { type ITexture, TextureType } from '../texture';
+import { type IPaint, PaintType } from '../paint';
 import { ControlHandle } from './control_handle';
 import { type ITransformHandleType } from './type';
 
@@ -87,8 +87,8 @@ export const createTransformHandles = (params: {
       y: number;
       width: number;
       height: number;
-      fill: ITexture[];
-      stroke: ITexture[];
+      fill: IPaint[];
+      stroke: IPaint[];
       strokeWidth: number;
     } = {
       x: 0,
@@ -97,13 +97,13 @@ export const createTransformHandles = (params: {
       height: params.size,
       fill: [
         {
-          type: TextureType.Solid,
+          type: PaintType.Solid,
           attrs: parseHexToRGBA(params.fill)!,
         },
       ],
       stroke: [
         {
-          type: TextureType.Solid,
+          type: PaintType.Solid,
           attrs: parseHexToRGBA(params.stroke)!,
         },
       ],

diff --git a/packages/core/src/graphs/ellipse.ts b/packages/core/src/graphs/ellipse.ts
@@ -3,7 +3,7 @@ import { transformRotate } from '@suika/geo';
 
 import { DOUBLE_PI } from '../constant';
 import { type ImgManager } from '../Img_manager';
-import { TextureType } from '../texture';
+import { PaintType } from '../paint';
 import { GraphType } from '../type';
 import { rotateInCanvas } from '../utils';
 import { Graph, type GraphAttrs } from './graph';
@@ -52,14 +52,14 @@ export class Ellipse extends Graph<EllipseAttrs> {
 
     ctx.beginPath();
     ctx.ellipse(cx, cy, attrs.width / 2, attrs.height / 2, 0, 0, DOUBLE_PI);
-    for (const texture of attrs.fill ?? []) {
-      if (texture.type === TextureType.Solid) {
-        ctx.fillStyle = parseRGBAStr(texture.attrs);
+    for (const paint of attrs.fill ?? []) {
+      if (paint.type === PaintType.Solid) {
+        ctx.fillStyle = parseRGBAStr(paint.attrs);
         ctx.fill();
-      } else if (texture.type === TextureType.Image) {
+      } else if (paint.type === PaintType.Image) {
         if (imgManager) {
           ctx.clip();
-          this.fillImage(ctx, texture, imgManager, smooth);
+          this.fillImage(ctx, paint, imgManager, smooth);
         } else {
           console.warn('ImgManager is not provided');
         }
@@ -68,11 +68,11 @@ export class Ellipse extends Graph<EllipseAttrs> {
 
     if (attrs.strokeWidth) {
       ctx.lineWidth = attrs.strokeWidth;
-      for (const texture of attrs.stroke ?? []) {
-        if (texture.type === TextureType.Solid) {
-          ctx.strokeStyle = parseRGBAStr(texture.attrs);
+      for (const paint of attrs.stroke ?? []) {
+        if (paint.type === PaintType.Solid) {
+          ctx.strokeStyle = parseRGBAStr(paint.attrs);
           ctx.stroke();
-        } else if (texture.type === TextureType.Image) {
+        } else if (paint.type === PaintType.Image) {
           // TODO:
         }
       }

diff --git a/packages/core/src/graphs/graph/graph.ts b/packages/core/src/graphs/graph/graph.ts
@@ -14,8 +14,8 @@ import {
 import { HALF_PI } from '../../constant';
 import { type ControlHandle } from '../../control_handle_manager';
 import { type ImgManager } from '../../Img_manager';
+import { DEFAULT_IMAGE, type PaintImage } from '../../paint';
 import { getResizedLine } from '../../scene/utils';
-import { DEFAULT_IMAGE, type TextureImage } from '../../texture';
 import {
   GraphType,
   type IBox,
@@ -293,23 +293,19 @@ export class Graph<ATTRS extends GraphAttrs = GraphAttrs> {
     ctx.closePath();
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  strokeTexture(_ctx: CanvasRenderingContext2D) {
-    throw new Error('Method not implemented.');
-  }
   /**
    * fill image
    *
    * reference: https://mp.weixin.qq.com/s/TSpZv_0VJtxPTCCzEqDl8Q
    */
   protected fillImage(
     ctx: CanvasRenderingContext2D,
-    texture: TextureImage,
+    paint: PaintImage,
     imgManager: ImgManager,
     smooth = true,
     cornerRadius = 0,
   ) {
-    const src = texture.attrs.src;
+    const src = paint.attrs.src;
     const { x, y, width, height } = this.getRect();
     let img: CanvasImageSource | undefined = undefined;
 

diff --git a/packages/core/src/graphs/graph/graph_attrs.ts b/packages/core/src/graphs/graph/graph_attrs.ts
@@ -1,4 +1,4 @@
-import { type ITexture } from '../../texture';
+import { type IPaint } from '../../paint';
 import { type GraphType } from '../../type';
 
 export interface GraphAttrs {
@@ -10,8 +10,8 @@ export interface GraphAttrs {
   width: number;
   height: number;
 
-  fill?: ITexture[];
-  stroke?: ITexture[];
+  fill?: IPaint[];
+  stroke?: IPaint[];
   strokeWidth?: number;
 
   rotation?: number;

diff --git a/packages/core/src/graphs/line.ts b/packages/core/src/graphs/line.ts
@@ -1,6 +1,6 @@
 import { parseRGBAStr } from '@suika/common';
 
-import { TextureType } from '../texture';
+import { PaintType } from '../paint';
 import { GraphType } from '../type';
 import { rotateInCanvas } from '../utils';
 import { Graph, type GraphAttrs } from './graph';
@@ -34,14 +34,14 @@ export class Line extends Graph<LineAttrs> {
     ctx.lineTo(x + width, y);
     if (strokeWidth) {
       ctx.lineWidth = strokeWidth;
-      for (const texture of stroke ?? []) {
-        switch (texture.type) {
-          case TextureType.Solid: {
-            ctx.strokeStyle = parseRGBAStr(texture.attrs);
+      for (const paint of stroke ?? []) {
+        switch (paint.type) {
+          case PaintType.Solid: {
+            ctx.strokeStyle = parseRGBAStr(paint.attrs);
             ctx.stroke();
             break;
           }
-          case TextureType.Image: {
+          case PaintType.Image: {
             // TODO: stroke image
           }
         }

diff --git a/packages/core/src/graphs/path/path.ts b/packages/core/src/graphs/path/path.ts
@@ -3,7 +3,7 @@ import { addPoint, type IRect, type IRectWithRotation } from '@suika/geo';
 import { Bezier } from 'bezier-js';
 
 import { type ImgManager } from '../../Img_manager';
-import { type ITexture, TextureType } from '../../texture';
+import { type IPaint, PaintType } from '../../paint';
 import { GraphType } from '../../type';
 import { rotateInCanvas } from '../../utils';
 import { Graph, type GraphAttrs } from '../graph';
@@ -110,7 +110,7 @@ export class Path extends Graph<PathAttrs> {
     this.realDraw(ctx, undefined, undefined, {
       stroke: [
         {
-          type: TextureType.Solid,
+          type: PaintType.Solid,
           attrs: parseHexToRGBA(stroke)!,
         },
       ],
@@ -123,8 +123,8 @@ export class Path extends Graph<PathAttrs> {
     imgManager?: ImgManager,
     smooth?: boolean,
     overrideStyle?: {
-      fill?: ITexture[];
-      stroke?: ITexture[];
+      fill?: IPaint[];
+      stroke?: IPaint[];
       strokeWidth?: number;
     },
   ) {
@@ -171,17 +171,17 @@ export class Path extends Graph<PathAttrs> {
       }
     }
 
-    for (const texture of fill ?? []) {
-      switch (texture.type) {
-        case TextureType.Solid: {
-          ctx.fillStyle = parseRGBAStr(texture.attrs);
+    for (const paint of fill ?? []) {
+      switch (paint.type) {
+        case PaintType.Solid: {
+          ctx.fillStyle = parseRGBAStr(paint.attrs);
           ctx.fill();
           break;
         }
-        case TextureType.Image: {
+        case PaintType.Image: {
           if (imgManager) {
             ctx.clip();
-            this.fillImage(ctx, texture, imgManager, smooth);
+            this.fillImage(ctx, paint, imgManager, smooth);
           } else {
             console.warn('ImgManager is not provided');
           }
@@ -190,14 +190,14 @@ export class Path extends Graph<PathAttrs> {
     }
     if (strokeWidth) {
       ctx.lineWidth = strokeWidth;
-      for (const texture of stroke ?? []) {
-        switch (texture.type) {
-          case TextureType.Solid: {
-            ctx.strokeStyle = parseRGBAStr(texture.attrs);
+      for (const paint of stroke ?? []) {
+        switch (paint.type) {
+          case PaintType.Solid: {
+            ctx.strokeStyle = parseRGBAStr(paint.attrs);
             ctx.stroke();
             break;
           }
-          case TextureType.Image: {
+          case PaintType.Image: {
             // TODO: stroke image
           }
         }

diff --git a/packages/core/src/graphs/rect.ts b/packages/core/src/graphs/rect.ts
@@ -3,7 +3,7 @@ import { isPointInRoundRect, transformRotate } from '@suika/geo';
 
 import { ControlHandle } from '../control_handle_manager';
 import { type ImgManager } from '../Img_manager';
-import { TextureType } from '../texture';
+import { PaintType } from '../paint';
 import { GraphType, type IBox2WithRotation, type IPoint } from '../type';
 import { rotateInCanvas } from '../utils';
 import { Ellipse } from './ellipse';
@@ -60,21 +60,21 @@ export class Rect extends Graph<RectAttrs> {
       ctx.rect(attrs.x, attrs.y, attrs.width, attrs.height);
     }
 
-    for (const texture of attrs.fill ?? []) {
-      switch (texture.type) {
-        case TextureType.Solid: {
-          ctx.fillStyle = parseRGBAStr(texture.attrs);
+    for (const paint of attrs.fill ?? []) {
+      switch (paint.type) {
+        case PaintType.Solid: {
+          ctx.fillStyle = parseRGBAStr(paint.attrs);
           ctx.fill();
           break;
         }
-        case TextureType.Image: {
+        case PaintType.Image: {
           if (imgManager) {
             const maxCornerRadius = this.getMaxCornerRadius();
             const cornerRadius = Math.min(
               attrs.cornerRadius ?? 0,
               maxCornerRadius,
             );
-            this.fillImage(ctx, texture, imgManager, smooth, cornerRadius);
+            this.fillImage(ctx, paint, imgManager, smooth, cornerRadius);
           } else {
             console.warn('ImgManager is not provided');
           }
@@ -83,14 +83,14 @@ export class Rect extends Graph<RectAttrs> {
     }
     if (attrs.strokeWidth) {
       ctx.lineWidth = attrs.strokeWidth;
-      for (const texture of attrs.stroke ?? []) {
-        switch (texture.type) {
-          case TextureType.Solid: {
-            ctx.strokeStyle = parseRGBAStr(texture.attrs);
+      for (const paint of attrs.stroke ?? []) {
+        switch (paint.type) {
+          case PaintType.Solid: {
+            ctx.strokeStyle = parseRGBAStr(paint.attrs);
             ctx.stroke();
             break;
           }
-          case TextureType.Image: {
+          case PaintType.Image: {
             // TODO: stroke image
           }
         }
@@ -135,8 +135,8 @@ export class Rect extends Graph<RectAttrs> {
       y: 0,
       width: 8,
       height: 8,
-      fill: [{ type: TextureType.Solid, attrs: parseHexToRGBA('#fff')! }],
-      stroke: [{ type: TextureType.Solid, attrs: parseHexToRGBA('#1592fe')! }],
+      fill: [{ type: PaintType.Solid, attrs: parseHexToRGBA('#fff')! }],
+      stroke: [{ type: PaintType.Solid, attrs: parseHexToRGBA('#1592fe')! }],
       strokeWidth: 1,
     });
   }

diff --git a/packages/core/src/graphs/text.ts b/packages/core/src/graphs/text.ts
@@ -1,6 +1,6 @@
 import { parseRGBAStr } from '@suika/common';
 
-import { TextureType } from '../texture';
+import { PaintType } from '../paint';
 import { GraphType, type Optional } from '../type';
 import { rotateInCanvas } from '../utils';
 import { Graph, type GraphAttrs } from './graph';
@@ -49,13 +49,13 @@ export class TextGraph extends Graph<TextAttrs> {
     ctx.textBaseline = 'top';
     ctx.font = `${fontSize}px sans-serif`;
 
-    for (const texture of fill ?? []) {
-      switch (texture.type) {
-        case TextureType.Solid: {
-          ctx.fillStyle = parseRGBAStr(texture.attrs);
+    for (const paint of fill ?? []) {
+      switch (paint.type) {
+        case PaintType.Solid: {
+          ctx.fillStyle = parseRGBAStr(paint.attrs);
           break;
         }
-        case TextureType.Image: {
+        case PaintType.Image: {
           // TODO:
         }
       }

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -3,7 +3,7 @@ export { ArrangeType } from './commands/arrange';
 export * from './editor';
 export { Graph, type GraphAttrs } from './graphs';
 export type { IGroupsData } from './group_manager';
+export * from './paint';
 export * from './service';
 export * from './service';
 export type { SettingValue } from './setting';
-export * from './texture';