-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathjs.html
150 lines (144 loc) · 8.9 KB
/
js.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<script>
$(function() {
$("#b1").click(function() {
insertUsage('<div class="area"><p>Please input each parameter. After inputted parameters, please push <u>Create shape</u> button.</p></div>');
paramsForCreate();
});
$("#b2").click(function() {
insertUsage('<div class="area"><p>Please select a shape. After selected a shape, please push <u>Select shape</u> button. If you want to update the shape, please modify parameters and push <u>Update shape</u> button.</p></div>');
paramsForUpdate();
});
$("#b3").click(function() {
insertUsage('<div class="area"><p>Please select several shapes. After selected shapes, select arrange type and push <u>Arrange shapes</u> button.</p></div>');
paramsForArrange();
});
});
function paramsForArrange() {
$("#work").append($("<form>", { id: "axsis" })
.append($("<div>", { class: "radiobutton" })
.append($("<input>", { id: "axsis1", type: "radio", name: "axsis", value: "lateral", checked: true }))
.append('<label for="axsis1">Arrange in lateral direction</label>')
)
.append($("<div>", { class: "radiobutton" })
.append($("<input>", { id: "axsis2", type: "radio", name: "axsis", value: "vertical" }))
.append('<label for="axsis2">Arrange in vertical direction</label>')
)
);
$("#work").append($("<form>", { id: "edge" })
.append($("<div>", { class: "radiobutton" })
.append($("<input>", { id: "edge1", type: "radio", name: "edge", value: "open", checked: true }))
.append('<label for="edge1">Open at edge</label>')
)
.append($("<div>", { class: "radiobutton" })
.append($("<input>", { id: "edge2", type: "radio", name: "edge", value: "close" }))
.append('<label for="edge2">Close at edge</label>')
)
);
$("#work").append('<input type="button" id="arrange" class="action" value="Arrange shapes">');
$(document).off("click", "#arrange");
$(document).on("click", "#arrange", function() {
var r = {
axsisX: $('input[name="axsis"]:checked').val() == "lateral" ? true : false,
edgeOpen: $('input[name="edge"]:checked').val() == "open" ? true : false
};
try {
google.script.run.arrangeShapes(r);
} catch (e) {
window.alert("Error: Please push 'Arrange shapes' button, again.");
}
});
}
function paramsForUpdate() {
$("#work").append('<input type="button" id="select" class="action" value="Select shape">');
$(document).off("click", "#select");
$(document).on("click", "#select", function() {
try {
google.script.run.withSuccessHandler(getShape).getSelectedShape();
} catch (e) {
window.alert("Error: Please push 'Update shape' button, again.");
}
});
}
function getShape(e) {
if (typeof e == "object") {
var params = { objectId: "Object ID", shapeType: "Shape type", width: "Width [pt]", height: "Height [pt]", rotation: "Rotation [degree]", translateX: "Position X [pt]", translateY: "Position Y [pt]", number: "Reproduction number (Default: 1)" };
if ($('#work > #data').length) {
for (var i in params) {
$("#" + i).val(e[i]);
}
} else {
$("#work").append($("<div>", { id: "data" }));
for (var i in params) {
$("#data").append($("<tr></tr>").append($("<th></th>").html(params[i])));
$("#data").append(
$("<tr></tr>").append(
$("<th></th>").append($("<input>", { type: (i == "shapeType" || i == "objectId") ? "text" : "number", id: i, value: e[i], min: (i == "number" || i == "width" || i == "height") ? 0 : null, readonly: (i == "shapeType" || i == "objectId") ? true : false }))
)
);
}
$("#data").append('<input type="button" id="update" class="action" value="Update shape">');
$(document).off("click", "#update");
$(document).on("click", "#update", function() {
var para = {};
for (var i in params) {
para[i] = $("#" + i).val();
}
try {
google.script.run.updateShape(para);
} catch (e) {
window.alert("Error: Please push 'Select shape' button, again.");
}
});
}
}
}
function paramsForCreate() {
var params = { shapeType: "Shape type (Default: RECTANGLE)", width: "Width [pt] (Default: 100)", height: "Height [pt] (Default: 100)", rotation: "Rotation [degree] (Default: 0)", translateX: "Position X [pt] (Default: 0)", translateY: "Position Y [pt] (Default: 0)", number: "Production number (Default: 1)" };
var shapeType = ["TYPE_UNSPECIFIED", "TEXT_BOX", "RECTANGLE", "ROUND_RECTANGLE", "ELLIPSE", "ARC", "BENT_ARROW", "BENT_UP_ARROW", "BEVEL", "BLOCK_ARC", "BRACE_PAIR", "BRACKET_PAIR", "CAN", "CHEVRON", "CHORD", "CLOUD", "CORNER", "CUBE", "CURVED_DOWN_ARROW", "CURVED_LEFT_ARROW", "CURVED_RIGHT_ARROW", "CURVED_UP_ARROW", "DECAGON", "DIAGONAL_STRIPE", "DIAMOND", "DODECAGON", "DONUT", "DOUBLE_WAVE", "DOWN_ARROW", "DOWN_ARROW_CALLOUT", "FOLDED_CORNER", "FRAME", "HALF_FRAME", "HEART", "HEPTAGON", "HEXAGON", "HOME_PLATE", "HORIZONTAL_SCROLL", "IRREGULAR_SEAL_1", "IRREGULAR_SEAL_2", "LEFT_ARROW", "LEFT_ARROW_CALLOUT", "LEFT_BRACE", "LEFT_BRACKET", "LEFT_RIGHT_ARROW", "LEFT_RIGHT_ARROW_CALLOUT", "LEFT_RIGHT_UP_ARROW", "LEFT_UP_ARROW", "LIGHTNING_BOLT", "MATH_DIVIDE", "MATH_EQUAL", "MATH_MINUS", "MATH_MULTIPLY", "MATH_NOT_EQUAL", "MATH_PLUS", "MOON", "NO_SMOKING", "NOTCHED_RIGHT_ARROW", "OCTAGON", "PARALLELOGRAM", "PENTAGON", "PIE", "PLAQUE", "PLUS", "QUAD_ARROW", "QUAD_ARROW_CALLOUT", "RIBBON", "RIBBON_2", "RIGHT_ARROW", "RIGHT_ARROW_CALLOUT", "RIGHT_BRACE", "RIGHT_BRACKET", "ROUND_1_RECTANGLE", "ROUND_2_DIAGONAL_RECTANGLE", "ROUND_2_SAME_RECTANGLE", "RIGHT_TRIANGLE", "SMILEY_FACE", "SNIP_1_RECTANGLE", "SNIP_2_DIAGONAL_RECTANGLE", "SNIP_2_SAME_RECTANGLE", "SNIP_ROUND_RECTANGLE", "STAR_10", "STAR_12", "STAR_16", "STAR_24", "STAR_32", "STAR_4", "STAR_5", "STAR_6", "STAR_7", "STAR_8", "STRIPED_RIGHT_ARROW", "SUN", "TRAPEZOID", "TRIANGLE", "UP_ARROW", "UP_ARROW_CALLOUT", "UP_DOWN_ARROW", "UTURN_ARROW", "VERTICAL_SCROLL", "WAVE", "WEDGE_ELLIPSE_CALLOUT", "WEDGE_RECTANGLE_CALLOUT", "WEDGE_ROUND_RECTANGLE_CALLOUT", "FLOW_CHART_ALTERNATE_PROCESS", "FLOW_CHART_COLLATE", "FLOW_CHART_CONNECTOR", "FLOW_CHART_DECISION", "FLOW_CHART_DELAY", "FLOW_CHART_DISPLAY", "FLOW_CHART_DOCUMENT", "FLOW_CHART_EXTRACT", "FLOW_CHART_INPUT_OUTPUT", "FLOW_CHART_INTERNAL_STORAGE", "FLOW_CHART_MAGNETIC_DISK", "FLOW_CHART_MAGNETIC_DRUM", "FLOW_CHART_MAGNETIC_TAPE", "FLOW_CHART_MANUAL_INPUT", "FLOW_CHART_MANUAL_OPERATION", "FLOW_CHART_MERGE", "FLOW_CHART_MULTIDOCUMENT", "FLOW_CHART_OFFLINE_STORAGE", "FLOW_CHART_OFFPAGE_CONNECTOR", "FLOW_CHART_ONLINE_STORAGE", "FLOW_CHART_OR", "FLOW_CHART_PREDEFINED_PROCESS", "FLOW_CHART_PREPARATION", "FLOW_CHART_PROCESS", "FLOW_CHART_PUNCHED_CARD", "FLOW_CHART_PUNCHED_TAPE", "FLOW_CHART_SORT", "FLOW_CHART_SUMMING_JUNCTION", "FLOW_CHART_TERMINATOR", "ARROW_EAST", "ARROW_NORTH_EAST", "ARROW_NORTH", "SPEECH", "STARBURST", "TEARDROP", "ELLIPSE_RIBBON", "ELLIPSE_RIBBON_2", "CLOUD_CALLOUT", "CUSTOM"];
shapeType.sort();
for (var i in params) {
if (i == "shapeType") {
$("#work").append($("<tr></tr>").append($("<th></th>").html(params[i])));
$("#work").append(
$("<tr></tr>").append(
$("<th></th>").append($("<select>", { id: "select_type", class: "select_type" }))
)
);
for (var j in shapeType) {
$('#select_type').append($(shapeType[j] == "RECTANGLE" ? '<option selected>' : '<option>').html(shapeType[j]).val(shapeType[j]));
}
} else {
$("#work").append($("<tr></tr>").append($("<th></th>").html(params[i])));
$("#work").append(
$("<tr></tr>").append(
$("<th></th>").append($("<input>", { type: "number", id: i, min: 0 }))
)
);
}
}
$("#work").append('<input type="button" id="create" class="action" value="Create shape">');
$(document).off("click", "#create");
$(document).on("click", "#create", function() {
var para = {};
para["select_type"] = $("#select_type").val();
for (var i in params) {
if ($("#" + i).val()) {
para[i] = $("#" + i).val();
}
}
try {
google.script.run.createShape(para);
} catch (e) {
window.alert("Error: Please push 'Create shape' button, again.");
}
});
}
function insertUsage(usage) {
if ($('#work').is(':visible')) {
$('#work').hide('fast');
}
$("#work").empty();
$('#work').append(usage);
$('#work').show('normal');
}
</script>