feat: implement select area style by config

packages/core/examples/features/lib/main.js

@@ -8,7 +8,7 @@ const data = getData();
 const mount = document.querySelector('#mount');
 
 const defaultConf = {
-  scale: 0.5,
+  scale: 1.5,
   scrollX: 0,
   scrollY: 0,
 };
@@ -21,8 +21,16 @@ const core = new Core(mount, {
 }, {
   scrollWrapper: {
     use: true,
-    lineWidth: 20,
-  }
+    lineWidth: 16,
+    color: '#9c27b0',
+  },
+  elementWrapper: {
+    lockColor: '#009688',
+    color: '#e91e63',
+    dotSize: 8,
+    lineWidth: 1,
+    lineDash: [12, 12],
+  },
 });
 
 

packages/core/src/lib/draw/wrapper.ts

@@ -55,7 +55,7 @@ export function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) {
     } else {
       // draw wrapper's lock dots,
       clearContext(ctx);
-      ctx.setFillStyle(wrapper.color);
+      ctx.setStrokeStyle(wrapper.color);
       [
         wrapper.dots.topLeft, wrapper.dots.top, wrapper.dots.topRight, wrapper.dots.right,
         wrapper.dots.bottomRight, wrapper.dots.bottom, wrapper.dots.bottomLeft, wrapper.dots.left,
@@ -140,12 +140,12 @@ export function drawElementListWrappers(ctx: TypeContext, config: TypeHelperConf
       if (wrapper.lock === true) {
         // draw wrapper's lock dots,
         clearContext(ctx);
-        ctx.setFillStyle(wrapper.color);
+        // ctx.setFillStyle(wrapper.color);
+        ctx.setStrokeStyle(wrapper.color);
         [
           wrapper.dots.topLeft, wrapper.dots.top, wrapper.dots.topRight, wrapper.dots.right,
           wrapper.dots.bottomRight, wrapper.dots.bottom, wrapper.dots.bottomLeft, wrapper.dots.left,
         ].forEach((dot) => {
-
           ctx.beginPath();
           ctx.moveTo(dot.x - wrapper.dotSize / 2, dot.y - wrapper.dotSize / 2);
           ctx.lineTo(dot.x + wrapper.dotSize / 2, dot.y + wrapper.dotSize / 2);

packages/core/src/lib/helper.ts

@@ -11,10 +11,6 @@ import { rotateContext, rotateElement } from './transform';
 
 const { deepClone } = util.data;
 
-const areaLineWidth = 1.5;
-const areaColor = '#2ab6f1';
-const areaLineDash = [4, 3];
-
 export class Helper implements TypeHelper {
 
   private _helperConfig: TypeHelperConfig;
@@ -40,7 +36,6 @@ export class Helper implements TypeHelper {
     this._updateElementIndex(data);
     this._updateSelectedElementWrapper(data, opts);
     this._updateSelectedElementListWrapper(data, opts);
-    this._updateDisplayContextScrollWrapper(data, opts);
   }
 
   getConfig(): TypeHelperConfig {
@@ -184,7 +179,11 @@ export class Helper implements TypeHelper {
 
     const transform = this._ctx.getTransform();
     const { scale = 1, scrollX = 0, scrollY = 0 } = transform;
+    const elemWrapper = this._coreConfig.elementWrapper;
+    const lineWidth = elemWrapper.lineWidth / scale;
+    const lineDash = elemWrapper.lineDash.map(n => (n / scale));
 
+    
     this._helperConfig.selectedAreaWrapper = {
       x: (Math.min(start.x, end.x) - scrollX) / scale,
       y: (Math.min(start.y, end.y) - scrollY) / scale,
@@ -192,11 +191,9 @@ export class Helper implements TypeHelper {
       h: Math.abs(end.y - start.y) / scale,
       startPoint: {x: start.x, y: start.y},
       endPoint: {x: end.x, y: end.y},
-      lineWidth: areaLineWidth / scale,
-      lineDash: areaLineDash.map((num) => {
-        return num / scale;
-      }),
-      color: areaColor,
+      lineWidth: lineWidth,
+      lineDash: lineDash,
+      color: elemWrapper.color,
     };
   }
 
@@ -299,54 +296,5 @@ export class Helper implements TypeHelper {
 
     return wrapper;
   }
-
-  private _updateDisplayContextScrollWrapper(data: TypeData, opts: TypeHelperUpdateOpts) {
-    if (opts.canScroll !== true) {
-      return;
-    }
-    const { width, height } = opts;
-    const sliderMinSize = 50;
-    const lineSize = 16;
-    const { position } = this._board.getScreenInfo();
-    let xSize = 0;
-    let ySize = 0;
-    if (position.left <= 0 || position.right <= 0) {
-      xSize = Math.max(
-        sliderMinSize, width - (
-          Math.abs(position.left < 0 ? position.left : 0) + Math.abs(position.right < 0 ? position.right : 0)
-        )
-      );
-      if (xSize >= width) xSize = 0;
-    }
-    if (position.top <= 0 || position.bottom <= 0) {
-      ySize = Math.max(
-        sliderMinSize, height - (
-          Math.abs(position.top < 0 ? position.top : 0) + Math.abs(position.bottom < 0 ? position.bottom : 0)
-        )
-      );
-      if (ySize >= height) ySize = 0;
-    }
-
-    let translateX = 0;
-    if (xSize > 0) {
-      translateX = width * Math.abs(position.left) / (Math.abs(position.left) + Math.abs(position.right));
-      translateX = Math.min(Math.max(0, translateX - xSize / 2), width - xSize);
-    }
-
-    let translateY = 0;
-    if (ySize > 0) {
-      translateY = height * Math.abs(position.top) / (Math.abs(position.top) + Math.abs(position.bottom));
-      translateY = Math.min(Math.max(0, translateY - ySize / 2), height - ySize);
-    }
-    this._helperConfig.displayContextScrollWrapper = {
-      lineSize,
-      xSize,
-      ySize,
-      translateY,
-      translateX,
-      color: '#e0e0e0'
-    };
-  }
-
   
 }

packages/types/src/lib/helper.ts

@@ -42,14 +42,6 @@ type TypeHelperConfig = {
   selectedAreaWrapper?: TypeHeplerSelectedAreaWrapper;
   selectedElementWrapper?: TypeHeplerSelectedElementWrapper,
   selectedElementListWrappers?: Array<TypeHeplerSelectedElementWrapper>;
-  displayContextScrollWrapper?: {
-    lineSize: number,
-    xSize: number,
-    ySize: number,
-    translateY: number,
-    translateX: number,
-    color: string,
-  }
 }