move logic to native

doric-web/src/DoricElement.ts

@@ -23,13 +23,9 @@ export class DoricElement extends HTMLElement {
 
     connectedCallback() {
         if (this.src && this.context === undefined) {
-            if (this.src.startsWith("http")) {
-                axios.get<string>(this.src).then(result => {
-                    this.load(result.data)
-                })
-            } else {
-                this.load(this.src)
-            }
+            axios.get<string>(this.src).then(result => {
+                this.load(result.data)
+            })
         }
     }
 

doric-web/src/DoricRegistry.ts

@@ -13,6 +13,7 @@ import { NavigatorPlugin } from "./navigate/NavigatorPlugin"
 import { PopoverPlugin } from './plugins/PopoverPlugin'
 import { DoricListItemNode } from "./shader/DoricListItemNode"
 import { DoricListNode } from "./shader/DoricListNode"
+import { DoricDraggableNode } from "./shader/DoricDraggableNode"
 
 const bundles: Map<string, string> = new Map
 
@@ -60,4 +61,5 @@ registerViewNode('Text', DoricTextNode)
 registerViewNode('Image', DoricImageNode)
 registerViewNode('Scroller', DoricScrollerNode)
 registerViewNode('ListItem', DoricListItemNode)
-registerViewNode('List', DoricListNode)
+registerViewNode('List', DoricListNode)
+registerViewNode('Draggable', DoricDraggableNode)

doric-web/src/shader/DoricDraggableNode.ts

@@ -0,0 +1,52 @@
+import { DoricStackNode } from "./DoricStackNode";
+
+export class DoricDraggableNode extends DoricStackNode {
+
+    onDrag: string = ""
+    dragging = false
+    lastX = 0
+    lastY = 0
+    build() {
+        const ret = document.createElement('div')
+        ret.ontouchstart = (event) => {
+            console.log("ontouchstart: " + event)
+        }
+        ret.onmousedown = (event) => {
+            this.dragging = true
+            this.lastX = event.x
+            this.lastY = event.y
+        }
+        ret.onmousemove = (event) => {
+            if (this.dragging) {
+                this.offsetX += (event.x - this.lastX)
+                this.offsetY += (event.y - this.lastY)
+                this.callJSResponse(this.onDrag, this.offsetX, this.offsetY)
+
+                this.lastX = event.x
+                this.lastY = event.y
+            }
+        }
+        ret.onmouseup = (event) => {
+            this.dragging = false
+
+            this.lastX = event.x
+            this.lastY = event.y
+        }
+        ret.onmouseout = (event) => {
+            this.dragging = false
+        }
+        ret.style.position = "relative"
+        return ret
+    }
+
+    blendProps(v: HTMLElement, propName: string, prop: any) {
+        switch (propName) {
+            case 'onDrag':
+                this.onDrag = prop
+                break
+            default:
+                super.blendProps(v, propName, prop)
+                break
+        }
+    }
+}