Skip to content

Commit

Permalink
v 0.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
MuTsunTsai committed Dec 24, 2020
1 parent 68aaf9f commit a279124
Show file tree
Hide file tree
Showing 15 changed files with 81 additions and 30 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ As you create a new project, you will see a basic layout with two flaps (which i

Once you have the desired structure, go to the layout view and start experimenting different combinations of flap locations. BP Studio will try its best to find stretching patterns for those flaps that has overlapping with their corresponding rectangles (but not with their corresponding circles), and try to determine the shape of all flaps and rivers automatically. For a very brief account of the method of generating stretch patterns used in this app, see [[2]](#b2). So far the author had implemented enough algorithms for finding patterns for any valid layout with two flaps, and for most valid layouts with three flaps. The author will continue to implement more algorithms for more complicated patterns in the future.

When you finish your design, you can download you project, download the entire workspace, or export the design in SVG or PNG formats. You can right click (or long press for touch devices) on any download command in the file menu and click "save as" to choose the saving location and filename.

The coloring of hinges, ridges and axial-parallel creases follows Lang's convention in his book. For clarity, only the axial-parallel creases of the stretching patterns are shown, but you should have no problem figuring out the rest by looking at the ridge creases.

For the moment, BP Studio hasn't implemented the notion of elevation, half-integral unit structures, or meandering rivers. But you can widen or heighten your flaps by setting their width or height, and use them to create elevations in your final model. You can also use integral structures to roughtly represent the space occupied by the half-integral structures, and transform them into the latter in your folding process. Meandering rivers might be represented similarly by using stub flaps, or you can just pretend that it's there and fold your thing anyway :)
Expand Down
2 changes: 1 addition & 1 deletion dist/bpstudio.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/bpstudio.js.map

Large diffs are not rendered by default.

9 changes: 6 additions & 3 deletions dist/index.htm
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<meta name="description" content="Super-complex origami design made easy!">
<meta name="apple-mobile-web-app-title" content="Box Pleating Studio" />
<meta name="google" content="notranslate">
<meta name="build" content="431">
<meta name="build" content="436">

<meta property="og:url" content="https://bpstudio.abstreamace.com" />
<meta property="og:type" content="website" />
Expand Down Expand Up @@ -81,7 +81,7 @@
<link rel="stylesheet" href="bpstudio.css?64faaaae">

<script src="shrewd.min.js?97d129ed"></script>
<script src="bpstudio.js?5e402192"></script>
<script src="bpstudio.js?90b94c61"></script>
<script src="locale.js?36e183d9"></script>
</head>

Expand All @@ -104,8 +104,11 @@ <h3>
Please check you network and try again.
</h3>
</div>
<noscript>
<h3>Box Pleating Studio requires JavaScript enabled in your browser.</h3>
</noscript>
</body>

<script src="main.js?f3a7ebbe"></script>
<script src="main.js?2cb5da17"></script>

</html>
2 changes: 1 addition & 1 deletion dist/main.js

Large diffs are not rendered by default.

8 changes: 6 additions & 2 deletions src/app/components/core.vue
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
.map(a => locales.find(l => r(a).startsWith(l)))
.filter(l => !!l);
languages = Array.from(new Set(languages));
if(locales.length > 1) {
if(languages.length > 1) {
this.languages = languages;
$('#mdlLanguage').modal();
}
Expand Down Expand Up @@ -181,7 +181,11 @@
public dropdown: any = null;
public get design() { return bp.design; }
public get design() {
let t = bp.design ? bp.design.title : null;
document.title = "Box Pleating Studio" + (t ? " - " + t : "");
return bp.design;
}
public get selections(): any { return bp.system.selections; }
public create() {
Expand Down
13 changes: 10 additions & 3 deletions src/app/footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,19 @@ var app = new Vue.options.components['app']({ i18n });
app.$mount('#app');

let url = new URL(location.href);
let lz = url.searchParams.get("project");
if(lz != sessionStorage.getItem("project")) {
let lz = url.searchParams.get("project"), json;
if(lz) {
try {
json = JSON.parse(LZ.decompress(lz));
// 動態 SEO
if(json.description) document.querySelector("meta[name=description]").content = json.description;
} catch(e) { }
}
if(lz != sessionStorage.getItem("project") && json) {
// 寫入 sessionStorage 的值不會因為頁籤 reload 而遺失,
// 因此可以用這個來避免重刷頁面的時候再次載入的問題
sessionStorage.setItem("project", lz);
core.addDesign(bp.load(LZ.decompress(lz)));
core.addDesign(bp.load(json));
}

document.addEventListener("wheel", function(event) {
Expand Down
11 changes: 7 additions & 4 deletions src/core/BPStudio.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,15 @@
// Level 5
/// <reference path="class/ViewedControl.ts" />
/// <reference path="pattern/Configuration.ts" />
/// <reference path="view/FlapView.ts" />
/// <reference path="view/LabeledView.ts" />
/// <reference path="view/JunctionView.ts" />
/// <reference path="view/VertexView.ts" />
/// <reference path="view/RiverView.ts" />

// Level 6
/// <reference path="class/Draggable.ts" />
/// <reference path="view/FlapView.ts" />
/// <reference path="view/EdgeView.ts" />
/// <reference path="view/VertexView.ts" />

// Level 7
/// <reference path="components/Flap.ts" />
Expand Down Expand Up @@ -85,8 +87,9 @@
this.system = new System(this);
}

public load(json: string): Design {
return this.tryLoad(Migration.process(JSON.parse(json), this.onDeprecate));
public load(json: string | object): Design {
if(typeof json == "string") json = JSON.parse(json);
return this.tryLoad(Migration.process(json, this.onDeprecate));
}

public create(json: any): Design {
Expand Down
8 changes: 8 additions & 0 deletions src/core/core/DesignBase.ts
Original file line number Diff line number Diff line change
Expand Up @@ -255,4 +255,12 @@ abstract class DesignBase extends Mountable {
@shrewd private get activeStretches(): Stretch[] {
return [...this.stretches.values()].filter(s => s.isActive && !!s.pattern);
}

@shrewd public get overflow() {
return Math.max(...[
...this.flaps.values(),
...this.edges.values(),
...this.vertices.values()
].map(c => c.view.overflow));
}
}
15 changes: 11 additions & 4 deletions src/core/core/Display.ts
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@
@shrewd public get scale() {
if(this._studio.design && this._studio.design.sheet) {
if(this._studio.design.fullscreen) {
let ws = (this.viewWidth - this.MARGIN * 2) / this._studio.design.sheet.width;
let ws = (this.viewWidth - this.horMargin * 2) / this._studio.design.sheet.width;
let wh = (this.viewHeight - this.MARGIN * 2) / this._studio.design.sheet.height;
return Math.min(ws, wh);
} else {
Expand All @@ -228,8 +228,15 @@
}
}

// 這個值如果直接做成計算屬性會導致循環參照,所以要用一個反應方法來延遲更新它
@shrewd private horMargin = 0;
@shrewd private getHorMargin() {
let m = Math.max((this._studio.design?.overflow ?? 0) + 10, this.MARGIN);
setTimeout(() => this.horMargin = m, 0);
}

@shrewd private get sheetWidth(): number {
return (this._studio.design?.sheet?.width ?? 0) * this.scale + this.MARGIN * 2;
return (this._studio.design?.sheet?.width ?? 0) * this.scale + this.horMargin * 2;
}

@shrewd private get sheetHeight(): number {
Expand All @@ -245,7 +252,7 @@
}

public getAutoScale(): number {
let ws = (this.viewWidth - this.MARGIN * 2) / (this._studio.design?.sheet?.width ?? 1);
let ws = (this.viewWidth - this.horMargin * 2) / (this._studio.design?.sheet?.width ?? 1);
let hs = (this.viewHeight - this.MARGIN * 2) / (this._studio.design?.sheet?.height ?? 1);
return Math.min(ws, hs);
}
Expand Down Expand Up @@ -283,7 +290,7 @@

// 依照數值配置 Paper.js 的 View 的大小和變換矩陣
let el = this._studio.$el;
let mw = (cw - this.sheetWidth) / 2 + this.MARGIN, mh = (ch + this.sheetHeight) / 2 - this.MARGIN;
let mw = (cw - this.sheetWidth) / 2 + this.horMargin, mh = (ch + this.sheetHeight) / 2 - this.MARGIN;

if(this.lockViewport) this.project.view.viewSize.set(this.viewWidth, this.viewHeight);
else this.project.view.viewSize.set(el.clientWidth, el.clientHeight);
Expand Down
4 changes: 2 additions & 2 deletions src/core/util/LabelUtil.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ namespace LabelUtil {
// 初次直接執行
LabelUtil.slowLabel(label, lx, ly, lh, avoid);
} */

slowLabel(label, lx, ly, lh, avoid);
}
syncLabel(label, glow);
Expand All @@ -82,7 +82,7 @@ namespace LabelUtil {
offsetLabel(label, lx, ly, lh, dx, dy);

let rec = new paper.Path.Rectangle(label.bounds);
rec.transform(label.layer.matrix)
if(label.layer) rec.transform(label.layer.matrix);

let ok = clone.every(c => {
let i1 = rec.intersect(c, { insert: false }).isEmpty();
Expand Down
9 changes: 5 additions & 4 deletions src/core/view/EdgeView.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@

@shrewd class EdgeView extends ControlView<Edge> {
@shrewd class EdgeView extends LabeledView<Edge> {

public line: paper.Path;

protected _label: paper.PointText;

/** 加粗的直線空間,方便判定選取動作 */
private _lineRegion: paper.Path;
private _label: paper.PointText;
private _glow: paper.PointText;

constructor(edge: Edge) {
super(edge);

this.$addItem(Layer.ridge, this.line = new paper.Path.Line(Style.edge));
this.$addItem(Layer.label, this._glow = new paper.PointText(Style.glow));
this.$addItem(Layer.label, this._label = new paper.PointText(Style.label));
Expand Down Expand Up @@ -42,4 +43,4 @@
this._label.fillColor = this._label.strokeColor = this.line.strokeColor = color;
this.line.strokeWidth = selected ? 3 : 2;
}
}
}
4 changes: 2 additions & 2 deletions src/core/view/FlapView.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@

@shrewd class FlapView extends ControlView<Flap> {
@shrewd class FlapView extends LabeledView<Flap> {

protected readonly _label: paper.PointText;
public readonly hinge: paper.Path;
private readonly _shade: paper.Path;
private readonly _dots: PerQuadrant<paper.Path.Circle>;
private readonly _circle: paper.Path;
private readonly _outerRidges: paper.CompoundPath;
private readonly _innerRidges: paper.CompoundPath;
private readonly _label: paper.PointText;
private readonly _glow: paper.PointText;

constructor(flap: Flap) {
Expand Down
16 changes: 16 additions & 0 deletions src/core/view/LabeledView.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@

abstract class LabeledView<T extends Control> extends ControlView<T> {

protected abstract readonly _label: paper.PointText;

@shrewd public get overflow() {
if(!this.$studio) return 0;
this.render();
let result = 0, b = this._label.bounds;
let w = this.$studio.$display.scale * this.control.sheet.width;
let left = b.x, right = b.x + b.width;
if(left < 0) result = -left;
if(right > w) result = Math.max(result, right - w);
return Math.ceil(result);
}
}
6 changes: 3 additions & 3 deletions src/core/view/VertexView.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@

@shrewd class VertexView extends ControlView<Vertex> {
@shrewd class VertexView extends LabeledView<Vertex> {

protected _label: paper.PointText;
private _dot: paper.Path.Circle;
private _circle: paper.Path.Circle;
private _label: paper.PointText;
private _glow: paper.PointText;

constructor(vertex: Vertex) {
super(vertex);

let option = Object.assign({}, Style.dot, { radius: 4 });
this.$addItem(Layer.dot, this._dot = new paper.Path.Circle(option));
this.$addItem(Layer.label, this._glow = new paper.PointText(Style.glow));
Expand Down

0 comments on commit a279124

Please sign in to comment.