feat(box): add renderfloatingtoolbar event

lakejs · Nov 1, 2024 · 9537369 · 9537369
1 parent 323624c
commit 9537369
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 16 deletions.
diff --git a/src/models/box.ts b/src/models/box.ts
@@ -154,6 +154,7 @@ export class Box {
       this.toolbar.updateState({
         appliedItems,
       });
+      this.event.emit('renderfloatingtoolbar');
     });
     this.event.on('blur', () => {
       if (this.toolbar) {

diff --git a/tests/boxes/image.test.ts b/tests/boxes/image.test.ts
@@ -24,6 +24,8 @@ describe('boxes / image', () => {
       originalUrl: mediumOriginalUrl,
       originalWidth: 1024,
       originalHeight: 731,
+      width: 512,
+      height: 365,
       status: 'done',
       name: 'heaven-lake-512.png',
       size: 60008,
@@ -37,11 +39,7 @@ describe('boxes / image', () => {
     rootNode.remove();
   });
 
-  it('should open full screen', done => {
-    const boxNode = box.node;
-    box.event.once('render', () => {
-      click(boxNode.find('.lake-corner-toolbar button[name="view"]'));
-    });
+  it('corner-toolbar: should open full screen', done => {
     box.event.once('closefullscreen', () => {
       const value = removeBoxValueFromHTML(editor.getValue());
       debug(`output: ${value}`);
@@ -51,25 +49,25 @@ describe('boxes / image', () => {
     box.event.once('openfullscreen', () => {
       click(query('.lake-pswp .pswp__button--close'));
     });
+    box.event.once('render', () => {
+      click(box.node.find('.lake-corner-toolbar button[name="view"]'));
+    });
   });
 
-  it('should remove the box', done => {
-    const boxNode = box.node;
+  it('corner-toolbar: should remove the box', done => {
     box.event.once('render', () => {
-      click(boxNode.find('.lake-corner-toolbar button[name="remove"]'));
+      click(box.node.find('.lake-corner-toolbar button[name="remove"]'));
       const value = editor.getValue();
       debug(`output: ${value}`);
       expect(value).to.equal('<p>foo<focus />bar</p>');
       done();
     });
   });
 
-  it('should resize the image', done => {
+  it('resizer: should resize the image', done => {
     const pointerId = isFirefox ? 0 : 1;
-    const boxNode = box.node;
     box.event.once('render', () => {
-      click(boxNode.find('.lake-image-img'));
-      const oldWidth = boxNode.width();
+      const oldWidth = box.node.width();
       const pointerdownEvent = new PointerEvent('pointerdown', {
         pointerId,
         clientX: 500,
@@ -85,13 +83,69 @@ describe('boxes / image', () => {
         clientX: 300,
         clientY: 300,
       });
-      boxNode.find('.lake-resizer-bottom-right').emit('pointerdown', pointerdownEvent);
-      boxNode.find('.lake-resizer-bottom-right').emit('pointermove', pointermoveEvent);
-      boxNode.find('.lake-resizer-bottom-right').emit('pointerup', pointerupEvent);
-      const newWidth = boxNode.width();
+      box.node.find('.lake-resizer-bottom-right').emit('pointerdown', pointerdownEvent);
+      box.node.find('.lake-resizer-bottom-right').emit('pointermove', pointermoveEvent);
+      box.node.find('.lake-resizer-bottom-right').emit('pointerup', pointerupEvent);
+      const newWidth = box.node.width();
       expect(newWidth).to.equal(oldWidth - 200);
       done();
     });
   });
 
+  it('floating-toolbar: should show caption', done => {
+    box.event.once('renderfloatingtoolbar', () => {
+      expect(box.toolbar !== null).to.equal(true);
+      if (!box.toolbar) {
+        return done();
+      }
+      click(box.toolbar.root.find('button[name="caption"]'));
+      expect(box.node.find('.lake-image-caption').computedCSS('display')).to.equal('block');
+      done();
+    });
+    box.event.once('render', () => {
+      window.setTimeout(() => {
+        click(box.node.find('.lake-image-img'));
+      }, 50);
+    });
+  });
+
+  it('floating-toolbar: should align to center', done => {
+    box.event.once('renderfloatingtoolbar', () => {
+      expect(box.toolbar !== null).to.equal(true);
+      if (!box.toolbar) {
+        return done();
+      }
+      click(box.toolbar.root.find('div[name="align"] .lake-dropdown-title'));
+      click(box.toolbar.root.find('div[name="align"] li[value="center"]'));
+      const value = removeBoxValueFromHTML(editor.getValue());
+      debug(`output: ${value}`);
+      expect(value).to.equal('<p style="text-align: center;">foo<lake-box type="inline" name="image" focus="center"></lake-box>bar</p>');
+      done();
+    });
+    box.event.once('render', () => {
+      window.setTimeout(() => {
+        click(box.node.find('.lake-image-img'));
+      }, 50);
+    });
+  });
+
+  it('floating-toolbar: should resize', done => {
+    box.event.once('renderfloatingtoolbar', () => {
+      expect(box.toolbar !== null).to.equal(true);
+      if (!box.toolbar) {
+        return done();
+      }
+      expect(box.value.width).to.equal(512);
+      click(box.toolbar.root.find('div[name="resize"] .lake-dropdown-title'));
+      click(box.toolbar.root.find('div[name="resize"] li[value="1.00"]'));
+      expect(box.value.width).to.equal(1024);
+      done();
+    });
+    box.event.once('render', () => {
+      window.setTimeout(() => {
+        click(box.node.find('.lake-image-img'));
+      }, 50);
+    });
+  });
+
 });