tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

move logic to native

Browse Source
This commit is contained in:
王劲鹏 2020-01-04 14:43:28 +08:00 committed by osborn
parent 131ba87104
commit 8f0457101c
9 changed files with 157 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
doric-android/doric/src/main/java/pub/doric/shader/DraggableNode.java
View File

@ -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;
}
}

17
doric-demo/src/DraggableDemo.ts
View File

@ -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(),

6
doric-iOS/Pod/Classes/Shader/DoricDraggableNode.m
View File

@ -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 {

91
doric-web/dist/index.js vendored
View File

@ -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() {

2
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
doric-web/index.html
View File

@ -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>

10
doric-web/src/DoricElement.ts
View File

@ -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)
})
}
}

4
doric-web/src/DoricRegistry.ts
View File

@ -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)

52
doric-web/src/shader/DoricDraggableNode.ts Normal file
View File

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