[add] xqdoca
This commit is contained in:
parent
ff523efdb9
commit
6b78cbb15f
26 changed files with 4505 additions and 1 deletions
1153
docs/xqdoc/resources/base.css
Normal file
1153
docs/xqdoc/resources/base.css
Normal file
File diff suppressed because it is too large
Load diff
295
docs/xqdoc/resources/page.css
Normal file
295
docs/xqdoc/resources/page.css
Normal file
|
|
@ -0,0 +1,295 @@
|
|||
body {
|
||||
font-family: Helvetica;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
pre {
|
||||
font-family: Inconsolata, Consolas, monospace;
|
||||
}
|
||||
|
||||
ol.results {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: right;
|
||||
border-top: solid 4px;
|
||||
padding: 0.25em 0.5em;
|
||||
font-size: 85%;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
li.result {
|
||||
list-style-position: inside;
|
||||
list-style: none;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 a, .result h3 a {
|
||||
text-decoration: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 140%;
|
||||
background-color: #aaa;
|
||||
border-bottom: 1px solid #000;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 100%;
|
||||
background-color: #ddd;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
td {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
/* from bootstrap 4.3.1 */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.25em 0.4em;
|
||||
font-size: 75%;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
border-radius: 0.25rem;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
|
||||
a.badge:hover, a.badge:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.badge:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn .badge {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.badge-pill {
|
||||
padding-right: 0.6em;
|
||||
padding-left: 0.6em;
|
||||
border-radius: 10rem;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
a.badge-primary:hover, a.badge-primary:focus {
|
||||
color: #fff;
|
||||
background-color: #0062cc;
|
||||
}
|
||||
|
||||
a.badge-primary:focus, a.badge-primary.focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
color: #fff;
|
||||
background-color: #6c757d;
|
||||
}
|
||||
|
||||
a.badge-secondary:hover, a.badge-secondary:focus {
|
||||
color: #fff;
|
||||
background-color: #545b62;
|
||||
}
|
||||
|
||||
a.badge-secondary:focus, a.badge-secondary.focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
color: #fff;
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
a.badge-success:hover, a.badge-success:focus {
|
||||
color: #fff;
|
||||
background-color: #1e7e34;
|
||||
}
|
||||
|
||||
a.badge-success:focus, a.badge-success.focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
color: #fff;
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
|
||||
a.badge-info:hover, a.badge-info:focus {
|
||||
color: #fff;
|
||||
background-color: #117a8b;
|
||||
}
|
||||
|
||||
a.badge-info:focus, a.badge-info.focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
color: #212529;
|
||||
background-color: #ffc107;
|
||||
}
|
||||
|
||||
a.badge-warning:hover, a.badge-warning:focus {
|
||||
color: #212529;
|
||||
background-color: #d39e00;
|
||||
}
|
||||
|
||||
a.badge-warning:focus, a.badge-warning.focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
color: #fff;
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
a.badge-danger:hover, a.badge-danger:focus {
|
||||
color: #fff;
|
||||
background-color: #bd2130;
|
||||
}
|
||||
|
||||
a.badge-danger:focus, a.badge-danger.focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
|
||||
}
|
||||
|
||||
.badge-light {
|
||||
color: #212529;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
a.badge-light:hover, a.badge-light:focus {
|
||||
color: #212529;
|
||||
background-color: #dae0e5;
|
||||
}
|
||||
|
||||
a.badge-light:focus, a.badge-light.focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
|
||||
}
|
||||
|
||||
.badge-dark {
|
||||
color: #fff;
|
||||
background-color: #343a40;
|
||||
}
|
||||
|
||||
a.badge-dark:hover, a.badge-dark:focus {
|
||||
color: #fff;
|
||||
background-color: #1d2124;
|
||||
}
|
||||
|
||||
a.badge-dark:focus, a.badge-dark.focus {
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
|
||||
}
|
||||
.op-get {
|
||||
color: #fff;
|
||||
background-color: #61affe;
|
||||
}
|
||||
|
||||
.op-post {
|
||||
color: #fff;
|
||||
background-color: #49cc90;
|
||||
}
|
||||
|
||||
.op-put{
|
||||
color: #fff;
|
||||
background-color: #fca130;
|
||||
}
|
||||
|
||||
.op-delete {
|
||||
color: #fff;
|
||||
background-color: #f93e3e;
|
||||
}
|
||||
.op-patch{
|
||||
color: #fff;
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
.op-all{
|
||||
color: #fff;
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
|
||||
|
||||
/* https://www.w3schools.com/howto/howto_js_treeview.asp */
|
||||
/* Remove default bullets */
|
||||
ul.tree,
|
||||
ul.nested
|
||||
{
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Style the caret/arrow */
|
||||
.caret {
|
||||
cursor: pointer;
|
||||
user-select: none; /* Prevent text selection */
|
||||
}
|
||||
|
||||
/* Create the caret/arrow with a unicode, and style it */
|
||||
.caret::before {
|
||||
content: "\25B6";
|
||||
color: black;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
|
||||
.caret-down::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* Hide the nested list */
|
||||
.nested {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
|
||||
.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* https://css-tricks.com/on-target/ */
|
||||
:target {
|
||||
animation: highlight 1s ease;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
@keyframes highlight {
|
||||
0% { border-left-color: red; }
|
||||
100% { border-left-color: white; }
|
||||
}
|
||||
section > div {
|
||||
border-left: 40px solid white;
|
||||
padding: 10px;
|
||||
transition: all 0.5s ease;
|
||||
padding-right: 50px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
5
docs/xqdoc/resources/prism/1.29.0/prism.css
Normal file
5
docs/xqdoc/resources/prism/1.29.0/prism.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
/* PrismJS 1.29.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+xquery&plugins=line-numbers+toolbar+copy-to-clipboard */
|
||||
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
|
||||
pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
|
||||
div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}
|
||||
11
docs/xqdoc/resources/prism/1.29.0/prism.js
Normal file
11
docs/xqdoc/resources/prism/1.29.0/prism.js
Normal file
File diff suppressed because one or more lines are too long
255
docs/xqdoc/resources/query.css
Normal file
255
docs/xqdoc/resources/query.css
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
/* from xsl:query.xsl (D) from
|
||||
https://www.w3.org/TR/xpath-functions-31*/
|
||||
div.exampleInner pre {
|
||||
margin-left: 1em;
|
||||
margin-top: 0em;
|
||||
margin-bottom: 0em
|
||||
}
|
||||
|
||||
pre.small {
|
||||
font-size: small
|
||||
}
|
||||
|
||||
div.exampleOuter {
|
||||
border: 4px double gray;
|
||||
margin: 0em;
|
||||
padding: 0em
|
||||
}
|
||||
|
||||
div.exampleInner {
|
||||
background-color: #d5dee3;
|
||||
padding: 4px;
|
||||
margin: 0em
|
||||
}
|
||||
|
||||
div.exampleInner table {
|
||||
border: 0;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
div.exampleInner td {
|
||||
vertical-align: baseline;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div.exampleWrapper {
|
||||
margin: 4px
|
||||
}
|
||||
|
||||
div.exampleHeader {
|
||||
font-weight: bold;
|
||||
margin: 4px
|
||||
}
|
||||
|
||||
div.proto {
|
||||
border: 0;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
div.issue {
|
||||
border-bottom-color: black;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1pt;
|
||||
margin-bottom: 20pt;
|
||||
}
|
||||
|
||||
th.issue-toc-head {
|
||||
border-bottom-color: black;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1pt;
|
||||
}
|
||||
|
||||
div.schemaComp {
|
||||
border: 4px double gray;
|
||||
margin: 0em 1em;
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
div.compHeader {
|
||||
margin: 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span.schemaComp {
|
||||
background-color: white;
|
||||
color: #A52A2A;
|
||||
}
|
||||
|
||||
div.compBody {
|
||||
border-top-width: 4px;
|
||||
border-top-style: double;
|
||||
border-top-color: #d3d3d3;
|
||||
padding: 4px;
|
||||
margin: 0em;
|
||||
}
|
||||
|
||||
div.exampleInner {
|
||||
background-color: #d5dee3;
|
||||
color: black;
|
||||
border-top-width: 4px;
|
||||
border-top-style: double;
|
||||
border-top-color: #d3d3d3;
|
||||
border-bottom-width: 4px;
|
||||
border-bottom-style: double;
|
||||
border-bottom-color: #d3d3d3;
|
||||
padding: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
div.issueBody {
|
||||
margin-left: 0.25in;
|
||||
}
|
||||
|
||||
code.function {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
code.return-type {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code.return-varies {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code.type {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code.as {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
code.arg {
|
||||
|
||||
}
|
||||
|
||||
code.strikeout {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
code.small {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
p.table.footnote {
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
table.casting {
|
||||
font-size: x-small;
|
||||
}
|
||||
|
||||
table.hierarchy {
|
||||
font-size: x-small;
|
||||
}
|
||||
|
||||
table.proto {
|
||||
|
||||
}
|
||||
|
||||
td.castY {
|
||||
background-color: #7FFF7F;
|
||||
color: black;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
td.castN {
|
||||
background-color: #FF7F7F;
|
||||
color: black;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
td.castM {
|
||||
background-color: white;
|
||||
color: black;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
td.castOther {
|
||||
background-color: yellow;
|
||||
color: black;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span.cancast:hover {
|
||||
background-color: #ffa;
|
||||
color: black;
|
||||
}
|
||||
|
||||
div.protoref {
|
||||
margin-left: 0.5in;
|
||||
text-indent: -0.5in;
|
||||
}
|
||||
|
||||
dd.indent {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
p.element-syntax {
|
||||
border: solid thin;
|
||||
background-color: #ffccff
|
||||
}
|
||||
|
||||
p.element-syntax-chg {
|
||||
border: solid thick yellow;
|
||||
background-color: #ffccff
|
||||
}
|
||||
|
||||
div.proto {
|
||||
padding: .5em;
|
||||
border: .5em;
|
||||
border-left-style: solid;
|
||||
page-break-inside: avoid;
|
||||
margin: 1em auto;
|
||||
border-color: #ff99ff;
|
||||
background: #ffe6ff;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
div.example-chg {
|
||||
border: solid thick yellow;
|
||||
background-color: #40e0d0;
|
||||
padding: 1em
|
||||
}
|
||||
|
||||
div.ffheader {
|
||||
margin-top: .8rem;
|
||||
font-size: 140%;
|
||||
font-variant: all-small-caps;
|
||||
text-transform: lowercase;
|
||||
font-weight: bold;
|
||||
color: hsla(203, 20%, 40%, .7);
|
||||
}
|
||||
|
||||
span.verb {
|
||||
font: small-caps 100% sans-serif
|
||||
}
|
||||
|
||||
span.error {
|
||||
font-size: small
|
||||
}
|
||||
|
||||
span.definition {
|
||||
font: small-caps 100% sans-serif
|
||||
}
|
||||
|
||||
span.grayed {
|
||||
color: gray
|
||||
}
|
||||
|
||||
table.scrap td {
|
||||
vertical-align: baseline;
|
||||
text-align: left;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
table.data
|
||||
table.index {
|
||||
border-bottom: 2px !important;
|
||||
}
|
||||
1
docs/xqdoc/resources/readme.md
Normal file
1
docs/xqdoc/resources/readme.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
Support files for xqdoca
|
||||
21
docs/xqdoc/resources/svgdotjs/LICENSE
Normal file
21
docs/xqdoc/resources/svgdotjs/LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2019 Ulrich-Matthias Schäfer
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
136
docs/xqdoc/resources/svgdotjs/README.md
Normal file
136
docs/xqdoc/resources/svgdotjs/README.md
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
# svg.panzoom.js
|
||||
|
||||
> A plugin for [svg.js](https://github.com/svgdotjs/svg.js) that enables panzoom for svg elements
|
||||
|
||||
## Getting started
|
||||
|
||||
```
|
||||
npm install @svgdotjs/svg.js @svgdotjs/svg.panzoom.js
|
||||
```
|
||||
|
||||
Include this plugin after including the svg.js library in your html document.
|
||||
|
||||
```
|
||||
<script src="node_modules/@svgdotjs/svg.js/dist/svg.js"></script>
|
||||
<script src="node_modules/@svgdotjs/svg.panzoom.js/dist/svg.panzoom.js"></script>
|
||||
```
|
||||
|
||||
Or for esm just import it:
|
||||
|
||||
```
|
||||
import { SVG } from '@svgdotjs/svg.js'
|
||||
import '@svgdotjs/svg.panzoom.js'
|
||||
```
|
||||
|
||||
To enable pan/zoom on an svg:
|
||||
|
||||
```js
|
||||
// enables panZoom
|
||||
var canvas = SVG()
|
||||
.addTo('#id')
|
||||
.size(1000, 1000)
|
||||
.panZoom()
|
||||
|
||||
// zoom programatically
|
||||
canvas.zoom(lvl, point)
|
||||
```
|
||||
|
||||
You can configure `panZoom` by passing options to it.
|
||||
|
||||
- zoomMin: Minimal zoom level
|
||||
- zoomMax: Maximal zoom level
|
||||
- zoomFactor: How much is zoomed by one mouse wheel step
|
||||
|
||||
This could look like this:
|
||||
|
||||
```js
|
||||
var canvas = SVG()
|
||||
.addTo('#id')
|
||||
.size(1000, 1000)
|
||||
.panZoom({ zoomMin: 0.5, zoomMax: 20 })
|
||||
```
|
||||
|
||||
Setting the min and max value will automatically restrict the zoom to the provided level.
|
||||
However you are still able to change the zoom out of that bonds by calling `zoom(lvl)` programatically.
|
||||
|
||||
On touchable devices a pinchZoom gesture is supported. Min and max values also apply here.
|
||||
|
||||
Zooming is animatable, too:
|
||||
|
||||
```js
|
||||
canvas
|
||||
.zoom(1) // uses center of viewport by default
|
||||
.animate()
|
||||
.zoom(2, { x: 100, y: 100 }) // zoom into specified point
|
||||
```
|
||||
|
||||
To disable `panZoom` or change its options just call it again with `false` or the new options.
|
||||
|
||||
## Options
|
||||
|
||||
You can override the default options by passing an object in to the `.panZoom({options})` call.
|
||||
|
||||
| Option | Default | Description |
|
||||
| ------------ | ---------------- | -------------------------------------------------------------------------------------------------------------- |
|
||||
| panning | true | Enable panning |
|
||||
| pinchZoom | true | Enable pinch to zoom |
|
||||
| wheelZoom | true | Enable mouse wheel zoom |
|
||||
| panButton | 0 | Which mouse button to use for pan ([info](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button)) |
|
||||
| oneFingerPan | false | Enables the ability to pan with only one finger instead of two for touchdevices |
|
||||
| margins | false | An object {top, left, right, bottom} to restrict the pan area towards this side so that at least x user units of the opposite side are still visible |
|
||||
| zoomFactor | 2 | How quickly to zoom when using `wheelZoom` |
|
||||
| zoomMin | Number.MIN_VALUE | The minimum zoom level |
|
||||
| zoomMax | Number.MAX_VALUE | The maximum zoom level |
|
||||
| wheelZoomDeltaModeLinePixels | 17 | The multiplier to convert wheel zoom deltaY values from deltaMode=1 (lines) to deltaMode=0 (pixels) |
|
||||
| wheelZoomDeltaModeScreenPixels | 53 | The multiplier to convert wheel zoom deltaY values from deltaMode=2 (screen) to deltaMode=0 (pixels) |
|
||||
|
||||
### Example:
|
||||
|
||||
```js
|
||||
draw.panZoom({
|
||||
wheelZoom: false,
|
||||
zoomMin: 0.5,
|
||||
zoomMax: 2
|
||||
})
|
||||
```
|
||||
|
||||
This will disable wheel zooming and set the maximum zoom to 2 or 200% and the minimum zoom to 0.5 or 50%.
|
||||
|
||||
## Events
|
||||
|
||||
Multiple events are fired doing different actions. This allow you to respond
|
||||
to actions and in some cases stop an action via `preventDefault()`.
|
||||
|
||||
`zoom` is fired when a mouse wheel event or programmable `zoom()` triggers
|
||||
a zoom. This usually doesn't happen on mobile devices, in which case
|
||||
`pinchZoomStart` is fired when a zoom happens.
|
||||
|
||||
Events fired from SVG.js are [`CustomEvent`s](http://devdocs.io/dom/customevent),
|
||||
so the arguments passed from svg.panzoom.js are in in the `.detail` property.
|
||||
|
||||
| Event Name | Argument Value | preventDefault support |
|
||||
| -------------- | ---------------- | ---------------------- |
|
||||
| zoom | `{ lvl, focus }` | YES |
|
||||
| panStart | `{ event }` | NO |
|
||||
| panEnd | `{ event }` | NO |
|
||||
| panning | `{ box }` | YES |
|
||||
| pinchZoomStart | `{ event }` | YES |
|
||||
| pinchZoomEnd | `{ event }` | NO |
|
||||
|
||||
Where `lvl` is the new zoom level,
|
||||
[`focus`](https://svgjs.com/docs/3.0/classes/#svg-point) is th point of zoom, [`box`](https://svgjs.com/docs/3.0/classes/#svg-box) is the new calculated viewbox
|
||||
and event is the event that triggered the action.
|
||||
|
||||
An example of stopping a pinch-zoom action:
|
||||
|
||||
```js
|
||||
var canvas = SVG()
|
||||
.addTo('#id')
|
||||
.size(1000, 1000)
|
||||
.panZoom()
|
||||
|
||||
canvas.on('pinchZoomStart', function (ev) {
|
||||
ev.preventDefault()
|
||||
// ...
|
||||
})
|
||||
```
|
||||
372
docs/xqdoc/resources/svgdotjs/svg.panzoom.js
Normal file
372
docs/xqdoc/resources/svgdotjs/svg.panzoom.js
Normal file
|
|
@ -0,0 +1,372 @@
|
|||
/*!
|
||||
* @svgdotjs/svg.panzoom.js - A plugin for svg.js that enables panzoom for viewport elements
|
||||
* @version 2.1.2
|
||||
* https://github.com/svgdotjs/svg.panzoom.js#readme
|
||||
*
|
||||
* @copyright undefined
|
||||
* @license MIT
|
||||
*
|
||||
* BUILT: Thu Jul 22 2021 14:51:35 GMT+0200 (Mitteleuropäische Sommerzeit)
|
||||
*/;
|
||||
(function (svg_js) {
|
||||
'use strict';
|
||||
|
||||
var normalizeEvent = function normalizeEvent(ev) {
|
||||
return ev.touches || [{
|
||||
clientX: ev.clientX,
|
||||
clientY: ev.clientY
|
||||
}];
|
||||
};
|
||||
|
||||
svg_js.extend(svg_js.Svg, {
|
||||
panZoom: function panZoom(options) {
|
||||
var _options,
|
||||
_options$zoomFactor,
|
||||
_options$zoomMin,
|
||||
_options$zoomMax,
|
||||
_options$wheelZoom,
|
||||
_options$pinchZoom,
|
||||
_options$panning,
|
||||
_options$panButton,
|
||||
_options$oneFingerPan,
|
||||
_options$margins,
|
||||
_options$wheelZoomDel,
|
||||
_options$wheelZoomDel2,
|
||||
_this = this;
|
||||
|
||||
this.off('.panZoom'); // when called with false, disable panZoom
|
||||
|
||||
if (options === false) return this;
|
||||
options = (_options = options) != null ? _options : {};
|
||||
var zoomFactor = (_options$zoomFactor = options.zoomFactor) != null ? _options$zoomFactor : 2;
|
||||
var zoomMin = (_options$zoomMin = options.zoomMin) != null ? _options$zoomMin : Number.MIN_VALUE;
|
||||
var zoomMax = (_options$zoomMax = options.zoomMax) != null ? _options$zoomMax : Number.MAX_VALUE;
|
||||
var doWheelZoom = (_options$wheelZoom = options.wheelZoom) != null ? _options$wheelZoom : true;
|
||||
var doPinchZoom = (_options$pinchZoom = options.pinchZoom) != null ? _options$pinchZoom : true;
|
||||
var doPanning = (_options$panning = options.panning) != null ? _options$panning : true;
|
||||
var panButton = (_options$panButton = options.panButton) != null ? _options$panButton : 0;
|
||||
var oneFingerPan = (_options$oneFingerPan = options.oneFingerPan) != null ? _options$oneFingerPan : false;
|
||||
var margins = (_options$margins = options.margins) != null ? _options$margins : false;
|
||||
var wheelZoomDeltaModeLinePixels = (_options$wheelZoomDel = options.wheelZoomDeltaModeLinePixels) != null ? _options$wheelZoomDel : 17;
|
||||
var wheelZoomDeltaModeScreenPixels = (_options$wheelZoomDel2 = options.wheelZoomDeltaModeScreenPixels) != null ? _options$wheelZoomDel2 : 53;
|
||||
var lastP;
|
||||
var lastTouches;
|
||||
var zoomInProgress = false;
|
||||
var viewbox = this.viewbox();
|
||||
|
||||
var restrictToMargins = function restrictToMargins(box) {
|
||||
if (!margins) return box;
|
||||
var top = margins.top,
|
||||
left = margins.left,
|
||||
bottom = margins.bottom,
|
||||
right = margins.right;
|
||||
|
||||
var _this$attr = _this.attr(['width', 'height']),
|
||||
width = _this$attr.width,
|
||||
height = _this$attr.height;
|
||||
|
||||
var preserveAspectRatio = _this.node.preserveAspectRatio.baseVal; // The current viewport (exactly what is shown on the screen, what we ultimately want to restrict)
|
||||
// is not always exactly the same as current viewbox. They are different when the viewbox aspectRatio and the svg aspectRatio
|
||||
// are different and preserveAspectRatio is not "none". These offsets represent the difference in user coordinates
|
||||
// between the side of the viewbox and the side of the viewport.
|
||||
|
||||
var viewportLeftOffset = 0;
|
||||
var viewportRightOffset = 0;
|
||||
var viewportTopOffset = 0;
|
||||
var viewportBottomOffset = 0; // preserveAspectRatio none has no offsets
|
||||
|
||||
if (preserveAspectRatio.align !== preserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE) {
|
||||
var svgAspectRatio = width / height;
|
||||
var viewboxAspectRatio = viewbox.width / viewbox.height; // when aspectRatios are the same, there are no offsets
|
||||
|
||||
if (viewboxAspectRatio !== svgAspectRatio) {
|
||||
// aspectRatio unknown is like meet because that's the default
|
||||
var isMeet = preserveAspectRatio.meetOrSlice !== preserveAspectRatio.SVG_MEETORSLICE_SLICE;
|
||||
var changedAxis = svgAspectRatio > viewboxAspectRatio ? 'width' : 'height';
|
||||
var isWidth = changedAxis === 'width';
|
||||
var changeHorizontal = isMeet && isWidth || !isMeet && !isWidth;
|
||||
var ratio = changeHorizontal ? svgAspectRatio / viewboxAspectRatio : viewboxAspectRatio / svgAspectRatio;
|
||||
var offset = box[changedAxis] - box[changedAxis] * ratio;
|
||||
|
||||
if (changeHorizontal) {
|
||||
if (preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMIN || preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID || preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMAX) {
|
||||
viewportLeftOffset = offset / 2;
|
||||
viewportRightOffset = -offset / 2;
|
||||
} else if (preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMINYMIN || preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMINYMID || preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMINYMAX) {
|
||||
viewportRightOffset = -offset;
|
||||
} else if (preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMAXYMIN || preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMAXYMID || preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMAXYMAX) {
|
||||
viewportLeftOffset = offset;
|
||||
}
|
||||
} else {
|
||||
if (preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMINYMID || preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID || preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMAXYMID) {
|
||||
viewportTopOffset = offset / 2;
|
||||
viewportBottomOffset = -offset / 2;
|
||||
} else if (preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMINYMIN || preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMIN || preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMAXYMIN) {
|
||||
viewportBottomOffset = -offset;
|
||||
} else if (preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMINYMAX || preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMAX || preserveAspectRatio.align === preserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMAXYMAX) {
|
||||
viewportTopOffset = offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
} // when box.x == leftLimit, the image is panned to the left,
|
||||
// i.e the current box is to the right of the initial viewbox,
|
||||
// and only the right part of the initial image is visible, i.e.
|
||||
// the right side of the initial viewbox minus left margin (viewbox.x+viewbox.width-left)
|
||||
// is aligned with the left side of the viewport (box.x + viewportLeftOffset):
|
||||
// viewbox.width + viewbox.x - left = box.x + viewportLeftOffset
|
||||
// viewbox.width + viewbox.x - left - viewportLeftOffset = box.x (= leftLimit)
|
||||
|
||||
|
||||
var leftLimit = viewbox.width + viewbox.x - left - viewportLeftOffset; // when box.x == rightLimit, the image is panned to the right,
|
||||
// i.e the current box is to the left of the initial viewbox
|
||||
// and only the left part of the initial image is visible, i.e
|
||||
// the left side of the initial viewbox plus right margin (viewbox.x + right)
|
||||
// is aligned with the right side of the viewport (box.x + box.width + viewportRightOffset)
|
||||
// viewbox.x + right = box.x + box.width + viewportRightOffset
|
||||
// viewbox.x + right - box.width - viewportRightOffset = box.x (= rightLimit)
|
||||
|
||||
var rightLimit = viewbox.x + right - box.width - viewportRightOffset; // same with top and bottom
|
||||
|
||||
var topLimit = viewbox.height + viewbox.y - top - viewportTopOffset;
|
||||
var bottomLimit = viewbox.y + bottom - box.height - viewportBottomOffset;
|
||||
box.x = Math.min(leftLimit, Math.max(rightLimit, box.x)); // enforce rightLimit <= box.x <= leftLimit
|
||||
|
||||
box.y = Math.min(topLimit, Math.max(bottomLimit, box.y)); // enforce bottomLimit <= box.y <= topLimit
|
||||
|
||||
return box;
|
||||
};
|
||||
|
||||
var wheelZoom = function wheelZoom(ev) {
|
||||
ev.preventDefault(); // When wheeling on a mouse,
|
||||
// - chrome by default uses deltaY = 53, deltaMode = 0 (pixel)
|
||||
// - firefox by default uses deltaY = 3, deltaMode = 1 (line)
|
||||
// - chrome and firefox on windows after configuring "One screen at a time"
|
||||
// use deltaY = 1, deltaMode = 2 (screen)
|
||||
//
|
||||
// Note that when when wheeling on a touchpad, deltaY depends on how fast
|
||||
// you swipe, but the deltaMode is still different between the browsers.
|
||||
//
|
||||
// Normalize everything so that zooming speed is approximately the same in all cases
|
||||
|
||||
var normalizedPixelDeltaY;
|
||||
|
||||
switch (ev.deltaMode) {
|
||||
case 1:
|
||||
normalizedPixelDeltaY = ev.deltaY * wheelZoomDeltaModeLinePixels;
|
||||
break;
|
||||
|
||||
case 2:
|
||||
normalizedPixelDeltaY = ev.deltaY * wheelZoomDeltaModeScreenPixels;
|
||||
break;
|
||||
|
||||
default:
|
||||
// 0 (already pixels) or new mode (avoid crashing)
|
||||
normalizedPixelDeltaY = ev.deltaY;
|
||||
break;
|
||||
}
|
||||
|
||||
var lvl = Math.pow(1 + zoomFactor, -1 * normalizedPixelDeltaY / 100) * this.zoom();
|
||||
var p = this.point(ev.clientX, ev.clientY);
|
||||
|
||||
if (lvl > zoomMax) {
|
||||
lvl = zoomMax;
|
||||
}
|
||||
|
||||
if (lvl < zoomMin) {
|
||||
lvl = zoomMin;
|
||||
}
|
||||
|
||||
if (this.dispatch('zoom', {
|
||||
level: lvl,
|
||||
focus: p
|
||||
}).defaultPrevented) {
|
||||
return this;
|
||||
}
|
||||
|
||||
this.zoom(lvl, p);
|
||||
|
||||
if (margins) {
|
||||
var box = restrictToMargins(this.viewbox());
|
||||
this.viewbox(box);
|
||||
}
|
||||
};
|
||||
|
||||
var pinchZoomStart = function pinchZoomStart(ev) {
|
||||
lastTouches = normalizeEvent(ev); // Start panning in case only one touch is found
|
||||
|
||||
if (lastTouches.length < 2) {
|
||||
if (doPanning && oneFingerPan) {
|
||||
panStart.call(this, ev);
|
||||
}
|
||||
|
||||
return;
|
||||
} // Stop panning for more than one touch
|
||||
|
||||
|
||||
if (doPanning && oneFingerPan) {
|
||||
panStop.call(this, ev);
|
||||
} // We call it so late, so the user is still able to scroll / reload the page via gesture
|
||||
// In case oneFingerPan is not active
|
||||
|
||||
|
||||
ev.preventDefault();
|
||||
|
||||
if (this.dispatch('pinchZoomStart', {
|
||||
event: ev
|
||||
}).defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.off('touchstart.panZoom', pinchZoomStart);
|
||||
zoomInProgress = true;
|
||||
svg_js.on(document, 'touchmove.panZoom', pinchZoom, this, {
|
||||
passive: false
|
||||
});
|
||||
svg_js.on(document, 'touchend.panZoom', pinchZoomStop, this, {
|
||||
passive: false
|
||||
});
|
||||
};
|
||||
|
||||
var pinchZoomStop = function pinchZoomStop(ev) {
|
||||
ev.preventDefault();
|
||||
var currentTouches = normalizeEvent(ev);
|
||||
|
||||
if (currentTouches.length > 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
zoomInProgress = false;
|
||||
this.dispatch('pinchZoomEnd', {
|
||||
event: ev
|
||||
});
|
||||
svg_js.off(document, 'touchmove.panZoom', pinchZoom);
|
||||
svg_js.off(document, 'touchend.panZoom', pinchZoomStop);
|
||||
this.on('touchstart.panZoom', pinchZoomStart);
|
||||
|
||||
if (currentTouches.length && doPanning && oneFingerPan) {
|
||||
panStart.call(this, ev);
|
||||
}
|
||||
};
|
||||
|
||||
var pinchZoom = function pinchZoom(ev) {
|
||||
ev.preventDefault();
|
||||
var currentTouches = normalizeEvent(ev);
|
||||
var zoom = this.zoom(); // Distance Formula
|
||||
|
||||
var lastDelta = Math.sqrt(Math.pow(lastTouches[0].clientX - lastTouches[1].clientX, 2) + Math.pow(lastTouches[0].clientY - lastTouches[1].clientY, 2));
|
||||
var currentDelta = Math.sqrt(Math.pow(currentTouches[0].clientX - currentTouches[1].clientX, 2) + Math.pow(currentTouches[0].clientY - currentTouches[1].clientY, 2));
|
||||
var zoomAmount = lastDelta / currentDelta;
|
||||
|
||||
if (zoom < zoomMin && zoomAmount > 1 || zoom > zoomMax && zoomAmount < 1) {
|
||||
zoomAmount = 1;
|
||||
}
|
||||
|
||||
var currentFocus = {
|
||||
x: currentTouches[0].clientX + 0.5 * (currentTouches[1].clientX - currentTouches[0].clientX),
|
||||
y: currentTouches[0].clientY + 0.5 * (currentTouches[1].clientY - currentTouches[0].clientY)
|
||||
};
|
||||
var lastFocus = {
|
||||
x: lastTouches[0].clientX + 0.5 * (lastTouches[1].clientX - lastTouches[0].clientX),
|
||||
y: lastTouches[0].clientY + 0.5 * (lastTouches[1].clientY - lastTouches[0].clientY)
|
||||
};
|
||||
var p = this.point(currentFocus.x, currentFocus.y);
|
||||
var focusP = this.point(2 * currentFocus.x - lastFocus.x, 2 * currentFocus.y - lastFocus.y);
|
||||
var box = new svg_js.Box(this.viewbox()).transform(new svg_js.Matrix().translate(-focusP.x, -focusP.y).scale(zoomAmount, 0, 0).translate(p.x, p.y));
|
||||
restrictToMargins(box);
|
||||
this.viewbox(box);
|
||||
lastTouches = currentTouches;
|
||||
this.dispatch('zoom', {
|
||||
box: box,
|
||||
focus: focusP
|
||||
});
|
||||
};
|
||||
|
||||
var panStart = function panStart(ev) {
|
||||
var isMouse = ev.type.indexOf('mouse') > -1; // In case panStart is called with touch, ev.button is undefined
|
||||
|
||||
if (isMouse && ev.button !== panButton && ev.which !== panButton + 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.preventDefault();
|
||||
this.off('mousedown.panZoom', panStart);
|
||||
lastTouches = normalizeEvent(ev);
|
||||
if (zoomInProgress) return;
|
||||
this.dispatch('panStart', {
|
||||
event: ev
|
||||
});
|
||||
lastP = {
|
||||
x: lastTouches[0].clientX,
|
||||
y: lastTouches[0].clientY
|
||||
};
|
||||
svg_js.on(document, 'touchmove.panZoom mousemove.panZoom', panning, this, {
|
||||
passive: false
|
||||
});
|
||||
svg_js.on(document, 'touchend.panZoom mouseup.panZoom', panStop, this, {
|
||||
passive: false
|
||||
});
|
||||
};
|
||||
|
||||
var panStop = function panStop(ev) {
|
||||
ev.preventDefault();
|
||||
svg_js.off(document, 'touchmove.panZoom mousemove.panZoom', panning);
|
||||
svg_js.off(document, 'touchend.panZoom mouseup.panZoom', panStop);
|
||||
this.on('mousedown.panZoom', panStart);
|
||||
this.dispatch('panEnd', {
|
||||
event: ev
|
||||
});
|
||||
};
|
||||
|
||||
var panning = function panning(ev) {
|
||||
ev.preventDefault();
|
||||
var currentTouches = normalizeEvent(ev);
|
||||
var currentP = {
|
||||
x: currentTouches[0].clientX,
|
||||
y: currentTouches[0].clientY
|
||||
};
|
||||
var p1 = this.point(currentP.x, currentP.y);
|
||||
var p2 = this.point(lastP.x, lastP.y);
|
||||
var deltaP = [p2.x - p1.x, p2.y - p1.y];
|
||||
|
||||
if (!deltaP[0] && !deltaP[1]) {
|
||||
return;
|
||||
}
|
||||
|
||||
var box = new svg_js.Box(this.viewbox()).transform(new svg_js.Matrix().translate(deltaP[0], deltaP[1]));
|
||||
lastP = currentP;
|
||||
restrictToMargins(box);
|
||||
|
||||
if (this.dispatch('panning', {
|
||||
box: box,
|
||||
event: ev
|
||||
}).defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.viewbox(box);
|
||||
};
|
||||
|
||||
if (doWheelZoom) {
|
||||
this.on('wheel.panZoom', wheelZoom, this, {
|
||||
passive: false
|
||||
});
|
||||
}
|
||||
|
||||
if (doPinchZoom) {
|
||||
this.on('touchstart.panZoom', pinchZoomStart, this, {
|
||||
passive: false
|
||||
});
|
||||
}
|
||||
|
||||
if (doPanning) {
|
||||
this.on('mousedown.panZoom', panStart, this, {
|
||||
passive: false
|
||||
});
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
}(SVG));
|
||||
//# sourceMappingURL=svg.panzoom.js.map
|
||||
1
docs/xqdoc/resources/svgdotjs/svg.panzoom.js.map
Normal file
1
docs/xqdoc/resources/svgdotjs/svg.panzoom.js.map
Normal file
File diff suppressed because one or more lines are too long
3
docs/xqdoc/resources/svgdotjs/svg.panzoom.min.js
vendored
Normal file
3
docs/xqdoc/resources/svgdotjs/svg.panzoom.min.js
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/*! @svgdotjs/svg.panzoom.js v2.1.2 MIT*/;
|
||||
!function(D){"use strict";function G(t){return t.touches||[{clientX:t.clientX,clientY:t.clientY}]}D.extend(D.Svg,{panZoom:function(t){var n,e,i,o,a,l,h,s,c,E,u,V=this;if(this.off(".panZoom"),!1===t)return this;function m(t){if(!_)return t;var n=_.top,e=_.left,i=_.bottom,o=_.right,a=V.attr(["width","height"]),l=a.width,h=a.height,s=V.node.preserveAspectRatio.baseVal,c=0,E=0,u=0,m=0;if(s.align!==s.SVG_PRESERVEASPECTRATIO_NONE){var p=l/h,r=x.width/x.height;if(r!=p){var S=s.meetOrSlice!==s.SVG_MEETORSLICE_SLICE,R=r<p?"width":"height",M="width"==R,A=S&&M||!S&&!M,v=A?p/r:r/p,f=t[R]-t[R]*v;A?s.align===s.SVG_PRESERVEASPECTRATIO_XMIDYMIN||s.align===s.SVG_PRESERVEASPECTRATIO_XMIDYMID||s.align===s.SVG_PRESERVEASPECTRATIO_XMIDYMAX?(c=f/2,E=-f/2):s.align===s.SVG_PRESERVEASPECTRATIO_XMINYMIN||s.align===s.SVG_PRESERVEASPECTRATIO_XMINYMID||s.align===s.SVG_PRESERVEASPECTRATIO_XMINYMAX?E=-f:s.align!==s.SVG_PRESERVEASPECTRATIO_XMAXYMIN&&s.align!==s.SVG_PRESERVEASPECTRATIO_XMAXYMID&&s.align!==s.SVG_PRESERVEASPECTRATIO_XMAXYMAX||(c=f):s.align===s.SVG_PRESERVEASPECTRATIO_XMINYMID||s.align===s.SVG_PRESERVEASPECTRATIO_XMIDYMID||s.align===s.SVG_PRESERVEASPECTRATIO_XMAXYMID?(u=f/2,m=-f/2):s.align===s.SVG_PRESERVEASPECTRATIO_XMINYMIN||s.align===s.SVG_PRESERVEASPECTRATIO_XMIDYMIN||s.align===s.SVG_PRESERVEASPECTRATIO_XMAXYMIN?m=-f:s.align!==s.SVG_PRESERVEASPECTRATIO_XMINYMAX&&s.align!==s.SVG_PRESERVEASPECTRATIO_XMIDYMAX&&s.align!==s.SVG_PRESERVEASPECTRATIO_XMAXYMAX||(u=f)}}var d=x.width+x.x-e-c,I=x.x+o-t.width-E,X=x.height+x.y-n-u,P=x.y+i-t.height-m;return t.x=Math.min(d,Math.max(I,t.x)),t.y=Math.min(X,Math.max(P,t.y)),t}function p(t){(S=G(t)).length<2?d&&X&&Z.call(this,t):(d&&X&&O.call(this,t),t.preventDefault(),this.dispatch("pinchZoomStart",{event:t}).defaultPrevented||(this.off("touchstart.panZoom",p),Y=!0,D.on(document,"touchmove.panZoom",w,this,{passive:!1}),D.on(document,"touchend.panZoom",g,this,{passive:!1})))}var r,S,R=null!=(n=(t=null!=t?t:{}).zoomFactor)?n:2,M=null!=(e=t.zoomMin)?e:Number.MIN_VALUE,A=null!=(i=t.zoomMax)?i:Number.MAX_VALUE,v=null==(o=t.wheelZoom)||o,f=null==(a=t.pinchZoom)||a,d=null==(l=t.panning)||l,I=null!=(h=t.panButton)?h:0,X=null!=(s=t.oneFingerPan)&&s,_=null!=(c=t.margins)&&c,P=null!=(E=t.wheelZoomDeltaModeLinePixels)?E:17,T=null!=(u=t.wheelZoomDeltaModeScreenPixels)?u:53,Y=!1,x=this.viewbox(),g=function t(n){n.preventDefault();var e=G(n);1<e.length||(Y=!1,this.dispatch("pinchZoomEnd",{event:n}),D.off(document,"touchmove.panZoom",w),D.off(document,"touchend.panZoom",t),this.on("touchstart.panZoom",p),e.length&&d&&X&&Z.call(this,n))},w=function(t){t.preventDefault();var n=G(t),e=this.zoom(),i=Math.sqrt(Math.pow(S[0].clientX-S[1].clientX,2)+Math.pow(S[0].clientY-S[1].clientY,2))/Math.sqrt(Math.pow(n[0].clientX-n[1].clientX,2)+Math.pow(n[0].clientY-n[1].clientY,2));(e<M&&1<i||A<e&&i<1)&&(i=1);var o={x:n[0].clientX+.5*(n[1].clientX-n[0].clientX),y:n[0].clientY+.5*(n[1].clientY-n[0].clientY)},a=S[0].clientX+.5*(S[1].clientX-S[0].clientX),l=S[0].clientY+.5*(S[1].clientY-S[0].clientY),h=this.point(o.x,o.y),s=this.point(2*o.x-a,2*o.y-l),c=new D.Box(this.viewbox()).transform((new D.Matrix).translate(-s.x,-s.y).scale(i,0,0).translate(h.x,h.y));m(c),this.viewbox(c),S=n,this.dispatch("zoom",{box:c,focus:s})},Z=function t(n){-1<n.type.indexOf("mouse")&&n.button!==I&&n.which!==I+1||(n.preventDefault(),this.off("mousedown.panZoom",t),S=G(n),Y||(this.dispatch("panStart",{event:n}),r={x:S[0].clientX,y:S[0].clientY},D.on(document,"touchmove.panZoom mousemove.panZoom",C,this,{passive:!1}),D.on(document,"touchend.panZoom mouseup.panZoom",O,this,{passive:!1})))},O=function t(n){n.preventDefault(),D.off(document,"touchmove.panZoom mousemove.panZoom",C),D.off(document,"touchend.panZoom mouseup.panZoom",t),this.on("mousedown.panZoom",Z),this.dispatch("panEnd",{event:n})},C=function(t){t.preventDefault();var n=G(t),e={x:n[0].clientX,y:n[0].clientY},i=this.point(e.x,e.y),o=this.point(r.x,r.y),a=[o.x-i.x,o.y-i.y];if(a[0]||a[1]){var l=new D.Box(this.viewbox()).transform((new D.Matrix).translate(a[0],a[1]));r=e,m(l),this.dispatch("panning",{box:l,event:t}).defaultPrevented||this.viewbox(l)}};return v&&this.on("wheel.panZoom",function(t){var n;switch(t.preventDefault(),t.deltaMode){case 1:n=t.deltaY*P;break;case 2:n=t.deltaY*T;break;default:n=t.deltaY}var e=Math.pow(1+R,-1*n/100)*this.zoom(),i=this.point(t.clientX,t.clientY);if(A<e&&(e=A),e<M&&(e=M),this.dispatch("zoom",{level:e,focus:i}).defaultPrevented)return this;if(this.zoom(e,i),_){var o=m(this.viewbox());this.viewbox(o)}},this,{passive:!1}),f&&this.on("touchstart.panZoom",p,this,{passive:!1}),d&&this.on("mousedown.panZoom",Z,this,{passive:!1}),this}})}(SVG);
|
||||
//# sourceMappingURL=svg.panzoom.min.js.map
|
||||
1
docs/xqdoc/resources/svgdotjs/svg.panzoom.min.js.map
Normal file
1
docs/xqdoc/resources/svgdotjs/svg.panzoom.min.js.map
Normal file
File diff suppressed because one or more lines are too long
BIN
docs/xqdoc/resources/xqdoc.png
Normal file
BIN
docs/xqdoc/resources/xqdoc.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
74
docs/xqdoc/resources/xqdoca.js
Normal file
74
docs/xqdoc/resources/xqdoca.js
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
// simple javascript support
|
||||
|
||||
//https://www.w3schools.com/howto/howto_js_treeview.asp
|
||||
var toggler = document.getElementsByClassName("caret");
|
||||
var i;
|
||||
|
||||
for (i = 0; i < toggler.length; i++) {
|
||||
toggler[i].addEventListener("click", function () {
|
||||
this.parentElement.querySelector(".nested").classList.toggle("active");
|
||||
this.classList.toggle("caret-down");
|
||||
});
|
||||
}
|
||||
// table sort https://stackoverflow.com/questions/10683712/html-table-sort#10683805
|
||||
document.querySelectorAll('th').forEach((element) => { // Table headers
|
||||
element.addEventListener('click', function () {
|
||||
let table = this.closest('table');
|
||||
|
||||
// If the column is sortable
|
||||
if (this.querySelector('span')) {
|
||||
let order_icon = this.querySelector('span');
|
||||
let order = encodeURI(order_icon.innerHTML).includes('%E2%86%91') ? 'desc' : 'asc';
|
||||
let separator = '-----'; // Separate the value of it's index, so data keeps intact
|
||||
|
||||
let value_list = {}; // <tr> Object
|
||||
let obj_key = []; // Values of selected column
|
||||
|
||||
let string_count = 0;
|
||||
let number_count = 0;
|
||||
|
||||
// <tbody> rows
|
||||
table.querySelectorAll('tbody tr').forEach((line, index_line) => {
|
||||
// Value of each field
|
||||
let key = line.children[element.cellIndex].textContent.toUpperCase();
|
||||
|
||||
// Check if value is date, numeric or string
|
||||
if (line.children[element.cellIndex].hasAttribute('data-timestamp')) {
|
||||
// if value is date, we store it's timestamp, so we can sort like a number
|
||||
key = line.children[element.cellIndex].getAttribute('data-timestamp');
|
||||
}
|
||||
else if (key.replace('-', '').match(/^[0-9,.]*$/g)) {
|
||||
number_count++;
|
||||
}
|
||||
else {
|
||||
string_count++;
|
||||
}
|
||||
|
||||
value_list[key + separator + index_line] = line.outerHTML.replace(/(\t)|(\n)/g, ''); // Adding <tr> to object
|
||||
obj_key.push(key + separator + index_line);
|
||||
});
|
||||
if (string_count === 0) { // If all values are numeric
|
||||
obj_key.sort(function (a, b) {
|
||||
return a.split(separator)[0] - b.split(separator)[0];
|
||||
});
|
||||
}
|
||||
else {
|
||||
obj_key.sort();
|
||||
}
|
||||
|
||||
if (order === 'desc') {
|
||||
obj_key.reverse();
|
||||
order_icon.innerHTML = '↓';
|
||||
}
|
||||
else {
|
||||
order_icon.innerHTML = '↑';
|
||||
}
|
||||
|
||||
let html = '';
|
||||
obj_key.forEach(function (chave) {
|
||||
html += value_list[chave];
|
||||
});
|
||||
table.getElementsByTagName('tbody')[0].innerHTML = html;
|
||||
}
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue