Initiate elements after registration in dflex/draggable

packages/dflex-draggable-playground/vite.config.ts

@@ -23,6 +23,10 @@ const moduleResolution = [
     find: "@dflex/dom-gen",
     replacement: path.resolve("../dflex-dom-gen/src/index.ts"),
   },
+  {
+    find: "@dflex/draggable",
+    replacement: path.resolve("../dflex-draggable/src/index.ts"),
+  },
 ];
 
 const config: UserConfigExport = {

packages/dflex-draggable/package.json

@@ -20,8 +20,7 @@
   "scripts": {
     "clean": "rimraf ./dist ./types tsconfig.tsbuildinfo",
     "compile": "pnpm clean && pnpm tsc -b",
-    "emit": "tsc --emitDeclarationOnly",
-    "server": "pnpm start --filter dflex-draggable-playground"
+    "emit": "tsc --emitDeclarationOnly"
   },
   "homepage": "https://github.com/dflex-js/dflex/tree/master/packages/draggable",
   "repository": "https://github.com/dflex-js/dflex",

packages/dflex-draggable/src/DFlexDraggableStore.ts

@@ -1,22 +1,55 @@
 import DFlexBaseStore from "@dflex/store";
+import { canUseDOM } from "@dflex/utils";
+
+declare global {
+  // eslint-disable-next-line
+  var $DFlex_Draggable: DFlexDraggableStore;
+}
 
 class DFlexDraggableStore extends DFlexBaseStore {
+  constructor() {
+    super();
+    this._initBranch = this._initBranch.bind(this);
+    this._initElmDOMInstance = this._initElmDOMInstance.bind(this);
+  }
+
+  private _initElmDOMInstance(id: string) {
+    const [dflexNode, DOM] = this.getElmWithDOM(id);
+
+    dflexNode.resume(DOM, 0, 0);
+  }
+
+  private _initBranch(SK: string) {
+    this.getElmBranchByKey(SK).forEach(this._initElmDOMInstance);
+  }
+
   /**
    * Register element for Draggable store.
    * @param id
    */
   // @ts-ignore
   register(id: string) {
-    super.register({
-      id,
-      depth: 0,
-      readonly: false,
-    });
+    super.register(
+      {
+        id,
+        depth: 0,
+        readonly: false,
+      },
+      this._initBranch
+    );
   }
 }
 
 export default (function createStoreInstance() {
   const store = new DFlexDraggableStore();
 
+  if (__DEV__) {
+    if (canUseDOM()) {
+      if (!globalThis.$DFlex_Draggable) {
+        globalThis.$DFlex_Draggable = store;
+      }
+    }
+  }
+
   return store;
 })();