Skip to content

Commit

Permalink
Use ACE editor and enable PDF download
Browse files Browse the repository at this point in the history
  • Loading branch information
wenjie1991 committed Aug 6, 2024
1 parent ecbbfae commit d90a9fa
Show file tree
Hide file tree
Showing 13 changed files with 8,168 additions and 60 deletions.
54 changes: 54 additions & 0 deletions R/lib.R
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,28 @@ fd_save = function(fdObj) {
unlock(lock)
}

fd_generate_pdf = function(fdObj, id) {
fd_update(fdObj)
status = "error"
if (id %in% names(fdObj$env)) {
g = fdObj$env[[id]]$g_updated
fig_name = fdObj$env[[id]]$name
pdf_file = file.path(fdObj$dir, "tmp", paste0(fig_name, ".pdf"))
canvas_options = fdObj$env[[id]]$canvas_options
ggsave(pdf_file, plot = g,
width = canvas_options$width,
height = canvas_options$height,
units = canvas_options$units,
dpi = canvas_options$dpi)
status = "ok"
print(paste0("The pdf file is saved to ", pdf_file))
}
return(list(
status = status,
message = status
))
}

## Save the figure png example to the disk
fd_plot = function(fdObj, id) {
file_path = file.path(fdObj$dir, "figures", paste0(id, ".png"))
Expand Down Expand Up @@ -75,16 +97,41 @@ fd_plot = function(fdObj, id) {
#'
#' @export
fd_init = function(dir, recursive = TRUE, ...) {
## check if the dir is empty
if (!dir.exists(dir)) {
dir.create(dir, recursive = recursive)
} else if (length(dir(dir)) == 0) {
} else {
message("The directory already exists, and is not empty.")
prompt = readline("Do you want to remove the content in the directory? (y/n): ")
if (prompt == "y") {
unlink(dir, recursive = TRUE)
dir.create(dir, recursive = recursive)
} else {
message("The directory is not removed. The initialization is stopped.")
return()
}
}

if (!dir.exists(file.path(dir, "figures"))) {
dir.create(file.path(dir, "figures"))
} else {
unlink(file.path(dir, "figures"), recursive = TRUE)
dir.create(file.path(dir, "figures"))
}

if (!dir.exists(file.path(dir, "tmp"))) {
dir.create(file.path(dir, "tmp"))
} else {
unlink(file.path(dir, "tmp"), recursive = TRUE)
dir.create(file.path(dir, "tmp"))
}

env = new.env()
readr::write_rds(env, file.path(dir, "env.rds"))

writeLines("v1", file.path(dir, "version.txt"))

fd_load(dir, ...)
}

Expand All @@ -110,6 +157,13 @@ fd_load = function(dir, auto_database_upgrade = TRUE) {
stop("Directory does not exist")
}

## Empty the tmp directory when the R session is ended
reg.finalizer(.GlobalEnv, function(e) {
message("Removing the temporary files...")
unlink(file.path(dir, "tmp/*"), recursive = TRUE)
message("Done")
}, onexit = TRUE)

## Check the version of the database
if (auto_database_upgrade) {
if (!file.exists(file.path(dir, "version.txt"))) {
Expand Down
59 changes: 41 additions & 18 deletions R/server.R
Original file line number Diff line number Diff line change
@@ -1,7 +1,27 @@
font_list = sort(unique(sysfonts::font_files()$family))
# font_list = sort(unique(sysfonts::font_files()$family))

response_fg_change_name = function(fo, req) {
# print("response_fg_change_name")
response_fd_download_pdf = function(fo, req) {
print("response_fd_download_pdf")
parsed_qeury = parse_url(req$QUERY_STRING)$query
figure_id = parsed_qeury$id
res = fd_generate_pdf(fo, figure_id)
if (res$status == "error") {
list(
status = 400L,
headers = list('Content-Type' = "text/plain"),
body = res$message
)
} else {
list(
status = 200L,
headers = list('Content-Type' = "text/plain"),
body = res$message
)
}
}

response_fd_change_name = function(fo, req) {
# print("response_fd_change_name")
parsed_qeury = parse_url(req$QUERY_STRING)$query
figure_id = parsed_qeury$id
new_name = parsed_qeury$new_name
Expand All @@ -13,7 +33,7 @@ response_fg_change_name = function(fo, req) {
)
}

response_fg_font_ls = function() {
response_fd_font_ls = function() {
list(
status = 200L,
headers = list('Content-Type' = "application/json"),
Expand All @@ -22,17 +42,17 @@ response_fg_font_ls = function() {
}


response_fg_ls = function(fo) {
# print("response_fg_ls")
response_fd_ls = function(fo) {
# print("response_fd_ls")
list(
status = 200L,
headers = list('Content-Type' = "application/json"),
body = toJSON(fd_ls(fo), auto_unbox = F)
)
}

response_fg_canvas = function(fo, req) {
# print("response_fg_canvas")
response_fd_canvas = function(fo, req) {
# print("response_fd_canvas")
parsed_qeury = parse_url(req$QUERY_STRING)$query
figure_name = parsed_qeury$id
width = as.numeric(parsed_qeury$width)
Expand All @@ -48,8 +68,8 @@ response_fg_canvas = function(fo, req) {
)
}

response_fg_update_fig = function(fo, req) {
# print("response_fg_update_fig")
response_fd_update_fig = function(fo, req) {
# print("response_fd_update_fig")
input <- req[["rook.input"]]
## get the data from the POST request
postdata <- input$read_lines()
Expand All @@ -72,8 +92,8 @@ response_fg_update_fig = function(fo, req) {
}
}

response_fg_rm = function(fo, req) {
# print("response_fg_rm")
response_fd_rm = function(fo, req) {
# print("response_fd_rm")
parsed_qeury = parse_url(req$QUERY_STRING)$query
figure_id = parsed_qeury$id
fd_rm(figure_id, fo)
Expand Down Expand Up @@ -112,19 +132,21 @@ fd_server = function(dir, port = 8080) {
path = req$PATH_INFO
# print(path)
if (path == "/fd_ls") {
response_fg_ls(fo)
response_fd_ls(fo)
} else if (path == "/fd_rm") {
response_fg_rm(fo, req)
response_fd_rm(fo, req)
} else if (path == "/fd_update_fig") {
response_fg_update_fig(fo, req)
response_fd_update_fig(fo, req)
} else if (path == "/fd_update_ls") {
} else if (path == "/fd_update_rm") {
} else if (path == "/fd_font_ls") {
response_fg_font_ls()
response_fd_font_ls()
} else if (path == "/fd_canvas") {
response_fg_canvas(fo, req)
response_fd_canvas(fo, req)
} else if (path == "/fd_change_name") {
response_fg_change_name(fo, req)
response_fd_change_name(fo, req)
} else if (path == "/fd_download_pdf") {
response_fd_download_pdf(fo, req)
} else {
list(
status = 404L,
Expand All @@ -135,6 +157,7 @@ fd_server = function(dir, port = 8080) {
},
staticPaths = list(
"/figure" = file.path(dir, "figures"),
"/tmp" = file.path(dir, "tmp"),
"/css" = file.path(www_dir, "css"),
"/js" = file.path(www_dir, "js"),
"/index.html" = file.path(www_dir, "index.html")
Expand Down
42 changes: 37 additions & 5 deletions inst/www/css/style.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
* {
font-family: monospace;
}
/** {*/
/*font-family: monospace;*/
/*}*/

p {
font-family: monospace;
Expand Down Expand Up @@ -142,11 +142,34 @@ hr {
color: yellow;
}

.tab_container_canvas {
.tab_button_container {
display: flex;
justify-content: space-evenly;
}

.tablinks {
color: black;
background: white;
border-style: dotted;
}

.tab_container {
display: flex;
flex-direction: column;
}

#tab_canvas {
display: none;
}

#tab_ggplot {
}


.tab_active {
border-style: solid;
}

#edit_tools {
height: 100%;
background-color: white;
Expand Down Expand Up @@ -192,7 +215,7 @@ button {
line-height: 0;
background-color: white;
/* cursor: pointer; */
flex: 2;
flex: 1.25;

display: flex; /* Helps center the image if using object-fit: contain; */
justify-content: center;
Expand Down Expand Up @@ -239,4 +262,13 @@ button {
#code {
flex: 1; /* Make the textarea expand to fill available space */
resize: vertical; /* Allow resizing only vertically */
width: 90%;
}

#editor {
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
57 changes: 26 additions & 31 deletions inst/www/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,27 @@ <h1>ggfigdone [Making ggplot figure done quickly]</h1>

<div id="edit_tools">

<div> <h2 id="et_figure_name"></h2>
<p>ID: <span id="et_figure_id"></span></p>
<p>Create date: <span id="et_create_date"></span></p>
<p>Update date: <span id="et_update_date"></span></p>
</div>
<h2 id="et_figure_name"></h2>
<div id="div_update_buttons">
<button class="btn_download_pdf" onclick="downloadPDF()" title="Download the figure as PDF.">Download PDF</button>
<button class="btn_change_name" onclick="changeFigureName()" title="Change the figure name.">Change Name</button>
<button class="btn_delete" onclick="deleteFigure()" title="Remove figure. NOT reversible!">Delete</button>
</div>
<p>ID: <span id="et_figure_id"></span></p>
<p>Create date: <span id="et_create_date"></span></p>
<p>Update date: <span id="et_update_date"></span></p>


<hr>

<div class="tab_container_canvas">
<div class="et_options_h3"> <h3>Canvas Size</h3>
<div class="tab_button_container">
<button id="bt_ggplot" class="tablinks tab_active">Update ggplot code</button>
<button id="bt_canvas" class="tablinks">Update Canvas</button>
</div>


<div id = "tab_canvas" class="tab_container">
<div class="et_options_h3">
<table>
<tr>
<td>Units:</td>
Expand Down Expand Up @@ -66,41 +73,29 @@ <h1>ggfigdone [Making ggplot figure done quickly]</h1>
<button id="btn_change_canvas" title="Apply the changes of canvas.">Apply Changes</button>
</div>

<div> <h3>Update the figure</h3>

<!--<p>Title: <input type="text" id="et_figure_title" /></p>-->
<!--<p>X lab: <input type="text" id="et_figure_xlab" /></p>-->
<!--<p>Y lab: <input type="text" id="et_figure_ylab" /></p>-->
<!--<p>Font family: -->
<!--<select id='et_figure_font_family'>-->
<!--<option value="">No selected</option>-->
<!--</select>-->
<!--</p>-->
<!--<button id="btn_add_to_code">Add to code input box <br> ↓ </button>-->
<!--</div>-->

<div class="tab_container" id="tab_ggplot">
<div class="et_options_h4">
<span class="fixed-text"> Please use `data` variable as dataset in ggplot code. </span>
<textarea id="code" rows = "5"></textarea>
<p> Please use `data` variable as dataset in ggplot code. </p>
<!--<textarea id="code" rows = "20"></textarea>-->
<div id="editor"></div>
</div>
<!--<div class="et_options_h4"> <h4>ggplot(data) + </h3>-->
<!-- <textarea-->
<!-- id="code"-->
<!-- rows="5"-->
<!-- placeholder='Input the ggplot code here.&#10;Example: theme_classic() + xlab("I am xlab")'-->
<!-- ></textarea>-->
<!--</div>-->
<button id="btn_change_figure" title="Apply the changes of ggplot2 code">Apply Changes</button>
</div>

<button id="btn_change_figure" title="Apply the changes of ggplot2 code">Apply Changes</button>

<div id="error_window">
<p id="error_message"></p>
</div>

</div>

</div>
</div>
</body>

<script src="./js/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/src-min-noconflict/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/ace-configure.js" type="text/javascript" charset="utf-8"></script>

<script src="./js/jquery-3.7.1.min.js"></script>
<script src="./js/main.js"></script>
</html>
Loading

0 comments on commit d90a9fa

Please sign in to comment.