-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
155 lines (150 loc) · 7.63 KB
/
index.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
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Origami Editor</title>
<script src="./src/index.js" type="module" defer></script>
<script src="https://edemaine.github.io/fold/dist/fold.js"></script>
<link href="./src/output.css" rel="stylesheet">
</head>
<body style="touch-action: none">
<div class="flex h-screen">
<div class="w-80" id="sidebar">
<form id="menu" class=" flex flex-col gap-2 p-2">
<fieldset class="flex flex-col gap-2">
<legend>Grid settings</legend>
<div class="flex gap-2">
<label for="#segment">Segments</label>
<input type="number" id="segment">
</div>
<div class="flex gap-2">
<label for="#stroke">Line stroke</label>
<input type="number" id="stroke">
</div>
<div class="flex gap-2">
<label for="#gridline">Toggle gridlines</label>
<input type="checkbox" id="gridline" checked>
</div>
<!-- <div class="flex gap-2">
<label for="#gridline">Toggle flat foldability</label>
<input type="checkbox" id="flat">
</div> -->
</fieldset>
<fieldset class="flex flex-col gap-2">
<legend>Tools</legend>
<div class="flex gap-2">
<button id="draw" disabled="true">Draw</button>
<button id="bisector">Bisect</button>
<button id="cut">Cut</button>
<button id="delete">Delete</button>
<button id="suggest">Suggest</button>
</div>
<div class="flex gap-2">
<label for="edgeType">Edge type</label>
<select id="edgeType" name="edgeType">
<option value="M" selected>Mountain</option>
<option value="V">Valley</option>
<option value="U">Unassigned</option>
<option value="F">Flat</option>
<option value="B">Border</option>
</select>
</div>
</fieldset>
<div class="flex gap-2">
<button id="print">Print obj</button>
<button id="viewbox">Reset SVG position</button>
</div>
<div class="flex gap-2">
<button id="save">Save</button>
<button id="clearsave">Clear save</button>
</div>
<fieldset class="flex flex-col gap-2">
<legend>Import / Export</legend>
<label for="file">Import file</label>
<div class="flex gap-2">
<input type="file" accept=".fold, .json, .cp" id="file">
<button id="clearfile">Clear</button>
</div>
<button type="button" id="export">Export</button>
</fieldset>
</form>
</div>
<div class="bg-slate-100 flex grow justify-center items-center relative" id="display">
<svg class="relative" id="interface" x="600" y ="0" viewBox="-50 -50 700 700" oncontextmenu="javascript:return false;"
preserveAspectRatio="xMinYMin meet" style="width: 100%; height: 100%;"
>
<g id ="paper">
<polygon points="0,0 0,600 600,600 600,0" fill="#e2e8f0" stroke-linejoin="round"></polygon>
</g>
<g id="grid"></g>
<g id="analysis"></g>
<g id="plane"></g>
<g id="screen">
<polygon points="-50,-50 -50,700 700,700 700,-50" fill-opacity="0" stroke-linejoin="round"></polygon>
<circle id="pointer" r="6" cx="0" cy="0" style="position:absolute; fill:red; display:none; pointer-events: none;"
></circle>
</g>
<g id="selectors"></g>
<g id="markers"></g>
</svg>
<div id="pointerDisplay" class="bg-slate-200 absolute right-0 top-0 p-2 flex gap-2 pointer-events-none">
<div class="text-base font-bold" id="pointerX">x: 0</div>
<div class="text-base font-bold" id="pointerY">y: 0</div>
</div>
</div>
</div>
<div class="w-full h-full absolute left-0 top-0 z-50 hidden" id="overlay">
<div class = "h-full w-full absolute bg-black opacity-30" id="overlayBg"></div>
<form id ="exportForm" class="p-8 absolute left-[calc(50%-400px)] top-[calc(50%-300px)] w-[800px] h-[500px] bg-slate-100 rounded-xl flex gap-2" action="submit">
<img id="close" class="absolute w-10 h-10 p-2 right-0 top-0 cursor-pointer" src="./public/MaterialSymbolsCloseRounded.svg" alt="close button">
<div id="exportLeftCol" class="flex flex-col gap-2 basis-1/2">
<div class="flex gap-2">
<label for="fileTitle">File name:</label>
<input id="fileTitle" type="text" value="title">
</div>
<div class="flex gap-2">
<label for="fileAuthor">File author:</label>
<input id="fileAuthor" type="text" value="author">
</div>
<div class="flex gap-2">
<label for="fileCreator">File creator:</label>
<input id="fileCreator" type="text" value="creator">
</div>
<div class="flex gap-2">
<label for="fileSpec">File specifications:</label>
<input id="fileSpec" type="text" value="specs">
</div>
<legend>File classes: </legend>
<fieldset id="fileClasses">
<div class="flex gap-2">
<input id="singleModel" name="fileClasses" value="singleModel" type="checkbox">
<label for="singleModel">Single Model</label>
</div>
<div class="flex gap-2">
<input id="multiModel" name="fileClasses" value="multiModel" type="checkbox">
<label for="multiModel">Multi Model</label>
</div>
<div class="flex gap-2">
<input id="animation" name="fileClasses" value="animation" type="checkbox">
<label for="animation">Animation</label>
</div>
<div class="flex gap-2">
<input id="diagrams" name="fileClasses" value="diagrams" type="checkbox">
<label for="diagrams">Diagrams</label>
</div>
<!-- <div class="flex gap-2">
<input id="others" name="fileClasses" type="checkbox">
<input id="othersInput" type="text">
</div> -->
</fieldset>
</div>
<div id="exportRightCol" class="flex flex-col grow gap-2">
<div>Preview</div>
<div id="preview" class="w-[300px] h-[300px] border border-black"></div>
<button id="exportBtn" class="w-20">Export</button>
</div>
</form>
</div>
</body>
</html>