move logic to native

doric-web/dist/index.js

@@ -3200,6 +3200,33 @@ __decorate$a([
     __metadata$a("design:type", Function)
 ], NestedSlider.prototype, "onPageSlided", void 0);
 
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$b = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+class Draggable extends Stack {
+}
+__decorate$b([
+    Property,
+    __metadata$b("design:type", Function)
+], Draggable.prototype, "onDrag", void 0);
+function draggable(config, views) {
+    const ret = new Draggable;
+    ret.layoutConfig = layoutConfig().fit();
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    for (let v of views) {
+        ret.addChild(v);
+    }
+    return ret;
+}
+
 function modal(context) {
     return {
         toast: (msg, gravity = Gravity.Bottom) => {
@@ -3585,6 +3612,7 @@ exports.CENTER = CENTER;
 exports.CENTER_X = CENTER_X;
 exports.CENTER_Y = CENTER_Y;
 exports.Color = Color;
+exports.Draggable = Draggable;
 exports.FlowLayout = FlowLayout;
 exports.FlowLayoutItem = FlowLayoutItem;
 exports.Gravity = Gravity;
@@ -3622,6 +3650,7 @@ exports.View = View;
 exports.ViewHolder = ViewHolder;
 exports.ViewModel = ViewModel;
 exports.animate = animate;
+exports.draggable = draggable;
 exports.flowItem = flowItem;
 exports.flowlayout = flowlayout;
 exports.gravity = gravity;
@@ -4756,6 +4785,56 @@ var doric_web = (function (exports, axios, sandbox) {
         }
     }
 
+    class DoricDraggableNode extends DoricStackNode {
+        constructor() {
+            super(...arguments);
+            this.onDrag = "";
+            this.dragging = false;
+            this.lastX = 0;
+            this.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, propName, prop) {
+            switch (propName) {
+                case 'onDrag':
+                    this.onDrag = prop;
+                    break;
+                default:
+                    super.blendProps(v, propName, prop);
+                    break;
+            }
+        }
+    }
+
     const bundles = new Map;
     const plugins = new Map;
     const nodes = new Map;
@@ -4790,6 +4869,7 @@ var doric_web = (function (exports, axios, sandbox) {
     registerViewNode('Scroller', DoricScrollerNode);
     registerViewNode('ListItem', DoricListItemNode);
     registerViewNode('List', DoricListNode);
+    registerViewNode('Draggable', DoricDraggableNode);
 
     function getScriptId(contextId) {
         return `__doric_script_${contextId}`;
@@ -4981,14 +5061,9 @@ ${content}
         }
         connectedCallback() {
             if (this.src && this.context === undefined) {
-                if (this.src.startsWith("http")) {
-                    axios.get(this.src).then(result => {
-                        this.load(result.data);
-                    });
-                }
-                else {
-                    this.load(this.src);
-                }
+                axios.get(this.src).then(result => {
+                    this.load(result.data);
+                });
             }
         }
         disconnectedCallback() {

doric-web/index.html

@@ -24,7 +24,7 @@
                 点击返回
             </h2>
         </div>
-        <doric-div src="./dist/DoricPlayground.js" alias="test">
+        <doric-div src="../doric-demo/bundle/src/DraggableDemo.js" alias="test">
         </doric-div>
     </doric-navigation>
     <script type="text/javascript" src="./dist/index.js"></script>

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
+        }
+    }
+}