@visactor/vrender-kits 0.22.12 → 0.22.13

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { CustomPath2D, injectable, inject, DefaultCanvasArcRender, ARC_NUMBER_TYPE, drawArcPath, DefaultCanvasAreaRender, drawAreaSegments, DefaultCanvasCircleRender, CIRCLE_NUMBER_TYPE, DefaultCanvasLineRender, LINE_NUMBER_TYPE, DefaultCanvasPathRender, PATH_NUMBER_TYPE, DefaultCanvasRectRender, RECT_NUMBER_TYPE, DefaultCanvasSymbolRender, SYMBOL_NUMBER_TYPE, ContainerModule, GraphicRender, graphicCreator, Group, clock, application, WILDCARD, DefaultFillStyle, DefaultStrokeStyle, DefaultTextStyle, matrixAllocate, transformMat4, createColor, getScaledStroke, createConicalGradient, BaseCanvas, CanvasFactory, Context2dFactory, ContributionProvider, named, DrawContribution, PickItemInterceptor, PickServiceInterceptor, DefaultPickService, canvasAllocate, GROUP_NUMBER_TYPE, bindContributionProvider, PickerService, WindowHandlerContribution, BaseWindowHandlerContribution, BaseEnvContribution, Generator, EnvContribution, container, VGlobal, EmptyContext2d, ArcRender, AreaRender, AREA_NUMBER_TYPE, CircleRender, GLYPH_NUMBER_TYPE, GlyphRender, IMAGE_NUMBER_TYPE, LineRender, PolygonRender, POLYGON_NUMBER_TYPE, PathRender, RectRender, SymbolRender, TEXT_NUMBER_TYPE, rafBasedSto, vglobal, RafBasedSTO, BaseRender, mat4Allocate, TextRender, textLayoutOffsetY, textDrawOffsetX, RichTextRender, RICHTEXT_NUMBER_TYPE, ImageRender, Rect3DRender, RECT3D_NUMBER_TYPE, Arc3dRender, ARC3D_NUMBER_TYPE, Pyramid3dRender, PYRAMID3D_NUMBER_TYPE, Image as Image$1, ResourceLoader, ImageRenderContribution, DefaultCanvasImageRender, getTheme, DefaultRectRenderContribution, BaseRenderContributionTime, NOWORK_ANIMATE_ATTR, Rect, isBrowserEnv, registerArcGraphic, arcModule, registerArc3dGraphic, registerDirectionalLight, registerOrthoCamera, arc3dModule, registerAreaGraphic, areaModule, registerCircleGraphic, circleModule, registerGlyphGraphic, glyphModule, registerGroupGraphic, registerImageGraphic, imageModule, registerLineGraphic, lineModule, registerPathGraphic, pathModule, registerPolygonGraphic, polygonModule, registerPyramid3dGraphic, pyramid3dModule, registerRectGraphic, rectModule, registerRect3dGraphic, rect3dModule, registerRichtextGraphic, richtextModule, registerShadowRootGraphic, registerSymbolGraphic, symbolModule, registerTextGraphic, textModule, StarRender, STAR_NUMBER_TYPE, registerStarGraphic, starModule, registerWrapTextGraphic } from '@visactor/vrender-core';
+import { injectable, inject, DefaultCanvasArcRender, ARC_NUMBER_TYPE, CustomPath2D, drawArcPath, DefaultCanvasAreaRender, drawAreaSegments, DefaultCanvasCircleRender, CIRCLE_NUMBER_TYPE, DefaultCanvasLineRender, drawSegments, DefaultCanvasPathRender, PATH_NUMBER_TYPE, DefaultCanvasRectRender, RECT_NUMBER_TYPE, DefaultCanvasSymbolRender, BaseRender, SYMBOL_NUMBER_TYPE, ContainerModule, GraphicRender, graphicCreator, Group, clock, application, WILDCARD, DefaultFillStyle, DefaultStrokeStyle, DefaultTextStyle, matrixAllocate, transformMat4, createColor, getScaledStroke, createConicalGradient, BaseCanvas, CanvasFactory, Context2dFactory, ContributionProvider, named, DrawContribution, PickItemInterceptor, PickServiceInterceptor, DefaultPickService, canvasAllocate, GROUP_NUMBER_TYPE, bindContributionProvider, PickerService, WindowHandlerContribution, BaseWindowHandlerContribution, BaseEnvContribution, Generator, EnvContribution, container, VGlobal, EmptyContext2d, ArcRender, AreaRender, AREA_NUMBER_TYPE, CircleRender, GLYPH_NUMBER_TYPE, GlyphRender, IMAGE_NUMBER_TYPE, LineRender, LINE_NUMBER_TYPE, PolygonRender, POLYGON_NUMBER_TYPE, PathRender, RectRender, SymbolRender, TEXT_NUMBER_TYPE, rafBasedSto, vglobal, RafBasedSTO, mat4Allocate, TextRender, textLayoutOffsetY, textDrawOffsetX, RichTextRender, RICHTEXT_NUMBER_TYPE, ImageRender, Rect3DRender, RECT3D_NUMBER_TYPE, Arc3dRender, ARC3D_NUMBER_TYPE, Pyramid3dRender, PYRAMID3D_NUMBER_TYPE, Image as Image$1, ResourceLoader, ImageRenderContribution, DefaultCanvasImageRender, getTheme, DefaultRectRenderContribution, BaseRenderContributionTime, NOWORK_ANIMATE_ATTR, Rect, isBrowserEnv, registerArcGraphic, arcModule, registerArc3dGraphic, registerDirectionalLight, registerOrthoCamera, arc3dModule, registerAreaGraphic, areaModule, registerCircleGraphic, circleModule, registerGlyphGraphic, glyphModule, registerGroupGraphic, registerImageGraphic, imageModule, registerLineGraphic, lineModule, registerPathGraphic, pathModule, registerPolygonGraphic, polygonModule, registerPyramid3dGraphic, pyramid3dModule, registerRectGraphic, rectModule, registerRect3dGraphic, rect3dModule, registerRichtextGraphic, richtextModule, registerShadowRootGraphic, registerSymbolGraphic, symbolModule, registerTextGraphic, textModule, StarRender, STAR_NUMBER_TYPE, registerStarGraphic, starModule, registerWrapTextGraphic } from '@visactor/vrender-core';
 import { isString, isArray, EventEmitter, Matrix, Logger, getContextFont, pi2, pi, AABBBounds, isValidNumber, isNumber, isFunction } from '@visactor/vutils';
 
 /******************************************************************************
@@ -1524,12 +1524,12 @@ var U = {
 
 const defaultRouthThemeSpec = {
     maxRandomnessOffset: 3,
-    roughness: 1.6,
+    roughness: 1,
     bowing: 1,
     curveFitting: 0.95,
     curveTightness: undefined,
     curveStepCount: 9,
-    fillStyle: 'cross-hatch',
+    fillStyle: 'hachure',
     fillWeight: undefined,
     hachureAngle: 60,
     hachureGap: 6,
@@ -1537,489 +1537,21 @@ const defaultRouthThemeSpec = {
     dashOffset: undefined,
     dashGap: undefined,
     zigzagOffset: undefined,
-    seed: 3,
+    seed: 1,
     fillLineDash: undefined,
     fillLineDashOffset: undefined,
     disableMultiStroke: false,
-    disableMultiStrokeFill: true,
+    disableMultiStrokeFill: false,
     preserveVertices: true,
     fixedDecimalPlaceDigits: undefined
 };
 
-class RoughContext2d {
-    constructor(originContext, customPath) {
-        this.originContext = originContext;
-        this.customPath = customPath;
-    }
-    reset(setTransform = true) {
-        return this.originContext.reset(setTransform);
-    }
-    beginPath() {
-        this.originContext.beginPath();
-        this.customPath.beginPath();
-    }
-    moveTo(x, y, z) {
-        this.originContext.moveTo(x, y, z);
-        this.customPath.moveTo(x, y);
-    }
-    lineTo(x, y, z) {
-        this.originContext.lineTo(x, y, z);
-        this.customPath.lineTo(x, y);
-    }
-    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, z) {
-        this.originContext.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, z);
-        this.customPath.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-    }
-    quadraticCurveTo(cpx, cpy, x, y, z) {
-        this.originContext.quadraticCurveTo(cpx, cpy, x, y, z);
-        this.customPath.quadraticCurveTo(cpx, cpy, x, y);
-    }
-    arc(x, y, radius, startAngle, endAngle, anticlockwise, z) {
-        this.originContext.arc(x, y, radius, startAngle, endAngle, anticlockwise, z);
-        this.customPath.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-    }
-    arcTo(x1, y1, x2, y2, radius) {
-        this.originContext.arcTo(x1, y1, x2, y2, radius);
-        this.customPath.arcTo(x1, y1, x2, y2, radius);
-    }
-    ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
-        this.originContext.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
-        this.customPath.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
-    }
-    rect(x, y, w, h, z) {
-        this.originContext.rect(x, y, w, h, z);
-        this.customPath.rect(x, y, w, h);
-    }
-    closePath() {
-        this.originContext.closePath();
-        this.customPath.closePath();
-    }
-    get canvas() {
-        return this.originContext.canvas;
-    }
-    set canvas(value) {
-        this.originContext.canvas = value;
-    }
-    get camera() {
-        return this.originContext.camera;
-    }
-    set camera(value) {
-        this.originContext.camera = value;
-    }
-    get modelMatrix() {
-        return this.originContext.modelMatrix;
-    }
-    set modelMatrix(value) {
-        this.originContext.modelMatrix = value;
-    }
-    get nativeContext() {
-        return this.originContext.nativeContext;
-    }
-    set nativeContext(value) {
-        this.originContext.nativeContext = value;
-    }
-    get _inuse() {
-        return this.originContext._inuse;
-    }
-    set _inuse(value) {
-        this.originContext._inuse = value;
-    }
-    get inuse() {
-        return this.originContext.inuse;
-    }
-    set inuse(value) {
-        this.originContext.inuse = value;
-    }
-    get stack() {
-        return this.originContext.stack;
-    }
-    set stack(value) {
-        this.originContext.stack = value;
-    }
-    get disableFill() {
-        return this.originContext.disableFill;
-    }
-    set disableFill(value) {
-        this.originContext.disableFill = value;
-    }
-    get disableStroke() {
-        return this.originContext.disableStroke;
-    }
-    set disableStroke(value) {
-        this.originContext.disableStroke = value;
-    }
-    get disableBeginPath() {
-        return this.originContext.disableBeginPath;
-    }
-    set disableBeginPath(value) {
-        this.originContext.disableBeginPath = value;
-    }
-    get fontFamily() {
-        return this.originContext.fontFamily;
-    }
-    set fontFamily(value) {
-        this.originContext.fontFamily = value;
-    }
-    get fontSize() {
-        return this.originContext.fontSize;
-    }
-    set fontSize(value) {
-        this.originContext.fontSize = value;
-    }
-    get _clearMatrix() {
-        return this.originContext._clearMatrix;
-    }
-    set _clearMatrix(value) {
-        this.originContext._clearMatrix = value;
-    }
-    get dpr() {
-        return this.originContext.dpr;
-    }
-    set dpr(value) {
-        this.originContext.dpr = value;
-    }
-    get baseGlobalAlpha() {
-        return this.originContext.baseGlobalAlpha;
-    }
-    set baseGlobalAlpha(value) {
-        this.originContext.baseGlobalAlpha = value;
-    }
-    get drawPromise() {
-        return this.originContext.drawPromise;
-    }
-    set drawPromise(value) {
-        this.originContext.drawPromise = value;
-    }
-    get mathTextMeasure() {
-        return this.originContext.mathTextMeasure;
-    }
-    set mathTextMeasure(value) {
-        this.originContext.mathTextMeasure = value;
-    }
-    get fillStyle() {
-        return this.originContext.fillStyle;
-    }
-    set fillStyle(value) {
-        this.originContext.fillStyle = value;
-    }
-    get font() {
-        return this.originContext.font;
-    }
-    set font(value) {
-        this.originContext.font = value;
-    }
-    get globalAlpha() {
-        return this.originContext.globalAlpha;
-    }
-    set globalAlpha(value) {
-        this.originContext.globalAlpha = value;
-    }
-    get lineCap() {
-        return this.originContext.lineCap;
-    }
-    set lineCap(value) {
-        this.originContext.lineCap = value;
-    }
-    get lineDashOffset() {
-        return this.originContext.lineDashOffset;
-    }
-    set lineDashOffset(value) {
-        this.originContext.lineDashOffset = value;
-    }
-    get lineJoin() {
-        return this.originContext.lineJoin;
-    }
-    set lineJoin(value) {
-        this.originContext.lineJoin = value;
-    }
-    get lineWidth() {
-        return this.originContext.lineWidth;
-    }
-    set lineWidth(value) {
-        this.originContext.lineWidth = value;
-    }
-    get miterLimit() {
-        return this.originContext.miterLimit;
-    }
-    set miterLimit(value) {
-        this.originContext.miterLimit = value;
-    }
-    get shadowBlur() {
-        return this.originContext.shadowBlur;
-    }
-    set shadowBlur(value) {
-        this.originContext.shadowBlur = value;
-    }
-    get shadowColor() {
-        return this.originContext.shadowColor;
-    }
-    set shadowColor(value) {
-        this.originContext.shadowColor = value;
-    }
-    get shadowOffsetX() {
-        return this.originContext.shadowOffsetX;
-    }
-    set shadowOffsetX(value) {
-        this.originContext.shadowOffsetX = value;
-    }
-    get shadowOffsetY() {
-        return this.originContext.shadowOffsetY;
-    }
-    set shadowOffsetY(value) {
-        this.originContext.shadowOffsetY = value;
-    }
-    get strokeStyle() {
-        return this.originContext.strokeStyle;
-    }
-    set strokeStyle(value) {
-        this.originContext.strokeStyle = value;
-    }
-    get textAlign() {
-        return this.originContext.textAlign;
-    }
-    set textAlign(value) {
-        this.originContext.textAlign = value;
-    }
-    get textBaseline() {
-        return this.originContext.textBaseline;
-    }
-    set textBaseline(value) {
-        this.originContext.textBaseline = value;
-    }
-    get currentMatrix() {
-        return this.originContext.currentMatrix;
-    }
-    save() {
-        return this.originContext.save();
-    }
-    restore() {
-        return this.originContext.restore();
-    }
-    highPerformanceSave() {
-        return this.originContext.highPerformanceSave();
-    }
-    highPerformanceRestore() {
-        return this.originContext.highPerformanceRestore();
-    }
-    rotate(rad, setTransform) {
-        return this.originContext.rotate(rad, setTransform);
-    }
-    scale(sx, sy, setTransform) {
-        return this.originContext.scale(sx, sy, setTransform);
-    }
-    setScale(sx, sy, setTransform) {
-        return this.originContext.setScale(sx, sy, setTransform);
-    }
-    scalePoint(sx, sy, px, py, setTransform) {
-        return this.originContext.scalePoint(sx, sy, px, py, setTransform);
-    }
-    setTransform(a, b, c, d, e, f, setTransform, dpr) {
-        return this.originContext.setTransform(a, b, c, d, e, f, setTransform, dpr);
-    }
-    setTransformFromMatrix(matrix, setTransform, dpr) {
-        return this.originContext.setTransformFromMatrix(matrix, setTransform, dpr);
-    }
-    resetTransform(setTransform, dpr) {
-        return this.originContext.resetTransform(setTransform, dpr);
-    }
-    transform(a, b, c, d, e, f, setTransform) {
-        return this.originContext.transform(a, b, c, d, e, f, setTransform);
-    }
-    transformFromMatrix(matrix, setTransform) {
-        return this.originContext.transformFromMatrix(matrix, setTransform);
-    }
-    translate(x, y, setTransform) {
-        return this.originContext.translate(x, y, setTransform);
-    }
-    rotateDegrees(deg, setTransform) {
-        return this.originContext.rotateDegrees(deg, setTransform);
-    }
-    rotateAbout(rad, x, y, setTransform) {
-        return this.originContext.rotateAbout(rad, x, y, setTransform);
-    }
-    rotateDegreesAbout(deg, x, y, setTransform) {
-        return this.originContext.rotateDegreesAbout(deg, x, y, setTransform);
-    }
-    setTransformForCurrent(force = false) {
-        return this.originContext.setTransformForCurrent(force);
-    }
-    clip(path, fillRule) {
-        return this.originContext.clip(path, fillRule);
-    }
-    fill(path, fillRule) {
-        return this.originContext.fill(path, fillRule);
-    }
-    stroke(path) {
-        return this.originContext.stroke(path);
-    }
-    fillRect(x, y, width, height) {
-        return this.originContext.fillRect(x, y, width, height);
-    }
-    strokeRect(x, y, width, height) {
-        return this.originContext.strokeRect(x, y, width, height);
-    }
-    fillText(text, x, y, z) {
-        return this.originContext.fillText(text, x, y, z);
-    }
-    strokeText(text, x, y, z) {
-        return this.originContext.strokeText(text, x, y, z);
-    }
-    clearRect(x, y, w, h) {
-        return this.originContext.clearRect(x, y, w, h);
-    }
-    drawImage(...args) {
-        return this.originContext.drawImage(...args);
-    }
-    createImageData(...args) {
-        return this.originContext.createImageData(...args);
-    }
-    getImageData(sx, sy, sw, sh) {
-        return this.originContext.getImageData(sx, sy, sw, sh);
-    }
-    putImageData(imagedata, dx, dy) {
-        return this.originContext.putImageData(imagedata, dx, dy);
-    }
-    createLinearGradient(x0, y0, x1, y1) {
-        return this.originContext.createLinearGradient(x0, y0, x1, y1);
-    }
-    createRadialGradient(x0, y0, r0, x1, y1, r1) {
-        return this.originContext.createRadialGradient(x0, y0, r0, x1, y1, r1);
-    }
-    createConicGradient(x, y, startAngle, endAngle) {
-        return this.originContext.createConicGradient(x, y, startAngle, endAngle);
-    }
-    createPattern(image, repetition) {
-        return this.originContext.createPattern(image, repetition);
-    }
-    getLineDash() {
-        return this.originContext.getLineDash();
-    }
-    setLineDash(segments) {
-        return this.originContext.setLineDash(segments);
-    }
-    clear() {
-        return this.originContext.clear();
-    }
-    measureText(text, method) {
-        return this.originContext.measureText(text, method);
-    }
-    isPointInPath(x, y) {
-        return this.originContext.isPointInPath(x, y);
-    }
-    isPointInStroke(x, y) {
-        return this.originContext.isPointInStroke(x, y);
-    }
-    project(x, y, z) {
-        return this.originContext.project(x, y, z);
-    }
-    view(x, y, z) {
-        return this.originContext.view(x, y, z);
-    }
-    getCanvas() {
-        return this.originContext.getCanvas();
-    }
-    getContext() {
-        return this.originContext.getContext();
-    }
-    setCommonStyle(params, attribute, offsetX, offsetY, defaultParams) {
-        return this.originContext.setCommonStyle(params, attribute, offsetX, offsetY, defaultParams);
-    }
-    setShadowBlendStyle(params, attribute, defaultParams) {
-        return this.originContext.setShadowBlendStyle(params, attribute, defaultParams);
-    }
-    setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams) {
-        return this.originContext.setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams);
-    }
-    setTextStyle(params, defaultParams, z) {
-        return this.originContext.setTextStyle(params, defaultParams, z);
-    }
-    setTextStyleWithoutAlignBaseline(params, defaultParams, z) {
-        return this.originContext.setTextStyleWithoutAlignBaseline(params, defaultParams, z);
-    }
-    clearMatrix(setTransform, dpr) {
-        return this.originContext.clearMatrix(setTransform, dpr);
-    }
-    setClearMatrix(a, b, c, d, e, f) {
-        return this.originContext.setClearMatrix(a, b, c, d, e, f);
-    }
-    onlyTranslate(dpr) {
-        return this.originContext.onlyTranslate(dpr);
-    }
-    cloneMatrix(m) {
-        return this.originContext.cloneMatrix(m);
-    }
-    draw() {
-        return this.originContext.draw();
-    }
-    release(...params) {
-        return this.originContext.release(...params);
-    }
-}
-RoughContext2d.env = 'browser';
-
 class RoughBaseRender {
     drawShape(graphic, ctx, x, y, drawContext, params, fillCb, strokeCb) {
         if (this.canvasRenderer.drawShape) {
             return this.canvasRenderer.drawShape(graphic, ctx, x, y, drawContext, params, fillCb, strokeCb);
         }
     }
-    doDraw(graphic, renderService, drawContext, params) {
-        const { context } = drawContext;
-        if (!context) {
-            return;
-        }
-        const canvas = context.canvas.nativeCanvas;
-        const rc = U.canvas(canvas);
-        const customPath = new CustomPath2D();
-        const roughContext = new RoughContext2d(context, customPath);
-        context.save();
-        context.transformFromMatrix(graphic.transMatrix, true);
-        const { fill, stroke, roughStyle = {}, lineWidth } = graphic.attribute;
-        const { maxRandomnessOffset = defaultRouthThemeSpec.maxRandomnessOffset, roughness = defaultRouthThemeSpec.roughness, bowing = defaultRouthThemeSpec.bowing, curveFitting = defaultRouthThemeSpec.curveFitting, curveTightness = defaultRouthThemeSpec.curveTightness, curveStepCount = defaultRouthThemeSpec.curveStepCount, fillStyle = defaultRouthThemeSpec.fillStyle, fillWeight = defaultRouthThemeSpec.fillWeight, hachureAngle = defaultRouthThemeSpec.hachureAngle, hachureGap = defaultRouthThemeSpec.hachureGap, simplification = defaultRouthThemeSpec.simplification, dashOffset = defaultRouthThemeSpec.dashOffset, dashGap = defaultRouthThemeSpec.dashGap, zigzagOffset = defaultRouthThemeSpec.zigzagOffset, seed = defaultRouthThemeSpec.seed, fillLineDash = defaultRouthThemeSpec.fillLineDash, fillLineDashOffset = defaultRouthThemeSpec.fillLineDashOffset, disableMultiStroke = defaultRouthThemeSpec.disableMultiStroke, disableMultiStrokeFill = defaultRouthThemeSpec.disableMultiStrokeFill, preserveVertices = defaultRouthThemeSpec.preserveVertices, fixedDecimalPlaceDigits = defaultRouthThemeSpec.fixedDecimalPlaceDigits } = roughStyle;
-        let rendered = false;
-        const doRender = () => {
-            if (rendered) {
-                return;
-            }
-            rendered = true;
-            const path = customPath.toString();
-            context.beginPath();
-            rc.path(path, {
-                fill,
-                stroke,
-                strokeWidth: lineWidth,
-                maxRandomnessOffset,
-                roughness,
-                bowing,
-                curveFitting,
-                curveTightness,
-                curveStepCount,
-                fillStyle,
-                fillWeight,
-                hachureAngle,
-                hachureGap,
-                simplification,
-                dashOffset,
-                dashGap,
-                zigzagOffset,
-                seed,
-                fillLineDash,
-                fillLineDashOffset,
-                disableMultiStroke,
-                disableMultiStrokeFill,
-                preserveVertices,
-                fixedDecimalPlaceDigits
-            });
-        };
-        this.canvasRenderer.drawShape(graphic, roughContext, 0, 0, drawContext, params, () => {
-            doRender();
-            return false;
-        }, () => {
-            doRender();
-            return false;
-        });
-        context.restore();
-    }
     reInit() {
         var _a;
         (_a = this.canvasRenderer) === null || _a === void 0 ? void 0 : _a.reInit();
@@ -2198,22 +1730,69 @@ RoughCanvasCircleRender = __decorate([
     __metadata("design:paramtypes", [Object])
 ], RoughCanvasCircleRender);
 
-let RoughCanvasLineRender = class RoughCanvasLineRender extends RoughBaseRender {
-    constructor(canvasRenderer) {
-        super();
-        this.canvasRenderer = canvasRenderer;
+let RoughCanvasLineRender = class RoughCanvasLineRender extends DefaultCanvasLineRender {
+    constructor() {
+        super(...arguments);
         this.style = 'rough';
-        this.type = 'line';
-        this.numberType = LINE_NUMBER_TYPE;
     }
-    draw(line, renderService, drawContext, params) {
-        this.doDraw(line, renderService, drawContext, params);
+    drawSegmentItem(context, cache, fill, stroke, fillOpacity, strokeOpacity, attribute, defaultAttribute, clipRange, clipRangeByDimension, offsetX, offsetY, line, fillCb, strokeCb) {
+        if (fillCb || strokeCb) {
+            return super.drawSegmentItem(context, cache, fill, stroke, fillOpacity, strokeOpacity, attribute, defaultAttribute, clipRange, clipRangeByDimension, offsetX, offsetY, line, fillCb, strokeCb);
+        }
+        context.highPerformanceSave();
+        const canvas = context.canvas.nativeCanvas;
+        const rc = U.canvas(canvas, {});
+        const customPath = new CustomPath2D();
+        drawSegments(context.camera ? context : context.nativeContext, cache, clipRange, clipRangeByDimension, {
+            offsetX,
+            offsetY
+        });
+        const { maxRandomnessOffset = defaultRouthThemeSpec.maxRandomnessOffset, roughness = defaultRouthThemeSpec.roughness, bowing = defaultRouthThemeSpec.bowing, curveFitting = defaultRouthThemeSpec.curveFitting, curveTightness = defaultRouthThemeSpec.curveTightness, curveStepCount = defaultRouthThemeSpec.curveStepCount, fillStyle = defaultRouthThemeSpec.fillStyle, fillWeight = defaultRouthThemeSpec.fillWeight, hachureAngle = defaultRouthThemeSpec.hachureAngle, hachureGap = defaultRouthThemeSpec.hachureGap, simplification = defaultRouthThemeSpec.simplification, dashOffset = defaultRouthThemeSpec.dashOffset, dashGap = defaultRouthThemeSpec.dashGap, zigzagOffset = defaultRouthThemeSpec.zigzagOffset, seed = defaultRouthThemeSpec.seed, fillLineDash = defaultRouthThemeSpec.fillLineDash, fillLineDashOffset = defaultRouthThemeSpec.fillLineDashOffset, disableMultiStroke = defaultRouthThemeSpec.disableMultiStroke, disableMultiStrokeFill = defaultRouthThemeSpec.disableMultiStrokeFill, preserveVertices = defaultRouthThemeSpec.preserveVertices, fixedDecimalPlaceDigits = defaultRouthThemeSpec.fixedDecimalPlaceDigits } = attribute;
+        let { fill: fillColor, stroke: strokeColor, lineWidth } = attribute;
+        if (Array.isArray(defaultAttribute)) {
+            defaultAttribute.forEach(item => {
+                fillColor = fillColor !== null && fillColor !== void 0 ? fillColor : item.fill;
+                strokeColor = strokeColor !== null && strokeColor !== void 0 ? strokeColor : item.stroke;
+                lineWidth = lineWidth !== null && lineWidth !== void 0 ? lineWidth : item.lineWidth;
+            });
+        }
+        else {
+            fillColor = fillColor !== null && fillColor !== void 0 ? fillColor : defaultAttribute.fill;
+            strokeColor = strokeColor !== null && strokeColor !== void 0 ? strokeColor : defaultAttribute.stroke;
+            lineWidth = lineWidth !== null && lineWidth !== void 0 ? lineWidth : defaultAttribute.lineWidth;
+        }
+        rc.path(customPath.toString(), {
+            fill: fill ? fillColor : undefined,
+            stroke: stroke ? strokeColor : undefined,
+            strokeWidth: lineWidth,
+            maxRandomnessOffset,
+            roughness,
+            bowing,
+            curveFitting,
+            curveTightness,
+            curveStepCount,
+            fillStyle,
+            fillWeight,
+            hachureAngle,
+            hachureGap,
+            simplification,
+            dashOffset,
+            dashGap,
+            zigzagOffset,
+            seed,
+            fillLineDash,
+            fillLineDashOffset,
+            disableMultiStroke,
+            disableMultiStrokeFill,
+            preserveVertices,
+            fixedDecimalPlaceDigits
+        });
+        context.highPerformanceRestore();
+        return false;
     }
 };
 RoughCanvasLineRender = __decorate([
-    injectable(),
-    __param(0, inject(DefaultCanvasLineRender)),
-    __metadata("design:paramtypes", [Object])
+    injectable()
 ], RoughCanvasLineRender);
 
 let RoughCanvasPathRender = class RoughCanvasPathRender extends RoughBaseRender {
@@ -2281,7 +1860,57 @@ let RoughCanvasRectRender = class RoughCanvasRectRender extends RoughBaseRender
         this.numberType = RECT_NUMBER_TYPE;
     }
     draw(rect, renderService, drawContext, params) {
-        this.doDraw(rect, renderService, drawContext, params);
+        const { context } = drawContext;
+        if (!context) {
+            return;
+        }
+        const canvas = context.canvas.nativeCanvas;
+        const rc = U.canvas(canvas);
+        context.highPerformanceSave();
+        const rectAttribute = rect.getGraphicTheme();
+        let { x = rectAttribute.x, y = rectAttribute.y } = rect.attribute;
+        if (!rect.transMatrix.onlyTranslate()) {
+            x = 0;
+            y = 0;
+            context.transformFromMatrix(rect.transMatrix, true);
+        }
+        else {
+            const { dx = rectAttribute.dx, dy = rectAttribute.dy } = rect.attribute;
+            x += dx;
+            y += dy;
+            context.setTransformForCurrent();
+        }
+        const { fill = rectAttribute.fill, stroke = rectAttribute.stroke, fillColor = rectAttribute.fill, strokeColor = rectAttribute.stroke, x1, y1, lineWidth = rectAttribute.lineWidth, maxRandomnessOffset = defaultRouthThemeSpec.maxRandomnessOffset, roughness = defaultRouthThemeSpec.roughness, bowing = defaultRouthThemeSpec.bowing, curveFitting = defaultRouthThemeSpec.curveFitting, curveTightness = defaultRouthThemeSpec.curveTightness, curveStepCount = defaultRouthThemeSpec.curveStepCount, fillStyle = defaultRouthThemeSpec.fillStyle, fillWeight = defaultRouthThemeSpec.fillWeight, hachureAngle = defaultRouthThemeSpec.hachureAngle, hachureGap = defaultRouthThemeSpec.hachureGap, simplification = defaultRouthThemeSpec.simplification, dashOffset = defaultRouthThemeSpec.dashOffset, dashGap = defaultRouthThemeSpec.dashGap, zigzagOffset = defaultRouthThemeSpec.zigzagOffset, seed = defaultRouthThemeSpec.seed, fillLineDash = defaultRouthThemeSpec.fillLineDash, fillLineDashOffset = defaultRouthThemeSpec.fillLineDashOffset, disableMultiStroke = defaultRouthThemeSpec.disableMultiStroke, disableMultiStrokeFill = defaultRouthThemeSpec.disableMultiStrokeFill, preserveVertices = defaultRouthThemeSpec.preserveVertices, fixedDecimalPlaceDigits = defaultRouthThemeSpec.fixedDecimalPlaceDigits } = rect.attribute;
+        let { width = rectAttribute.width, height = rectAttribute.height } = rect.attribute;
+        width = (width !== null && width !== void 0 ? width : x1 - x) || 0;
+        height = (height !== null && height !== void 0 ? height : y1 - y) || 0;
+        rc.rectangle(x, y, width, height, {
+            fill: fill ? fillColor : undefined,
+            stroke: stroke ? strokeColor : undefined,
+            strokeWidth: lineWidth,
+            maxRandomnessOffset,
+            roughness,
+            bowing,
+            curveFitting,
+            curveTightness,
+            curveStepCount,
+            fillStyle,
+            fillWeight,
+            hachureAngle,
+            hachureGap,
+            simplification,
+            dashOffset,
+            dashGap,
+            zigzagOffset,
+            seed,
+            fillLineDash,
+            fillLineDashOffset,
+            disableMultiStroke,
+            disableMultiStrokeFill,
+            preserveVertices,
+            fixedDecimalPlaceDigits
+        });
+        context.highPerformanceRestore();
     }
 };
 RoughCanvasRectRender = __decorate([
@@ -2290,7 +1919,7 @@ RoughCanvasRectRender = __decorate([
     __metadata("design:paramtypes", [Object])
 ], RoughCanvasRectRender);
 
-let RoughCanvasSymbolRender = class RoughCanvasSymbolRender extends RoughBaseRender {
+let RoughCanvasSymbolRender = class RoughCanvasSymbolRender extends BaseRender {
     constructor(canvasRenderer) {
         super();
         this.canvasRenderer = canvasRenderer;
@@ -2299,7 +1928,64 @@ let RoughCanvasSymbolRender = class RoughCanvasSymbolRender extends RoughBaseRen
         this.style = 'rough';
     }
     draw(symbol, renderService, drawContext, params) {
-        this.doDraw(symbol, renderService, drawContext, params);
+        const { context } = drawContext;
+        if (!context) {
+            return;
+        }
+        const canvas = context.canvas.nativeCanvas;
+        const rc = U.canvas(canvas);
+        context.highPerformanceSave();
+        const symbolAttribute = symbol.getGraphicTheme();
+        const data = this.transform(symbol, symbolAttribute, context);
+        const { x, y, z, lastModelMatrix } = data;
+        const parsedPath = symbol.getParsedPath();
+        if (!parsedPath) {
+            return;
+        }
+        const { fill = symbolAttribute.fill, stroke = symbolAttribute.stroke, fillColor = symbolAttribute.fill, strokeColor = symbolAttribute.stroke, size = symbolAttribute.size, lineWidth = symbolAttribute.lineWidth, maxRandomnessOffset = defaultRouthThemeSpec.maxRandomnessOffset, roughness = defaultRouthThemeSpec.roughness, bowing = defaultRouthThemeSpec.bowing, curveFitting = defaultRouthThemeSpec.curveFitting, curveTightness = defaultRouthThemeSpec.curveTightness, curveStepCount = defaultRouthThemeSpec.curveStepCount, fillStyle = defaultRouthThemeSpec.fillStyle, fillWeight = defaultRouthThemeSpec.fillWeight, hachureAngle = defaultRouthThemeSpec.hachureAngle, hachureGap = defaultRouthThemeSpec.hachureGap, simplification = defaultRouthThemeSpec.simplification, dashOffset = defaultRouthThemeSpec.dashOffset, dashGap = defaultRouthThemeSpec.dashGap, zigzagOffset = defaultRouthThemeSpec.zigzagOffset, seed = defaultRouthThemeSpec.seed, fillLineDash = defaultRouthThemeSpec.fillLineDash, fillLineDashOffset = defaultRouthThemeSpec.fillLineDashOffset, disableMultiStroke = defaultRouthThemeSpec.disableMultiStroke, disableMultiStrokeFill = defaultRouthThemeSpec.disableMultiStrokeFill, preserveVertices = defaultRouthThemeSpec.preserveVertices, fixedDecimalPlaceDigits = defaultRouthThemeSpec.fixedDecimalPlaceDigits } = symbol.attribute;
+        let svgPath = '';
+        if (parsedPath.drawToSvgPath) {
+            svgPath = parsedPath.drawToSvgPath(size, x, y);
+        }
+        else {
+            const customPath = new CustomPath2D();
+            if (parsedPath.draw(customPath, size, x, y)) {
+                customPath.closePath();
+            }
+            svgPath = customPath.toString();
+        }
+        rc.path(svgPath, {
+            fill: fill ? fillColor : undefined,
+            stroke: stroke ? strokeColor : undefined,
+            strokeWidth: lineWidth,
+            maxRandomnessOffset,
+            roughness,
+            bowing,
+            curveFitting,
+            curveTightness,
+            curveStepCount,
+            fillStyle,
+            fillWeight,
+            hachureAngle,
+            hachureGap,
+            simplification,
+            dashOffset,
+            dashGap,
+            zigzagOffset,
+            seed,
+            fillLineDash,
+            fillLineDashOffset,
+            disableMultiStroke,
+            disableMultiStrokeFill,
+            preserveVertices,
+            fixedDecimalPlaceDigits
+        });
+        context.highPerformanceRestore();
+    }
+    drawShape(graphic, ctx, x, y, drawContext, params, fillCb, strokeCb) {
+        if (this.canvasRenderer.drawShape) {
+            return this.canvasRenderer.drawShape(graphic, ctx, x, y, drawContext, params, fillCb, strokeCb);
+        }
     }
 };
 RoughCanvasSymbolRender = __decorate([
@@ -3049,15 +2735,10 @@ let BrowserContext2d = class BrowserContext2d {
         return this.nativeContext.fillStyle;
     }
     set font(d) {
-        if (d === this._font) {
-            return;
-        }
-        this._font = d;
         this.nativeContext.font = d;
     }
     get font() {
-        var _a;
-        return (_a = this._font) !== null && _a !== void 0 ? _a : this.nativeContext.font;
+        return this.nativeContext.font;
     }
     set globalAlpha(d) {
         this.nativeContext.globalAlpha = d * this.baseGlobalAlpha;
@@ -3173,14 +2854,14 @@ let BrowserContext2d = class BrowserContext2d {
         this._clearMatrix = new Matrix(1, 0, 0, 1, 0, 0);
         this.baseGlobalAlpha = 1;
     }
-    reset(setTransform = true) {
+    reset() {
         if (this.stack.length) {
             Logger.getInstance().warn('可能存在bug，matrix没有清空');
         }
         this.matrix.setValue(1, 0, 0, 1, 0, 0);
         this.applyedMatrix = new Matrix(1, 0, 0, 1, 0, 0);
         this.stack.length = 0;
-        setTransform && this.nativeContext.setTransform(1, 0, 0, 1, 0, 0);
+        this.nativeContext.setTransform(1, 0, 0, 1, 0, 0);
     }
     getCanvas() {
         return this.canvas;
@@ -3214,9 +2895,6 @@ let BrowserContext2d = class BrowserContext2d {
             this.matrix = this.stack.pop();
             this.setTransformForCurrent(true);
         }
-        this.font = '';
-        this._clearFilterStyle = false;
-        this._clearShadowStyle = false;
     }
     highPerformanceRestore() {
         if (this.stack.length > 0) {
@@ -3679,12 +3357,11 @@ let BrowserContext2d = class BrowserContext2d {
         if (!defaultParams) {
             defaultParams = this.fillAttributes;
         }
-        const { opacity = defaultParams.opacity, shadowBlur = defaultParams.shadowBlur, shadowOffsetX = defaultParams.shadowOffsetX, shadowOffsetY = defaultParams.shadowOffsetY, blur = defaultParams.blur, globalCompositeOperation = defaultParams.globalCompositeOperation } = attribute;
+        const { opacity = defaultParams.opacity, shadowBlur = defaultParams.shadowBlur, shadowColor = defaultParams.shadowColor, shadowOffsetX = defaultParams.shadowOffsetX, shadowOffsetY = defaultParams.shadowOffsetY, blur = defaultParams.blur, filter = defaultParams.filter, globalCompositeOperation = defaultParams.globalCompositeOperation } = attribute;
         if (opacity <= 1e-12) {
             return;
         }
-        if (shadowOffsetX || shadowOffsetY || shadowBlur) {
-            const { shadowColor = defaultParams.shadowColor, shadowOffsetX = defaultParams.shadowOffsetX, shadowOffsetY = defaultParams.shadowOffsetY } = attribute;
+        if (shadowBlur || shadowOffsetX || shadowOffsetY) {
             _context.shadowBlur = shadowBlur * this.dpr;
             _context.shadowColor = shadowColor;
             _context.shadowOffsetX = shadowOffsetX * this.dpr;
@@ -3700,6 +3377,10 @@ let BrowserContext2d = class BrowserContext2d {
             _context.filter = `blur(${blur}px)`;
             this._clearFilterStyle = true;
         }
+        else if (filter) {
+            _context.filter = filter;
+            this._clearFilterStyle = true;
+        }
         else if (this._clearFilterStyle) {
             _context.filter = 'blur(0px)';
             this._clearFilterStyle = false;
@@ -3756,10 +3437,10 @@ let BrowserContext2d = class BrowserContext2d {
         }
         const { scaleIn3d = defaultParams.scaleIn3d } = params;
         if (params.font) {
-            this.font = params.font;
+            _context.font = params.font;
         }
         else {
-            this.font = getContextFont(params, defaultParams, scaleIn3d && this.camera && this.camera.getProjectionScale(z));
+            _context.font = getContextFont(params, defaultParams, scaleIn3d && this.camera && this.camera.getProjectionScale(z));
         }
         const { fontFamily = defaultParams.fontFamily, fontSize = defaultParams.fontSize } = params;
         this.fontFamily = fontFamily;
@@ -3774,10 +3455,10 @@ let BrowserContext2d = class BrowserContext2d {
             defaultParams = this.textAttributes;
         }
         if (params.font) {
-            this.font = params.font;
+            _context.font = params.font;
         }
         else {
-            this.font = getContextFont(params, defaultParams, this.camera && this.camera.getProjectionScale(z));
+            _context.font = getContextFont(params, defaultParams, this.camera && this.camera.getProjectionScale(z));
         }
         const { fontFamily = defaultParams.fontFamily, fontSize = defaultParams.fontSize } = params;
         this.fontFamily = fontFamily;