From 0d31756979a73014cafcfc36e24dbf8485bfe0f5 Mon Sep 17 00:00:00 2001
From: jalal246 <jimmy002020@gmail.com>
Date: Fri, 22 Jul 2022 22:43:52 +0200
Subject: [PATCH] init

---
 .../dflex-draggable-playground/vite.config.ts |  4 ++
 packages/dflex-draggable/package.json         |  3 +-
 .../src/DFlexDraggableStore.ts                | 43 ++++++++++++++++---
 3 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/packages/dflex-draggable-playground/vite.config.ts b/packages/dflex-draggable-playground/vite.config.ts
index 74b3faa19..f4e911639 100644
--- a/packages/dflex-draggable-playground/vite.config.ts
+++ b/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 = {
diff --git a/packages/dflex-draggable/package.json b/packages/dflex-draggable/package.json
index 8eeebae8d..657d61600 100644
--- a/packages/dflex-draggable/package.json
+++ b/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",
diff --git a/packages/dflex-draggable/src/DFlexDraggableStore.ts b/packages/dflex-draggable/src/DFlexDraggableStore.ts
index a71d9fd2a..05b19a116 100644
--- a/packages/dflex-draggable/src/DFlexDraggableStore.ts
+++ b/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;
 })();