@visactor/vrender-kits 0.22.10 → 0.22.12

package/dist/index.es.js

@@ -1,4 +1,4 @@
-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 { 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 { 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,
+    roughness: 1.6,
     bowing: 1,
     curveFitting: 0.95,
     curveTightness: undefined,
     curveStepCount: 9,
-    fillStyle: 'hachure',
+    fillStyle: 'cross-hatch',
     fillWeight: undefined,
     hachureAngle: 60,
     hachureGap: 6,
@@ -1537,21 +1537,493 @@ const defaultRouthThemeSpec = {
     dashOffset: undefined,
     dashGap: undefined,
     zigzagOffset: undefined,
-    seed: 1,
+    seed: 3,
     fillLineDash: undefined,
     fillLineDashOffset: undefined,
     disableMultiStroke: false,
-    disableMultiStrokeFill: false,
+    disableMultiStrokeFill: true,
     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();
+    }
 }
 
 let RoughCanvasArcRender = class RoughCanvasArcRender extends RoughBaseRender {
@@ -1726,69 +2198,22 @@ RoughCanvasCircleRender = __decorate([
     __metadata("design:paramtypes", [Object])
 ], RoughCanvasCircleRender);
 
-let RoughCanvasLineRender = class RoughCanvasLineRender extends DefaultCanvasLineRender {
-    constructor() {
-        super(...arguments);
+let RoughCanvasLineRender = class RoughCanvasLineRender extends RoughBaseRender {
+    constructor(canvasRenderer) {
+        super();
+        this.canvasRenderer = canvasRenderer;
         this.style = 'rough';
+        this.type = 'line';
+        this.numberType = LINE_NUMBER_TYPE;
     }
-    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;
+    draw(line, renderService, drawContext, params) {
+        this.doDraw(line, renderService, drawContext, params);
     }
 };
 RoughCanvasLineRender = __decorate([
-    injectable()
+    injectable(),
+    __param(0, inject(DefaultCanvasLineRender)),
+    __metadata("design:paramtypes", [Object])
 ], RoughCanvasLineRender);
 
 let RoughCanvasPathRender = class RoughCanvasPathRender extends RoughBaseRender {
@@ -1856,57 +2281,7 @@ let RoughCanvasRectRender = class RoughCanvasRectRender extends RoughBaseRender
         this.numberType = RECT_NUMBER_TYPE;
     }
     draw(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();
+        this.doDraw(rect, renderService, drawContext, params);
     }
 };
 RoughCanvasRectRender = __decorate([
@@ -1915,7 +2290,7 @@ RoughCanvasRectRender = __decorate([
     __metadata("design:paramtypes", [Object])
 ], RoughCanvasRectRender);
 
-let RoughCanvasSymbolRender = class RoughCanvasSymbolRender extends BaseRender {
+let RoughCanvasSymbolRender = class RoughCanvasSymbolRender extends RoughBaseRender {
     constructor(canvasRenderer) {
         super();
         this.canvasRenderer = canvasRenderer;
@@ -1924,64 +2299,7 @@ let RoughCanvasSymbolRender = class RoughCanvasSymbolRender extends BaseRender {
         this.style = 'rough';
     }
     draw(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);
-        }
+        this.doDraw(symbol, renderService, drawContext, params);
     }
 };
 RoughCanvasSymbolRender = __decorate([
@@ -2731,10 +3049,15 @@ 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() {
-        return this.nativeContext.font;
+        var _a;
+        return (_a = this._font) !== null && _a !== void 0 ? _a : this.nativeContext.font;
     }
     set globalAlpha(d) {
         this.nativeContext.globalAlpha = d * this.baseGlobalAlpha;
@@ -2850,14 +3173,14 @@ let BrowserContext2d = class BrowserContext2d {
         this._clearMatrix = new Matrix(1, 0, 0, 1, 0, 0);
         this.baseGlobalAlpha = 1;
     }
-    reset() {
+    reset(setTransform = true) {
         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;
-        this.nativeContext.setTransform(1, 0, 0, 1, 0, 0);
+        setTransform && this.nativeContext.setTransform(1, 0, 0, 1, 0, 0);
     }
     getCanvas() {
         return this.canvas;
@@ -2891,6 +3214,9 @@ 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) {
@@ -3353,11 +3679,12 @@ let BrowserContext2d = class BrowserContext2d {
         if (!defaultParams) {
             defaultParams = this.fillAttributes;
         }
-        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;
+        const { opacity = defaultParams.opacity, shadowBlur = defaultParams.shadowBlur, shadowOffsetX = defaultParams.shadowOffsetX, shadowOffsetY = defaultParams.shadowOffsetY, blur = defaultParams.blur, globalCompositeOperation = defaultParams.globalCompositeOperation } = attribute;
         if (opacity <= 1e-12) {
             return;
         }
-        if (shadowBlur || shadowOffsetX || shadowOffsetY) {
+        if (shadowOffsetX || shadowOffsetY || shadowBlur) {
+            const { shadowColor = defaultParams.shadowColor, shadowOffsetX = defaultParams.shadowOffsetX, shadowOffsetY = defaultParams.shadowOffsetY } = attribute;
             _context.shadowBlur = shadowBlur * this.dpr;
             _context.shadowColor = shadowColor;
             _context.shadowOffsetX = shadowOffsetX * this.dpr;
@@ -3373,10 +3700,6 @@ 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;
@@ -3433,10 +3756,10 @@ let BrowserContext2d = class BrowserContext2d {
         }
         const { scaleIn3d = defaultParams.scaleIn3d } = params;
         if (params.font) {
-            _context.font = params.font;
+            this.font = params.font;
         }
         else {
-            _context.font = getContextFont(params, defaultParams, scaleIn3d && this.camera && this.camera.getProjectionScale(z));
+            this.font = getContextFont(params, defaultParams, scaleIn3d && this.camera && this.camera.getProjectionScale(z));
         }
         const { fontFamily = defaultParams.fontFamily, fontSize = defaultParams.fontSize } = params;
         this.fontFamily = fontFamily;
@@ -3451,10 +3774,10 @@ let BrowserContext2d = class BrowserContext2d {
             defaultParams = this.textAttributes;
         }
         if (params.font) {
-            _context.font = params.font;
+            this.font = params.font;
         }
         else {
-            _context.font = getContextFont(params, defaultParams, this.camera && this.camera.getProjectionScale(z));
+            this.font = getContextFont(params, defaultParams, this.camera && this.camera.getProjectionScale(z));
         }
         const { fontFamily = defaultParams.fontFamily, fontSize = defaultParams.fontSize } = params;
         this.fontFamily = fontFamily;