diff --git a/packages/core/examples/features/lib/main.js b/packages/core/examples/features/lib/main.js
index f816ae0..3fc5310 100644
--- a/packages/core/examples/features/lib/main.js
+++ b/packages/core/examples/features/lib/main.js
@@ -32,7 +32,7 @@ const core = new Core(mount, {
   elementWrapper: {
     lockColor: '#009688',
     color: '#e91e63',
-    dotSize: 6,
+    controllerSize: 6,
     lineWidth: 1,
     // lineDash: [12, 12],
   },
diff --git a/packages/core/examples/test/api.html b/packages/core/examples/test/api.html
index 76b7e6d..5236f92 100644
--- a/packages/core/examples/test/api.html
+++ b/packages/core/examples/test/api.html
@@ -111,7 +111,7 @@
       }
       var config = {
         elementWrapper: {
-          dotSize: 4,
+          controllerSize: 4,
         },
       };
       var elemText1 = {
@@ -197,7 +197,7 @@
             },
             elementWrapper: {
               color: '#e91e63',
-              dotSize: 4,
+              controllerSize: 4,
               lineWidth: 1,
               lineDash: [12, 12],
             },
diff --git a/packages/core/examples/test/elements.html b/packages/core/examples/test/elements.html
index 1fd2d65..2046438 100644
--- a/packages/core/examples/test/elements.html
+++ b/packages/core/examples/test/elements.html
@@ -84,7 +84,7 @@
       }
       var config = {
         elementWrapper: {
-          dotSize: 4,
+          controllerSize: 4,
         }
       }
     </script>
diff --git a/packages/core/examples/test/event.html b/packages/core/examples/test/event.html
index 546cf0d..72a1385 100644
--- a/packages/core/examples/test/event.html
+++ b/packages/core/examples/test/event.html
@@ -60,7 +60,7 @@
       }
       var config = {
         elementWrapper: {
-          dotSize: 4,
+          controllerSize: 4,
         },
       };
       var elemText1 = {
diff --git a/packages/core/examples/test/resource.html b/packages/core/examples/test/resource.html
index 008d378..7da28d8 100644
--- a/packages/core/examples/test/resource.html
+++ b/packages/core/examples/test/resource.html
@@ -77,7 +77,7 @@
       }
       var config = {
         elementWrapper: {
-          dotSize: 4,
+          controllerSize: 4,
         }
       }
     </script>
diff --git a/packages/core/src/constant/static.ts b/packages/core/src/constant/static.ts
index 3c96115..80815e8 100644
--- a/packages/core/src/constant/static.ts
+++ b/packages/core/src/constant/static.ts
@@ -2,7 +2,7 @@ export enum Mode {
   NULL = 'null',
   SELECT_ELEMENT = 'select-element',
   SELECT_ELEMENT_LIST = 'select-element-list',
-  SELECT_ELEMENT_WRAPPER_DOT = 'select-element-wrapper-dot',
+  SELECT_ELEMENT_WRAPPER_CONTROLLER = 'select-element-wrapper-controller',
   SELECT_AREA = 'select-area',
 }
 
diff --git a/packages/core/src/lib/config.ts b/packages/core/src/lib/config.ts
index c89fb67..26fd21e 100644
--- a/packages/core/src/lib/config.ts
+++ b/packages/core/src/lib/config.ts
@@ -5,7 +5,7 @@ const defaultConfig: TypeConfigStrict = {
   elementWrapper: {
     color: '#2ab6f1',
     lockColor: '#aaaaaa',
-    dotSize: 6,
+    controllerSize: 6,
     lineWidth: 1,
     lineDash: [4, 3],
   }
diff --git a/packages/core/src/lib/draw/wrapper.ts b/packages/core/src/lib/draw/wrapper.ts
index 797afea..dd9f36f 100644
--- a/packages/core/src/lib/draw/wrapper.ts
+++ b/packages/core/src/lib/draw/wrapper.ts
@@ -17,67 +17,67 @@ export function drawElementWrapper(ctx: TypeContext, config: TypeHelperConfig) {
     ctx.setLineDash(wrapper.lineDash);
     ctx.setLineWidth(wrapper.lineWidth);
     ctx.setStrokeStyle(wrapper.color);
-    ctx.moveTo(wrapper.dots.topLeft.x, wrapper.dots.topLeft.y);
-    ctx.lineTo(wrapper.dots.topRight.x, wrapper.dots.topRight.y);
-    ctx.lineTo(wrapper.dots.bottomRight.x, wrapper.dots.bottomRight.y);
-    ctx.lineTo(wrapper.dots.bottomLeft.x, wrapper.dots.bottomLeft.y);
-    ctx.lineTo(wrapper.dots.topLeft.x, wrapper.dots.topLeft.y - wrapper.lineWidth / 2);
+    ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
+    ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
+    ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
+    ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
+    ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
     ctx.stroke();
     ctx.closePath();
     
     if (wrapper.lock !== true) {
       // draw wrapper's rotate line
       ctx.beginPath();
-      ctx.moveTo(wrapper.dots.top.x, wrapper.dots.top.y);
-      ctx.lineTo(wrapper.dots.rotate.x, wrapper.dots.rotate.y + wrapper.dotSize);
+      ctx.moveTo(wrapper.controllers.top.x, wrapper.controllers.top.y);
+      ctx.lineTo(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y + wrapper.controllerSize);
       ctx.stroke();
       ctx.closePath();
 
       // draw wrapper's rotate
       ctx.beginPath();
       ctx.setLineDash([]);
-      ctx.setLineWidth(wrapper.dotSize / 2);
-      ctx.arc(wrapper.dots.rotate.x, wrapper.dots.rotate.y, wrapper.dotSize * 0.8, Math.PI / 6, Math.PI * 2);
+      ctx.setLineWidth(wrapper.controllerSize / 2);
+      ctx.arc(wrapper.controllers.rotate.x, wrapper.controllers.rotate.y, wrapper.controllerSize * 0.8, Math.PI / 6, Math.PI * 2);
       ctx.stroke();
       ctx.closePath();
 
-      // draw wrapper's dots
+      // draw wrapper's controllers
       ctx.setFillStyle(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) => {
-        if (dot.invisible !== true) {
+        wrapper.controllers.topLeft,
+        wrapper.controllers.top,
+        wrapper.controllers.topRight,
+        wrapper.controllers.right,
+        wrapper.controllers.bottomRight,
+        wrapper.controllers.bottom,
+        wrapper.controllers.bottomLeft,
+        wrapper.controllers.left,
+      ].forEach((controller) => {
+        if (controller.invisible !== true) {
           ctx.beginPath();
-          ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2);
+          ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
           ctx.fill();
           ctx.closePath();
         }
       });
     } else {
-      // draw wrapper's lock dots,
+      // draw wrapper's lock controllers,
       clearContext(ctx);
       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) => {
+        wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right,
+        wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left,
+      ].forEach((controller) => {
 
         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);
+        ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
+        ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
         ctx.stroke();
         ctx.closePath();
 
         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);
+        ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
+        ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
         ctx.stroke();
         ctx.closePath();
       });
@@ -126,10 +126,10 @@ export function drawElementListWrappers(ctx: TypeContext, config: TypeHelperConf
       ctx.setGlobalAlpha(0.05);
       ctx.setFillStyle(wrapper.color);
       ctx.fillRect(
-        wrapper.dots.topLeft.x,
-        wrapper.dots.topLeft.y,
-        wrapper.dots.bottomRight.x - wrapper.dots.topLeft.x,
-        wrapper.dots.bottomRight.y - wrapper.dots.topLeft.y,
+        wrapper.controllers.topLeft.x,
+        wrapper.controllers.topLeft.y,
+        wrapper.controllers.bottomRight.x - wrapper.controllers.topLeft.x,
+        wrapper.controllers.bottomRight.y - wrapper.controllers.topLeft.y,
       );
 
       clearContext(ctx);
@@ -137,32 +137,32 @@ export function drawElementListWrappers(ctx: TypeContext, config: TypeHelperConf
       ctx.setLineDash(wrapper.lineDash);
       ctx.setLineWidth(wrapper.lineWidth);
       ctx.setStrokeStyle(wrapper.color);
-      ctx.moveTo(wrapper.dots.topLeft.x, wrapper.dots.topLeft.y);
-      ctx.lineTo(wrapper.dots.topRight.x, wrapper.dots.topRight.y);
-      ctx.lineTo(wrapper.dots.bottomRight.x, wrapper.dots.bottomRight.y);
-      ctx.lineTo(wrapper.dots.bottomLeft.x, wrapper.dots.bottomLeft.y);
-      ctx.lineTo(wrapper.dots.topLeft.x, wrapper.dots.topLeft.y - wrapper.lineWidth / 2);
+      ctx.moveTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y);
+      ctx.lineTo(wrapper.controllers.topRight.x, wrapper.controllers.topRight.y);
+      ctx.lineTo(wrapper.controllers.bottomRight.x, wrapper.controllers.bottomRight.y);
+      ctx.lineTo(wrapper.controllers.bottomLeft.x, wrapper.controllers.bottomLeft.y);
+      ctx.lineTo(wrapper.controllers.topLeft.x, wrapper.controllers.topLeft.y - wrapper.lineWidth / 2);
       ctx.stroke();
       ctx.closePath();
 
       if (wrapper.lock === true) {
-        // draw wrapper's lock dots,
+        // draw wrapper's lock controllers,
         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,
-        ].forEach((dot) => {
+          wrapper.controllers.topLeft, wrapper.controllers.top, wrapper.controllers.topRight, wrapper.controllers.right,
+          wrapper.controllers.bottomRight, wrapper.controllers.bottom, wrapper.controllers.bottomLeft, wrapper.controllers.left,
+        ].forEach((controller) => {
           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);
+          ctx.moveTo(controller.x - wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
+          ctx.lineTo(controller.x + wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
           ctx.stroke();
           ctx.closePath();
 
           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);
+          ctx.moveTo(controller.x + wrapper.controllerSize / 2, controller.y - wrapper.controllerSize / 2);
+          ctx.lineTo(controller.x - wrapper.controllerSize / 2, controller.y + wrapper.controllerSize / 2);
           ctx.stroke();
           ctx.closePath();
         });
diff --git a/packages/core/src/lib/element.ts b/packages/core/src/lib/element.ts
index c9d1f08..2c2c4e8 100644
--- a/packages/core/src/lib/element.ts
+++ b/packages/core/src/lib/element.ts
@@ -2,7 +2,7 @@ import {
   TypeContext,
   TypePoint,
   TypeData,
-  TypeHelperWrapperDotDirection,
+  TypeHelperWrapperControllerDirection,
   TypeElement,
   TypeElemDesc,
 } from '@idraw/types';
@@ -84,7 +84,7 @@ export class Element {
     point: TypePoint,
     prevPoint: TypePoint,
     scale: number,
-    direction: TypeHelperWrapperDotDirection
+    direction: TypeHelperWrapperControllerDirection
   ): null | {
     width: number,
     height: number,
@@ -156,7 +156,7 @@ function calcuScaleElemPosition(
   elem: TypeElement<keyof TypeElemDesc>,
   moveX: number,
   moveY: number,
-  direction: TypeHelperWrapperDotDirection,
+  direction: TypeHelperWrapperControllerDirection,
   scale: number,
 ): TypePoint & { w: number, h: number } {
   const p = { x: elem.x, y: elem.y, w: elem.w, h: elem.h };
diff --git a/packages/core/src/lib/helper.ts b/packages/core/src/lib/helper.ts
index 295305b..feaa930 100644
--- a/packages/core/src/lib/helper.ts
+++ b/packages/core/src/lib/helper.ts
@@ -1,6 +1,6 @@
 import {
   TypeData, TypeHelper, TypeHelperConfig, TypeHelperUpdateOpts,
-  TypeHelperWrapperDotDirection, TypeElement,
+  TypeHelperWrapperControllerDirection, TypeElement,
   TypeElemDesc, TypeContext, TypePoint, TypeConfigStrict,
   TypeHeplerSelectedElementWrapper
 } from '@idraw/types';
@@ -53,33 +53,33 @@ export class Helper implements TypeHelper {
     return null;
   }
 
-  isPointInElementWrapperDot(p: TypePoint, data?: TypeData): 
+  isPointInElementWrapperController(p: TypePoint, data?: TypeData): 
   {
     uuid: string | null | undefined, 
-    selectedDotDirection: TypeHelperWrapperDotDirection | null,
-    hoverDotDirection: TypeHelperWrapperDotDirection | null,
+    selectedControllerDirection: TypeHelperWrapperControllerDirection | null,
+    hoverControllerDirection: TypeHelperWrapperControllerDirection | null,
     directIndex: number | null,
   } {
     const ctx = this._ctx;
     const uuid = this._helperConfig?.selectedElementWrapper?.uuid || null;
     let directIndex = null;
-    let selectedDotDirection: TypeHelperWrapperDotDirection | null = null;
-    let hoverDotDirection: TypeHelperWrapperDotDirection | null = null;
+    let selectedControllerDirection: TypeHelperWrapperControllerDirection | null = null;
+    let hoverControllerDirection: TypeHelperWrapperControllerDirection | null = null;
     if (!this._helperConfig.selectedElementWrapper) {
-      return {uuid, selectedDotDirection, directIndex, hoverDotDirection};
+      return {uuid, selectedControllerDirection, directIndex, hoverControllerDirection};
     }
     const wrapper = this._helperConfig.selectedElementWrapper;
-    const dots = [
-      wrapper.dots.right,
-      wrapper.dots.topRight,
-      wrapper.dots.top,
-      wrapper.dots.topLeft,
-      wrapper.dots.left,
-      wrapper.dots.bottomLeft,
-      wrapper.dots.bottom,
-      wrapper.dots.bottomRight,
+    const controllers = [
+      wrapper.controllers.right,
+      wrapper.controllers.topRight,
+      wrapper.controllers.top,
+      wrapper.controllers.topLeft,
+      wrapper.controllers.left,
+      wrapper.controllers.bottomLeft,
+      wrapper.controllers.bottom,
+      wrapper.controllers.bottomRight,
     ];
-    let directionNames: TypeHelperWrapperDotDirection[] = [
+    let directionNames: TypeHelperWrapperControllerDirection[] = [
       'right',
       'top-right',
       'top',
@@ -123,37 +123,37 @@ export class Helper implements TypeHelper {
 
 
     rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => {
-      for (let i = 0; i < dots.length; i ++) {
-        const dot = dots[i];
-        if (dot.invisible === true) {
+      for (let i = 0; i < controllers.length; i ++) {
+        const controller = controllers[i];
+        if (controller.invisible === true) {
           continue;
         }
         ctx.beginPath();
-        ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2);
+        ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
         ctx.closePath();
         if (ctx.isPointInPath(p.x, p.y)) {
-          selectedDotDirection = directionNames[i];
-          hoverDotDirection = hoverDirectionNames[i];
+          selectedControllerDirection = directionNames[i];
+          hoverControllerDirection = hoverDirectionNames[i];
         }
-        if (selectedDotDirection) {
+        if (selectedControllerDirection) {
           directIndex = i;
           break;
         }
       }
     });
-    if (selectedDotDirection === null) {
+    if (selectedControllerDirection === null) {
       rotateContext(ctx, wrapper.translate, wrapper.radian || 0, () => {
-        const dot = wrapper.dots.rotate;
+        const controller = wrapper.controllers.rotate;
         ctx.beginPath();
-        ctx.arc(dot.x, dot.y, wrapper.dotSize, 0, Math.PI * 2);
+        ctx.arc(controller.x, controller.y, wrapper.controllerSize, 0, Math.PI * 2);
         ctx.closePath();
         if (ctx.isPointInPath(p.x, p.y)) {
-          selectedDotDirection = 'rotate';
-          hoverDotDirection =  'rotate';
+          selectedControllerDirection = 'rotate';
+          hoverControllerDirection =  'rotate';
         }
       });
     }
-    return {uuid, selectedDotDirection, hoverDotDirection, directIndex};
+    return {uuid, selectedControllerDirection, hoverControllerDirection, directIndex};
   }
 
   isPointInElementList(p: TypePoint, data: TypeData): boolean {
@@ -309,7 +309,7 @@ export class Helper implements TypeHelper {
   ): TypeHeplerSelectedElementWrapper {
     const { scale } = opts;
     const elemWrapper = this._coreConfig.elementWrapper;
-    const dotSize = elemWrapper.dotSize / scale;
+    const controllerSize = elemWrapper.controllerSize / scale;
     const lineWidth = elemWrapper.lineWidth / scale;
     const lineDash = elemWrapper.lineDash.map(n => (n / scale));
 
@@ -323,48 +323,48 @@ export class Helper implements TypeHelper {
     
     const wrapper: TypeHeplerSelectedElementWrapper = {
       uuid: elem.uuid,
-      dotSize: dotSize,
+      controllerSize: controllerSize,
       lock: elem?.operation?.lock === true,
-      dots: {
+      controllers: {
         topLeft: {
-          x: elem.x - dotSize - bw,
-          y: elem.y - dotSize - bw,
+          x: elem.x - controllerSize - bw,
+          y: elem.y - controllerSize - bw,
           invisible: hideObliqueDirection,
         },
         top: {
           x: elem.x + elem.w / 2,
-          y: elem.y - dotSize - bw,
+          y: elem.y - controllerSize - bw,
         },
         topRight: {
-          x: elem.x + elem.w + dotSize + bw,
-          y: elem.y - dotSize - bw,
+          x: elem.x + elem.w + controllerSize + bw,
+          y: elem.y - controllerSize - bw,
           invisible: hideObliqueDirection,
         },
         right: {
-          x: elem.x + elem.w + dotSize + bw,
+          x: elem.x + elem.w + controllerSize + bw,
           y: elem.y + elem.h / 2,
         },
         bottomRight: {
-          x: elem.x + elem.w + dotSize + bw,
-          y: elem.y + elem.h + dotSize + bw,
+          x: elem.x + elem.w + controllerSize + bw,
+          y: elem.y + elem.h + controllerSize + bw,
           invisible: hideObliqueDirection,
         },
         bottom: {
           x: elem.x + elem.w / 2,
-          y: elem.y + elem.h + dotSize + bw,
+          y: elem.y + elem.h + controllerSize + bw,
         },
         bottomLeft: {
-          x: elem.x - dotSize - bw,
-          y: elem.y + elem.h + dotSize + bw,
+          x: elem.x - controllerSize - bw,
+          y: elem.y + elem.h + controllerSize + bw,
           invisible: hideObliqueDirection,
         },
         left: {
-          x: elem.x - dotSize - bw,
+          x: elem.x - controllerSize - bw,
           y: elem.y + elem.h / 2,
         },
         rotate: {
           x: elem.x + elem.w / 2,
-          y: elem.y - dotSize - (dotSize * 2 + rotateLimit) - bw,
+          y: elem.y - controllerSize - (controllerSize * 2 + rotateLimit) - bw,
         }
       },
       lineWidth: lineWidth,
diff --git a/packages/core/src/lib/mapper.ts b/packages/core/src/lib/mapper.ts
index 728f769..6b78f81 100644
--- a/packages/core/src/lib/mapper.ts
+++ b/packages/core/src/lib/mapper.ts
@@ -46,9 +46,9 @@ export class Mapper {
     if (!this.isEffectivePoint(p)) {
       return { cursor, elementUUID};
     }
-    const { uuid, hoverDotDirection }  = this[_helper].isPointInElementWrapperDot(p, data);
+    const { uuid, hoverControllerDirection }  = this[_helper].isPointInElementWrapperController(p, data);
     
-    const direction = hoverDotDirection;
+    const direction = hoverControllerDirection;
     if (uuid && direction) {
       switch (direction) {
         case 'top-right' : {
diff --git a/packages/core/src/lib/temp.ts b/packages/core/src/lib/temp.ts
index b4f6cd9..e95992d 100644
--- a/packages/core/src/lib/temp.ts
+++ b/packages/core/src/lib/temp.ts
@@ -1,4 +1,4 @@
-import { TypeHelperWrapperDotDirection, TypePoint } from '@idraw/types';
+import { TypeHelperWrapperControllerDirection, TypePoint } from '@idraw/types';
 import { Mode, CursorStatus } from './../constant/static';
 
 type TempDataDesc = {
@@ -9,8 +9,8 @@ type TempDataDesc = {
   selectedUUID: string | null,
   selectedUUIDList: string[],
   hoverUUID: string | null,
-  selectedDotDirection: TypeHelperWrapperDotDirection | null,
-  hoverDotDirection: TypeHelperWrapperDotDirection | null,
+  selectedControllerDirection: TypeHelperWrapperControllerDirection | null,
+  hoverControllerDirection: TypeHelperWrapperControllerDirection | null,
   prevPoint: TypePoint | null,
 }
 
@@ -23,8 +23,8 @@ function createData(): TempDataDesc {
     selectedUUID: null,
     selectedUUIDList: [],
     hoverUUID: null,
-    selectedDotDirection: null,
-    hoverDotDirection: null,
+    selectedControllerDirection: null,
+    hoverControllerDirection: null,
     prevPoint: null,
   }
 }
diff --git a/packages/core/src/mixins/event.ts b/packages/core/src/mixins/event.ts
index db70ed9..209a9e3 100644
--- a/packages/core/src/mixins/event.ts
+++ b/packages/core/src/mixins/event.ts
@@ -1,4 +1,4 @@
-import { TypePoint, TypeHelperWrapperDotDirection } from '@idraw/types';
+import { TypePoint, TypeHelperWrapperControllerDirection } from '@idraw/types';
 import util from '@idraw/util';
 import Core from './../index';
 import {
@@ -67,12 +67,12 @@ function handlePoint(core: Core) {
       core[_tempData].set('mode', Mode.SELECT_ELEMENT_LIST);
     } else {
       const {
-        uuid, selectedDotDirection
-      } = core[_helper].isPointInElementWrapperDot(point, core[_data]);
-      if (uuid && selectedDotDirection) {
+        uuid, selectedControllerDirection
+      } = core[_helper].isPointInElementWrapperController(point, core[_data]);
+      if (uuid && selectedControllerDirection) {
         // Controll Element-Wrapper
-        core[_tempData].set('mode', Mode.SELECT_ELEMENT_WRAPPER_DOT);
-        core[_tempData].set('selectedDotDirection', selectedDotDirection);
+        core[_tempData].set('mode', Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER);
+        core[_tempData].set('selectedControllerDirection', selectedControllerDirection);
         core[_tempData].set('selectedUUID', uuid);
       } else {
         const [index, uuid] = core[_element].isPointInElement(point, core[_data]);
@@ -148,13 +148,13 @@ function handleMove(core: Core) {
         dragElements(core, [core[_tempData].get('selectedUUID') as string], point, core[_tempData].get('prevPoint'));
         core[_draw]();
         core[_tempData].set('cursorStatus', CursorStatus.DRAGGING);
-      } else if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT_WRAPPER_DOT && core[_tempData].get('selectedDotDirection')) {
+      } else if (core[_tempData].get('mode') === Mode.SELECT_ELEMENT_WRAPPER_CONTROLLER && core[_tempData].get('selectedControllerDirection')) {
         transfromElement(
           core,
           core[_tempData].get('selectedUUID') as string,
           point,
           core[_tempData].get('prevPoint'),
-          core[_tempData].get('selectedDotDirection') as TypeHelperWrapperDotDirection
+          core[_tempData].get('selectedControllerDirection') as TypeHelperWrapperControllerDirection
         );
         core[_tempData].set('cursorStatus', CursorStatus.DRAGGING)
       }
@@ -283,7 +283,7 @@ function handleLeave(core: Core) {
 
 function transfromElement(
   core: Core,
-  uuid: string, point: TypePoint, prevPoint: TypePoint|null, direction: TypeHelperWrapperDotDirection
+  uuid: string, point: TypePoint, prevPoint: TypePoint|null, direction: TypeHelperWrapperControllerDirection
 ): null | {
   width: number,
   height: number,
diff --git a/packages/idraw/examples/test/api.html b/packages/idraw/examples/test/api.html
index 3195b56..72dfd2c 100644
--- a/packages/idraw/examples/test/api.html
+++ b/packages/idraw/examples/test/api.html
@@ -129,7 +129,7 @@
       }
       var config = {
         elementWrapper: {
-          dotSize: 4,
+          controllerSize: 4,
         }
       }
     </script>
diff --git a/packages/types/src/lib/config.ts b/packages/types/src/lib/config.ts
index 2e538a5..a422bd1 100644
--- a/packages/types/src/lib/config.ts
+++ b/packages/types/src/lib/config.ts
@@ -1,7 +1,7 @@
 type TypeConfig = {
   elementWrapper?: {
     color?: string,
-    dotSize?: number,
+    controllerSize?: number,
     lineWidth?: number,
     lineDash?: number[],
   },
@@ -16,7 +16,7 @@ type TypeConfigStrict = TypeConfig & {
   elementWrapper: {
     color: string,
     lockColor: string,
-    dotSize: number,
+    controllerSize: number,
     lineWidth: number,
     lineDash: number[],
   },
diff --git a/packages/types/src/lib/helper.ts b/packages/types/src/lib/helper.ts
index 5e09839..a32b90d 100644
--- a/packages/types/src/lib/helper.ts
+++ b/packages/types/src/lib/helper.ts
@@ -3,24 +3,24 @@ import { TypePoint } from './board';
 
 // type test = {[uuid string]: TypeElement}
 
-type TypeDot =  TypePoint & {
+type TypeController =  TypePoint & {
   invisible?: boolean;
 };
 
 type TypeHeplerSelectedElementWrapper = {
   uuid: string;
-  dotSize: number;
+  controllerSize: number;
   lock: boolean;
-  dots: {
-    topLeft: TypeDot,
-    top: TypeDot,
-    topRight: TypeDot,
-    right: TypeDot,
-    bottomRight: TypeDot,
-    bottom: TypeDot,
-    bottomLeft: TypeDot,
-    left: TypeDot,
-    rotate: TypeDot,
+  controllers: {
+    topLeft: TypeController,
+    top: TypeController,
+    topRight: TypeController,
+    right: TypeController,
+    bottomRight: TypeController,
+    bottom: TypeController,
+    bottomLeft: TypeController,
+    left: TypeController,
+    rotate: TypeController,
   },
   lineDash: number[];
   lineWidth: number;
@@ -69,7 +69,7 @@ interface TypeHelper {
   getConfig(): TypeHelperConfig;
 }
 
-type TypeHelperWrapperDotDirection 
+type TypeHelperWrapperControllerDirection 
 = 'top-left' | 'top' | 'top-right' | 'right'
 | 'bottom-right' | 'bottom' | 'bottom-left' | 'left'
 | 'rotate';
@@ -78,7 +78,7 @@ export {
   TypeHelper,
   TypeHelperConfig,
   TypeHelperUpdateOpts,
-  TypeHelperWrapperDotDirection,
+  TypeHelperWrapperControllerDirection,
   TypeHeplerSelectedElementWrapper,
   TypeHeplerSelectedAreaWrapper,
 };
\ No newline at end of file