move logic to native

doric-android/doric/src/main/java/pub/doric/shader/DraggableNode.java

@@ -61,11 +61,12 @@ public class DraggableNode extends StackNode {
                 case MotionEvent.ACTION_MOVE:
                     int offsetX = x - lastX;
                     int offsetY = y - lastY;
-                    callJSResponse(onDrag, DoricUtils.px2dp(offsetX), DoricUtils.px2dp(offsetY));
+                    layout(getLeft() + offsetX, getTop() + offsetY, getRight() + offsetX, getBottom() + offsetY);
                     break;
                 case MotionEvent.ACTION_UP:
                     break;
             }
+            callJSResponse(onDrag, DoricUtils.px2dp(event.getRawX() - x), DoricUtils.px2dp(event.getRawY() - y));
             return true;
         }
     }

doric-demo/src/DraggableDemo.ts

@@ -1,4 +1,4 @@
-import { Panel, Group, vlayout, layoutConfig, draggable, Color, Text, Draggable, modal, Gravity, loge} from "doric";
+import { Panel, Group, vlayout, layoutConfig, draggable, Color, Text, Draggable, modal, Gravity, stack} from "doric";
 import { title } from "./utils";
 @Entry
 class DraggableDemo extends Panel {
@@ -13,16 +13,9 @@ class DraggableDemo extends Panel {
             }
         })
         let drag: Draggable
-        let lastX: number = 0
-        let lastY: number = 0
         drag = draggable({
             onDrag: (x: number, y: number) => {
-                lastX += x
-                lastY += y
-                drag.translationX = lastX
-                drag.translationY = lastY
-                loge(lastX)
-                text.text = "x: " + lastX.toFixed(0) + " y: " + lastY.toFixed(0)
+                text.text = "x: " + x.toFixed(0) + " y: " + y.toFixed(0)
             }
         }, [ text ]).apply({
             layoutConfig: layoutConfig().just(),
@@ -32,7 +25,11 @@ class DraggableDemo extends Panel {
         })
         vlayout([
             title("Draggable Demo"),
-            drag
+            stack([
+                drag,
+            ]).apply({
+                layoutConfig: layoutConfig().most()
+            })
         ])
             .apply({
                 layoutConfig: layoutConfig().most(),

doric-iOS/Pod/Classes/Shader/DoricDraggableNode.m

@@ -32,8 +32,12 @@ - (DoricStackView *)build {
 
 - (void)onDrag:(UIPanGestureRecognizer *)gesture {
     CGPoint point = [gesture translationInView:self.view];
+    CGRect originalFrame = self.view.frame;
+    originalFrame.origin.x += point.x;
+    originalFrame.origin.y += point.y;
+    self.view.frame = originalFrame;
     [gesture setTranslation:CGPointZero inView:self.view];
-    [self callJSResponse:_onDragFunction, @(point.x), @(point.y), nil];
+    [self callJSResponse:_onDragFunction, @(originalFrame.origin.x), @(originalFrame.origin.y), nil];
 }
 
 - (void)blendView:(DoricStackView *)view forPropName:(NSString *)name propValue:(id)prop {

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,15 +5061,10 @@ ${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);
-                }
-            }
         }
         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)
-            }
         }
     }
 

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
 
@@ -61,3 +62,4 @@ registerViewNode('Image', DoricImageNode)
 registerViewNode('Scroller', DoricScrollerNode)
 registerViewNode('ListItem', DoricListItemNode)
 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
+        }
+    }
+}