@orderly.network/hooks 1.1.5-rc.0 → 1.1.6

package/esm/services/painter/basePaint.d.ts

@@ -1,5 +1,8 @@
 import { PosterPainter } from "./painter";
 export type posterDataSource = {
+    /**
+     * slogan of the poster
+     */
     message?: string;
     position: {
         symbol: string;
@@ -17,7 +20,7 @@ export type posterDataSource = {
          */
         ROI: number;
         /**
-         * The informations of the position, such as open price, opened at, mark price, quantity
+         * The informations of the position, such as open price, opened at, mark price, quantity and custom message.
          */
         informations: {
             title: string;
@@ -51,23 +54,29 @@ export type layoutInfo = {
         bottom: number;
     }>;
 };
-export type posterLayoutConfig = {
+export type PosterLayoutConfig = {
     message?: layoutInfo;
     domain?: layoutInfo;
     position?: layoutInfo;
-    unrealizedPnl?: layoutInfo;
-    informations?: layoutInfo;
+    unrealizedPnl?: layoutInfo & {
+        secondaryColor: string;
+        secondaryFontSize: number;
+    };
+    informations?: layoutInfo & {
+        labelColor?: string;
+    };
     updateTime?: layoutInfo;
 };
-export type drawOptions = {
+export type DrawOptions = {
     /**
      * Color of common text
      */
     color?: string;
+    fontFamily?: string;
     /**
      * Lose color
      */
-    loseColor?: string;
+    lossColor?: string;
     /**
      * Profit color
      */
@@ -79,12 +88,12 @@ export type drawOptions = {
     backgroundColor?: string;
     backgroundImg?: string;
     data?: posterDataSource;
-    layout?: posterLayoutConfig;
+    layout?: PosterLayoutConfig;
 };
 export declare abstract class BasePaint {
     protected ctx: CanvasRenderingContext2D;
     protected painter: PosterPainter;
     constructor(ctx: CanvasRenderingContext2D, painter: PosterPainter);
-    abstract draw(options: drawOptions): Promise<void>;
+    abstract draw(options: DrawOptions): Promise<void>;
 }
 //# sourceMappingURL=basePaint.d.ts.map

package/esm/services/painter/basePaint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basePaint.d.ts","sourceRoot":"","sources":["../../../src/services/painter/basePaint.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE1C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE;QACR,MAAM,EAAE,MAAM,CAAC;QAEf,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;QACvB;;WAEG;QACH,QAAQ,EAAE,MAAM,CAAC;QACjB;;WAEG;QACH,GAAG,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,GAAG,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,YAAY,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QACjD;;WAEG;QACH,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;CACJ,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAC;IAErB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,aAAa,CAAC,EAAE,UAAU,CAAC;IAE3B,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B,CAAC;AAEF,8BAAsB,SAAS;IAE3B,SAAS,CAAC,GAAG,EAAE,wBAAwB;IACvC,SAAS,CAAC,OAAO,EAAE,aAAa;gBADtB,GAAG,EAAE,wBAAwB,EAC7B,OAAO,EAAE,aAAa;IAElC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;CACnD"}
+{"version":3,"file":"basePaint.d.ts","sourceRoot":"","sources":["../../../src/services/painter/basePaint.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE1C,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE;QACR,MAAM,EAAE,MAAM,CAAC;QAEf,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;QACvB;;WAEG;QACH,QAAQ,EAAE,MAAM,CAAC;QACjB;;WAEG;QACH,GAAG,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,GAAG,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,YAAY,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QACjD;;WAEG;QACH,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC,CAAC;CACJ,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAC;IAErB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,aAAa,CAAC,EAAE,UAAU,GAAG;QAC3B,cAAc,EAAE,MAAM,CAAC;QACvB,iBAAiB,EAAE,MAAM,CAAC;KAC3B,CAAC;IAEF,YAAY,CAAC,EAAE,UAAU,GAAG;QAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B,CAAC;AAEF,8BAAsB,SAAS;IAE3B,SAAS,CAAC,GAAG,EAAE,wBAAwB;IACvC,SAAS,CAAC,OAAO,EAAE,aAAa;gBADtB,GAAG,EAAE,wBAAwB,EAC7B,OAAO,EAAE,aAAa;IAElC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;CACnD"}

package/esm/services/painter/dataPaint.d.ts

@@ -1,9 +1,10 @@
-import { BasePaint, drawOptions } from "./basePaint";
+import { BasePaint, DrawOptions } from "./basePaint";
 export declare class DataPaint extends BasePaint {
     private positionInfoCellWidth;
     private DEFAULT_PROFIT_COLOR;
-    private DEFAULT_LOSE_COLOR;
-    draw(options: drawOptions): Promise<void>;
+    private DEFAULT_LOSS_COLOR;
+    private transformTop;
+    draw(options: DrawOptions): Promise<void>;
     private drawMessage;
     private drawPosition;
     private drawUnrealizedPnL;

package/esm/services/painter/dataPaint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dataPaint.d.ts","sourceRoot":"","sources":["../../../src/services/painter/dataPaint.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAc,MAAM,aAAa,CAAC;AAGjE,qBAAa,SAAU,SAAQ,SAAS;IACtC,OAAO,CAAC,qBAAqB,CAAO;IAEpC,OAAO,CAAC,oBAAoB,CAAoB;IAChD,OAAO,CAAC,kBAAkB,CAAsB;IAE1C,IAAI,CAAC,OAAO,EAAE,WAAW;IA0B/B,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,YAAY;IAoEpB,OAAO,CAAC,iBAAiB;IAoDzB,OAAO,CAAC,gBAAgB;IA6BxB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,SAAS;IAoCjB,OAAO,CAAC,MAAM;CAGf"}
+{"version":3,"file":"dataPaint.d.ts","sourceRoot":"","sources":["../../../src/services/painter/dataPaint.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAc,MAAM,aAAa,CAAC;AAGjE,qBAAa,SAAU,SAAQ,SAAS;IACtC,OAAO,CAAC,qBAAqB,CAAO;IAEpC,OAAO,CAAC,oBAAoB,CAAoB;IAChD,OAAO,CAAC,kBAAkB,CAAsB;IAEhD,OAAO,CAAC,YAAY,CAAK;IAEnB,IAAI,CAAC,OAAO,EAAE,WAAW;IAoC/B,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,YAAY;IA2EpB,OAAO,CAAC,iBAAiB;IAyEzB,OAAO,CAAC,gBAAgB;IAoCxB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,gBAAgB;IAoBxB,OAAO,CAAC,SAAS;IAuCjB,OAAO,CAAC,MAAM;CAGf"}

package/esm/services/painter/dataPaint.js

@@ -4,22 +4,29 @@ import { path } from "ramda";
 export class DataPaint extends BasePaint {
     constructor() {
         super(...arguments);
-        this.positionInfoCellWidth = 100;
+        this.positionInfoCellWidth = 110;
         this.DEFAULT_PROFIT_COLOR = "rgb(0,181,159)";
-        this.DEFAULT_LOSE_COLOR = "rgb(255,103,194)";
+        this.DEFAULT_LOSS_COLOR = "rgb(255,103,194)";
+        this.transformTop = 0;
     }
     async draw(options) {
-        console.log("DataPaint draw: ", options.data);
+        const needDrawDetails = Array.isArray(options.data?.position?.informations) &&
+            (options.data?.position?.informations?.length ?? 0) > 0;
+        const hasMessage = !!options.data?.message;
+        this.transformTop = hasMessage ? 0 : needDrawDetails ? -40 : -150;
+        // If position details are not displayed, the position PNL information will be margin
+        const offsetTop = hasMessage ? 50 : 100;
+        // const offsetMessage = hasMessage ? 0 : -50;
         if (!!options.data?.message) {
             this.drawMessage(options);
         }
         if (!!options.data?.position) {
-            this.drawPosition(options);
+            this.drawPosition(options, needDrawDetails ? 0 : offsetTop);
         }
-        if (Array.isArray(options.data?.position?.informations)) {
+        if (needDrawDetails) {
             this.drawInformations(options);
         }
-        this.drawUnrealizedPnL(options);
+        this.drawUnrealizedPnL(options, needDrawDetails ? 0 : offsetTop);
         if (!!options.data?.domain) {
             this.drawDomainUrl(options);
         }
@@ -37,22 +44,25 @@ export class DataPaint extends BasePaint {
             top: this._ratio(position.top),
             left: this._ratio(position.left),
             textBaseline: "top",
+            fontFamily: options.fontFamily,
         });
     }
-    drawPosition(options) {
+    drawPosition(options, offsetTop = 0) {
         const layout = path(["layout", "position"], options);
-        const { position } = layout;
+        const { position, fontSize = 14 } = layout;
         let left = this._ratio(position.left);
+        let top = layout.position.top + offsetTop + this.transformTop;
         let prevElementBoundingBox = {};
         // draw position side;
         if (typeof options.data?.position.side !== "undefined") {
             prevElementBoundingBox = this._drawText(options.data.position.side, {
-                color: options.data?.position.side === "LONG"
+                color: options.data?.position.side.toUpperCase() === "LONG"
                     ? this.DEFAULT_PROFIT_COLOR
-                    : this.DEFAULT_LOSE_COLOR,
+                    : this.DEFAULT_LOSS_COLOR,
                 left,
-                top: this._ratio(70),
-                fontSize: this._ratio(14),
+                top: this._ratio(top),
+                fontSize: this._ratio(fontSize),
+                fontFamily: options.fontFamily,
             });
         }
         if (typeof options.data?.position.symbol !== "undefined") {
@@ -61,16 +71,18 @@ export class DataPaint extends BasePaint {
                 prevElementBoundingBox = this._drawText("|", {
                     color: "rgba(255,255,255,0.2)",
                     left,
-                    top: this._ratio(70),
-                    fontSize: this._ratio(12),
+                    top: this._ratio(top),
+                    fontSize: this._ratio(fontSize),
+                    fontFamily: options.fontFamily,
                 });
             }
             left += (prevElementBoundingBox.width ?? 0) + this._ratio(7);
             prevElementBoundingBox = this._drawText(options.data?.position.symbol, {
-                color: "rgba(255,255,255,0.98)",
+                color: layout.color,
                 left: left,
-                top: this._ratio(70),
-                fontSize: this._ratio(12),
+                top: this._ratio(top),
+                fontSize: this._ratio(fontSize),
+                fontFamily: options.fontFamily,
             });
         }
         if (typeof options.data?.position.leverage !== "undefined") {
@@ -79,76 +91,95 @@ export class DataPaint extends BasePaint {
                 prevElementBoundingBox = this._drawText("|", {
                     color: "rgba(255,255,255,0.2)",
                     left,
-                    top: this._ratio(70),
-                    fontSize: this._ratio(12),
+                    top: this._ratio(top),
+                    fontSize: this._ratio(fontSize),
+                    fontFamily: options.fontFamily,
                 });
             }
             left += (prevElementBoundingBox.width ?? 0) + this._ratio(7);
             prevElementBoundingBox = this._drawText(`${options.data?.position.leverage}X`, {
-                color: "rgba(255,255,255,0.98)",
+                color: layout.color,
                 left,
-                top: this._ratio(70),
-                fontSize: this._ratio(12),
+                top: this._ratio(top),
+                fontSize: this._ratio(fontSize),
+                fontFamily: options.fontFamily,
             });
         }
     }
-    drawUnrealizedPnL(options) {
+    drawUnrealizedPnL(options, offsetTop = 0) {
         // reset left value;
         const layout = path(["layout", "unrealizedPnl"], options);
         const { position } = layout;
         let left = this._ratio(position.left);
         let prevElementBoundingBox = {};
+        const top = (position.top ?? 0) + offsetTop + this.transformTop;
         // ROI
         if (typeof options.data?.position.ROI !== "undefined") {
             const prefix = options.data?.position.ROI > 0 ? "+" : "";
             prevElementBoundingBox = this._drawText(`${prefix}${commify(options.data?.position.ROI)}%`, {
                 color: prefix === "+"
                     ? options.profitColor || this.DEFAULT_PROFIT_COLOR
-                    : options.loseColor || this.DEFAULT_LOSE_COLOR,
+                    : options.lossColor || this.DEFAULT_LOSS_COLOR,
                 left,
-                top: this._ratio(position.top),
+                top: this._ratio(top),
                 fontSize: this._ratio(layout.fontSize),
                 fontWeight: 700,
+                fontFamily: options.fontFamily,
             });
         }
         // unrelPnL
         if (typeof options.data?.position.pnl !== "undefined") {
             const prefix = options.data?.position.pnl > 0 ? "+" : "";
             let text = `${prefix}${commify(options.data?.position.pnl)} ${options.data?.position.currency}`;
+            let fontWeight = 600;
             if (prevElementBoundingBox.width) {
                 left += (prevElementBoundingBox.width ?? 0) + this._ratio(8);
                 text = `(${text})`;
             }
             else {
                 left = this._ratio(position.left);
+                fontWeight = 700;
             }
+            const color = typeof options.data.position.ROI === "undefined"
+                ? prefix === "+"
+                    ? options.profitColor || this.DEFAULT_PROFIT_COLOR
+                    : options.lossColor || this.DEFAULT_LOSS_COLOR
+                : layout.secondaryColor;
+            const fontSize = typeof options.data.position.ROI === "undefined"
+                ? this._ratio(layout.fontSize)
+                : this._ratio(layout.secondaryFontSize);
             prevElementBoundingBox = this._drawText(text, {
-                color: "rgba(255,255,255,0.5)",
+                color,
                 left,
-                top: this._ratio(position.top),
-                fontSize: this._ratio(layout.fontSize * 0.6),
-                fontWeight: 600,
+                top: this._ratio(top),
+                fontSize,
+                fontWeight,
+                fontFamily: options.fontFamily,
             });
         }
     }
     drawInformations(options) {
         const layout = path(["layout", "informations"], options);
         const { position } = layout;
+        const isVertical = (options.data?.position.informations.length ?? 0) === 2;
         options.data?.position.informations.forEach((info, index) => {
-            const left = position.left + this.positionInfoCellWidth * (index % 2);
-            const top = position.top + Math.floor(index / 2) * 40;
+            // let cellWidth = this.positionInfoCellWidth;
+            let left = position.left + this.positionInfoCellWidth * Math.floor(index / 2);
+            let top = position.top + (index % 2) * 38 + this.transformTop;
             this._drawText(info.title, {
                 left: this._ratio(left),
                 top: this._ratio(top),
                 fontSize: this._ratio(10),
-                color: "rgba(255,255,255,0.2)",
+                color: layout.labelColor,
+                fontFamily: options.fontFamily,
             });
             this._drawText(info.value, {
-                left: this._ratio(position.left + this.positionInfoCellWidth * (index % 2)),
+                left: this._ratio(left),
                 top: this._ratio(top + 17),
                 fontSize: this._ratio(layout.fontSize),
                 fontWeight: 500,
                 color: layout.color,
+                fontFamily: options.fontFamily,
             });
         });
     }
@@ -161,6 +192,9 @@ export class DataPaint extends BasePaint {
             top: this._ratio(top),
             fontSize: this._ratio(layout.fontSize),
             color: options.brandColor ?? this.DEFAULT_PROFIT_COLOR,
+            fontFamily: options.fontFamily,
+            textBaseline: layout.textBaseline,
+            fontWeight: 600,
         });
     }
     drawPositionTime(options) {
@@ -173,14 +207,17 @@ export class DataPaint extends BasePaint {
             top: this._ratio(top),
             fontSize: this._ratio(layout.fontSize),
             color: layout.color,
-            textAlign: "end",
+            textAlign: layout.textAlign,
+            fontFamily: options.fontFamily,
+            textBaseline: layout.textBaseline,
         });
     }
     _drawText(str, options) {
         let boundingBox;
         const { left = 30, top = 30, fontSize = 13, fontWeight = 500, color = "black", textBaseline = "middle", textAlign = "start", } = options ?? {};
         this.ctx.save();
-        this.ctx.font = `${fontWeight} ${fontSize}px Manrope`;
+        // "Nunito Sans",-apple-system,"San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif
+        this.ctx.font = `${fontWeight} ${fontSize}px ${options?.fontFamily}`;
         this.ctx.fillStyle = color;
         this.ctx.textBaseline = textBaseline;
         this.ctx.textAlign = textAlign;

package/esm/services/painter/layout.config.d.ts

@@ -1,3 +1,3 @@
-import { posterLayoutConfig } from "./basePaint";
-export declare const defaultLayoutConfig: posterLayoutConfig;
+import { type PosterLayoutConfig } from "./basePaint";
+export declare const DefaultLayoutConfig: PosterLayoutConfig;
 //# sourceMappingURL=layout.config.d.ts.map

package/esm/services/painter/layout.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.config.d.ts","sourceRoot":"","sources":["../../../src/services/painter/layout.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAE7D,eAAO,MAAM,mBAAmB,EAAE,kBAoDjC,CAAC"}
+{"version":3,"file":"layout.config.d.ts","sourceRoot":"","sources":["../../../src/services/painter/layout.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD,eAAO,MAAM,mBAAmB,EAAE,kBAyDjC,CAAC"}

package/esm/services/painter/layout.config.js

@@ -1,15 +1,16 @@
-export const defaultLayoutConfig = {
+export const DefaultLayoutConfig = {
     domain: {
         fontSize: 13,
         // color: undefined,
+        textBaseline: "bottom",
         position: {
             left: 20,
-            bottom: 37,
+            bottom: 17,
         },
     },
     message: {
         fontSize: 20,
-        color: "white",
+        color: "rgba(255, 255, 255, 0.98)",
         textBaseline: "top",
         position: {
             left: 20,
@@ -17,8 +18,8 @@ export const defaultLayoutConfig = {
         },
     },
     position: {
-        fontSize: 20,
-        color: "white",
+        fontSize: 14,
+        color: "rgba(255,255,255,0.98)",
         position: {
             left: 20,
             top: 70,
@@ -27,6 +28,8 @@ export const defaultLayoutConfig = {
     unrealizedPnl: {
         fontSize: 36,
         color: "rgba(255,255,255,0.5)",
+        secondaryColor: "rgba(255,255,255,0.54)",
+        secondaryFontSize: 20,
         position: {
             left: 20,
             top: 110,
@@ -34,7 +37,8 @@ export const defaultLayoutConfig = {
     },
     informations: {
         fontSize: 12,
-        color: "rgba(255,255,255,0.54)",
+        color: "rgba(255, 255, 255, 0.8)",
+        labelColor: "rgba(255,255,255,0.36)",
         position: {
             left: 20,
             top: 150,
@@ -44,9 +48,10 @@ export const defaultLayoutConfig = {
         fontSize: 10,
         color: "rgba(255,255,255,0.5)",
         textAlign: "end",
+        textBaseline: "bottom",
         position: {
-            right: 15,
-            bottom: 15,
+            right: 20,
+            bottom: 17,
         },
     },
 };

package/esm/services/painter/painter.d.ts

@@ -1,12 +1,14 @@
-import { drawOptions } from "./basePaint";
+import { DrawOptions } from "./basePaint";
 export declare class PosterPainter {
     private canvas;
     private ctx;
     width: number;
     height: number;
     ratio: number;
-    constructor(canvas: HTMLCanvasElement);
-    draw(options: drawOptions): void;
-    _draw(options: drawOptions): Promise<void>;
+    constructor(canvas: HTMLCanvasElement, options?: {
+        ratio: number;
+    });
+    draw(options: DrawOptions): void;
+    _draw(options: DrawOptions): Promise<void>;
 }
 //# sourceMappingURL=painter.d.ts.map

package/esm/services/painter/painter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"painter.d.ts","sourceRoot":"","sources":["../../../src/services/painter/painter.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,qBAAa,aAAa;IAMZ,OAAO,CAAC,MAAM;IAL1B,OAAO,CAAC,GAAG,CAA2B;IACtC,KAAK,EAAE,MAAM,CAAK;IAClB,MAAM,EAAE,MAAM,CAAK;IACnB,KAAK,EAAE,MAAM,CAAK;gBAEE,MAAM,EAAE,iBAAiB;IAqB7C,IAAI,CAAC,OAAO,EAAE,WAAW;IAInB,KAAK,CAAC,OAAO,EAAE,WAAW;CAUjC"}
+{"version":3,"file":"painter.d.ts","sourceRoot":"","sources":["../../../src/services/painter/painter.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,qBAAa,aAAa;IAOtB,OAAO,CAAC,MAAM;IANhB,OAAO,CAAC,GAAG,CAA2B;IACtC,KAAK,EAAE,MAAM,CAAK;IAClB,MAAM,EAAE,MAAM,CAAK;IACnB,KAAK,EAAE,MAAM,CAAC;gBAGJ,MAAM,EAAE,iBAAiB,EACjC,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;KACf;IAsBH,IAAI,CAAC,OAAO,EAAE,WAAW;IAInB,KAAK,CAAC,OAAO,EAAE,WAAW;CAWjC"}

package/esm/services/painter/painter.js

@@ -2,16 +2,15 @@ import { BackgroundPaint } from "./backgroundPaint";
 import { DataPaint } from "./dataPaint";
 export class PosterPainter {
     // resourceManager: Resource;
-    constructor(canvas) {
+    constructor(canvas, options) {
         // console.log("PosterPainter constructor");
         this.canvas = canvas;
         this.width = 0;
         this.height = 0;
-        this.ratio = 1;
         this.ctx = this.canvas.getContext("2d");
         this.width = this.canvas.width;
         this.height = this.canvas.height;
-        this.ratio = Math.floor(window.devicePixelRatio) || 1;
+        this.ratio = options?.ratio || Math.floor(window.devicePixelRatio) || 1;
         console.log("this ratio", this.ratio);
         // render to high resolution
         this.canvas.width = this.width * this.ratio;
@@ -26,7 +25,8 @@ export class PosterPainter {
     async _draw(options) {
         if (this.ctx === null)
             return;
-        console.log("============ DRAW ============");
+        // console.log("============ DRAW ============");
+        // this.ctx.font = options.fontFamily!;
         // this.ctx.clearRect(0, 0, this.width * this.ratio, this.height * this.ratio);
         // start draw
         // background

package/esm/unuse/apiPrefixMiddleware.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apiPrefixMiddleware.d.ts","sourceRoot":"","sources":["../../src/unuse/apiPrefixMiddleware.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAG/C,eAAO,MAAM,mBAAmB,EAAE,UA4BjC,CAAC"}
+{"version":3,"file":"apiPrefixMiddleware.d.ts","sourceRoot":"","sources":["../../src/unuse/apiPrefixMiddleware.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAG/C,eAAO,MAAM,mBAAmB,EAAE,UA0BjC,CAAC"}

package/esm/unuse/apiPrefixMiddleware.js

@@ -4,13 +4,11 @@ export const apiPrefixMiddleware = (useSWRNext) => {
     // @ts-ignore
     const { apiBaseUrl } = useContext(OrderlyContext);
     return (key, fetcher, config) => {
-        // 将日志记录器添加到原始 fetcher。
         const extendedFetcher = (...args) => {
             // @ts-ignore
             return fetcher(...args);
         };
         // key =  `${apiBaseUrl}${key}`;
-        // 使用新的 fetcher 执行 hook。
         return useSWRNext(key, extendedFetcher, config);
     };
     // return (key, fetcher, config) => {

package/esm/useLocalStorage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLocalStorage.d.ts","sourceRoot":"","sources":["../src/useLocalStorage.ts"],"names":[],"mappings":"AAIA,wBAAgB,eAAe,CAAC,CAAC,EAC/B,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,GACd,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,CAuF3B"}
+{"version":3,"file":"useLocalStorage.d.ts","sourceRoot":"","sources":["../src/useLocalStorage.ts"],"names":[],"mappings":"AAIA,wBAAgB,eAAe,CAAC,CAAC,EAC/B,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,GACd,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,CAoF3B"}

package/esm/useLocalStorage.js

@@ -63,11 +63,9 @@ export function useLocalStorage(key, initialValue) {
             }
             setStoredValue(readValue());
         };
-        // 添加 storage 事件监听器
-        window.addEventListener('storage', handleStorageChange);
+        window.addEventListener("storage", handleStorageChange);
         return () => {
-            // 清除 storage 事件监听器
-            window.removeEventListener('storage', handleStorageChange);
+            window.removeEventListener("storage", handleStorageChange);
         };
     }, [key]);
     return [storedValue, setValue];

package/esm/useMutation.d.ts

@@ -1,6 +1,9 @@
 import { type SWRMutationConfiguration } from "swr/mutation";
 type HTTP_METHOD = "POST" | "PUT" | "DELETE";
-export declare const useMutation: <T, E>(url: string, method?: HTTP_METHOD, options?: SWRMutationConfiguration<T, E> | undefined) => readonly [(data: any, params?: any, options?: any) => Promise<any>, {
+/**
+ * This hook is used to execute API requests for data mutation, such as POST, DELETE, PUT, etc.
+ */
+export declare const useMutation: <T, E>(url: string, method?: HTTP_METHOD, options?: SWRMutationConfiguration<T, E> | undefined) => readonly [(data: Record<string, any> | null, params?: Record<string, any>, options?: SWRMutationConfiguration<T, E> | undefined) => Promise<any>, {
     readonly data: any;
     readonly error: E | undefined;
     readonly reset: () => void;

package/esm/useMutation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMutation.d.ts","sourceRoot":"","sources":["../src/useMutation.ts"],"names":[],"mappings":"AAAA,OAAuB,EAErB,KAAK,wBAAwB,EAE9B,MAAM,cAAc,CAAC;AAStB,KAAK,WAAW,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAmC7C,eAAO,MAAM,WAAW,cACjB,MAAM,WACH,WAAW,4EAoBX,GAAG,WACA,GAAG,YACF,GAAG,KACZ,QAAQ,GAAG,CAAC;;;;;EAsChB,CAAC"}
+{"version":3,"file":"useMutation.d.ts","sourceRoot":"","sources":["../src/useMutation.ts"],"names":[],"mappings":"AAAA,OAAuB,EAErB,KAAK,wBAAwB,EAE9B,MAAM,cAAc,CAAC;AAStB,KAAK,WAAW,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;AAmC7C;;GAEG;AACH,eAAO,MAAM,WAAW,cAKjB,MAAM,WAIH,WAAW,4EA6BX,OAAO,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,WAIvB,OAAO,MAAM,EAAE,GAAG,CAAC,2DAE3B,QAAQ,GAAG,CAAC;;;;;EAsChB,CAAC"}

package/esm/useMutation.js

@@ -19,7 +19,26 @@ const fetcher = (url, options) => {
     }
     return mutate(url, init);
 };
-export const useMutation = (url, method = "POST", options) => {
+/**
+ * This hook is used to execute API requests for data mutation, such as POST, DELETE, PUT, etc.
+ */
+export const useMutation = (
+/**
+ * The URL to send the request to. If the URL does not start with "http",
+ * it will be prefixed with the API base URL.
+ */
+url, 
+/**
+ * The HTTP method to use for the request. Defaults to "POST".
+ */
+method = "POST", 
+/**
+ * The configuration object for the mutation.
+ * @see [useSWRMutation](https://swr.vercel.app/docs/mutation#api)
+ *
+ * @link https://swr.vercel.app/docs/mutation#api
+ */
+options) => {
     const apiBaseUrl = useConfig("apiBaseUrl");
     let fullUrl = url;
     if (!url.startsWith("http")) {
@@ -30,7 +49,15 @@ export const useMutation = (url, method = "POST", options) => {
     const { trigger, data, error, reset, isMutating } = useSWRMutation(fullUrl, 
     // method === "POST" ? fetcher : deleteFetcher,
     fetcher, options);
-    const mutation = async (data, params, options) => {
+    const mutation = async (
+    /**
+     * The data to send with the request.
+     */
+    data, 
+    /**
+     * The query parameters to send with the request.
+     */
+    params, options) => {
         let newUrl = url;
         if (typeof params === "object" && Object.keys(params).length) {
             let search = new URLSearchParams(params);

package/esm/usePoster.d.ts

@@ -1,14 +1,40 @@
-import { type drawOptions } from "./services/painter/basePaint";
-export { type drawOptions } from "./services/painter/basePaint";
+import { type DrawOptions } from "./services/painter/basePaint";
 /**
  * Generates a poster image based on position information. You can set the size, background color, font color, font size, and content position of the poster.
- * @returns
+ * @example
+ * ```tsx
+ * const { ref, toDataURL, toBlob, download, copy } = usePoster({
+ *  backgroundColor: "#0b8c70",
+ * backgroundImg: "/images/poster_bg.png",
+ * color: "rgba(255, 255, 255, 0.98)",
+ * profitColor: "rgb(0,181,159)",
+ * ...
+ * });
  */
-export declare const usePoster: (trage: HTMLCanvasElement, options: drawOptions) => {
+export declare const usePoster: (data: DrawOptions, options?: {
+    /**
+     * The ratio of the poster
+     */
+    ratio?: number;
+}) => {
     readonly error: Error | null;
+    readonly ref: (ref: HTMLCanvasElement | null) => void;
     /**
      * Converts the poster to a data URL
      */
     readonly toDataURL: (type?: string, encoderOptions?: number) => string;
+    /**
+     * Converts the poster to a blob
+     */
+    readonly toBlob: (type?: string, encoderOptions?: number) => Promise<Blob | null>;
+    /**
+     * Downloads the poster as an image
+     */
+    readonly download: (filename: string, type?: string, encoderOptions?: number) => void;
+    /**
+     * Browser if supports copy image to clipboard
+     */
+    readonly canCopy: boolean;
+    readonly copy: () => Promise<void>;
 };
 //# sourceMappingURL=usePoster.d.ts.map

package/esm/usePoster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePoster.d.ts","sourceRoot":"","sources":["../src/usePoster.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAGhE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,SAAS,UAIb,iBAAiB,WAIf,WAAW;;IAyClB;;OAEG;;CAGN,CAAC"}
+{"version":3,"file":"usePoster.d.ts","sourceRoot":"","sources":["../src/usePoster.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAIhE;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,SAId,WAAW,YACP;IACR;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;;wBA6DiB,iBAAiB,GAAG,IAAI;IAkDxC;;OAEG;gCA3EqB,MAAM,mBAAmB,MAAM;IA6EvD;;OAEG;6BApEK,MAAM,mBAAmB,MAAM,KAAG,QAAQ,IAAI,GAAG,IAAI,CAAC;IAsE9D;;OAEG;kCAjDQ,MAAM,SAAQ,MAAM,mBAAiC,MAAM;IAmDtE;;OAEG;;;CAIN,CAAC"}