抽象了Component基类

__tests__/unit/ui/icon/index.spec.ts

@@ -34,5 +34,15 @@ describe('icon', () => {
     });
 
     canvas.appendChild(icon);
+
+    icon.update({
+      size: 16,
+      spacing: 10,
+      symbol:
+        'data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
+    });
+
+    icon.destroy();
+    canvas.destroy();
   });
 });

__tests__/unit/ui/marker/index.spec.ts

@@ -9,34 +9,28 @@ const renderer = new CanvasRenderer({
   enableDirtyRectangleRendering: true,
 });
 
-describe('marker', () => {
-  test('basic', async () => {
-    const div = createDiv();
-
-    // @ts-ignore
-    const canvas = new Canvas({
-      container: div,
-      width: 300,
-      height: 300,
-      renderer,
-    });
-
-    const marker = new Marker({
-      attrs: {
-        symbol: 'triangle-down',
-        x: 50,
-        y: 50,
-        r: 16,
-        fill: 'green',
-      },
-    });
-
-    canvas.appendChild(marker);
+const div = createDiv();
+
+// @ts-ignore
+const canvas = new Canvas({
+  container: div,
+  width: 300,
+  height: 300,
+  renderer,
+});
 
-    expect(marker.getPathShape().getBounds().center[0]).toBe(100);
-    expect(marker.getPathShape().getBounds().center[1]).toBe(100);
-  });
+const marker = new Marker({
+  attrs: {
+    symbol: 'triangle-down',
+    x: 50,
+    y: 50,
+    size: 16,
+    fill: 'green',
+  },
+});
+canvas.appendChild(marker);
 
+describe('marker', () => {
   test('customize marker', async () => {
     Marker.registerSymbol(
       'star',
@@ -45,26 +39,15 @@ describe('marker', () => {
       )
     );
 
-    const div = createDiv();
-
-    // @ts-ignore
-    const canvas = new Canvas({
-      container: div,
-      width: 300,
-      height: 300,
-      renderer,
+    marker.update({
+      symbol: 'star',
+      x: 50,
+      y: 50,
+      size: 16,
+      stroke: 'red',
     });
-
-    const marker = new Marker({
-      attrs: {
-        symbol: 'star',
-        x: 50,
-        y: 50,
-        r: 16,
-        stroke: 'red',
-      },
-    });
-
-    canvas.appendChild(marker);
   });
 });
+
+marker.destroy();
+canvas.destroy();

__tests__/unit/ui/scrollbar/index.spec.ts

@@ -19,30 +19,33 @@ const renderer = new CanvasRenderer({
   enableDirtyRectangleRendering: true,
 });
 
+const div = createDiv();
+
+// @ts-ignore
+const canvas = new Canvas({
+  container: div,
+  width: 300,
+  height: 300,
+  renderer,
+});
+
+const height = 100;
+const thumbLen = 30;
+const scrollbar = new Scrollbar({
+  attrs: {
+    height,
+    thumbLen,
+    x: 100,
+    y: 5,
+    value: 0.5,
+    width: 20,
+  },
+});
+
+canvas.appendChild(scrollbar);
+
 describe('scrollbar', () => {
   test('basic', async () => {
-    const div = createDiv();
-
-    // @ts-ignore
-    const canvas = new Canvas({
-      container: div,
-      width: 300,
-      height: 300,
-      renderer,
-    });
-
-    const height = 100;
-    const thumbLen = 30;
-    const scrollbar = new Scrollbar({
-      attrs: {
-        height,
-        thumbLen,
-        x: 100,
-        y: 5,
-        value: 0.5,
-        width: 20,
-      },
-    });
     expect(scrollbar.getValue()).toBe(0.5);
 
     const { padding } = scrollbar.attributes;
@@ -52,128 +55,111 @@ describe('scrollbar', () => {
     let value = 0.2;
     scrollbar.setValue(value);
     expect(scrollbar.getValue()).toBe(value);
-    expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
+
+    expect(scrollbar.getElementsByName('thumb')[0].attr('y')).toBeCloseTo(
       top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
       1
     );
 
     value = 0.1;
     scrollbar.setValue(value);
     expect(scrollbar.getValue()).toBe(value);
-    expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
+    expect(scrollbar.getElementsByName('thumb')[0].attr('y')).toBeCloseTo(
       top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
       1
     );
 
     value = 0.9;
     scrollbar.setValue(value);
     expect(scrollbar.getValue()).toBe(value);
-    expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
+    expect(scrollbar.getElementsByName('thumb')[0].attr('y')).toBeCloseTo(
       top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
       1
     );
 
     value = 10;
     scrollbar.setValue(value);
     expect(scrollbar.getValue()).toBe(value);
-    expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
+    expect(scrollbar.getElementsByName('thumb')[0].attr('y')).toBeCloseTo(
       top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
       1
     );
 
     value = -10086;
     scrollbar.setValue(value);
     expect(scrollbar.getValue()).toBe(value);
-    expect(scrollbar.lastChild.attributes.y).toBeCloseTo(
+    expect(scrollbar.getElementsByName('thumb')[0].attr('y')).toBeCloseTo(
       top + (height - verticalPadding - thumbLen) * clamp(value, 0, 1),
       1
     );
-
-    canvas.appendChild(scrollbar);
-
-    // scrollbar.destroy();
-    // canvas.destroy();
   });
 
   test('horizontal', async () => {
-    const div = createDiv();
-
-    // @ts-ignore
-    const canvas = new Canvas({
-      container: div,
-      width: 300,
-      height: 300,
-      renderer,
-    });
-
     const width = 100;
     const thumbLen = 30;
-
-    const scrollbar = new Scrollbar({
-      attrs: {
-        width,
-        thumbLen,
-        x: 10,
-        y: 50,
-        orient: 'horizontal',
-        height: 20,
-        value: 0.5,
-      },
+    scrollbar.update({
+      width,
+      thumbLen,
+      x: 10,
+      y: 50,
+      orient: 'horizontal',
+      height: 20,
+      value: 0.5,
     });
 
     expect(scrollbar.getValue()).toBe(0.5);
 
     const { padding } = scrollbar.attributes;
     const [, right, , left] = padding;
-
     const horizonPadding = left + right;
 
     let value = 0.2;
     scrollbar.setValue(value);
     expect(scrollbar.getValue()).toBe(value);
-    expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
+    expect(scrollbar.getElementsByName('thumb')[0].attr('x')).toBeCloseTo(
       left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
       1
     );
 
     value = 0.1;
     scrollbar.setValue(value);
     expect(scrollbar.getValue()).toBe(value);
-    expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
+    expect(scrollbar.getElementsByName('thumb')[0].attr('x')).toBeCloseTo(
       left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
       1
     );
 
     value = 0.9;
     scrollbar.setValue(value);
     expect(scrollbar.getValue()).toBe(value);
-    expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
+    expect(scrollbar.getElementsByName('thumb')[0].attr('x')).toBeCloseTo(
       left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
       1
     );
 
     value = 10;
     scrollbar.setValue(value);
     expect(scrollbar.getValue()).toBe(value);
-    expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
+    expect(scrollbar.getElementsByName('thumb')[0].attr('x')).toBeCloseTo(
       left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
       1
     );
 
     value = -10086;
     scrollbar.setValue(value);
     expect(scrollbar.getValue()).toBe(value);
-    expect(scrollbar.lastChild.attributes.x).toBeCloseTo(
+    expect(scrollbar.getElementsByName('thumb')[0].attr('x')).toBeCloseTo(
       left + (width - horizonPadding - thumbLen) * clamp(value, 0, 1),
       1
     );
 
     scrollbar.addEventListener('valuechange', (e) => {
-      console.log('scroll: ', e);
+      e;
     });
 
     canvas.appendChild(scrollbar);
-    // scrollbar.destroy();
-    // canvas.destroy();
   });
 });
+
+// scrollbar.destroy();
+// canvas.destroy();