2012-05-17 22:50:00 +00:00
<!DOCTYPE html>
< html >
2020-08-01 13:14:30 +00:00
2012-05-17 22:50:00 +00:00
< head >
2020-08-02 10:26:22 +00:00
< meta http-equiv = "X-UA-Compatible" content = "chrome=1" / >
2020-12-15 02:06:44 +00:00
< link rel = "icon" href = "images/favicon.svg" sizes = "any" type = "image/svg+xml" >
2015-12-29 06:28:39 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" / >
2012-06-23 19:40:40 +00:00
< meta name = "apple-mobile-web-app-capable" content = "yes" / >
2024-02-02 11:46:20 +00:00
< title > HSWAW Method Draw Vector Editor< / title >
2020-08-02 10:26:22 +00:00
< meta charset = "utf-8" >
2021-05-28 01:18:45 +00:00
< meta name = "description" content = "Method Draw is an open source SVG editor for the web, you can use it online without signing up." >
2012-05-17 22:50:00 +00:00
2020-08-02 10:26:22 +00:00
<!-- build:css all.css -->
2021-04-28 17:36:17 +00:00
< link rel = "stylesheet" href = "css/base.css" type = "text/css" / >
2021-06-16 23:51:45 +00:00
< link rel = "stylesheet" href = "css/method-draw.css" type = "text/css" / >
2020-08-02 10:26:22 +00:00
< link rel = "stylesheet" href = "css/jpicker.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/jgraduate.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/fonts.css" type = "text/css" / >
2020-08-05 00:50:03 +00:00
< link rel = "stylesheet" href = "css/dropdown.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/draginput.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/menu.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/rulers.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/palette.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/color-tool.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/context-menu.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/shapelib.css" type = "text/css" / >
2021-04-28 17:36:17 +00:00
< link rel = "stylesheet" href = "css/modal.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/source.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/keyboard.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/dialog.css" type = "text/css" / >
2021-05-24 17:55:52 +00:00
< link rel = "stylesheet" href = "css/app.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/tools.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/button.css" type = "text/css" / >
< link rel = "stylesheet" href = "css/select.css" type = "text/css" / >
2021-05-24 18:16:10 +00:00
< link rel = "stylesheet" href = "css/panel.css" type = "text/css" / >
2021-05-24 18:40:10 +00:00
< link rel = "stylesheet" href = "css/align_buttons.css" type = "text/css" / >
2021-05-25 02:51:31 +00:00
< link rel = "stylesheet" href = "css/text.css" type = "text/css" / >
2021-05-27 00:37:37 +00:00
< link rel = "stylesheet" href = "css/sponsors.css" type = "text/css" / >
2021-06-01 21:18:41 +00:00
< link rel = "stylesheet" href = "css/zoom-dropdown.css" type = "text/css" / >
2021-06-01 13:19:54 +00:00
< link rel = "stylesheet" href = "css/loading.css" type = "text/css" / >
2020-08-02 10:26:22 +00:00
<!-- endbuild -->
2012-05-17 22:50:00 +00:00
< / head >
2021-06-01 13:19:54 +00:00
< body class = "loading" >
2012-05-17 22:50:00 +00:00
2021-05-24 17:55:52 +00:00
< div id = "method-draw" class = "app" >
2012-05-17 22:50:00 +00:00
< div id = "rulers" >
2015-12-22 05:05:03 +00:00
< div id = "ruler_corner" > < / div >
2021-05-13 22:52:10 +00:00
< div id = "ruler_x" > < / div >
< div id = "ruler_y" > < / div >
2012-05-17 22:50:00 +00:00
< / div >
< div id = "workarea" >
2021-01-18 15:35:26 +00:00
< div id = "svgcanvas" >
2012-05-17 22:50:00 +00:00
< / div >
< / div >
2012-05-30 04:55:00 +00:00
< div id = "menu_bar" >
2012-06-12 01:31:43 +00:00
< a class = "menu" >
2020-08-05 00:50:03 +00:00
< div class = "menu_title" id = "logo" >
2021-05-28 01:18:45 +00:00
< svg viewBox = "0 0 16 16" width = "16" height = "16" xmlns = "http://www.w3.org/2000/svg" >
2021-06-04 17:23:32 +00:00
< path d = "M-.1 16.1L16 .04V16.1H-.1z" > < / path >
< path d = "M0 16.1V.1l16 16H0z" fill = "var(--z7)" > < / path >
2020-08-05 00:50:03 +00:00
< / svg >
< / div >
2021-06-04 17:28:11 +00:00
< div class = "menu_list inverted-undo" >
2021-04-28 17:36:17 +00:00
< div id = "modal_about" class = "menu_item" data-action = "about" > About this app...< / div >
2012-07-26 03:44:15 +00:00
< div class = "separator" > < / div >
2021-04-28 17:36:17 +00:00
< div id = "modal_preferences" class = "menu_item" data-action = "configure" > Configure...< / div >
< div id = "modal_shortcuts" class = "menu_item" data-action = "shortcuts" > Keyboard Shortcuts...< / div >
< div id = "modal_donate" class = "menu_item" data-action = "donate" > Donate or sponsor...< / div >
2012-06-12 01:31:43 +00:00
< / div >
< / a >
2021-06-04 17:23:32 +00:00
2012-05-30 04:55:00 +00:00
< div class = "menu" >
2015-12-22 05:05:03 +00:00
< div class = "menu_title" > File< / div >
2021-06-04 17:23:32 +00:00
< div class = "menu_list inverted-undo" id = "file_menu" >
2021-02-22 18:07:04 +00:00
< div data-action = "clear" id = "tool_clear" class = "menu_item" > New Document< / div >
2021-02-13 14:27:17 +00:00
2021-02-24 18:30:35 +00:00
< div id = "tool_open" class = "menu_item" >
2021-10-09 21:50:08 +00:00
< input type = "file" accept = "image/svg+xml" id = "tool_open_input" / >
2021-10-09 21:22:07 +00:00
Open SVG... < span class = "shortcut" style = "display: none;" > ⌘O< / span >
< / div >
2021-02-13 14:27:17 +00:00
< div id = "tool_import" class = "menu_item" >
2021-10-09 21:50:08 +00:00
< input type = "file" accept = "image/*" id = "tool_import_input" / >
2021-10-09 21:22:07 +00:00
Place Image... < span class = "shortcut" style = "display: none;" > ⌘K< / span >
< / div >
2021-02-22 18:07:04 +00:00
< div data-action = "save" id = "tool_save" class = "menu_item" > Save Image... < span class = "shortcut" > ⌘S< / span > < / div >
< div data-action = "export" id = "tool_export" class = "menu_item" > Export as PNG< / div >
2024-02-02 11:47:39 +00:00
< / div >
< / div >
< div class = "menu" >
< div class = "menu_title" style = "background: pink; color: black; border-radius: 4px;" > Print< / div >
< div class = "menu_list inverted-undo" id = "print_menu" >
< div data-action = "print_dymo" id = "tool_print" class = "menu_item" > Print on DYMO (small label)< / div >
< div data-action = "print_zebra" id = "tool_print" class = "menu_item" > Print on Zebra (big label)< / div >
2015-12-22 05:05:03 +00:00
< / div >
2012-05-30 04:55:00 +00:00
< / div >
2012-05-17 22:50:00 +00:00
2012-05-30 04:55:00 +00:00
< div class = "menu" >
< div class = "menu_title" > Edit< / div >
2021-06-04 17:23:32 +00:00
< div class = "menu_list inverted-undo" id = "edit_menu" >
2021-02-22 17:42:38 +00:00
< div data-action = "undo" class = "menu_item" id = "tool_undo" > Undo < span class = "shortcut" > ⌘Z< / span > < / div >
< div data-action = "redo" class = "menu_item" id = "tool_redo" > Redo < span class = "shortcut" > ⌘Y< / span > < / div >
2015-12-22 05:05:03 +00:00
< div class = "separator" > < / div >
2021-02-22 17:42:38 +00:00
< div data-action = "cutSelected" class = "menu_item action_selected disabled" id = "tool_cut" > Cut < span class = "shortcut" > ⌘X< / span > < / div >
< div data-action = "copySelected" class = "menu_item action_selected disabled" id = "tool_copy" > Copy < span class = "shortcut" > ⌘C< / span > < / div >
< div data-action = "pasteSelected" class = "menu_item action_selected disabled" id = "tool_paste" > Paste < span class = "shortcut" > ⌘V< / span > < / div >
< div data-action = "duplicateSelected" class = "menu_item action_selected disabled" id = "tool_clone" > Duplicate < span class = "shortcut" > ⌘D< / span > < / div >
2021-02-22 17:44:46 +00:00
< div data-action = "deleteSelected" class = "menu_item action_selected disabled" id = "tool_delete" > Delete < span > ⌫< / span > < / div >
2012-05-30 04:55:00 +00:00
< / div >
< / div >
< div class = "menu" >
< div class = "menu_title" > Object< / div >
2021-06-04 17:23:32 +00:00
< div class = "menu_list inverted-undo" id = "object_menu" >
2015-12-22 05:05:03 +00:00
< div class = "menu_item action_selected disabled" id = "tool_move_top" > Bring to Front < span class = "shortcut" > ⌘⇧↑< / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_move_up" > Bring Forward < span class = "shortcut" > ⌘↑< / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_move_down" > Send Backward < span class = "shortcut" > ⌘↓< / span > < / div >
< div class = "menu_item action_selected disabled" id = "tool_move_bottom" > Send to Back < span class = "shortcut" > ⌘⇧↓< / span > < / div >
< div class = "separator" > < / div >
< div class = "menu_item action_multi_selected disabled" id = "tool_group" > Group Elements < span class = "shortcut" > ⌘G< / span > < / div >
< div class = "menu_item action_group_selected disabled" id = "tool_ungroup" > Ungroup Elements < span class = "shortcut" > ⌘⇧G< / span > < / div >
< div class = "separator" > < / div >
< div class = "menu_item action_path_convert_selected disabled" id = "tool_topath" > Convert to Path< / div >
< div class = "menu_item action_path_selected disabled" id = "tool_reorient" > Reorient path< / div >
2012-05-30 04:55:00 +00:00
< / div >
< / div >
2012-05-17 22:50:00 +00:00
2012-05-30 04:55:00 +00:00
< div class = "menu" >
< div class = "menu_title" > View< / div >
2021-06-04 17:23:32 +00:00
< div class = "menu_list inverted-undo" id = "view_menu" >
2021-02-09 18:48:44 +00:00
< div class = "menu_item push_button_pressed" id = "tool_rulers" > View Rulers < span class = "shortcut" > ⇧R< / span > < / div >
2015-12-22 05:05:03 +00:00
< div class = "menu_item" id = "tool_wireframe" > View Wireframe< / div >
< div class = "separator" > < / div >
2021-05-28 01:18:45 +00:00
< div class = "menu_item" id = "tool_source" data-action = "source" > Source... < span class = "shortcut" > ⌘U< / span > < / div >
2012-05-30 04:55:00 +00:00
< / div >
< / div >
2021-06-04 17:23:32 +00:00
< div class = "menu-right" >
< button class = "menu-icon" id = "darkmode-button" >
< svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 24 24" > < path d = "M17.66 7.93L12 2.27 6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58c2.05 0 4.1-.78 5.66-2.34 3.12-3.12 3.12-8.19 0-11.31zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z" > < / path > < / svg >
< / button >
< / div >
2012-05-30 04:55:00 +00:00
< / div >
2012-05-17 22:50:00 +00:00
2021-01-17 02:49:34 +00:00
< div id = "panels" class = "tools_panel" >
2012-05-17 22:50:00 +00:00
2015-12-22 05:05:03 +00:00
< div id = "canvas_panel" class = "context_panel" >
2021-05-25 02:51:31 +00:00
< h4 > Canvas< / h4 >
2021-01-17 02:49:34 +00:00
2021-05-25 02:51:31 +00:00
< div class = "draginputs" >
2021-01-17 02:49:34 +00:00
2021-06-24 02:52:55 +00:00
< label class = "draginput twocol textcontent" data-title = "Change Content" >
< input id = "canvas_title" type = "text" / >
< span > Title< / span >
< / label >
2021-05-25 02:51:31 +00:00
< label data-title = "Change canvas width" class = "draginput" >
2024-02-02 11:38:38 +00:00
< input id = "canvas_width" type = "text" pattern = "[0-9]*" value = "1200" / >
2021-05-25 02:51:31 +00:00
< span class = "icon_label" > Width< / span >
< / label >
< label data-title = "Change canvas height" class = "draginput" >
2024-02-02 11:38:38 +00:00
< input id = "canvas_height" type = "text" pattern = "[0-9]*" value = "800" / >
2021-05-25 02:51:31 +00:00
< span class = "icon_label" > Height< / span >
< / label >
< label data-title = "Change canvas color" class = "draginput" >
< span > Color< / span >
< div id = "color_canvas_tools" >
< div class = "color_tool active" id = "tool_canvas" >
< div class = "color_block" >
< div id = "canvas_bg" > < / div >
< div id = "canvas_color" > < / div >
< / div >
2015-12-22 05:05:03 +00:00
< / div >
< / div >
2021-05-25 02:51:31 +00:00
< / label >
2024-02-02 11:48:50 +00:00
< div class = "draginput" style = "outline: 3px solid pink" >
2024-02-01 21:58:51 +00:00
< span > Size< / span >
2021-05-25 02:51:31 +00:00
< select id = "resolution" >
2024-02-01 21:58:51 +00:00
< option id = "selectedPredefined" > Custom< / option >
2021-05-25 02:51:31 +00:00
< option id = "fitToContent" value = "content" > Fit to Content< / option >
2024-02-01 21:58:51 +00:00
< optgroup label = "HSWAW" >
2024-02-02 11:38:38 +00:00
< option value = "1080x432" > Small Label / DYMO (89 × < / option >
< option value = "1200x800" selected = "selected" > Large Label Landscape / 4x6 / Zebra (150 × < / option >
< option value = "800x1200" > Large Label Portrait / 4x6 / Zebra (100 × < / option >
2024-02-01 21:58:51 +00:00
< / optgroup >
2021-05-25 02:51:31 +00:00
< optgroup label = "Social Media" >
< option value = "1012x506" > Twitter Post (1012 × < / option >
< option value = "1500x500" > Twitter Header (1500 × < / option >
< option value = "1200x630" > Facebook Post (1200 × < / option >
< option value = "820x312" > Facebook Cover (820 × < / option >
< option value = "1080x1080" > Instagram Post (1080 × < / option >
< option value = "1080x1920" > Instagram Story (1080 × < / option >
< option value = "300" > Dribble Shot (400 × < / option >
< option value = "800x600" > Dribble Shot HD (800 × < / option >
< option value = "1584x396" > LinkedIn Cover (1584 × < / option >
< / optgroup >
< optgroup label = "Presentation" >
< option value = "1920x1080" > 16:9 (1920 × < / option >
< option value = "1024x768" > 4:3 (1024 × < / option >
< / optgroup >
2021-05-17 23:35:44 +00:00
2021-05-25 02:51:31 +00:00
< optgroup label = "Desktop" >
< option value = "1140x1024" > Desktop (1140 × < / option >
< option value = "375x700" > MacBook (834 × < / option >
< option value = "1440x900" > MacBook Pro (1024 × < / option >
< option value = "1500x1000" > Surface Book (1440 × < / option >
< option value = "1280x720" > iMac (1368 × < / option >
< / optgroup >
< optgroup label = "Tablet" >
< option value = "414x896" > iPad Mini (768 × < / option >
< option value = "375x812" > iPad Pro 11" (834 × < / option >
< option value = "375x812" > iPad Pro 12.9" (1024 × < / option >
< option value = "414x736" > Surface Pro 3 (1440 × < / option >
< option value = "414x736" > Surface Pro 4 (1368 × < / option >
< / optgroup >
< optgroup label = "Phone" >
< option value = "414x896" > iPhone 11 ProMax (414 × < / option >
< option value = "375x812" > iPhone 11 Pro / X (375 × < / option >
< option value = "414x736" > iPhone 8 Plus (414 × < / option >
< option value = "375x667" > iPhone 8 (375 × < / option >
< option value = "411x731" > Google Pixel 2 (411 × < / option >
< option value = "411x823" > Google Pixel XL (411 × < / option >
< option value = "360x640" > Android (360 × < / option >
< / optgroup >
< optgroup label = "Paper" >
< option value = "595x842" > A4 (595 × < / option >
< option value = "420x595" > A5 (420 × < / option >
< option value = "297x420" > A6 (297 × < / option >
< option value = "612x792" > Letter (612 × < / option >
< option value = "792x1224" > Tabloid (792 × < / option >
< / optgroup >
< / select >
< div class = "caret" > < / div >
2024-02-02 11:38:38 +00:00
< label id = "resolution_label" > Default< / label >
2021-05-25 02:51:31 +00:00
< / div >
2015-12-22 05:05:03 +00:00
2021-05-25 02:51:31 +00:00
< / div >
2015-12-22 05:05:03 +00:00
< / div >
< div id = "rect_panel" class = "context_panel" >
2021-05-25 02:51:31 +00:00
< h4 > Rectangle< / h4 >
< div class = "draginputs" >
< label class = "draginput" >
< input id = "rect_x" class = "attr_changer" data-title = "Change X coordinate" data-attr = "x" pattern = "[0-9]*" / >
< span > X< / span >
< / label >
< label class = "draginput" >
< input id = "rect_y" class = "attr_changer" data-title = "Change Y coordinate" data-attr = "y" pattern = "[0-9]*" / >
< span > Y< / span >
< / label >
< label class = "draginput" id = "rect_width_tool attr_changer" data-title = "Change rectangle width" >
< input id = "rect_width" class = "attr_changer" data-attr = "width" type = "text" pattern = "[0-9]*" / >
< span class = "icon_label" > Width< / span >
< / label >
< label class = "draginput" id = "rect_height_tool" data-title = "Change rectangle height" >
< input id = "rect_height" class = "attr_changer" data-attr = "height" type = "text" pattern = "[0-9]*" / >
< span class = "icon_label" > Height< / span >
< / label >
< / div >
2015-12-22 05:05:03 +00:00
< / div >
< div id = "path_panel" class = "context_panel clearfix" >
2021-05-25 02:51:31 +00:00
< h4 > Path< / h4 >
< div class = "draginputs" >
< label >
< input id = "path_x" class = "attr_changer" data-title = "Change ellipse's cx coordinate" data-attr = "x" pattern = "[0-9]*" / >
< span > X< / span >
< / label >
< label >
< input id = "path_y" class = "attr_changer" data-title = "Change ellipse's cy coordinate" data-attr = "y" pattern = "[0-9]*" / >
< span > Y< / span >
< / label >
< / div >
2015-12-22 05:05:03 +00:00
< / div >
< div id = "image_panel" class = "context_panel clearfix" >
< h4 > Image< / h4 >
2021-05-25 02:51:31 +00:00
< div class = "draginputs" >
< label class = "draginput" >
< input id = "image_x" class = "attr_changer" data-title = "Change X coordinate" data-attr = "x" pattern = "[0-9]*" / >
< span > X< / span >
< / label >
< label class = "draginput" >
< input id = "image_y" class = "attr_changer" data-title = "Change Y coordinate" data-attr = "y" pattern = "[0-9]*" / >
< span > Y< / span >
< / label >
< label class = "draginput" >
< input id = "image_width" class = "attr_changer" data-title = "Change image width" data-attr = "width" pattern = "[0-9]*" / >
< span class = "icon_label" > Width< / span >
< / label >
< label class = "draginput" >
< input id = "image_height" class = "attr_changer" data-title = "Change image height" data-attr = "height" pattern = "[0-9]*" / >
< span class = "icon_label" > Height< / span >
< / label >
< / div >
2012-05-17 22:50:00 +00:00
< / div >
2012-07-28 00:59:43 +00:00
< div id = "circle_panel" class = "context_panel" >
< h4 > Circle< / h4 >
2021-05-25 02:51:31 +00:00
< div class = "draginputs" >
< label id = "tool_circle_cx" class = "draginput" >
< span > Center X< / span >
< input id = "circle_cx" class = "attr_changer" title = "Change circle's cx coordinate" data-attr = "cx" / >
< / label >
< label id = "tool_circle_cy" class = "draginput" >
< span > Center Y< / span >
< input id = "circle_cy" class = "attr_changer" title = "Change circle's cy coordinate" data-attr = "cy" / >
< / label >
< label id = "tool_circle_r" class = "draginput" >
< span > Radius< / span >
< input id = "circle_r" class = "attr_changer" title = "Change circle's radius" data-attr = "r" / >
< / label >
< / div >
2015-12-22 05:05:03 +00:00
< / div >
2021-05-25 02:51:31 +00:00
< div id = "ellipse_panel" class = "context_panel" >
< h4 > Ellipse< / h4 >
< div class = "draginputs" >
< label id = "tool_ellipse_cx" >
< input id = "ellipse_cx" class = "attr_changer" data-title = "Change ellipse's cx coordinate" data-attr = "cx" pattern = "[0-9]*" / >
< span > X< / span >
< / label >
< label id = "tool_ellipse_cy" >
< input id = "ellipse_cy" class = "attr_changer" data-title = "Change ellipse's cy coordinate" data-attr = "cy" pattern = "[0-9]*" / >
< span > Y< / span >
< / label >
< label id = "tool_ellipse_rx" >
< input id = "ellipse_rx" class = "attr_changer" data-title = "Change ellipse's x radius" data-attr = "rx" pattern = "[0-9]*" / >
< span > Radius X< / span >
< / label >
< label id = "tool_ellipse_ry" >
< input id = "ellipse_ry" class = "attr_changer" data-title = "Change ellipse's y radius" data-attr = "ry" pattern = "[0-9]*" / >
< span > Radius Y< / span >
< / label >
< / div >
2015-12-22 05:05:03 +00:00
< / div >
< div id = "line_panel" class = "context_panel clearfix" >
< h4 > Line< / h4 >
2021-05-25 02:51:31 +00:00
< div class = "draginputs" >
< label id = "tool_line_x1" >
< input id = "line_x1" class = "attr_changer" data-title = "Change line's starting x coordinate" data-attr = "x1" pattern = "[0-9]*" / >
< span > Start X< / span >
< / label >
< label id = "tool_line_y1" >
< input id = "line_y1" class = "attr_changer" data-title = "Change line's starting y coordinate" data-attr = "y1" pattern = "[0-9]*" / >
< span > Start Y< / span >
< / label >
< label id = "tool_line_x2" >
< input id = "line_x2" class = "attr_changer" data-title = "Change line's ending x coordinate" data-attr = "x2" pattern = "[0-9]*" / >
< span > End X< / span >
< / label >
< label id = "tool_line_y2" >
< input id = "line_y2" class = "attr_changer" data-title = "Change line's ending y coordinate" data-attr = "y2" pattern = "[0-9]*" / >
< span > End Y< / span >
< / label >
< / div >
2015-12-22 05:05:03 +00:00
< / div >
< div id = "text_panel" class = "context_panel" >
2021-06-01 21:18:41 +00:00
2015-12-22 05:05:03 +00:00
< h4 > Text< / h4 >
2021-05-25 02:51:31 +00:00
< div class = "draginputs" >
2021-07-07 19:42:53 +00:00
< label class = "draginput twocol textcontent hidden" data-title = "Change Content" >
2021-07-19 15:18:54 +00:00
< input id = "text" type = "text" autocomplete = "off" / >
2021-06-01 21:18:41 +00:00
< span > Content< / span >
2021-05-25 02:51:31 +00:00
< / label >
< label >
< input id = "text_x" class = "attr_changer" data-title = "Change text x coordinate" data-attr = "x" pattern = "[0-9]*" / >
< span > X< / span >
< / label >
< label >
< input id = "text_y" class = "attr_changer" data-title = "Change text y coordinate" data-attr = "y" pattern = "[0-9]*" / >
< span > Y< / span >
< / label >
< div class = "toolset draginput twocol" id = "tool_font_family" >
<!-- Font family -->
< span > Font< / span >
2021-05-28 01:18:45 +00:00
< div id = "preview_font" style = "font-family: sans-serif" > sans-serif< / div >
2021-05-25 02:51:31 +00:00
< div class = "caret" > < / div >
< input id = "font_family" data-title = "Change Font Family" size = "12" type = "hidden" / >
< select id = "font_family_dropdown" >
< / select >
< / div >
2021-06-01 21:18:41 +00:00
< div class = "draginput font_style" >
2021-05-25 02:51:31 +00:00
< span > Font Style< / span >
< div id = "tool_bold" data-title = "Bold Text [B]" > B< / div >
< div id = "tool_italic" data-title = "Italic Text [I]" > i< / div >
< / div >
< label id = "tool_font_size" data-title = "Change Font Size" >
< input id = "font_size" value = "0" / >
< span id = "font_sizeLabel" class = "icon_label" > Font Size< / span >
< / label >
2015-12-22 05:05:03 +00:00
< / div >
< / div >
<!-- formerly gsvg_panel -->
2021-06-10 00:13:58 +00:00
< div id = "svg_panel" class = "context_panel clearfix" >
< h4 > SVG< / h4 >
2015-12-22 05:05:03 +00:00
< / div >
< div id = "use_panel" class = "context_panel clearfix" >
2021-06-10 00:13:58 +00:00
< h4 > Use< / h4 >
< div class = "button full" id = "tool_unlink_use" data-title = "Break link" > Break use ref< / div >
2015-12-22 05:05:03 +00:00
< / div >
< div id = "g_panel" class = "context_panel clearfix" >
2021-06-16 23:51:45 +00:00
< h4 > Group< / h4 >
< div class = "draginputs" >
< label >
< input id = "g_x" class = "attr_changer" data-title = "Change groups's x coordinate" data-attr = "x" pattern = "[0-9]*" / >
< span > X< / span >
< / label >
< label >
< input id = "g_y" class = "attr_changer" data-title = "Change groups's y coordinate" data-attr = "y" pattern = "[0-9]*" / >
< span > Y< / span >
< / label >
2021-05-25 02:51:31 +00:00
< / div >
2021-06-16 23:51:45 +00:00
< div class = "button full" title = "Ungroup Elements" id = "button_ungroup" > Ungroup< / div >
2015-12-22 05:05:03 +00:00
< / div >
< div id = "path_node_panel" class = "context_panel clearfix" >
< h4 > Edit Path< / h4 >
2021-05-25 02:51:31 +00:00
< div class = "draginputs" >
< label id = "tool_node_x" >
< input id = "path_node_x" class = "attr_changer" data-title = "Change node's x coordinate" data-attr = "x" / >
< span > X< / span >
< / label >
< label id = "tool_node_y" >
< input id = "path_node_y" class = "attr_changer" data-title = "Change node's y coordinate" data-attr = "y" / >
< span > Y< / span >
< / label >
< div id = "segment_type" class = "draginput label" >
2021-06-16 23:51:45 +00:00
< span > Seg Type< / span >
2021-05-25 02:51:31 +00:00
< select id = "seg_type" data-title = "Change Segment type" >
< option id = "straight_segments" selected = "selected" value = "4" > Straight< / option >
< option id = "curve_segments" value = "6" > Curve< / option >
< / select >
< div class = "caret" > < / div >
< label id = "seg_type_label" > Straight< / label >
< / div >
2015-12-22 05:05:03 +00:00
< / div >
2021-05-24 17:55:52 +00:00
< div class = "button-container clearfix" >
< div class = "button full" id = "tool_node_clone" title = "Adds a node" > Add Node< / div >
< div class = "button full" id = "tool_node_delete" title = "Delete Node" > Delete Node< / div >
2021-10-04 22:26:19 +00:00
< div class = "button full" id = "tool_openclose_path" title = "Open/close sub-path" > Open/close Path< / div >
2021-05-24 17:55:52 +00:00
< / div >
2015-12-22 05:05:03 +00:00
< / div >
<!-- Buttons when a single element is selected -->
< div id = "selected_panel" class = "context_panel" >
2021-05-25 02:51:31 +00:00
< div class = "draginputs" >
< label id = "tool_angle" data-title = "Change rotation angle" class = "draginput" >
< input id = "angle" class = "attr_changer" size = "2" value = "0" data-attr = "transform" data-min = "-180" data-max = "180" type = "text" / >
< span class = "icon_label" > Rotation< / span >
2021-06-01 21:18:41 +00:00
< div id = "tool_angle_indicator" class = "angle" >
< div id = "tool_angle_indicator_cursor" class = "angle-cursor" > < / div >
2021-05-25 02:51:31 +00:00
< / div >
< / label >
< label id = "tool_opacity" data-title = "Change selected item opacity" >
2021-02-09 18:48:44 +00:00
< input id = "group_opacity" class = "attr_changer" data-attr = "opacity" value = "100" step = "5" min = "0" max = "100" / >
2015-12-22 05:05:03 +00:00
< span id = "group_opacityLabel" class = "icon_label" > Opacity< / span >
< / label >
2021-05-25 02:51:31 +00:00
< label id = "tool_blur" data-title = "Change gaussian blur value" >
< input id = "blur" size = "2" value = "0" step = ".1" min = "0" max = "10" / >
< span class = "icon_label" > Blur< / span >
2015-12-22 05:05:03 +00:00
< / label >
2021-05-25 02:51:31 +00:00
< label id = "cornerRadiusLabel" data-title = "Change Rectangle Corner Radius" >
< input id = "rect_rx" value = "0" data-attr = "rx" class = "attr_changer" type = "text" pattern = "[0-9]*" / >
< span class = "icon_label" > Roundness< / span >
< / label >
2015-12-22 05:05:03 +00:00
< / div >
< div id = "align_tools" >
2021-06-10 00:13:58 +00:00
< h4 > Align to canvas< / h4 >
2015-12-22 05:05:03 +00:00
< div class = "toolset align_buttons" id = "tool_position" >
< label >
< div class = "col last clear" id = "position_opts" >
2021-05-24 18:40:10 +00:00
< div class = "align_button" id = "tool_posleft" title = "Align Left" data-align = "left" >
2020-08-05 00:50:03 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 2 1 L 2 5 L 14 5 L 14 11 L 2 11 L 2 16 L 20 16 L 20 22 L 2 22 L 2 26 L 1 26 L 1 1 L 2 1 Z" / >
< / svg >
< / div >
2021-05-24 18:40:10 +00:00
< div class = "align_button" id = "tool_poscenter" title = "Align Center" data-align = "center" >
2020-08-05 00:50:03 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 13 1 L 14 1 L 14 6 L 22 6 L 22 12 L 14 12 L 14 15 L 19 15 L 19 21 L 14 21 L 14 26 L 13 26 L 13 21 L 8 21 L 8 15 L 13 15 L 13 12 L 5 12 L 5 6 L 13 6 L 13 1 Z" / >
< / svg >
< / div >
2021-05-24 18:40:10 +00:00
< div class = "align_button" id = "tool_posright" title = "Align Right" data-align = "right" >
2020-08-05 00:50:03 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 25 1 L 25 5 L 13 5 L 13 11 L 25 11 L 25 16 L 7 16 L 7 22 L 25 22 L 25 26 L 26 26 L 26 1 L 25 1 Z" / >
< / svg >
< / div >
2021-05-24 18:40:10 +00:00
< div class = "align_button" id = "tool_postop" title = "Align Top" data-align = "top" >
2020-08-05 00:50:03 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 1 2 L 5 2 L 5 14 L 11 14 L 11 2 L 16 2 L 16 20 L 22 20 L 22 2 L 26 2 L 26 1 L 1 1 L 1 2 Z" / >
< / svg >
< / div >
2021-05-24 18:40:10 +00:00
< div class = "align_button" id = "tool_posmiddle" title = "Align Middle" data-align = "middle" >
2020-08-05 00:50:03 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 26 13 L 26 14 L 21 14 L 21 22 L 15 22 L 15 14 L 12 14 L 12 19 L 6 19 L 6 14 L 1 14 L 1 13 L 6 13 L 6 8 L 12 8 L 12 13 L 15 13 L 15 5 L 21 5 L 21 13 L 26 13 Z" / >
< / svg >
< / div >
2021-05-24 18:40:10 +00:00
< div class = "align_button" id = "tool_posbottom" title = "Align Bottom" data-align = "bottom" >
2020-08-05 00:50:03 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 1 25 L 5 25 L 5 13 L 11 13 L 11 25 L 16 25 L 16 7 L 22 7 L 22 25 L 26 25 L 26 26 L 1 26 L 1 25" / >
< / svg >
< / div >
2015-12-22 05:05:03 +00:00
< / div >
2021-05-28 01:18:45 +00:00
< div class = "clearfix" > < / div >
2015-12-22 05:05:03 +00:00
< / label >
< / div >
< / div >
< / div >
<!-- Buttons when multiple elements are selected -->
< div id = "multiselected_panel" class = "context_panel clearfix" >
< h4 class = "hidable" > Multiple Elements< / h4 >
2021-05-24 16:57:41 +00:00
< div class = "toolset align_buttons" >
< label id = "tool_align_relative" >
2021-05-25 02:51:31 +00:00
< div class = "select-input" >
2021-05-24 17:55:52 +00:00
< select id = "align_relative_to" title = "Align relative to ..." class = "select_tool" >
< option id = "selected_objects" value = "selected" > Align to objects< / option >
< option id = "page" value = "page" > Align to page< / option >
< / select >
< / div >
2015-12-22 05:05:03 +00:00
< / label >
2021-05-24 16:57:41 +00:00
< div class = "col last clear" >
2021-05-24 18:40:10 +00:00
< div class = "align_button" id = "tool_alignleft" title = "Align Left" data-align = "left" >
2020-11-25 07:13:00 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 2 1 L 2 5 L 14 5 L 14 11 L 2 11 L 2 16 L 20 16 L 20 22 L 2 22 L 2 26 L 1 26 L 1 1 L 2 1 Z" / >
< / svg >
< / div >
2021-05-24 18:40:10 +00:00
< div class = "align_button" id = "tool_aligncenter" title = "Align Center" data-align = "center" >
2020-11-25 07:13:00 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 13 1 L 14 1 L 14 6 L 22 6 L 22 12 L 14 12 L 14 15 L 19 15 L 19 21 L 14 21 L 14 26 L 13 26 L 13 21 L 8 21 L 8 15 L 13 15 L 13 12 L 5 12 L 5 6 L 13 6 L 13 1 Z" / >
< / svg >
< / div >
2021-05-24 18:40:10 +00:00
< div class = "align_button" id = "tool_alignright" title = "Align Right" data-align = "right" >
2020-11-25 07:13:00 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 25 1 L 25 5 L 13 5 L 13 11 L 25 11 L 25 16 L 7 16 L 7 22 L 25 22 L 25 26 L 26 26 L 26 1 L 25 1 Z" / >
< / svg >
< / div >
2021-05-24 18:40:10 +00:00
< div class = "align_button" id = "tool_aligntop" title = "Align Top" data-align = "top" >
2020-11-25 07:13:00 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 1 2 L 5 2 L 5 14 L 11 14 L 11 2 L 16 2 L 16 20 L 22 20 L 22 2 L 26 2 L 26 1 L 1 1 L 1 2 Z" / >
< / svg >
< / div >
2021-05-24 18:40:10 +00:00
< div class = "align_button" id = "tool_alignmiddle" title = "Align Middle" data-align = "middle" >
2020-11-25 07:13:00 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 26 13 L 26 14 L 21 14 L 21 22 L 15 22 L 15 14 L 12 14 L 12 19 L 6 19 L 6 14 L 1 14 L 1 13 L 6 13 L 6 8 L 12 8 L 12 13 L 15 13 L 15 5 L 21 5 L 21 13 L 26 13 Z" / >
< / svg >
< / div >
2021-05-24 18:40:10 +00:00
< div class = "align_button" id = "tool_alignbottom" title = "Align Bottom" data-align = "bottom" >
2020-11-25 07:13:00 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "27" height = "27" >
< path d = "M 1 25 L 5 25 L 5 13 L 11 13 L 11 25 L 16 25 L 16 7 L 22 7 L 22 25 L 26 25 L 26 26 L 1 26 L 1 25" / >
< / svg >
< / div >
2015-12-22 05:05:03 +00:00
< / div >
2021-05-28 01:18:45 +00:00
< / div >
2015-12-22 05:05:03 +00:00
< div class = "clearfix" > < / div >
2021-06-16 23:51:45 +00:00
< div class = "button full" id = "button_group" > Group Elements< / div >
2021-06-02 16:08:43 +00:00
< div class = "button full" id = "tool_text_on_path" title = "Place text on path" > Place text on path< / div >
2015-12-22 05:05:03 +00:00
< / div >
2021-05-25 02:51:31 +00:00
< div id = "stroke_panel" class = "context_panel" >
2015-12-22 05:05:03 +00:00
< h4 > Stroke< / h4 >
2021-05-25 02:51:31 +00:00
< div class = "draginputs" >
< label class = "draginput" data-title = "Change stroke" >
2021-01-28 17:51:07 +00:00
< input id = "stroke_width" size = "2" value = "1" data-attr = "stroke-width" min = "0" max = "99" step = "1" / >
2021-02-13 14:27:17 +00:00
< span class = "icon_label" > Width< / span >
2015-12-22 05:05:03 +00:00
< / label >
2021-05-25 02:51:31 +00:00
< div class = "stroke_tool draginput" >
< span > Dash< / span >
< select id = "stroke_style" data-title = "Change stroke dash style" >
< option selected = "selected" value = "none" > —< / option >
< option value = "2,2" > ···< / option >
< option value = "5,5" > - -< / option >
< option value = "5,2,2,2" > -·-< / option >
< option value = "5,2,2,2,2,2" > -··-< / option >
< / select >
< div class = "caret" > < / div >
< label id = "stroke_style_label" > —< / label >
< / div >
< label style = "display: none;" >
< span class = "icon_label" > Stroke Join< / span >
< / label >
< label style = "display: none;" >
< span class = "icon_label" > Stroke Cap< / span >
< / label >
2015-12-22 05:05:03 +00:00
< / div >
< / div >
2012-05-30 04:55:00 +00:00
2012-05-17 22:50:00 +00:00
< / div > <!-- tools_top -->
2015-12-22 05:05:03 +00:00
< div id = "cur_context_panel" >
< / div >
2012-05-17 22:50:00 +00:00
< div id = "tools_left" class = "tools_panel" >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_select" data-mode = "select" title = "Select Tool [V]" >
2020-08-05 00:50:03 +00:00
< svg viewBox = "0 0 24 24" width = "24" height = "24" >
< path d = "M17.15 20.76l-2.94 1.5-3.68-6-4.41 3V1.24l12.5 12.01-4.41 1.5 2.94 6z" / >
< / svg >
< / div >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_fhpath" data-mode = "fhpath" title = "Pencil Tool [P]" >
2020-08-05 00:50:03 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" height = "24" viewBox = "0 0 24 24" width = "24" style = "transform: scale(-1,1)" > < path d = "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" / > < / svg >
< / div >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_line" data-mode = "line" title = "Line Tool [L]" >
2020-08-05 00:50:03 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" >
< path d = "M 3 1 L 26 24 L 24 26 L 1 3 L 3 1 Z" > < / path >
< / svg >
< / div >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_rect" data-mode = "rect" title = "Square/Rect Tool [R]" >
2020-08-05 00:50:03 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" >
< path d = "M 0 8 L 0 24 L 24 24 L 25 8 L 0 8 Z" / >
< / svg >
< / div >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_ellipse" data-mode = "ellipse" title = "Ellipse/Circle Tool [C]" >
2020-08-05 00:50:03 +00:00
< svg viewBox = "0 0 27 27" xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" >
< ellipse cx = "13" cy = "13" rx = "13" ry = "9" > < / ellipse >
< / svg >
< / div >
2021-01-18 15:35:26 +00:00
< div class = "tool_button" id = "tool_shapelib" data-mode = "shapelib" title = "Shape Tool [s]" >
2020-08-05 00:50:03 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" height = "27" width = "27" viewBox = "0 0 24 24" >
< polygon points = "14.43,10 12,2 9.57,10 2,10 8.18,14.41 5.83,22 12,17.31 18.18,22 15.83,14.41 22,10" / >
< / svg >
< div class = "tool_menu" >
< / div >
< / div >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_path" data-mode = "path" title = "Path Tool [P]" >
2020-08-05 00:50:03 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 27 27" width = "27" height = "27" >
< path d = "M12.2 1.9c0-.36.86 0 .86 0V14a1.3 1.3 0 10.88 0V1.9s.87-.36.87 0c0 6.81 5.22 11.68 5.22 11.68l-3.25 8.2h-6.55l-3.26-8.2s5.22-4.87 5.22-11.68zM7.83 25.26v-2.61h11.32v2.6H7.84z" / >
< / svg >
< / div >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_text" data-mode = "text" title = "Text Tool [T]" >
2020-08-05 00:50:03 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" height = "24" viewBox = "2 2 20 20" width = "27" height = "27" > < path d = "M5 4v3h5.5v12h3V7H19V4z" / > < / svg >
< / div >
2021-01-17 02:49:34 +00:00
< div class = "tool_button" id = "tool_zoom" data-mode = "zoom" title = "Zoom Tool [Z]" >
2020-08-05 00:50:03 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" height = "24" viewBox = "2 2 20 20" width = "27" > < path d = "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" / > < / svg >
< / div >
2021-04-30 16:37:08 +00:00
< div class = "tool_button" id = "tool_eyedropper" data-mode = "eyedropper" title = "Eyedropper Tool [E]" >
2020-08-05 00:50:03 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" height = "24" viewBox = "2 2 20 20" width = "27" style = "transform: scale(-1, 1)" > < path d = "M20.71 5.63l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z" / > < / svg >
< / div >
2024-02-01 20:04:16 +00:00
< div class = "tool_button" id = "tool_qr" data-mode = "qr" title = "QR Code" >
< svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" fill = "none" stroke = "white" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" class = "lucide lucide-qr-code" > < rect width = "5" height = "5" x = "3" y = "3" rx = "1" / > < rect width = "5" height = "5" x = "16" y = "3" rx = "1" / > < rect width = "5" height = "5" x = "3" y = "16" rx = "1" / > < path d = "M21 16h-3a2 2 0 0 0-2 2v3" / > < path d = "M21 21v.01" / > < path d = "M12 7v3a2 2 0 0 1-2 2H7" / > < path d = "M3 12h.01" / > < path d = "M12 3h.01" / > < path d = "M12 16v.01" / > < path d = "M16 12h1" / > < path d = "M21 12v.01" / > < path d = "M12 21v-1" / > < / svg >
< / div >
2012-06-17 14:41:39 +00:00
< div id = "color_tools" >
2021-05-13 18:37:21 +00:00
< div id = "tool_switch" title = "Switch stroke and fill colors [X]" >
< svg xmlns = 'http://www.w3.org/2000/svg' viewBox = '0 0 11 11' > < path d = 'M3.01 2A6 6 0 019 8h1.83l-2.91 2.91L5 8h2a4 4 0 00-3.99-4v1.93L.1 3.02 3.01.1V2z' / > < / svg >
< / div >
2015-12-22 05:05:03 +00:00
< div class = "color_tool active" id = "tool_fill" >
< label class = "icon_label" title = "Change fill color" > < / label >
< div class = "color_block" >
< div id = "fill_bg" > < / div >
< div id = "fill_color" class = "color_block" > < / div >
< / div >
< / div >
< div class = "color_tool" id = "tool_stroke" >
< label class = "icon_label" title = "Change stroke color" > < / label >
< div class = "color_block" >
< div id = "stroke_bg" > < / div >
< div id = "stroke_color" class = "color_block" title = "Change stroke color" > < / div >
< / div >
< / div >
< / div >
2012-05-17 22:50:00 +00:00
< / div > <!-- tools_left -->
< div id = "tools_bottom" class = "tools_panel" >
<!-- Zoom buttons -->
2021-06-01 21:18:41 +00:00
< select id = "zoom_select" >
< option value = "6" > 6%< / option >
< option value = "12" > 12%< / option >
< option value = "16" > 16%< / option >
< option value = "25" > 25%< / option >
2024-02-02 11:39:04 +00:00
< option value = "50" selected = "selected" > 50%< / option >
2021-06-01 21:18:41 +00:00
< option value = "75" > 75%< / option >
2024-02-02 11:39:04 +00:00
< option value = "100" > 100%< / option >
2021-06-01 21:18:41 +00:00
< option value = "150" > 150%< / option >
< option value = "200" > 200%< / option >
< option value = "300" > 300%< / option >
< option value = "400" > 400%< / option >
< option value = "600" > 600%< / option >
< option value = "800" > 800%< / option >
< option value = "1600" > 1600%< / option >
< / select >
2015-12-22 05:05:03 +00:00
< div id = "zoom_panel" class = "toolset" title = "Change zoom level" >
2021-06-01 21:18:41 +00:00
< div class = "select-input" id = "zoom_label" >
2020-08-05 00:50:03 +00:00
< span id = "zoomLabel" class = "zoom_tool icon_label" >
< svg xmlns = "http://www.w3.org/2000/svg" height = "24" viewBox = "2 2 20 20" width = "27" > < path d = "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" / > < / svg >
< / span >
2024-02-02 11:39:04 +00:00
< input id = "zoom" value = "50%" type = "text" readonly = "readonly" / >
2015-12-22 05:05:03 +00:00
< / div >
< / div >
2020-08-05 00:50:03 +00:00
< div id = "palette" title = "Click to change fill color, shift-click to change stroke color" > < / div >
2012-05-17 22:50:00 +00:00
< / div >
<!-- hidden divs -->
< div id = "color_picker" > < / div >
2021-06-01 21:18:41 +00:00
< / div > <!-- /app -->
2012-05-17 22:50:00 +00:00
< div id = "dialog_box" >
2015-12-22 05:05:03 +00:00
< div id = "dialog_box_overlay" > < / div >
< div id = "dialog_container" >
< div id = "dialog_content" > < / div >
< div id = "dialog_buttons" > < / div >
< / div >
2012-05-17 22:50:00 +00:00
< / div >
< ul id = "cmenu_canvas" class = "contextMenu" >
2015-12-22 05:05:03 +00:00
< li > < a href = "#cut" > Cut < span class = "shortcut" > ⌘X;< / span > < / a > < / li >
< li > < a href = "#copy" > Copy< span class = "shortcut" > ⌘C< / span > < / a > < / li >
< li > < a href = "#paste" > Paste< span class = "shortcut" > ⌘V< / span > < / a > < / li >
< li class = "separator" > < a href = "#delete" > Delete< span class = "shortcut" > ⌫< / span > < / a > < / li >
< li class = "separator" > < a href = "#group" > Group< span class = "shortcut" > ⌘G< / span > < / a > < / li >
< li > < a href = "#ungroup" > Ungroup< span class = "shortcut" > ⌘⇧G< / span > < / a > < / li >
2012-08-25 21:02:58 +00:00
< li class = "separator" > < a href = "#move_front" > Bring to Front< span class = "shortcut" > ⌘⇧↑< / span > < / a > < / li >
2015-12-22 05:05:03 +00:00
< li > < a href = "#move_up" > Bring Forward< span class = "shortcut" > ⌘↑< / span > < / a > < / li >
< li > < a href = "#move_down" > Send Backward< span class = "shortcut" > ⌘↓< / span > < / a > < / li >
2012-08-25 21:02:58 +00:00
< li > < a href = "#move_back" > Send to Back< span class = "shortcut" > ⌘⇧↓< / span > < / a > < / li >
2012-05-17 22:50:00 +00:00
< / ul >
2021-06-04 17:23:32 +00:00
< div class = "tools_flyout inverted-undo" id = "tools_shapelib" >
2020-08-05 00:50:03 +00:00
< div id = "shape_buttons" > < / div >
< / div >
2021-06-02 16:55:24 +00:00
<!-- build:js loading.js -->
2021-06-01 13:19:54 +00:00
< script type = "text/javascript" src = "js/loading.js" > < / script >
2021-06-02 16:55:24 +00:00
<!-- endbuild -->
2024-02-01 20:04:16 +00:00
< script type = "text/javascript" src = "js/lib/qrcode.min.js" > < / script >
2024-02-01 23:18:16 +00:00
<!-- build:js all.js -->
2020-08-02 10:26:22 +00:00
< script type = "text/javascript" src = "js/lib/jquery-3.5.1.min.js" > < / script >
< script type = "text/javascript" src = "js/lib/pathseg.js" > < / script >
< script type = "text/javascript" src = "js/lib/jquery.hotkeys.min.js" > < / script >
< script type = "text/javascript" src = "js/lib/jquery.jgraduate.js" > < / script >
< script type = "text/javascript" src = "js/lib/jquery.contextMenu.js" > < / script >
< script type = "text/javascript" src = "js/lib/jquery-ui-1.8.17.custom.min.js" > < / script >
2021-01-17 02:49:34 +00:00
< script type = "text/javascript" src = "js/jquery.attr.js" > < / script >
2021-02-15 23:12:50 +00:00
< script type = "text/javascript" src = "js/lib/jquery-draginput.js" > < / script >
2021-05-28 01:18:45 +00:00
< script type = "text/javascript" src = "js/lib/css.min.js" > < / script >
2021-01-17 02:49:34 +00:00
< script type = "text/javascript" src = "js/utils.js" > < / script >
< script type = "text/javascript" src = "js/dao.js" > < / script >
< script type = "text/javascript" src = "js/state.js" > < / script >
< script type = "text/javascript" src = "js/sanitize.js" > < / script >
2020-08-02 10:26:22 +00:00
< script type = "text/javascript" src = "js/browser.js" > < / script >
< script type = "text/javascript" src = "js/svgutils.js" > < / script >
< script type = "text/javascript" src = "js/history.js" > < / script >
< script type = "text/javascript" src = "js/select.js" > < / script >
< script type = "text/javascript" src = "js/path.js" > < / script >
2021-01-17 02:49:34 +00:00
< script type = "text/javascript" src = "js/sanitize.js" > < / script >
< script type = "text/javascript" src = "js/units.js" > < / script >
< script type = "text/javascript" src = "js/math.js" > < / script >
< script type = "text/javascript" src = "js/translate.js" > < / script >
< script type = "text/javascript" src = "js/svgtransformlist.js" > < / script >
< script type = "text/javascript" src = "js/draw.js" > < / script >
2020-08-02 10:26:22 +00:00
< script type = "text/javascript" src = "js/svgcanvas.js" > < / script >
2021-01-17 02:49:34 +00:00
< script type = "text/javascript" src = "js/editor.js" > < / script >
2021-01-18 15:35:26 +00:00
< script type = "text/javascript" src = "js/Canvas.js" > < / script >
2021-02-04 20:11:52 +00:00
< script type = "text/javascript" src = "js/Text.js" > < / script >
< script type = "text/javascript" src = "js/Pan.js" > < / script >
2021-01-18 15:35:26 +00:00
< script type = "text/javascript" src = "js/Panel.js" > < / script >
2021-01-17 02:49:34 +00:00
< script type = "text/javascript" src = "js/Rulers.js" > < / script >
< script type = "text/javascript" src = "js/Toolbar.js" > < / script >
< script type = "text/javascript" src = "js/Menu.js" > < / script >
2021-01-18 15:35:26 +00:00
< script type = "text/javascript" src = "js/Keyboard.js" > < / script >
2021-02-13 14:27:17 +00:00
< script type = "text/javascript" src = "js/Import.js" > < / script >
2021-01-26 23:07:55 +00:00
< script type = "text/javascript" src = "js/PaintBox.js" > < / script >
< script type = "text/javascript" src = "js/Palette.js" > < / script >
2021-01-28 17:51:07 +00:00
< script type = "text/javascript" src = "js/Zoom.js" > < / script >
2021-02-09 18:48:44 +00:00
< script type = "text/javascript" src = "js/Modal.js" > < / script >
2021-06-24 02:52:55 +00:00
< script type = "text/javascript" src = "js/Title.js" > < / script >
2021-06-04 17:23:32 +00:00
< script type = "text/javascript" src = "js/Darkmode.js" > < / script >
2021-02-13 14:27:17 +00:00
< script type = "text/javascript" src = "js/ContextMenu.js" > < / script >
2021-01-30 04:52:59 +00:00
< script type = "text/javascript" src = "js/Shapelib.js" > < / script >
2021-01-17 02:49:34 +00:00
< script type = "text/javascript" src = "js/fonts.js" > < / script >
< script type = "text/javascript" src = "js/dialog.js" > < / script >
2020-08-02 10:26:22 +00:00
< script type = "text/javascript" src = "js/lib/contextmenu.js" > < / script >
2020-12-10 22:09:53 +00:00
< script type = "text/javascript" src = "js/lib/jpicker.min.js" > < / script >
2020-08-02 10:26:22 +00:00
< script type = "text/javascript" src = "js/lib/mousewheel.js" > < / script >
< script type = "text/javascript" src = "js/eyedropper.js" > < / script >
< script type = "text/javascript" src = "js/lib/requestanimationframe.js" > < / script >
< script type = "text/javascript" src = "js/lib/taphold.js" > < / script >
< script type = "text/javascript" src = "js/lib/filesaver.js" > < / script >
2020-08-05 02:30:45 +00:00
< script type = "text/javascript" src = "js/paste.js" > < / script >
2021-06-25 14:51:57 +00:00
< script type = "text/javascript" src = "js/modals.js" > < / script >
2021-02-09 18:48:44 +00:00
< script type = "text/javascript" src = "js/start.js" > < / script >
2021-06-11 16:17:45 +00:00
<!-- endbuild -->
2012-05-17 22:50:00 +00:00
< / body >
< / html >
