745: Relative positioning feature

dist/log/20210118.md

@@ -0,0 +1,5 @@
+
+## Version 0.3.0
+
+New feature:
+- Now newly created flaps will locate themselves based on the relative locations of the corresponding vertices on the sheet.

dist/log/log.js

@@ -1 +1 @@
-let logs=[20201224,20201229,20210108]
+let logs=[20201224,20201229,20210108,20210118]

src/app/index.htm

@@ -9,7 +9,7 @@
 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no">
 	<meta name="description" content="Super-complex origami design made easy!">
 	<meta name="google" content="notranslate">
-	<meta name="version" content="0.2.10">
+	<meta name="version" content="0.3.0">
 
 	<!-- Global site tag (gtag.js) - Google Analytics -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=G-GG1TEZGBCQ"></script>
@@ -20,7 +20,7 @@
 			page_title: document.title,
 			page_path: "/",
 			app_name: document.title,
-			app_version: "741"
+			app_version: "745"
 		};
 		gtag('js', new Date());
 		gtag('config', 'G-GG1TEZGBCQ', app_config);

src/core/BPStudio.ts

@@ -95,17 +95,11 @@
 	public create(json: any): Design {
 		Object.assign(json, {
 			version: Migration.current,
-			layout: {
-				flaps: [
-					{ id: 0, width: 0, height: 0, x: 8, y: 7 },
-					{ id: 2, width: 0, height: 0, x: 8, y: 9 }
-				]
-			},
 			tree: {
 				nodes: [
-					{ id: 0, name: "", x: 10, y: 13 },
+					{ id: 0, name: "", x: 10, y: 7 },
 					{ id: 1, name: "", x: 10, y: 10 },
-					{ id: 2, name: "", x: 10, y: 7 }
+					{ id: 2, name: "", x: 10, y: 13 }
 				],
 				edges: [
 					{ n1: 0, n2: 1, length: 1 },

src/core/class/Draggable.ts

@@ -39,15 +39,20 @@ abstract class Draggable extends ViewedControl {
 			if(!by.eq(this.location)) this.design.history.takeAction(() => {
 				this.location.x = by.x;
 				this.location.y = by.y;
+				this.onDragged();
 			});
 		} else {
 			if(!by.eq(Vector.ZERO)) this.design.history.takeAction(() => {
 				this.location.x += by.x;
 				this.location.y += by.y;
+				this.onDragged();
 			});
 		}
 	}
 
+	/** 真的發生拖曳之後的 callback */
+	protected onDragged() { }
+
 	/**
 	 * 把一個傳入的 `Vector` 進行修正到實際上可以被容許的移動範圍之上，
 	 * 預設行為是會一律修正成零向量（換句話說，`Control` 將不能動）。
@@ -62,6 +67,14 @@ abstract class Draggable extends ViewedControl {
 
 	/** 當前位置 */
 	@shrewd public location: IPoint = { x: 0, y: 0 };
+
+	/** 把 target 移動到 source 的相對應位置上 */
+	public static relocate(source: Draggable, target: Draggable) {
+		// TODO: 不同的形狀的 Sheet 要如何處理
+		let ss = source.sheet, ts = target.sheet;
+		target.location.x = Math.round(source.location.x / ss.width * ts.width);
+		target.location.y = Math.round(source.location.y / ss.height * ts.height);
+	}
 }
 
 //////////////////////////////////////////////////////////////////
@@ -74,6 +87,16 @@ abstract class Draggable extends ViewedControl {
 
 abstract class IndependentDraggable extends Draggable {
 
+	private _isNew: boolean = true;
+
+	/** 這個物件自從建構以來，Design 是否尚未切換過 Sheet */
+	protected get isNew() { return this._isNew; }
+	protected set isNew(v) { if(!v) this._isNew = v; }
+
+	@shrewd private watchIsNew() {
+		if(this._isNew && this.sheet != this.design.sheet) this._isNew = false;
+	}
+
 	/** 物件在 Sheet 上佔據的高度 */
 	public abstract readonly height: number;
 

src/core/components/Flap.ts

@@ -74,18 +74,28 @@ interface JFlap {
 		super(sheet);
 		this.node = node;
 
-		let option = this.sheet.design.options.get("flap", node.id);
+		let design = sheet.design;
+		let option = design.options.get("flap", node.id);
 		if(option) {
+			// 找得到設定就用設定值
 			this.location.x = option.x;
 			this.location.y = option.y;
 			this.width = option.width;
 			this.height = option.height;
+			this.isNew = false;
+		} else {
+			// 否則根據對應的頂點的位置來粗略估計初始化
+			Draggable.relocate(design.vertices.get(this.node)!, this);
 		}
 
 		this.quadrants = MakePerQuadrant(i => new Quadrant(sheet, this, i));
 		this.view = new FlapView(this);
 	}
 
+	protected onDragged() {
+		if(this.isNew) Draggable.relocate(this, this.design.vertices.get(this.node)!);
+	}
+
 	protected get shouldDispose(): boolean {
 		return super.shouldDispose || this.node.disposed || this.node.degree != 1;
 	}

src/core/components/Vertex.ts

@@ -2,6 +2,7 @@
 interface JVertex extends IPoint {
 	id: number;
 	name: string;
+	isNew?: boolean;
 }
 
 
@@ -32,6 +33,10 @@ interface JVertex extends IPoint {
 		return this.location;
 	}
 
+	protected onDragged() {
+		if(this.isNew) Draggable.relocate(this, this.design.flaps.get(this.node)!);
+	}
+
 	public addLeaf(length = 1) {
 		this.design.history.takeAction(() => {
 			// 在新增 TreeNode 之前先把全體 Vertex 快取起來，
@@ -48,7 +53,8 @@ interface JVertex extends IPoint {
 				id: node.id,
 				name: node.name,
 				x: p.x,
-				y: p.y
+				y: p.y,
+				isNew: true
 			});
 		});
 	}
@@ -90,6 +96,7 @@ interface JVertex extends IPoint {
 			if(option.name != undefined) this.node.name = option.name;
 			this.location.x = option.x;
 			this.location.y = option.y;
+			this.isNew = !!option.isNew;
 		}
 
 		this.view = new VertexView(this);

src/core/core/Design.ts

@@ -21,9 +21,9 @@ interface IDesignObject {
 
 	@action public title: string;
 
-	protected readonly LayoutSheet: Sheet;
+	public readonly LayoutSheet: Sheet;
 
-	protected readonly TreeSheet: Sheet;
+	public readonly TreeSheet: Sheet;
 
 	public readonly tree: Tree;