feat: add customizable styles for drag guides and containers in ComponentDrag

packages/core/src/commands/view/ComponentDrag.ts

@@ -31,6 +31,16 @@ type Opts = {
   onStart?: (data: any) => Editor;
   onDrag?: (data: any) => Editor;
   onEnd?: (ev: Event, opt: any, data: any) => void;
+  styles?: {
+    guides?: {
+      active?: { color?: string };
+      inactive?: { color?: string };
+    };
+    guidesContainer?: {
+      line?: HTMLElement['style'];
+      content?: HTMLElement['style'];
+    };
+  };
 };
 
 const evName = 'dmode';
@@ -63,7 +73,22 @@ export default {
       ...dragger,
     };
     this.setupGuides();
-    this.opts = opts;
+    this.opts = {
+      ...opts,
+      // debug: true
+      styles: {
+        guides: {
+          active: { color: 'green' },
+          inactive: { color: 'red' },
+        },
+        guidesContainer: {
+          line: { 'background-color': 'blue' },
+          content: { color: 'blue' },
+        },
+        ...opts.styles,
+      },
+    };
+    // this.opts = opts;
     this.editor = editor;
     this.em = editor.getModel();
     this.target = target;
@@ -116,8 +141,11 @@ export default {
       const pfx = editor.getConfig().stylePrefix;
       const elInfoX = document.createElement('div');
       const elInfoY = document.createElement('div');
-      const guideContent = `<div class="${pfx}guide-info__line ${pfx}danger-bg">
+      const guideInfoLineStyles = this.opts?.styles?.guidesContainer?.line;
-        <div class="${pfx}guide-info__content ${pfx}danger-color"></div>
+      const guideInfoContentStyles = this.opts?.styles?.guidesContainer?.content;
+
+      const guideContent = `<div class="${pfx}guide-info__line ${pfx}danger-bg" ${guideInfoLineStyles ? `style="${styleObjectToString(guideInfoLineStyles)}"` : ''}>
+        <div class="${pfx}guide-info__content ${pfx}danger-color" ${guideInfoContentStyles ? `style="${styleObjectToString(guideInfoContentStyles)}"` : ''}></div>
       </div>`;
       guidesEl = document.createElement('div');
       guidesEl.className = `${pfx}guides`;
@@ -205,11 +233,15 @@ export default {
     const un = 'px';
     const guideSize = item.active ? 2 : 1;
     let numEl = el.children[0];
-    el.style = `position: absolute; background-color: ${item.active ? 'green' : 'red'};`;
+
+    const colorActive = this.opts?.styles?.guides?.active?.color ?? 'green';
+    const colorInactive = this.opts?.styles?.guides?.inactive?.color ?? 'red';
+
+    el.style = `position: absolute; background-color: ${item.active ? colorActive : colorInactive};`;
 
     if (!el.children.length) {
       numEl = document.createElement('div');
-      numEl.style = 'position: absolute; color: red; padding: 5px; top: 0; left: 0;';
+      numEl.style = `position: absolute; color: ${colorInactive}; padding: 5px; top: 0; left: 0;`;
       el.appendChild(numEl);
     }
 
@@ -488,3 +520,9 @@ export default {
     [k: string]: any;
   }
 >;
+
+function styleObjectToString(style: HTMLElement['style']): string {
+  return Object.entries(style)
+    .map(([key, value]) => `${key}: ${value}`)
+    .join('; ');
+}