master-hiprint
parent
e17c5a490a
commit
7cf4f53ec3
@ -0,0 +1,816 @@
|
||||
.hiprint-printPaper.design.grid {
|
||||
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(0, 0, 0, 0.1) 3%, rgba(0, 0, 0, 0) 3%);
|
||||
background-size: 5mm 5mm;
|
||||
background-position: left top;
|
||||
}
|
||||
|
||||
/* hiprint-pagination */
|
||||
.hiprint-pagination {
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.hiprint-pagination > li {
|
||||
border: 1px solid #bdc3c7;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-family: helvetica;
|
||||
font-size: 13px;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.hiprint-pagination > li > span {
|
||||
padding: 0 10px 0 10px;
|
||||
}
|
||||
|
||||
.hiprint-pagination > li > a {
|
||||
color: #bdc3c7;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
font-size: 11px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.hiprint-pagination > li > a:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
.hiprint-pagination-sm > li > a {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/*rect-printElement-type hiprint-printElement-type */
|
||||
.rect-printElement-types .hiprint-printElement-type {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.rect-printElement-types .hiprint-printElement-type {
|
||||
padding: 0 0 0 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.rect-printElement-types .hiprint-printElement-type > li > .title {
|
||||
display: block;
|
||||
padding: 4px 0px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.rect-printElement-types .hiprint-printElement-type > li > ul {
|
||||
padding: 0 0 0 0;
|
||||
display: block;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.rect-printElement-types .hiprint-printElement-type > li > ul > li {
|
||||
display: block;
|
||||
width: 50%;
|
||||
float: left;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
.rect-printElement-types .hiprint-printElement-type > li > ul > li > a {
|
||||
height: 92px;
|
||||
padding: 12px 6px;
|
||||
margin-left: -1px;
|
||||
line-height: 1.42857143;
|
||||
color: #337ab7;
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
margin-right: 5px;
|
||||
width: 95%;
|
||||
max-width: 100px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin-bottom: 7px;
|
||||
box-sizing: border-box;
|
||||
color: #b9a5a6;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
|
||||
/*small-printElement-type hiprint-printElement-type */
|
||||
|
||||
/*.hiprint-printElement :focus {
|
||||
outline: none;
|
||||
}*/
|
||||
|
||||
.small-printElement-types .hiprint-printElement-type {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.small-printElement-types .hiprint-printElement-type {
|
||||
padding: 0 0 0 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.small-printElement-types .hiprint-printElement-type > li > .title {
|
||||
display: block;
|
||||
padding: 4px 0px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.small-printElement-types .hiprint-printElement-type > li > ul {
|
||||
padding: 0 0 0 0;
|
||||
display: block;
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.small-printElement-types .hiprint-printElement-type > li > ul > li {
|
||||
display: block;
|
||||
width: 50%;
|
||||
float: left;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.small-printElement-types .hiprint-printElement-type > li > ul > li > a {
|
||||
height: 22px;
|
||||
/* padding: 12px 6px; */
|
||||
/* margin-left: -1px; */
|
||||
line-height: 20px;
|
||||
color: #337ab7;
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
margin-right: 5px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-bottom: 7px;
|
||||
box-sizing: border-box;
|
||||
color: #b9a5a6;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
|
||||
/* hiprint-toolbar*/
|
||||
|
||||
.hiprint-toolbar {
|
||||
}
|
||||
|
||||
.hiprint-toolbar > ul {
|
||||
padding: 0px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.hiprint-toolbar > ul > li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hiprint-toolbar > ul > li > a {
|
||||
position: relative;
|
||||
float: left;
|
||||
padding: 3px 10px;
|
||||
margin-left: -1px;
|
||||
line-height: 1.42857143;
|
||||
color: #337ab7;
|
||||
text-decoration: none;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
margin-right: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.hiprint-printElement-type .glyphicon-class {
|
||||
display: block;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
/*font-size: 0.65rem;
|
||||
font-weight: normal;*/
|
||||
font-family: Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.hiprint-printElement-type .glyphicon {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 37px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
|
||||
*/
|
||||
|
||||
/*option css*/
|
||||
/*option css*/
|
||||
.hiprint-option-items {
|
||||
font-size: .75rem;
|
||||
padding: 10px 5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hiprint-option-items .hiprint-option-item {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 50%;
|
||||
margin-bottom: 5px;
|
||||
padding: 0 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hiprint-option-items .hiprint-option-item-row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hiprint-option-item-label {
|
||||
margin: 5px 5px 3px 0;
|
||||
}
|
||||
|
||||
.hiprint-option-items .hiprint-option-item-field input, .hiprint-option-items .hiprint-option-item-field select, .hiprint-option-items .hiprint-option-item-field textarea {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 3px;
|
||||
z-index: 1;
|
||||
border: 1px solid rgb(169, 169, 169);
|
||||
height: 19pt;
|
||||
}
|
||||
|
||||
.hiprint-option-item-settingBtn {
|
||||
height: 19pt;
|
||||
line-height: 19pt;
|
||||
font-size: 12px;
|
||||
padding: 0 24px;
|
||||
background: #00c1de;
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
margin: 5px;
|
||||
font-weight: 400;
|
||||
border: 1px solid transparent;
|
||||
font-family: PingFangSC, helvetica neue, hiragino sans gb, arial, microsoft yahei ui, microsoft yahei, simsun, "sans-serif";
|
||||
vertical-align: middle;
|
||||
transition: .3s cubic-bezier(.4, 0, .2, 1);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.hiprint-option-item-deleteBtn {
|
||||
background: red;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-sprite {
|
||||
background-image: url(./image/jquery.minicolors.png);
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-swatch {
|
||||
position: absolute;
|
||||
vertical-align: middle;
|
||||
background-position: -80px 0;
|
||||
cursor: text;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-swatch-color {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors input[type=hidden] + .minicolors-swatch {
|
||||
width: 28px;
|
||||
position: static;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors input[type=hidden][disabled] + .minicolors-swatch {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Panel */
|
||||
.hiprint-option-items .minicolors-panel {
|
||||
position: absolute;
|
||||
width: 173px;
|
||||
background: white;
|
||||
border: solid 1px #CCC;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
|
||||
z-index: 99999;
|
||||
box-sizing: content-box;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-panel.minicolors-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Panel positioning */
|
||||
.hiprint-option-items .minicolors-position-top .minicolors-panel {
|
||||
top: -154px;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-position-right .minicolors-panel {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-position-bottom .minicolors-panel {
|
||||
top: auto;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-position-left .minicolors-panel {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-with-opacity .minicolors-panel {
|
||||
width: 194px;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors .minicolors-grid {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
left: 1px; /* LTR */
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin-bottom: 2px;
|
||||
background-position: -120px 0;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors .minicolors-grid-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-slider-saturation .minicolors-grid {
|
||||
background-position: -420px 0;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-slider-saturation .minicolors-grid-inner {
|
||||
background-position: -270px 0;
|
||||
background-image: inherit;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-slider-brightness .minicolors-grid {
|
||||
background-position: -570px 0;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-slider-brightness .minicolors-grid-inner {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-slider-wheel .minicolors-grid {
|
||||
background-position: -720px 0;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-slider,
|
||||
.hiprint-option-items .minicolors-opacity-slider {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 152px; /* LTR */
|
||||
width: 20px;
|
||||
height: 150px;
|
||||
background-color: white;
|
||||
background-position: 0 0;
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-slider-saturation .minicolors-slider {
|
||||
background-position: -60px 0;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-slider-brightness .minicolors-slider {
|
||||
background-position: -20px 0;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-slider-wheel .minicolors-slider {
|
||||
background-position: -20px 0;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-opacity-slider {
|
||||
left: 173px; /* LTR */
|
||||
background-position: -40px 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.hiprint-option-items .minicolors-with-opacity .minicolors-opacity-slider {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Pickers */
|
||||
.hiprint-option-items .minicolors-grid .minicolors-picker {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 70px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: solid 1px black;
|
||||
border-radius: 10px;
|
||||
margin-top: -6px;
|
||||
margin-left: -6px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-grid .minicolors-picker > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
border: solid 2px white;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-picker {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 18px;
|
||||
height: 2px;
|
||||
background: white;
|
||||
border: solid 1px black;
|
||||
margin-top: -2px;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* Swatches */
|
||||
.hiprint-option-items .minicolors-swatches,
|
||||
.hiprint-option-items .minicolors-swatches li {
|
||||
margin: 5px 0 3px 5px; /* LTR */
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-swatches .minicolors-swatch {
|
||||
position: relative;
|
||||
float: left; /* LTR */
|
||||
cursor: pointer;
|
||||
margin: 0 4px 0 0; /* LTR */
|
||||
}
|
||||
|
||||
|
||||
.hiprint-option-items .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
|
||||
margin-right: 7px; /* LTR */
|
||||
}
|
||||
|
||||
|
||||
.hiprint-option-items .minicolors-swatch.selected {
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
/* Inline controls */
|
||||
.hiprint-option-items .minicolors-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-inline .minicolors-input {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-inline .minicolors-panel {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto; /* LTR */
|
||||
box-shadow: none;
|
||||
z-index: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/* Bootstrap theme */
|
||||
.hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatch {
|
||||
z-index: 2;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
|
||||
margin-bottom: 2px;
|
||||
top: 0;
|
||||
left: 0; /* LTR */
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatch-color {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
|
||||
left: auto; /* LTR */
|
||||
right: 3px; /* LTR */
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-theme-bootstrap .minicolors-input {
|
||||
float: none;
|
||||
padding-left: 23px; /* LTR */
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
|
||||
padding-right: 44px; /* LTR */
|
||||
padding-left: 12px; /* LTR */
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
|
||||
top: 4px;
|
||||
left: 4px; /* LTR */
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.hiprint-option-items .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
|
||||
border-top-left-radius: 0; /* LTR */
|
||||
border-bottom-left-radius: 0; /* LTR */
|
||||
}
|
||||
|
||||
|
||||
/*hitable reizer*/
|
||||
.hitable {
|
||||
}
|
||||
|
||||
|
||||
.hitable .selected {
|
||||
background: #3e66ad;
|
||||
}
|
||||
|
||||
|
||||
/*resizer*/
|
||||
.hitable tr.resizerRow,
|
||||
.hitable .resizerRow td {
|
||||
border: 0pt dashed;
|
||||
height: 0pt;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.hitable tr.resizerRow + tr,
|
||||
.hitable tr.resizerRow + tr td {
|
||||
border-top: 0px !important;
|
||||
}
|
||||
|
||||
.hitable td.resizerColumn {
|
||||
border: 0pt dashed;
|
||||
width: 0.000001px !important;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
|
||||
.hitable td.resizerColumn + td {
|
||||
border-left: 0px !important;
|
||||
}
|
||||
|
||||
|
||||
/*GRIP*/
|
||||
|
||||
.columngrips {
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.columngrip {
|
||||
margin-left: -5px;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.columngrip .gripResizer {
|
||||
position: absolute;
|
||||
filter: alpha(opacity=1);
|
||||
opacity: 0;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
cursor: col-resize;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.columngripDraging {
|
||||
border-left: 1px dotted black;
|
||||
}
|
||||
|
||||
.rowgrips {
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.rowgrip {
|
||||
margin-top: -5px;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.rowgrip .gripResizer {
|
||||
position: absolute;
|
||||
filter: alpha(opacity=1);
|
||||
opacity: 0;
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
cursor: row-resize;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.rowgripDraging {
|
||||
border-top: 1px dotted black;
|
||||
}
|
||||
|
||||
.hitable .hitable-editor-text {
|
||||
border: 1px solid;
|
||||
width: 95%;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
|
||||
.hipanel-disable {
|
||||
height: 0px;
|
||||
display: block !important;
|
||||
top: 8500px;
|
||||
width: 0px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.hiprint_rul_wrapper {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
border: 0;
|
||||
border-top: 1px solid rgb(201, 190, 190);
|
||||
border-left: 1px solid rgb(201, 190, 190);
|
||||
padding-left: 15px;
|
||||
margin: -10px -20px -10px -20px
|
||||
}
|
||||
|
||||
.hiprint_rul_wrapper .h_img {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 15px;
|
||||
width: 400mm;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.hiprint_rul_wrapper .v_img {
|
||||
width: 400mm;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: 0 100%;
|
||||
height: 15px;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 0px;
|
||||
|
||||
}
|
||||
|
||||
/*hiprint-option-table*/
|
||||
|
||||
.hiprint-option-table-selected-columns {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hiprint-option-table-selected-columns .hiprint-option-table-selected-item {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 0 3px;
|
||||
border: 1px solid rgb(169, 169, 169);
|
||||
line-height: 19pt;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
/*hi-pretty */
|
||||
.hi-pretty * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hi-pretty input:not([type='checkbox']):not([type='radio']) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hi-pretty {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hi-pretty input {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-width: 1em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hi-pretty .state label {
|
||||
position: initial;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
text-indent: 1.5em;
|
||||
min-width: calc(1em + 2px);
|
||||
}
|
||||
|
||||
.hi-pretty .state label:before,
|
||||
.hi-pretty .state label:after {
|
||||
content: '';
|
||||
width: calc(1em + 2px);
|
||||
height: calc(1em + 2px);
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0;
|
||||
border: 1px solid transparent;
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc((0% - (100% - 1em)) - 8%);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.hi-pretty .state label:before {
|
||||
border-color: #bdc3c7;
|
||||
}
|
||||
|
||||
.hi-pretty .state.p-is-hover,
|
||||
.hi-pretty .state.p-is-indeterminate {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.hi-pretty.p-default.p-fill .state label:after {
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.hi-pretty.p-default .state label:after {
|
||||
-webkit-transform: scale(0.6);
|
||||
-ms-transform: scale(0.6);
|
||||
transform: scale(0.6);
|
||||
}
|
||||
|
||||
.hi-pretty.p-default input:checked ~ .state label:after {
|
||||
background-color: #bdc3c7 !important;
|
||||
}
|
||||
|
||||
.hi-pretty.p-default.p-thick .state label:before,
|
||||
.hi-pretty.p-default.p-thick .state label:after {
|
||||
border-width: calc(1em / 7);
|
||||
}
|
||||
|
||||
.hi-pretty.p-default.p-thick .state label:after {
|
||||
-webkit-transform: scale(0.4) !important;
|
||||
-ms-transform: scale(0.4) !important;
|
||||
transform: scale(0.4) !important;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 355 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 39 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 40 KiB |
@ -0,0 +1,279 @@
|
||||
|
||||
@media print {
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hiprint-printPaper * {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box; /* Firefox */
|
||||
-webkit-box-sizing: border-box; /* Safari */
|
||||
|
||||
}
|
||||
|
||||
.hiprint-printPaper *:focus {
|
||||
outline: -webkit-focus-ring-color auto 0px;
|
||||
}
|
||||
|
||||
|
||||
.hiprint-page-break-avoid {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
.hiprint-printPaper {
|
||||
position: relative;
|
||||
padding: 0 0 0 0;
|
||||
page-break-after: always;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hiprint-printPaper .hiprint-printPaper-content {
|
||||
position: relative;
|
||||
}
|
||||
.hiprint-printPaper.design {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hiprint-printTemplate .hiprint-printPanel {
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
.hiprint-printPaper, hiprint-printPanel {
|
||||
box-sizing: border-box;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.hiprint-printPanel .hiprint-printPaper:last-child {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
.hiprint-printTemplate .hiprint-printPanel:last-child {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
.hiprint-printPaper .hideheaderLinetarget {
|
||||
border-top: 0px dashed rgb(201, 190, 190) !important;
|
||||
}
|
||||
|
||||
.hiprint-printPaper .hidefooterLinetarget {
|
||||
border-top: 0px dashed rgb(201, 190, 190) !important;
|
||||
}
|
||||
|
||||
.hiprint-printPaper.design {
|
||||
border: 1px dashed rgba(170,170,170,0.7);
|
||||
}
|
||||
|
||||
.design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content {
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.design .resize-panel {
|
||||
box-sizing: border-box;
|
||||
border: 1px dotted;
|
||||
}
|
||||
|
||||
.hiprint-printElement-text {
|
||||
background-color: transparent;
|
||||
background-repeat: repeat;
|
||||
padding: 0 0 0 0;
|
||||
border: 0.75pt none rgb(0,0,0);
|
||||
direction: ltr;
|
||||
font-family: 'SimSun';
|
||||
font-size: 9pt;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
padding-bottom: 0pt;
|
||||
padding-left: 0pt;
|
||||
padding-right: 0pt;
|
||||
padding-top: 0pt;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
line-height: 9.75pt;
|
||||
box-sizing: border-box;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.design .hiprint-printElement-text-content {
|
||||
border: 1px dashed rgb(206, 188, 188);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hiprint-printElement-longText {
|
||||
background-color: transparent;
|
||||
background-repeat: repeat;
|
||||
border: 0.75pt none rgb(0,0,0);
|
||||
direction: ltr;
|
||||
font-family: 'SimSun';
|
||||
font-size: 9pt;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
padding-bottom: 0pt;
|
||||
padding-left: 0pt;
|
||||
padding-right: 0pt;
|
||||
padding-top: 0pt;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
line-height: 9.75pt;
|
||||
box-sizing: border-box;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
/*white-space: pre-wrap*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hiprint-printElement-table {
|
||||
background-color: transparent;
|
||||
background-repeat: repeat;
|
||||
color: rgb(0,0,0);
|
||||
border-color: rgb(0,0,0);
|
||||
border-style: none;
|
||||
direction: ltr;
|
||||
font-family: 'SimSun';
|
||||
font-size: 9pt;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
padding-bottom: 0pt;
|
||||
padding-left: 0pt;
|
||||
padding-right: 0pt;
|
||||
padding-top: 0pt;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
padding: 0 0 0 0;
|
||||
box-sizing: border-box;
|
||||
line-height: 9.75pt;
|
||||
}
|
||||
|
||||
.hiprint-printElement-table thead {
|
||||
background: #e8e8e8;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td {
|
||||
border-color: rgb(0,0,0);
|
||||
border-style: none;
|
||||
border: 1px solid rgb(0,0,0);
|
||||
font-weight: normal;
|
||||
direction: ltr;
|
||||
padding-bottom: 0pt;
|
||||
padding-left: 0pt;
|
||||
padding-right: 0pt;
|
||||
padding-top: 0pt;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
/*line-height: 9.75pt;
|
||||
font-size: 9pt;*/
|
||||
}
|
||||
|
||||
/*.hiprint-printElement-tableTarget tr,*/
|
||||
.hiprint-printElement-tableTarget td {
|
||||
height: 18pt;
|
||||
}
|
||||
|
||||
.hiprint-printPaper .hiprint-paperNumber {
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
.design .hiprint-printElement-table-handle {
|
||||
position: absolute;
|
||||
height: 21pt;
|
||||
width: 21pt;
|
||||
background: red;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.hiprint-printPaper .hiprint-paperNumber-disabled {
|
||||
float: right !important;
|
||||
right: 0 !important;
|
||||
color: gainsboro !important;
|
||||
}
|
||||
|
||||
.hiprint-printElement-vline, .hiprint-printElement-hline {
|
||||
border: 0px none rgb(0,0,0);
|
||||
|
||||
}
|
||||
.hiprint-printElement-vline {
|
||||
border-left: 0.75pt solid #000;
|
||||
border-right: 0px none rgb(0,0,0) !important;
|
||||
border-bottom: 0px none rgb(0,0,0) !important;
|
||||
border-top: 0px none rgb(0,0,0) !important;
|
||||
}
|
||||
|
||||
.hiprint-printElement-hline {
|
||||
border-top: 0.75pt solid #000;
|
||||
border-right: 0px none rgb(0,0,0) !important;
|
||||
border-bottom: 0px none rgb(0,0,0) !important;
|
||||
border-left: 0px none rgb(0,0,0) !important;
|
||||
}
|
||||
|
||||
.hiprint-printElement-oval, .hiprint-printElement-rect {
|
||||
border: 0.75pt solid #000;
|
||||
}
|
||||
|
||||
.hiprint-text-content-middle {
|
||||
display:table;
|
||||
}
|
||||
.hiprint-text-content-middle>div {
|
||||
display: table-cell;
|
||||
vertical-align:middle
|
||||
}
|
||||
|
||||
.hiprint-text-content-bottom {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.hiprint-text-content-bottom > div {
|
||||
display: table-cell;
|
||||
vertical-align: bottom
|
||||
}
|
||||
|
||||
/*hi-grid-row */
|
||||
.hi-grid-row {
|
||||
position: relative;
|
||||
height: auto;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
zoom: 1;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hi-grid-row::after, .hi-grid-row::before {
|
||||
display: table;
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hi-grid-col {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
float: left;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.table-grid-row {
|
||||
margin-left: -0pt;
|
||||
margin-right: -0pt;
|
||||
}
|
||||
|
||||
.tableGridColumnsGutterRow {
|
||||
padding-left: 0pt;
|
||||
padding-right: 0pt;
|
||||
}
|
||||
.hiprint-gridColumnsFooter {
|
||||
text-align: left;
|
||||
clear: both;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,754 @@
|
||||
(function () {
|
||||
window.HIPRINT_CONFIG = {
|
||||
//optionItems: [hiprintCustomOptionItem],//自定义选项
|
||||
movingDistance: 1.5, //鼠标拖动一次移动的距离,默认1.5pt
|
||||
paperHeightTrim: 1, //纸张html 的高度等于真实高度-1
|
||||
text: (any = {
|
||||
supportOptions: [
|
||||
// {
|
||||
// name: 'hiprintCustomOptionItem',
|
||||
// hidden: false
|
||||
// },
|
||||
{
|
||||
name: "title",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "field",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "testData",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "dataType",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fontFamily",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fontSize",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fontWeight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "letterSpacing",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "color",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "textDecoration",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "textAlign",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "textContentVerticalAlign",
|
||||
hidden: false
|
||||
},
|
||||
|
||||
{
|
||||
name: "lineHeight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "textType",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "barcodeMode",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "hideTitle",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "showInPage",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "unShowInPage",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fixed",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "axis",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "transform",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "optionsGroup",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderLeft",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderTop",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderRight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderBottom",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderWidth",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderColor",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "contentPaddingLeft",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "contentPaddingTop",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "contentPaddingRight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "contentPaddingBottom",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "backgroundColor",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "formatter",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "styler",
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
default: {
|
||||
width: 120,
|
||||
height: 9.75
|
||||
}
|
||||
}),
|
||||
image: (any = {
|
||||
supportOptions: [
|
||||
{
|
||||
name: "field",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "src",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "showInPage",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fixed",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "axis",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "transform",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "formatter",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "styler",
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
default: {}
|
||||
}),
|
||||
longText: (any = {
|
||||
supportOptions: [
|
||||
{
|
||||
name: "title",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "field",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "testData",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fontFamily",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fontSize",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fontWeight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "letterSpacing",
|
||||
hidden: false
|
||||
},
|
||||
|
||||
{
|
||||
name: "textAlign",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "lineHeight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "color",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "hideTitle",
|
||||
hidden: false
|
||||
},
|
||||
|
||||
{
|
||||
name: "longTextIndent",
|
||||
hidden: false
|
||||
},
|
||||
|
||||
{
|
||||
name: "leftSpaceRemoved",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "showInPage",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "unShowInPage",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fixed",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "axis",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "lHeight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "transform",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "optionsGroup",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderLeft",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderTop",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderRight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderBottom",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderWidth",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderColor",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "contentPaddingLeft",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "contentPaddingTop",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "contentPaddingRight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "contentPaddingBottom",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "backgroundColor",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "formatter",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "styler",
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
default: {
|
||||
height: 42,
|
||||
width: 550
|
||||
}
|
||||
}),
|
||||
table: (any = {
|
||||
supportOptions: [
|
||||
{
|
||||
name: "field",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fontFamily",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fontSize",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "lineHeight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "textAlign",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "gridColumns",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "gridColumnsGutter",
|
||||
hidden: false
|
||||
},
|
||||
|
||||
{
|
||||
name: "tableBorder",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableHeaderBorder",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableHeaderCellBorder",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableHeaderRowHeight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableHeaderBackground",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableHeaderFontSize",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableHeaderFontWeight",
|
||||
hidden: false
|
||||
},
|
||||
|
||||
{
|
||||
name: "tableBodyRowHeight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableBodyRowBorder",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableBodyCellBorder",
|
||||
hidden: false
|
||||
},
|
||||
|
||||
{
|
||||
name: "axis",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "lHeight",
|
||||
hidden: false
|
||||
},
|
||||
|
||||
{
|
||||
name: "autoCompletion",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "columns",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "styler",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "rowStyler",
|
||||
hidden: false
|
||||
},
|
||||
|
||||
{
|
||||
name: "tableFooterRepeat",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "footerFormatter",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "gridColumnsFooterFormatter",
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
default: {
|
||||
width: 550
|
||||
}
|
||||
}),
|
||||
tableCustom: (any = {
|
||||
supportOptions: [
|
||||
{
|
||||
name: "field",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fontFamily",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fontSize",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "textAlign",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableBorder",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableHeaderBorder",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableHeaderCellBorder",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableHeaderRowHeight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableHeaderFontSize",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableHeaderFontWeight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableHeaderBackground",
|
||||
hidden: false
|
||||
},
|
||||
|
||||
{
|
||||
name: "tableBodyRowHeight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableBodyRowBorder",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableBodyCellBorder",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "axis",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "lHeight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "autoCompletion",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "tableFooterRepeat",
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
default: {
|
||||
width: 550
|
||||
}
|
||||
}),
|
||||
|
||||
hline: (any = {
|
||||
supportOptions: [
|
||||
{
|
||||
name: "borderColor",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderWidth",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "showInPage",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fixed",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "axis",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "transform",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderStyle",
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
default: {
|
||||
borderWidth: 0.75,
|
||||
height: 9,
|
||||
width: 90
|
||||
}
|
||||
}),
|
||||
vline: (any = {
|
||||
supportOptions: [
|
||||
{
|
||||
name: "borderColor",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderWidth",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "showInPage",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fixed",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "axis",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "transform",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderStyle",
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
default: {
|
||||
borderWidth: undefined,
|
||||
height: 90,
|
||||
width: 9
|
||||
}
|
||||
}),
|
||||
rect: (any = {
|
||||
supportOptions: [
|
||||
{
|
||||
name: "borderColor",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderWidth",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "showInPage",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fixed",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "axis",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "transform",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderStyle",
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
default: {
|
||||
borderWidth: undefined,
|
||||
height: 90,
|
||||
width: 90
|
||||
}
|
||||
}),
|
||||
oval: (any = {
|
||||
supportOptions: [
|
||||
{
|
||||
name: "borderColor",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderWidth",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "showInPage",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fixed",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "axis",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "transform",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "borderStyle",
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
default: {
|
||||
borderWidth: undefined,
|
||||
height: 90,
|
||||
width: 90
|
||||
}
|
||||
}),
|
||||
html: (any = {
|
||||
supportOptions: [
|
||||
{
|
||||
name: "showInPage",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "unShowInPage",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "fixed",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "axis",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "formatter",
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
default: {
|
||||
height: 90,
|
||||
width: 90
|
||||
}
|
||||
}),
|
||||
tableColumn: (any = {
|
||||
supportOptions: [
|
||||
{
|
||||
name: "title",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "align",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "halign",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "vAlign",
|
||||
hidden: false
|
||||
},
|
||||
|
||||
{
|
||||
name: "paddingLeft",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "paddingRight",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "formatter2",
|
||||
hidden: false
|
||||
},
|
||||
{
|
||||
name: "styler2",
|
||||
hidden: false
|
||||
}
|
||||
],
|
||||
default: {
|
||||
height: 90,
|
||||
width: 90
|
||||
}
|
||||
})
|
||||
};
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,265 @@
|
||||
/**
|
||||
* covert canvas to image
|
||||
* and save the image file
|
||||
*/
|
||||
|
||||
var Canvas2Image = function () {
|
||||
|
||||
// check if support sth.
|
||||
var $support = function () {
|
||||
var canvas = document.createElement('canvas'),
|
||||
ctx = canvas.getContext('2d');
|
||||
|
||||
return {
|
||||
canvas: !!ctx,
|
||||
imageData: !!ctx.getImageData,
|
||||
dataURL: !!canvas.toDataURL,
|
||||
btoa: !!window.btoa
|
||||
};
|
||||
}();
|
||||
|
||||
var downloadMime = 'image/octet-stream';
|
||||
|
||||
function scaleCanvas (canvas, width, height) {
|
||||
var w = canvas.width,
|
||||
h = canvas.height;
|
||||
if (width == undefined) {
|
||||
width = w;
|
||||
}
|
||||
if (height == undefined) {
|
||||
height = h;
|
||||
}
|
||||
|
||||
var retCanvas = document.createElement('canvas');
|
||||
var retCtx = retCanvas.getContext('2d');
|
||||
retCanvas.width = width;
|
||||
retCanvas.height = height;
|
||||
retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);
|
||||
return retCanvas;
|
||||
}
|
||||
|
||||
function getDataURL (canvas, type, width, height) {
|
||||
canvas = scaleCanvas(canvas, width, height);
|
||||
return canvas.toDataURL(type);
|
||||
}
|
||||
|
||||
function saveFile (strData) {
|
||||
document.location.href = strData;
|
||||
}
|
||||
|
||||
function genImage(strData) {
|
||||
var img = document.createElement('img');
|
||||
img.src = strData;
|
||||
return img;
|
||||
}
|
||||
function fixType (type) {
|
||||
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
|
||||
var r = type.match(/png|jpeg|bmp|gif/)[0];
|
||||
return 'image/' + r;
|
||||
}
|
||||
function encodeData (data) {
|
||||
if (!window.btoa) { throw 'btoa undefined' }
|
||||
var str = '';
|
||||
if (typeof data == 'string') {
|
||||
str = data;
|
||||
} else {
|
||||
for (var i = 0; i < data.length; i ++) {
|
||||
str += String.fromCharCode(data[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return btoa(str);
|
||||
}
|
||||
function getImageData (canvas) {
|
||||
var w = canvas.width,
|
||||
h = canvas.height;
|
||||
return canvas.getContext('2d').getImageData(0, 0, w, h);
|
||||
}
|
||||
function makeURI (strData, type) {
|
||||
return 'data:' + type + ';base64,' + strData;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* create bitmap image
|
||||
* 按照规则生成图片响应头和响应体
|
||||
*/
|
||||
var genBitmapImage = function (oData) {
|
||||
|
||||
//
|
||||
// BITMAPFILEHEADER: http://msdn.microsoft.com/en-us/library/windows/desktop/dd183374(v=vs.85).aspx
|
||||
// BITMAPINFOHEADER: http://msdn.microsoft.com/en-us/library/dd183376.aspx
|
||||
//
|
||||
|
||||
var biWidth = oData.width;
|
||||
var biHeight = oData.height;
|
||||
var biSizeImage = biWidth * biHeight * 3;
|
||||
var bfSize = biSizeImage + 54; // total header size = 54 bytes
|
||||
|
||||
//
|
||||
// typedef struct tagBITMAPFILEHEADER {
|
||||
// WORD bfType;
|
||||
// DWORD bfSize;
|
||||
// WORD bfReserved1;
|
||||
// WORD bfReserved2;
|
||||
// DWORD bfOffBits;
|
||||
// } BITMAPFILEHEADER;
|
||||
//
|
||||
var BITMAPFILEHEADER = [
|
||||
// WORD bfType -- The file type signature; must be "BM"
|
||||
0x42, 0x4D,
|
||||
// DWORD bfSize -- The size, in bytes, of the bitmap file
|
||||
bfSize & 0xff, bfSize >> 8 & 0xff, bfSize >> 16 & 0xff, bfSize >> 24 & 0xff,
|
||||
// WORD bfReserved1 -- Reserved; must be zero
|
||||
0, 0,
|
||||
// WORD bfReserved2 -- Reserved; must be zero
|
||||
0, 0,
|
||||
// DWORD bfOffBits -- The offset, in bytes, from the beginning of the BITMAPFILEHEADER structure to the bitmap bits.
|
||||
54, 0, 0, 0
|
||||
];
|
||||
|
||||
//
|
||||
// typedef struct tagBITMAPINFOHEADER {
|
||||
// DWORD biSize;
|
||||
// LONG biWidth;
|
||||
// LONG biHeight;
|
||||
// WORD biPlanes;
|
||||
// WORD biBitCount;
|
||||
// DWORD biCompression;
|
||||
// DWORD biSizeImage;
|
||||
// LONG biXPelsPerMeter;
|
||||
// LONG biYPelsPerMeter;
|
||||
// DWORD biClrUsed;
|
||||
// DWORD biClrImportant;
|
||||
// } BITMAPINFOHEADER, *PBITMAPINFOHEADER;
|
||||
//
|
||||
var BITMAPINFOHEADER = [
|
||||
// DWORD biSize -- The number of bytes required by the structure
|
||||
40, 0, 0, 0,
|
||||
// LONG biWidth -- The width of the bitmap, in pixels
|
||||
biWidth & 0xff, biWidth >> 8 & 0xff, biWidth >> 16 & 0xff, biWidth >> 24 & 0xff,
|
||||
// LONG biHeight -- The height of the bitmap, in pixels
|
||||
biHeight & 0xff, biHeight >> 8 & 0xff, biHeight >> 16 & 0xff, biHeight >> 24 & 0xff,
|
||||
// WORD biPlanes -- The number of planes for the target device. This value must be set to 1
|
||||
1, 0,
|
||||
// WORD biBitCount -- The number of bits-per-pixel, 24 bits-per-pixel -- the bitmap
|
||||
// has a maximum of 2^24 colors (16777216, Truecolor)
|
||||
24, 0,
|
||||
// DWORD biCompression -- The type of compression, BI_RGB (code 0) -- uncompressed
|
||||
0, 0, 0, 0,
|
||||
// DWORD biSizeImage -- The size, in bytes, of the image. This may be set to zero for BI_RGB bitmaps
|
||||
biSizeImage & 0xff, biSizeImage >> 8 & 0xff, biSizeImage >> 16 & 0xff, biSizeImage >> 24 & 0xff,
|
||||
// LONG biXPelsPerMeter, unused
|
||||
0,0,0,0,
|
||||
// LONG biYPelsPerMeter, unused
|
||||
0,0,0,0,
|
||||
// DWORD biClrUsed, the number of color indexes of palette, unused
|
||||
0,0,0,0,
|
||||
// DWORD biClrImportant, unused
|
||||
0,0,0,0
|
||||
];
|
||||
|
||||
var iPadding = (4 - ((biWidth * 3) % 4)) % 4;
|
||||
|
||||
var aImgData = oData.data;
|
||||
|
||||
var strPixelData = '';
|
||||
var biWidth4 = biWidth<<2;
|
||||
var y = biHeight;
|
||||
var fromCharCode = String.fromCharCode;
|
||||
|
||||
do {
|
||||
var iOffsetY = biWidth4*(y-1);
|
||||
var strPixelRow = '';
|
||||
for (var x = 0; x < biWidth; x++) {
|
||||
var iOffsetX = x<<2;
|
||||
strPixelRow += fromCharCode(aImgData[iOffsetY+iOffsetX+2]) +
|
||||
fromCharCode(aImgData[iOffsetY+iOffsetX+1]) +
|
||||
fromCharCode(aImgData[iOffsetY+iOffsetX]);
|
||||
}
|
||||
|
||||
for (var c = 0; c < iPadding; c++) {
|
||||
strPixelRow += String.fromCharCode(0);
|
||||
}
|
||||
|
||||
strPixelData += strPixelRow;
|
||||
} while (--y);
|
||||
|
||||
var strEncoded = encodeData(BITMAPFILEHEADER.concat(BITMAPINFOHEADER)) + encodeData(strPixelData);
|
||||
|
||||
return strEncoded;
|
||||
};
|
||||
|
||||
/**
|
||||
* saveAsImage
|
||||
* @param canvasElement
|
||||
* @param {String} image type
|
||||
* @param {Number} [optional] png width
|
||||
* @param {Number} [optional] png height
|
||||
*/
|
||||
var saveAsImage = function (canvas, width, height, type) {
|
||||
if ($support.canvas && $support.dataURL) {
|
||||
if (typeof canvas == "string") { canvas = document.getElementById(canvas); }
|
||||
if (type == undefined) { type = 'png'; }
|
||||
type = fixType(type);
|
||||
if (/bmp/.test(type)) {
|
||||
var data = getImageData(scaleCanvas(canvas, width, height));
|
||||
var strData = genBitmapImage(data);
|
||||
saveFile(makeURI(strData, downloadMime));
|
||||
} else {
|
||||
var strData = getDataURL(canvas, type, width, height);
|
||||
saveFile(strData.replace(type, downloadMime));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var convertToImage = function (canvas, width, height, type) {
|
||||
if ($support.canvas && $support.dataURL) {
|
||||
if (typeof canvas == "string") { canvas = document.getElementById(canvas); }
|
||||
if (type == undefined) { type = 'png'; }
|
||||
type = fixType(type);
|
||||
|
||||
if (/bmp/.test(type)) {
|
||||
var data = getImageData(scaleCanvas(canvas, width, height));
|
||||
var strData = genBitmapImage(data);
|
||||
return genImage(makeURI(strData, 'image/bmp'));
|
||||
} else {
|
||||
var strData = getDataURL(canvas, type, width, height);
|
||||
return genImage(strData);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
return {
|
||||
saveAsImage: saveAsImage,
|
||||
saveAsPNG: function (canvas, width, height) {
|
||||
return saveAsImage(canvas, width, height, 'png');
|
||||
},
|
||||
saveAsJPEG: function (canvas, width, height) {
|
||||
return saveAsImage(canvas, width, height, 'jpeg');
|
||||
},
|
||||
saveAsGIF: function (canvas, width, height) {
|
||||
return saveAsImage(canvas, width, height, 'gif');
|
||||
},
|
||||
saveAsBMP: function (canvas, width, height) {
|
||||
return saveAsImage(canvas, width, height, 'bmp');
|
||||
},
|
||||
|
||||
convertToImage: convertToImage,
|
||||
convertToPNG: function (canvas, width, height) {
|
||||
return convertToImage(canvas, width, height, 'png');
|
||||
},
|
||||
convertToJPEG: function (canvas, width, height) {
|
||||
return convertToImage(canvas, width, height, 'jpeg');
|
||||
},
|
||||
convertToGIF: function (canvas, width, height) {
|
||||
return convertToImage(canvas, width, height, 'gif');
|
||||
},
|
||||
convertToBMP: function (canvas, width, height) {
|
||||
return convertToImage(canvas, width, height, 'bmp');
|
||||
}
|
||||
};
|
||||
|
||||
}();
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,615 @@
|
||||
/**
|
||||
* @fileoverview
|
||||
* - Using the 'QRCode for Javascript library'
|
||||
* - Fixed dataset of 'QRCode for Javascript library' for support full-spec.
|
||||
* - this library has no dependencies.
|
||||
*
|
||||
* @author davidshimjs
|
||||
* @see <a href="http://www.d-project.com/" target="_blank">http://www.d-project.com/</a>
|
||||
* @see <a href="http://jeromeetienne.github.com/jquery-qrcode/" target="_blank">http://jeromeetienne.github.com/jquery-qrcode/</a>
|
||||
*/
|
||||
|
||||
window.QRCode;
|
||||
(function () {
|
||||
|
||||
//---------------------------------------------------------------------
|
||||
// QRCode for JavaScript
|
||||
//
|
||||
// Copyright (c) 2009 Kazuhiko Arase
|
||||
//
|
||||
// URL: http://www.d-project.com/
|
||||
//
|
||||
// Licensed under the MIT license:
|
||||
// http://www.opensource.org/licenses/mit-license.php
|
||||
//
|
||||
// The word "QR Code" is registered trademark of
|
||||
// DENSO WAVE INCORPORATED
|
||||
// http://www.denso-wave.com/qrcode/faqpatent-e.html
|
||||
//
|
||||
//---------------------------------------------------------------------
|
||||
function QR8bitByte(data) {
|
||||
this.mode = QRMode.MODE_8BIT_BYTE;
|
||||
this.data = data;
|
||||
this.parsedData = [];
|
||||
|
||||
// Added to support UTF-8 Characters
|
||||
for (var i = 0, l = this.data.length; i < l; i++) {
|
||||
var byteArray = [];
|
||||
var code = this.data.charCodeAt(i);
|
||||
|
||||
if (code > 0x10000) {
|
||||
byteArray[0] = 0xF0 | ((code & 0x1C0000) >>> 18);
|
||||
byteArray[1] = 0x80 | ((code & 0x3F000) >>> 12);
|
||||
byteArray[2] = 0x80 | ((code & 0xFC0) >>> 6);
|
||||
byteArray[3] = 0x80 | (code & 0x3F);
|
||||
} else if (code > 0x800) {
|
||||
byteArray[0] = 0xE0 | ((code & 0xF000) >>> 12);
|
||||
byteArray[1] = 0x80 | ((code & 0xFC0) >>> 6);
|
||||
byteArray[2] = 0x80 | (code & 0x3F);
|
||||
} else if (code > 0x80) {
|
||||
byteArray[0] = 0xC0 | ((code & 0x7C0) >>> 6);
|
||||
byteArray[1] = 0x80 | (code & 0x3F);
|
||||
} else {
|
||||
byteArray[0] = code;
|
||||
}
|
||||
|
||||
this.parsedData.push(byteArray);
|
||||
}
|
||||
|
||||
this.parsedData = Array.prototype.concat.apply([], this.parsedData);
|
||||
|
||||
if (this.parsedData.length != this.data.length) {
|
||||
this.parsedData.unshift(191);
|
||||
this.parsedData.unshift(187);
|
||||
this.parsedData.unshift(239);
|
||||
}
|
||||
}
|
||||
|
||||
QR8bitByte.prototype = {
|
||||
getLength: function (buffer) {
|
||||
return this.parsedData.length;
|
||||
},
|
||||
write: function (buffer) {
|
||||
for (var i = 0, l = this.parsedData.length; i < l; i++) {
|
||||
buffer.put(this.parsedData[i], 8);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function QRCodeModel(typeNumber, errorCorrectLevel) {
|
||||
this.typeNumber = typeNumber;
|
||||
this.errorCorrectLevel = errorCorrectLevel;
|
||||
this.modules = null;
|
||||
this.moduleCount = 0;
|
||||
this.dataCache = null;
|
||||
this.dataList = [];
|
||||
}
|
||||
|
||||
QRCodeModel.prototype={addData:function(data){var newData=new QR8bitByte(data);this.dataList.push(newData);this.dataCache=null;},isDark:function(row,col){if(row<0||this.moduleCount<=row||col<0||this.moduleCount<=col){throw new Error(row+","+col);}
|
||||
return this.modules[row][col];},getModuleCount:function(){return this.moduleCount;},make:function(){this.makeImpl(false,this.getBestMaskPattern());},makeImpl:function(test,maskPattern){this.moduleCount=this.typeNumber*4+17;this.modules=new Array(this.moduleCount);for(var row=0;row<this.moduleCount;row++){this.modules[row]=new Array(this.moduleCount);for(var col=0;col<this.moduleCount;col++){this.modules[row][col]=null;}}
|
||||
this.setupPositionProbePattern(0,0);this.setupPositionProbePattern(this.moduleCount-7,0);this.setupPositionProbePattern(0,this.moduleCount-7);this.setupPositionAdjustPattern();this.setupTimingPattern();this.setupTypeInfo(test,maskPattern);if(this.typeNumber>=7){this.setupTypeNumber(test);}
|
||||
if(this.dataCache==null){this.dataCache=QRCodeModel.createData(this.typeNumber,this.errorCorrectLevel,this.dataList);}
|
||||
this.mapData(this.dataCache,maskPattern);},setupPositionProbePattern:function(row,col){for(var r=-1;r<=7;r++){if(row+r<=-1||this.moduleCount<=row+r)continue;for(var c=-1;c<=7;c++){if(col+c<=-1||this.moduleCount<=col+c)continue;if((0<=r&&r<=6&&(c==0||c==6))||(0<=c&&c<=6&&(r==0||r==6))||(2<=r&&r<=4&&2<=c&&c<=4)){this.modules[row+r][col+c]=true;}else{this.modules[row+r][col+c]=false;}}}},getBestMaskPattern:function(){var minLostPoint=0;var pattern=0;for(var i=0;i<8;i++){this.makeImpl(true,i);var lostPoint=QRUtil.getLostPoint(this);if(i==0||minLostPoint>lostPoint){minLostPoint=lostPoint;pattern=i;}}
|
||||
return pattern;},createMovieClip:function(target_mc,instance_name,depth){var qr_mc=target_mc.createEmptyMovieClip(instance_name,depth);var cs=1;this.make();for(var row=0;row<this.modules.length;row++){var y=row*cs;for(var col=0;col<this.modules[row].length;col++){var x=col*cs;var dark=this.modules[row][col];if(dark){qr_mc.beginFill(0,100);qr_mc.moveTo(x,y);qr_mc.lineTo(x+cs,y);qr_mc.lineTo(x+cs,y+cs);qr_mc.lineTo(x,y+cs);qr_mc.endFill();}}}
|
||||
return qr_mc;},setupTimingPattern:function(){for(var r=8;r<this.moduleCount-8;r++){if(this.modules[r][6]!=null){continue;}
|
||||
this.modules[r][6]=(r%2==0);}
|
||||
for(var c=8;c<this.moduleCount-8;c++){if(this.modules[6][c]!=null){continue;}
|
||||
this.modules[6][c]=(c%2==0);}},setupPositionAdjustPattern:function(){var pos=QRUtil.getPatternPosition(this.typeNumber);for(var i=0;i<pos.length;i++){for(var j=0;j<pos.length;j++){var row=pos[i];var col=pos[j];if(this.modules[row][col]!=null){continue;}
|
||||
for(var r=-2;r<=2;r++){for(var c=-2;c<=2;c++){if(r==-2||r==2||c==-2||c==2||(r==0&&c==0)){this.modules[row+r][col+c]=true;}else{this.modules[row+r][col+c]=false;}}}}}},setupTypeNumber:function(test){var bits=QRUtil.getBCHTypeNumber(this.typeNumber);for(var i=0;i<18;i++){var mod=(!test&&((bits>>i)&1)==1);this.modules[Math.floor(i/3)][i%3+this.moduleCount-8-3]=mod;}
|
||||
for(var i=0;i<18;i++){var mod=(!test&&((bits>>i)&1)==1);this.modules[i%3+this.moduleCount-8-3][Math.floor(i/3)]=mod;}},setupTypeInfo:function(test,maskPattern){var data=(this.errorCorrectLevel<<3)|maskPattern;var bits=QRUtil.getBCHTypeInfo(data);for(var i=0;i<15;i++){var mod=(!test&&((bits>>i)&1)==1);if(i<6){this.modules[i][8]=mod;}else if(i<8){this.modules[i+1][8]=mod;}else{this.modules[this.moduleCount-15+i][8]=mod;}}
|
||||
for(var i=0;i<15;i++){var mod=(!test&&((bits>>i)&1)==1);if(i<8){this.modules[8][this.moduleCount-i-1]=mod;}else if(i<9){this.modules[8][15-i-1+1]=mod;}else{this.modules[8][15-i-1]=mod;}}
|
||||
this.modules[this.moduleCount-8][8]=(!test);},mapData:function(data,maskPattern){var inc=-1;var row=this.moduleCount-1;var bitIndex=7;var byteIndex=0;for(var col=this.moduleCount-1;col>0;col-=2){if(col==6)col--;while(true){for(var c=0;c<2;c++){if(this.modules[row][col-c]==null){var dark=false;if(byteIndex<data.length){dark=(((data[byteIndex]>>>bitIndex)&1)==1);}
|
||||
var mask=QRUtil.getMask(maskPattern,row,col-c);if(mask){dark=!dark;}
|
||||
this.modules[row][col-c]=dark;bitIndex--;if(bitIndex==-1){byteIndex++;bitIndex=7;}}}
|
||||
row+=inc;if(row<0||this.moduleCount<=row){row-=inc;inc=-inc;break;}}}}};QRCodeModel.PAD0=0xEC;QRCodeModel.PAD1=0x11;QRCodeModel.createData=function(typeNumber,errorCorrectLevel,dataList){var rsBlocks=QRRSBlock.getRSBlocks(typeNumber,errorCorrectLevel);var buffer=new QRBitBuffer();for(var i=0;i<dataList.length;i++){var data=dataList[i];buffer.put(data.mode,4);buffer.put(data.getLength(),QRUtil.getLengthInBits(data.mode,typeNumber));data.write(buffer);}
|
||||
var totalDataCount=0;for(var i=0;i<rsBlocks.length;i++){totalDataCount+=rsBlocks[i].dataCount;}
|
||||
if(buffer.getLengthInBits()>totalDataCount*8){throw new Error("code length overflow. ("
|
||||
+buffer.getLengthInBits()
|
||||
+">"
|
||||
+totalDataCount*8
|
||||
+")");}
|
||||
if(buffer.getLengthInBits()+4<=totalDataCount*8){buffer.put(0,4);}
|
||||
while(buffer.getLengthInBits()%8!=0){buffer.putBit(false);}
|
||||
while(true){if(buffer.getLengthInBits()>=totalDataCount*8){break;}
|
||||
buffer.put(QRCodeModel.PAD0,8);if(buffer.getLengthInBits()>=totalDataCount*8){break;}
|
||||
buffer.put(QRCodeModel.PAD1,8);}
|
||||
return QRCodeModel.createBytes(buffer,rsBlocks);};QRCodeModel.createBytes=function(buffer,rsBlocks){var offset=0;var maxDcCount=0;var maxEcCount=0;var dcdata=new Array(rsBlocks.length);var ecdata=new Array(rsBlocks.length);for(var r=0;r<rsBlocks.length;r++){var dcCount=rsBlocks[r].dataCount;var ecCount=rsBlocks[r].totalCount-dcCount;maxDcCount=Math.max(maxDcCount,dcCount);maxEcCount=Math.max(maxEcCount,ecCount);dcdata[r]=new Array(dcCount);for(var i=0;i<dcdata[r].length;i++){dcdata[r][i]=0xff&buffer.buffer[i+offset];}
|
||||
offset+=dcCount;var rsPoly=QRUtil.getErrorCorrectPolynomial(ecCount);var rawPoly=new QRPolynomial(dcdata[r],rsPoly.getLength()-1);var modPoly=rawPoly.mod(rsPoly);ecdata[r]=new Array(rsPoly.getLength()-1);for(var i=0;i<ecdata[r].length;i++){var modIndex=i+modPoly.getLength()-ecdata[r].length;ecdata[r][i]=(modIndex>=0)?modPoly.get(modIndex):0;}}
|
||||
var totalCodeCount=0;for(var i=0;i<rsBlocks.length;i++){totalCodeCount+=rsBlocks[i].totalCount;}
|
||||
var data=new Array(totalCodeCount);var index=0;for(var i=0;i<maxDcCount;i++){for(var r=0;r<rsBlocks.length;r++){if(i<dcdata[r].length){data[index++]=dcdata[r][i];}}}
|
||||
for(var i=0;i<maxEcCount;i++){for(var r=0;r<rsBlocks.length;r++){if(i<ecdata[r].length){data[index++]=ecdata[r][i];}}}
|
||||
return data;};var QRMode={MODE_NUMBER:1<<0,MODE_ALPHA_NUM:1<<1,MODE_8BIT_BYTE:1<<2,MODE_KANJI:1<<3};var QRErrorCorrectLevel={L:1,M:0,Q:3,H:2};var QRMaskPattern={PATTERN000:0,PATTERN001:1,PATTERN010:2,PATTERN011:3,PATTERN100:4,PATTERN101:5,PATTERN110:6,PATTERN111:7};var QRUtil={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,58,84,110],[6,30,58,86,114],[6,34,62,90,118],[6,26,50,74,98,122],[6,30,54,78,102,126],[6,26,52,78,104,130],[6,30,56,82,108,134],[6,34,60,86,112,138],[6,30,58,86,114,142],[6,34,62,90,118,146],[6,30,54,78,102,126,150],[6,24,50,76,102,128,154],[6,28,54,80,106,132,158],[6,32,58,84,110,136,162],[6,26,54,82,110,138,166],[6,30,58,86,114,142,170]],G15:(1<<10)|(1<<8)|(1<<5)|(1<<4)|(1<<2)|(1<<1)|(1<<0),G18:(1<<12)|(1<<11)|(1<<10)|(1<<9)|(1<<8)|(1<<5)|(1<<2)|(1<<0),G15_MASK:(1<<14)|(1<<12)|(1<<10)|(1<<4)|(1<<1),getBCHTypeInfo:function(data){var d=data<<10;while(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G15)>=0){d^=(QRUtil.G15<<(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G15)));}
|
||||
return((data<<10)|d)^QRUtil.G15_MASK;},getBCHTypeNumber:function(data){var d=data<<12;while(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G18)>=0){d^=(QRUtil.G18<<(QRUtil.getBCHDigit(d)-QRUtil.getBCHDigit(QRUtil.G18)));}
|
||||
return(data<<12)|d;},getBCHDigit:function(data){var digit=0;while(data!=0){digit++;data>>>=1;}
|
||||
return digit;},getPatternPosition:function(typeNumber){return QRUtil.PATTERN_POSITION_TABLE[typeNumber-1];},getMask:function(maskPattern,i,j){switch(maskPattern){case QRMaskPattern.PATTERN000:return(i+j)%2==0;case QRMaskPattern.PATTERN001:return i%2==0;case QRMaskPattern.PATTERN010:return j%3==0;case QRMaskPattern.PATTERN011:return(i+j)%3==0;case QRMaskPattern.PATTERN100:return(Math.floor(i/2)+Math.floor(j/3))%2==0;case QRMaskPattern.PATTERN101:return(i*j)%2+(i*j)%3==0;case QRMaskPattern.PATTERN110:return((i*j)%2+(i*j)%3)%2==0;case QRMaskPattern.PATTERN111:return((i*j)%3+(i+j)%2)%2==0;default:throw new Error("bad maskPattern:"+maskPattern);}},getErrorCorrectPolynomial:function(errorCorrectLength){var a=new QRPolynomial([1],0);for(var i=0;i<errorCorrectLength;i++){a=a.multiply(new QRPolynomial([1,QRMath.gexp(i)],0));}
|
||||
return a;},getLengthInBits:function(mode,type){if(1<=type&&type<10){switch(mode){case QRMode.MODE_NUMBER:return 10;case QRMode.MODE_ALPHA_NUM:return 9;case QRMode.MODE_8BIT_BYTE:return 8;case QRMode.MODE_KANJI:return 8;default:throw new Error("mode:"+mode);}}else if(type<27){switch(mode){case QRMode.MODE_NUMBER:return 12;case QRMode.MODE_ALPHA_NUM:return 11;case QRMode.MODE_8BIT_BYTE:return 16;case QRMode.MODE_KANJI:return 10;default:throw new Error("mode:"+mode);}}else if(type<41){switch(mode){case QRMode.MODE_NUMBER:return 14;case QRMode.MODE_ALPHA_NUM:return 13;case QRMode.MODE_8BIT_BYTE:return 16;case QRMode.MODE_KANJI:return 12;default:throw new Error("mode:"+mode);}}else{throw new Error("type:"+type);}},getLostPoint:function(qrCode){var moduleCount=qrCode.getModuleCount();var lostPoint=0;for(var row=0;row<moduleCount;row++){for(var col=0;col<moduleCount;col++){var sameCount=0;var dark=qrCode.isDark(row,col);for(var r=-1;r<=1;r++){if(row+r<0||moduleCount<=row+r){continue;}
|
||||
for(var c=-1;c<=1;c++){if(col+c<0||moduleCount<=col+c){continue;}
|
||||
if(r==0&&c==0){continue;}
|
||||
if(dark==qrCode.isDark(row+r,col+c)){sameCount++;}}}
|
||||
if(sameCount>5){lostPoint+=(3+sameCount-5);}}}
|
||||
for(var row=0;row<moduleCount-1;row++){for(var col=0;col<moduleCount-1;col++){var count=0;if(qrCode.isDark(row,col))count++;if(qrCode.isDark(row+1,col))count++;if(qrCode.isDark(row,col+1))count++;if(qrCode.isDark(row+1,col+1))count++;if(count==0||count==4){lostPoint+=3;}}}
|
||||
for(var row=0;row<moduleCount;row++){for(var col=0;col<moduleCount-6;col++){if(qrCode.isDark(row,col)&&!qrCode.isDark(row,col+1)&&qrCode.isDark(row,col+2)&&qrCode.isDark(row,col+3)&&qrCode.isDark(row,col+4)&&!qrCode.isDark(row,col+5)&&qrCode.isDark(row,col+6)){lostPoint+=40;}}}
|
||||
for(var col=0;col<moduleCount;col++){for(var row=0;row<moduleCount-6;row++){if(qrCode.isDark(row,col)&&!qrCode.isDark(row+1,col)&&qrCode.isDark(row+2,col)&&qrCode.isDark(row+3,col)&&qrCode.isDark(row+4,col)&&!qrCode.isDark(row+5,col)&&qrCode.isDark(row+6,col)){lostPoint+=40;}}}
|
||||
var darkCount=0;for(var col=0;col<moduleCount;col++){for(var row=0;row<moduleCount;row++){if(qrCode.isDark(row,col)){darkCount++;}}}
|
||||
var ratio=Math.abs(100*darkCount/moduleCount/moduleCount-50)/5;lostPoint+=ratio*10;return lostPoint;}};var QRMath={glog:function(n){if(n<1){throw new Error("glog("+n+")");}
|
||||
return QRMath.LOG_TABLE[n];},gexp:function(n){while(n<0){n+=255;}
|
||||
while(n>=256){n-=255;}
|
||||
return QRMath.EXP_TABLE[n];},EXP_TABLE:new Array(256),LOG_TABLE:new Array(256)};for(var i=0;i<8;i++){QRMath.EXP_TABLE[i]=1<<i;}
|
||||
for(var i=8;i<256;i++){QRMath.EXP_TABLE[i]=QRMath.EXP_TABLE[i-4]^QRMath.EXP_TABLE[i-5]^QRMath.EXP_TABLE[i-6]^QRMath.EXP_TABLE[i-8];}
|
||||
for(var i=0;i<255;i++){QRMath.LOG_TABLE[QRMath.EXP_TABLE[i]]=i;}
|
||||
function QRPolynomial(num,shift){if(num.length==undefined){throw new Error(num.length+"/"+shift);}
|
||||
var offset=0;while(offset<num.length&&num[offset]==0){offset++;}
|
||||
this.num=new Array(num.length-offset+shift);for(var i=0;i<num.length-offset;i++){this.num[i]=num[i+offset];}}
|
||||
QRPolynomial.prototype={get:function(index){return this.num[index];},getLength:function(){return this.num.length;},multiply:function(e){var num=new Array(this.getLength()+e.getLength()-1);for(var i=0;i<this.getLength();i++){for(var j=0;j<e.getLength();j++){num[i+j]^=QRMath.gexp(QRMath.glog(this.get(i))+QRMath.glog(e.get(j)));}}
|
||||
return new QRPolynomial(num,0);},mod:function(e){if(this.getLength()-e.getLength()<0){return this;}
|
||||
var ratio=QRMath.glog(this.get(0))-QRMath.glog(e.get(0));var num=new Array(this.getLength());for(var i=0;i<this.getLength();i++){num[i]=this.get(i);}
|
||||
for(var i=0;i<e.getLength();i++){num[i]^=QRMath.gexp(QRMath.glog(e.get(i))+ratio);}
|
||||
return new QRPolynomial(num,0).mod(e);}};function QRRSBlock(totalCount,dataCount){this.totalCount=totalCount;this.dataCount=dataCount;}
|
||||
QRRSBlock.RS_BLOCK_TABLE=[[1,26,19],[1,26,16],[1,26,13],[1,26,9],[1,44,34],[1,44,28],[1,44,22],[1,44,16],[1,70,55],[1,70,44],[2,35,17],[2,35,13],[1,100,80],[2,50,32],[2,50,24],[4,25,9],[1,134,108],[2,67,43],[2,33,15,2,34,16],[2,33,11,2,34,12],[2,86,68],[4,43,27],[4,43,19],[4,43,15],[2,98,78],[4,49,31],[2,32,14,4,33,15],[4,39,13,1,40,14],[2,121,97],[2,60,38,2,61,39],[4,40,18,2,41,19],[4,40,14,2,41,15],[2,146,116],[3,58,36,2,59,37],[4,36,16,4,37,17],[4,36,12,4,37,13],[2,86,68,2,87,69],[4,69,43,1,70,44],[6,43,19,2,44,20],[6,43,15,2,44,16],[4,101,81],[1,80,50,4,81,51],[4,50,22,4,51,23],[3,36,12,8,37,13],[2,116,92,2,117,93],[6,58,36,2,59,37],[4,46,20,6,47,21],[7,42,14,4,43,15],[4,133,107],[8,59,37,1,60,38],[8,44,20,4,45,21],[12,33,11,4,34,12],[3,145,115,1,146,116],[4,64,40,5,65,41],[11,36,16,5,37,17],[11,36,12,5,37,13],[5,109,87,1,110,88],[5,65,41,5,66,42],[5,54,24,7,55,25],[11,36,12],[5,122,98,1,123,99],[7,73,45,3,74,46],[15,43,19,2,44,20],[3,45,15,13,46,16],[1,135,107,5,136,108],[10,74,46,1,75,47],[1,50,22,15,51,23],[2,42,14,17,43,15],[5,150,120,1,151,121],[9,69,43,4,70,44],[17,50,22,1,51,23],[2,42,14,19,43,15],[3,141,113,4,142,114],[3,70,44,11,71,45],[17,47,21,4,48,22],[9,39,13,16,40,14],[3,135,107,5,136,108],[3,67,41,13,68,42],[15,54,24,5,55,25],[15,43,15,10,44,16],[4,144,116,4,145,117],[17,68,42],[17,50,22,6,51,23],[19,46,16,6,47,17],[2,139,111,7,140,112],[17,74,46],[7,54,24,16,55,25],[34,37,13],[4,151,121,5,152,122],[4,75,47,14,76,48],[11,54,24,14,55,25],[16,45,15,14,46,16],[6,147,117,4,148,118],[6,73,45,14,74,46],[11,54,24,16,55,25],[30,46,16,2,47,17],[8,132,106,4,133,107],[8,75,47,13,76,48],[7,54,24,22,55,25],[22,45,15,13,46,16],[10,142,114,2,143,115],[19,74,46,4,75,47],[28,50,22,6,51,23],[33,46,16,4,47,17],[8,152,122,4,153,123],[22,73,45,3,74,46],[8,53,23,26,54,24],[12,45,15,28,46,16],[3,147,117,10,148,118],[3,73,45,23,74,46],[4,54,24,31,55,25],[11,45,15,31,46,16],[7,146,116,7,147,117],[21,73,45,7,74,46],[1,53,23,37,54,24],[19,45,15,26,46,16],[5,145,115,10,146,116],[19,75,47,10,76,48],[15,54,24,25,55,25],[23,45,15,25,46,16],[13,145,115,3,146,116],[2,74,46,29,75,47],[42,54,24,1,55,25],[23,45,15,28,46,16],[17,145,115],[10,74,46,23,75,47],[10,54,24,35,55,25],[19,45,15,35,46,16],[17,145,115,1,146,116],[14,74,46,21,75,47],[29,54,24,19,55,25],[11,45,15,46,46,16],[13,145,115,6,146,116],[14,74,46,23,75,47],[44,54,24,7,55,25],[59,46,16,1,47,17],[12,151,121,7,152,122],[12,75,47,26,76,48],[39,54,24,14,55,25],[22,45,15,41,46,16],[6,151,121,14,152,122],[6,75,47,34,76,48],[46,54,24,10,55,25],[2,45,15,64,46,16],[17,152,122,4,153,123],[29,74,46,14,75,47],[49,54,24,10,55,25],[24,45,15,46,46,16],[4,152,122,18,153,123],[13,74,46,32,75,47],[48,54,24,14,55,25],[42,45,15,32,46,16],[20,147,117,4,148,118],[40,75,47,7,76,48],[43,54,24,22,55,25],[10,45,15,67,46,16],[19,148,118,6,149,119],[18,75,47,31,76,48],[34,54,24,34,55,25],[20,45,15,61,46,16]];QRRSBlock.getRSBlocks=function(typeNumber,errorCorrectLevel){var rsBlock=QRRSBlock.getRsBlockTable(typeNumber,errorCorrectLevel);if(rsBlock==undefined){throw new Error("bad rs block @ typeNumber:"+typeNumber+"/errorCorrectLevel:"+errorCorrectLevel);}
|
||||
var length=rsBlock.length/3;var list=[];for(var i=0;i<length;i++){var count=rsBlock[i*3+0];var totalCount=rsBlock[i*3+1];var dataCount=rsBlock[i*3+2];for(var j=0;j<count;j++){list.push(new QRRSBlock(totalCount,dataCount));}}
|
||||
return list;};QRRSBlock.getRsBlockTable=function(typeNumber,errorCorrectLevel){switch(errorCorrectLevel){case QRErrorCorrectLevel.L:return QRRSBlock.RS_BLOCK_TABLE[(typeNumber-1)*4+0];case QRErrorCorrectLevel.M:return QRRSBlock.RS_BLOCK_TABLE[(typeNumber-1)*4+1];case QRErrorCorrectLevel.Q:return QRRSBlock.RS_BLOCK_TABLE[(typeNumber-1)*4+2];case QRErrorCorrectLevel.H:return QRRSBlock.RS_BLOCK_TABLE[(typeNumber-1)*4+3];default:return undefined;}};function QRBitBuffer(){this.buffer=[];this.length=0;}
|
||||
QRBitBuffer.prototype={get:function(index){var bufIndex=Math.floor(index/8);return((this.buffer[bufIndex]>>>(7-index%8))&1)==1;},put:function(num,length){for(var i=0;i<length;i++){this.putBit(((num>>>(length-i-1))&1)==1);}},getLengthInBits:function(){return this.length;},putBit:function(bit){var bufIndex=Math.floor(this.length/8);if(this.buffer.length<=bufIndex){this.buffer.push(0);}
|
||||
if(bit){this.buffer[bufIndex]|=(0x80>>>(this.length%8));}
|
||||
this.length++;}};var QRCodeLimitLength=[[17,14,11,7],[32,26,20,14],[53,42,32,24],[78,62,46,34],[106,84,60,44],[134,106,74,58],[154,122,86,64],[192,152,108,84],[230,180,130,98],[271,213,151,119],[321,251,177,137],[367,287,203,155],[425,331,241,177],[458,362,258,194],[520,412,292,220],[586,450,322,250],[644,504,364,280],[718,560,394,310],[792,624,442,338],[858,666,482,382],[929,711,509,403],[1003,779,565,439],[1091,857,611,461],[1171,911,661,511],[1273,997,715,535],[1367,1059,751,593],[1465,1125,805,625],[1528,1190,868,658],[1628,1264,908,698],[1732,1370,982,742],[1840,1452,1030,790],[1952,1538,1112,842],[2068,1628,1168,898],[2188,1722,1228,958],[2303,1809,1283,983],[2431,1911,1351,1051],[2563,1989,1423,1093],[2699,2099,1499,1139],[2809,2213,1579,1219],[2953,2331,1663,1273]];
|
||||
|
||||
function _isSupportCanvas() {
|
||||
return typeof CanvasRenderingContext2D != "undefined";
|
||||
}
|
||||
|
||||
// android 2.x doesn't support Data-URI spec
|
||||
function _getAndroid() {
|
||||
var android = false;
|
||||
var sAgent = navigator.userAgent;
|
||||
|
||||
if (/android/i.test(sAgent)) { // android
|
||||
android = true;
|
||||
var aMat = sAgent.toString().match(/android ([0-9]\.[0-9])/i);
|
||||
|
||||
if (aMat && aMat[1]) {
|
||||
android = parseFloat(aMat[1]);
|
||||
}
|
||||
}
|
||||
|
||||
return android;
|
||||
}
|
||||
|
||||
var svgDrawer = (function() {
|
||||
|
||||
var Drawing = function (el, htOption) {
|
||||
this._el = el;
|
||||
this._htOption = htOption;
|
||||
};
|
||||
|
||||
Drawing.prototype.draw = function (oQRCode) {
|
||||
var _htOption = this._htOption;
|
||||
var _el = this._el;
|
||||
var nCount = oQRCode.getModuleCount();
|
||||
var nWidth = Math.floor(_htOption.width / nCount);
|
||||
var nHeight = Math.floor(_htOption.height / nCount);
|
||||
|
||||
this.clear();
|
||||
|
||||
function makeSVG(tag, attrs) {
|
||||
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
|
||||
for (var k in attrs)
|
||||
if (attrs.hasOwnProperty(k)) el.setAttribute(k, attrs[k]);
|
||||
return el;
|
||||
}
|
||||
|
||||
var svg = makeSVG("svg" , {'viewBox': '0 0 ' + String(nCount) + " " + String(nCount), 'width': '100%', 'height': '100%', 'fill': _htOption.colorLight});
|
||||
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
|
||||
_el.appendChild(svg);
|
||||
|
||||
svg.appendChild(makeSVG("rect", {"fill": _htOption.colorLight, "width": "100%", "height": "100%"}));
|
||||
svg.appendChild(makeSVG("rect", {"fill": _htOption.colorDark, "width": "1", "height": "1", "id": "template"}));
|
||||
|
||||
for (var row = 0; row < nCount; row++) {
|
||||
for (var col = 0; col < nCount; col++) {
|
||||
if (oQRCode.isDark(row, col)) {
|
||||
var child = makeSVG("use", {"x": String(col), "y": String(row)});
|
||||
child.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#template")
|
||||
svg.appendChild(child);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
Drawing.prototype.clear = function () {
|
||||
while (this._el.hasChildNodes())
|
||||
this._el.removeChild(this._el.lastChild);
|
||||
};
|
||||
return Drawing;
|
||||
})();
|
||||
|
||||
var useSVG = document.documentElement.tagName.toLowerCase() === "svg";
|
||||
|
||||
// Drawing in DOM by using Table tag
|
||||
var Drawing = useSVG ? svgDrawer : !_isSupportCanvas() ? (function () {
|
||||
var Drawing = function (el, htOption) {
|
||||
this._el = el;
|
||||
this._htOption = htOption;
|
||||
};
|
||||
|
||||
/**
|
||||
* Draw the QRCode
|
||||
*
|
||||
* @param {QRCode} oQRCode
|
||||
*/
|
||||
Drawing.prototype.draw = function (oQRCode) {
|
||||
var _htOption = this._htOption;
|
||||
var _el = this._el;
|
||||
var nCount = oQRCode.getModuleCount();
|
||||
var nWidth = Math.floor(_htOption.width / nCount);
|
||||
var nHeight = Math.floor(_htOption.height / nCount);
|
||||
var aHTML = ['<table style="border:0;border-collapse:collapse;">'];
|
||||
|
||||
for (var row = 0; row < nCount; row++) {
|
||||
aHTML.push('<tr>');
|
||||
|
||||
for (var col = 0; col < nCount; col++) {
|
||||
aHTML.push('<td style="border:0;border-collapse:collapse;padding:0;margin:0;width:' + nWidth + 'px;height:' + nHeight + 'px;background-color:' + (oQRCode.isDark(row, col) ? _htOption.colorDark : _htOption.colorLight) + ';"></td>');
|
||||
}
|
||||
|
||||
aHTML.push('</tr>');
|
||||
}
|
||||
|
||||
aHTML.push('</table>');
|
||||
_el.innerHTML = aHTML.join('');
|
||||
|
||||
// Fix the margin values as real size.
|
||||
var elTable = _el.childNodes[0];
|
||||
var nLeftMarginTable = (_htOption.width - elTable.offsetWidth) / 2;
|
||||
var nTopMarginTable = (_htOption.height - elTable.offsetHeight) / 2;
|
||||
|
||||
if (nLeftMarginTable > 0 && nTopMarginTable > 0) {
|
||||
elTable.style.margin = nTopMarginTable + "px " + nLeftMarginTable + "px";
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear the QRCode
|
||||
*/
|
||||
Drawing.prototype.clear = function () {
|
||||
this._el.innerHTML = '';
|
||||
};
|
||||
|
||||
return Drawing;
|
||||
})() : (function () { // Drawing in Canvas
|
||||
function _onMakeImage() {
|
||||
this._elImage.src = this._elCanvas.toDataURL("image/png");
|
||||
this._elImage.style.display = "block";
|
||||
this._elCanvas.style.display = "none";
|
||||
}
|
||||
|
||||
// Android 2.1 bug workaround
|
||||
// http://code.google.com/p/android/issues/detail?id=5141
|
||||
if (this._android && this._android <= 2.1) {
|
||||
var factor = 1 / window.devicePixelRatio;
|
||||
var drawImage = CanvasRenderingContext2D.prototype.drawImage;
|
||||
CanvasRenderingContext2D.prototype.drawImage = function (image, sx, sy, sw, sh, dx, dy, dw, dh) {
|
||||
if (("nodeName" in image) && /img/i.test(image.nodeName)) {
|
||||
for (var i = arguments.length - 1; i >= 1; i--) {
|
||||
arguments[i] = arguments[i] * factor;
|
||||
}
|
||||
} else if (typeof dw == "undefined") {
|
||||
arguments[1] *= factor;
|
||||
arguments[2] *= factor;
|
||||
arguments[3] *= factor;
|
||||
arguments[4] *= factor;
|
||||
}
|
||||
|
||||
drawImage.apply(this, arguments);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Check whether the user's browser supports Data URI or not
|
||||
*
|
||||
* @private
|
||||
* @param {Function} fSuccess Occurs if it supports Data URI
|
||||
* @param {Function} fFail Occurs if it doesn't support Data URI
|
||||
*/
|
||||
function _safeSetDataURI(fSuccess, fFail) {
|
||||
var self = this;
|
||||
self._fFail = fFail;
|
||||
self._fSuccess = fSuccess;
|
||||
|
||||
// Check it just once
|
||||
if (self._bSupportDataURI === null) {
|
||||
var el = document.createElement("img");
|
||||
var fOnError = function() {
|
||||
self._bSupportDataURI = false;
|
||||
|
||||
if (self._fFail) {
|
||||
self._fFail.call(self);
|
||||
}
|
||||
};
|
||||
var fOnSuccess = function() {
|
||||
self._bSupportDataURI = true;
|
||||
|
||||
if (self._fSuccess) {
|
||||
self._fSuccess.call(self);
|
||||
}
|
||||
};
|
||||
|
||||
el.onabort = fOnError;
|
||||
el.onerror = fOnError;
|
||||
el.onload = fOnSuccess;
|
||||
el.src = "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; // the Image contains 1px data.
|
||||
return;
|
||||
} else if (self._bSupportDataURI === true && self._fSuccess) {
|
||||
self._fSuccess.call(self);
|
||||
} else if (self._bSupportDataURI === false && self._fFail) {
|
||||
self._fFail.call(self);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Drawing QRCode by using canvas
|
||||
*
|
||||
* @constructor
|
||||
* @param {HTMLElement} el
|
||||
* @param {Object} htOption QRCode Options
|
||||
*/
|
||||
var Drawing = function (el, htOption) {
|
||||
this._bIsPainted = false;
|
||||
this._android = _getAndroid();
|
||||
|
||||
this._htOption = htOption;
|
||||
this._elCanvas = document.createElement("canvas");
|
||||
this._elCanvas.width = htOption.width;
|
||||
this._elCanvas.height = htOption.height;
|
||||
el.appendChild(this._elCanvas);
|
||||
this._el = el;
|
||||
this._oContext = this._elCanvas.getContext("2d");
|
||||
this._bIsPainted = false;
|
||||
this._elImage = document.createElement("img");
|
||||
this._elImage.alt = "Scan me!";
|
||||
this._elImage.style.display = "none";
|
||||
this._el.appendChild(this._elImage);
|
||||
this._bSupportDataURI = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Draw the QRCode
|
||||
*
|
||||
* @param {QRCode} oQRCode
|
||||
*/
|
||||
Drawing.prototype.draw = function (oQRCode) {
|
||||
var _elImage = this._elImage;
|
||||
var _oContext = this._oContext;
|
||||
var _htOption = this._htOption;
|
||||
|
||||
var nCount = oQRCode.getModuleCount();
|
||||
var nWidth = _htOption.width / nCount;
|
||||
var nHeight = _htOption.height / nCount;
|
||||
var nRoundedWidth = Math.round(nWidth);
|
||||
var nRoundedHeight = Math.round(nHeight);
|
||||
|
||||
_elImage.style.display = "none";
|
||||
this.clear();
|
||||
|
||||
for (var row = 0; row < nCount; row++) {
|
||||
for (var col = 0; col < nCount; col++) {
|
||||
var bIsDark = oQRCode.isDark(row, col);
|
||||
var nLeft = col * nWidth;
|
||||
var nTop = row * nHeight;
|
||||
_oContext.strokeStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
|
||||
_oContext.lineWidth = 1;
|
||||
_oContext.fillStyle = bIsDark ? _htOption.colorDark : _htOption.colorLight;
|
||||
_oContext.fillRect(nLeft, nTop, nWidth, nHeight);
|
||||
|
||||
// 안티 앨리어싱 방지 처리
|
||||
_oContext.strokeRect(
|
||||
Math.floor(nLeft) + 0.5,
|
||||
Math.floor(nTop) + 0.5,
|
||||
nRoundedWidth,
|
||||
nRoundedHeight
|
||||
);
|
||||
|
||||
_oContext.strokeRect(
|
||||
Math.ceil(nLeft) - 0.5,
|
||||
Math.ceil(nTop) - 0.5,
|
||||
nRoundedWidth,
|
||||
nRoundedHeight
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
this._bIsPainted = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Make the image from Canvas if the browser supports Data URI.
|
||||
*/
|
||||
Drawing.prototype.makeImage = function () {
|
||||
if (this._bIsPainted) {
|
||||
_safeSetDataURI.call(this, _onMakeImage);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Return whether the QRCode is painted or not
|
||||
*
|
||||
* @return {Boolean}
|
||||
*/
|
||||
Drawing.prototype.isPainted = function () {
|
||||
return this._bIsPainted;
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear the QRCode
|
||||
*/
|
||||
Drawing.prototype.clear = function () {
|
||||
this._oContext.clearRect(0, 0, this._elCanvas.width, this._elCanvas.height);
|
||||
this._bIsPainted = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {Number} nNumber
|
||||
*/
|
||||
Drawing.prototype.round = function (nNumber) {
|
||||
if (!nNumber) {
|
||||
return nNumber;
|
||||
}
|
||||
|
||||
return Math.floor(nNumber * 1000) / 1000;
|
||||
};
|
||||
|
||||
return Drawing;
|
||||
})();
|
||||
|
||||
/**
|
||||
* Get the type by string length
|
||||
*
|
||||
* @private
|
||||
* @param {String} sText
|
||||
* @param {Number} nCorrectLevel
|
||||
* @return {Number} type
|
||||
*/
|
||||
function _getTypeNumber(sText, nCorrectLevel) {
|
||||
var nType = 1;
|
||||
var length = _getUTF8Length(sText);
|
||||
|
||||
for (var i = 0, len = QRCodeLimitLength.length; i <= len; i++) {
|
||||
var nLimit = 0;
|
||||
|
||||
switch (nCorrectLevel) {
|
||||
case QRErrorCorrectLevel.L :
|
||||
nLimit = QRCodeLimitLength[i][0];
|
||||
break;
|
||||
case QRErrorCorrectLevel.M :
|
||||
nLimit = QRCodeLimitLength[i][1];
|
||||
break;
|
||||
case QRErrorCorrectLevel.Q :
|
||||
nLimit = QRCodeLimitLength[i][2];
|
||||
break;
|
||||
case QRErrorCorrectLevel.H :
|
||||
nLimit = QRCodeLimitLength[i][3];
|
||||
break;
|
||||
}
|
||||
|
||||
if (length <= nLimit) {
|
||||
break;
|
||||
} else {
|
||||
nType++;
|
||||
}
|
||||
}
|
||||
|
||||
if (nType > QRCodeLimitLength.length) {
|
||||
throw new Error("Too long data");
|
||||
}
|
||||
|
||||
return nType;
|
||||
}
|
||||
|
||||
function _getUTF8Length(sText) {
|
||||
var replacedText = encodeURI(sText).toString().replace(/\%[0-9a-fA-F]{2}/g, 'a');
|
||||
return replacedText.length + (replacedText.length != sText ? 3 : 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* @class QRCode
|
||||
* @constructor
|
||||
* @example
|
||||
* new QRCode(document.getElementById("test"), "http://jindo.dev.naver.com/collie");
|
||||
*
|
||||
* @example
|
||||
* var oQRCode = new QRCode("test", {
|
||||
* text : "http://naver.com",
|
||||
* width : 128,
|
||||
* height : 128
|
||||
* });
|
||||
*
|
||||
* oQRCode.clear(); // Clear the QRCode.
|
||||
* oQRCode.makeCode("http://map.naver.com"); // Re-create the QRCode.
|
||||
*
|
||||
* @param {HTMLElement|String} el target element or 'id' attribute of element.
|
||||
* @param {Object|String} vOption
|
||||
* @param {String} vOption.text QRCode link data
|
||||
* @param {Number} [vOption.width=256]
|
||||
* @param {Number} [vOption.height=256]
|
||||
* @param {String} [vOption.colorDark="#000000"]
|
||||
* @param {String} [vOption.colorLight="#ffffff"]
|
||||
* @param {QRCode.CorrectLevel} [vOption.correctLevel=QRCode.CorrectLevel.H] [L|M|Q|H]
|
||||
*/
|
||||
QRCode = function (el, vOption) {
|
||||
this._htOption = {
|
||||
width : 256,
|
||||
height : 256,
|
||||
typeNumber : 4,
|
||||
colorDark : "#000000",
|
||||
colorLight : "#ffffff",
|
||||
correctLevel : QRErrorCorrectLevel.H
|
||||
};
|
||||
|
||||
if (typeof vOption === 'string') {
|
||||
vOption = {
|
||||
text : vOption
|
||||
};
|
||||
}
|
||||
|
||||
// Overwrites options
|
||||
if (vOption) {
|
||||
for (var i in vOption) {
|
||||
this._htOption[i] = vOption[i];
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof el == "string") {
|
||||
el = document.getElementById(el);
|
||||
}
|
||||
|
||||
if (this._htOption.useSVG) {
|
||||
Drawing = svgDrawer;
|
||||
}
|
||||
|
||||
this._android = _getAndroid();
|
||||
this._el = el;
|
||||
this._oQRCode = null;
|
||||
this._oDrawing = new Drawing(this._el, this._htOption);
|
||||
|
||||
if (this._htOption.text) {
|
||||
this.makeCode(this._htOption.text);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Make the QRCode
|
||||
*
|
||||
* @param {String} sText link data
|
||||
*/
|
||||
QRCode.prototype.makeCode = function (sText) {
|
||||
this._oQRCode = new QRCodeModel(_getTypeNumber(sText, this._htOption.correctLevel), this._htOption.correctLevel);
|
||||
this._oQRCode.addData(sText);
|
||||
this._oQRCode.make();
|
||||
this._el.title = sText;
|
||||
this._oDrawing.draw(this._oQRCode);
|
||||
this.makeImage();
|
||||
};
|
||||
|
||||
/**
|
||||
* Make the Image from Canvas element
|
||||
* - It occurs automatically
|
||||
* - Android below 3 doesn't support Data-URI spec.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
QRCode.prototype.makeImage = function () {
|
||||
if (typeof this._oDrawing.makeImage == "function" && (!this._android || this._android >= 3)) {
|
||||
this._oDrawing.makeImage();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Clear the QRCode
|
||||
*/
|
||||
QRCode.prototype.clear = function () {
|
||||
this._oDrawing.clear();
|
||||
};
|
||||
|
||||
/**
|
||||
* @name QRCode.CorrectLevel
|
||||
*/
|
||||
QRCode.CorrectLevel = QRErrorCorrectLevel;
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,20 @@
|
||||
import * as React from "react";
|
||||
import { useEffect } from "react";
|
||||
import { ConfigProvider } from "antd";
|
||||
import styles from "../index.less";
|
||||
// 样式
|
||||
import "../../../public/js/hiprint/css/hiprint.css";
|
||||
import "../../../public/js/hiprint/css/print-lock.css";
|
||||
|
||||
export default ({ children, style = {} }: any) => {
|
||||
useEffect(() => {
|
||||
ConfigProvider.config({ theme: { primaryColor: "#2DB7F5" } });
|
||||
return ()=>{}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={styles.root} style={{ width: "100%", height: "100%", overflow: "hidden", ...style }}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,71 @@
|
||||
// 自定义设计元素
|
||||
import { hiprint } from "@/utils/hiprint";
|
||||
|
||||
export const aProvider: any = function (ops: any) {
|
||||
const addElementTypes = function (context: any) {
|
||||
context.removePrintElementTypes("aProviderModule");
|
||||
context.addPrintElementTypes("aProviderModule", [
|
||||
new hiprint.PrintElementTypeGroup("表格/其他", [
|
||||
{
|
||||
tid: "aProviderModule.table",
|
||||
title: "订单数据",
|
||||
type: "table",
|
||||
options: {
|
||||
field: "table",
|
||||
fields: [
|
||||
{ text: "名称", field: "NAME" },
|
||||
{ text: "数量", field: "SL" },
|
||||
{ text: "规格", field: "GG" },
|
||||
{ text: "条码", field: "TM" },
|
||||
{ text: "单价", field: "DJ" },
|
||||
{ text: "金额", field: "JE" },
|
||||
{ text: "备注", field: "DETAIL" }
|
||||
]
|
||||
},
|
||||
editable: true,
|
||||
columnDisplayEditable: true, //列显示是否能编辑
|
||||
columnDisplayIndexEditable: true, //列顺序显示是否能编辑
|
||||
columnTitleEditable: true, //列标题是否能编辑
|
||||
columnResizable: true, //列宽是否能调整
|
||||
columnAlignEditable: true, //列对齐是否调整
|
||||
columns: [
|
||||
[
|
||||
{ title: "名称", align: "center", field: "NAME", width: 100 },
|
||||
{ title: "数量", align: "center", field: "SL", width: 100 },
|
||||
{ title: "条码", align: "center", field: "TM", width: 100 },
|
||||
{ title: "规格", align: "center", field: "GG", width: 100 },
|
||||
{ title: "单价", align: "center", field: "DJ", width: 100 },
|
||||
{ title: "金额", align: "center", field: "JE", width: 100 },
|
||||
{ title: "备注", align: "center", field: "DETAIL", width: 100 }
|
||||
]
|
||||
],
|
||||
footerFormatter: function (options: any, rows: any, data: any, currentPageGridRowsData: any) {
|
||||
if (data && data["totalCap"]) {
|
||||
return `<td style="padding:0 10px" colspan="100">${"应收金额大写: " + data["totalCap"]}</td>`;
|
||||
}
|
||||
return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>';
|
||||
}
|
||||
}
|
||||
])
|
||||
]);
|
||||
};
|
||||
return { addElementTypes };
|
||||
};
|
||||
|
||||
// type: 1供货商 2经销商
|
||||
export default [
|
||||
{
|
||||
key: "default",
|
||||
name: "默认设计",
|
||||
value: "defaultProviderModule",
|
||||
type: 1,
|
||||
f: null
|
||||
},
|
||||
{
|
||||
key: "custom",
|
||||
name: "自定义设计",
|
||||
value: "aProviderModule",
|
||||
type: 1,
|
||||
f: aProvider()
|
||||
}
|
||||
];
|
||||
@ -0,0 +1,8 @@
|
||||
.previewHiprintDesign {
|
||||
:global {
|
||||
.ant-drawer-body {
|
||||
padding: 0;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { Button, Drawer, Space } from "antd";
|
||||
import type { DrawerProps } from "antd/es/drawer";
|
||||
import { DownloadOutlined, PrinterOutlined } from "@ant-design/icons";
|
||||
import { useMobStore } from "@/hooks";
|
||||
import { toJS } from "mobx";
|
||||
import styles from "./index.less";
|
||||
|
||||
interface IProps extends DrawerProps {}
|
||||
|
||||
const Index: React.FC<IProps> = observer((props) => {
|
||||
const store = useMobStore("hiprintStore");
|
||||
|
||||
useEffect(() => {
|
||||
console.log("draw", toJS(store)?.hiprintTemplate?.getHtml());
|
||||
props.open && $("#preview_content_design").html(toJS(store)?.hiprintTemplate?.getHtml());
|
||||
return () => {};
|
||||
}, [props.open]);
|
||||
const print = () => {
|
||||
store?.hiprintTemplate.print(
|
||||
{},
|
||||
{},
|
||||
{
|
||||
callback: () => {
|
||||
console.log("callback");
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
const toPdf = () => {
|
||||
store?.hiprintTemplate.toPdf({}, "打印预览");
|
||||
};
|
||||
return (
|
||||
<Drawer
|
||||
{...props}
|
||||
width={toJS(store)?.hiprintTemplate?.editingPanel?.width + "mm"}
|
||||
title="打印预览"
|
||||
placement="right"
|
||||
className={styles.previewHiprintDesign}
|
||||
extra={
|
||||
<Space>
|
||||
<Button type="primary" icon={<PrinterOutlined />} onClick={print}>
|
||||
打印
|
||||
</Button>
|
||||
<Button type="ghost" icon={<DownloadOutlined />} onClick={toPdf}>
|
||||
pdf
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<div id="preview_content_design" />
|
||||
</Drawer>
|
||||
);
|
||||
});
|
||||
|
||||
export default Index;
|
||||
@ -0,0 +1,17 @@
|
||||
interface PaperObject {
|
||||
label: String;
|
||||
value: String;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
const paperTypes: PaperObject[] = [
|
||||
{ label: "A3", value: "A3", width: 420, height: 296.6 },
|
||||
{ label: "A4", value: "A4", width: 210, height: 296.6 },
|
||||
{ label: "A5", value: "A5", width: 210, height: 147.6 },
|
||||
{ label: "B3", value: "B3", width: 500, height: 352.6 },
|
||||
{ label: "B4", value: "B4", width: 250, height: 352.6 },
|
||||
{ label: "B5", value: "B5", width: 250, height: 175.6 }
|
||||
];
|
||||
|
||||
export { paperTypes, PaperObject };
|
||||
@ -0,0 +1,92 @@
|
||||
.hiprintOuterLayout {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: #f7f7f7;
|
||||
|
||||
.hiprintHeader {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
z-index: 901;
|
||||
height: 46px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
.hiprintHeader_rightside {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hiprintInnerLayout {
|
||||
position: relative;
|
||||
height: calc(100% - 46px);
|
||||
overflow: hidden;
|
||||
|
||||
.hiprintContent {
|
||||
padding: 10px 20px 10px 20px;
|
||||
background: #f6f6f6;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.hiprintSider {
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
.hiprint_design_ls {
|
||||
:global {
|
||||
.rect-printElement-types {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.ant-tabs-nav {
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.ant-radio-group {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hiprint_design_rs {
|
||||
:global {
|
||||
.ant-layout-sider-children {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ant-layout-sider-zero-width-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
z-index: 100;
|
||||
border: 1px solid #e5e5e5;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 14px;
|
||||
height: 36px;
|
||||
left: -14px;
|
||||
border-right: none;
|
||||
border-radius: 6px 0 0 6px;
|
||||
|
||||
span.anticon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,161 @@
|
||||
import React, { FunctionComponent, useEffect, useMemo, useState } from "react";
|
||||
import { Button, Input, InputNumber, Layout, Popover, Radio, Space, Tabs } from "antd";
|
||||
import { EyeOutlined, LeftOutlined, RedoOutlined, RightOutlined } from "@ant-design/icons";
|
||||
import Preview from "./components/preview";
|
||||
import provider from "./components/custom/provider";
|
||||
import { observer } from "mobx-react";
|
||||
import { toJS } from "mobx";
|
||||
import { useMobStore } from "@/hooks";
|
||||
import * as hiprintConfig from "./config";
|
||||
import classnames from "classnames";
|
||||
import styles from "./index.less";
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
|
||||
interface OwnProps {}
|
||||
|
||||
type Props = OwnProps;
|
||||
|
||||
const Design: FunctionComponent<Props> = observer((props) => {
|
||||
const store = useMobStore("hiprintStore");
|
||||
const [designType, setDesignType] = useState<string>("default");
|
||||
const [cusPaper, setCusPaper] = useState<boolean>(false);
|
||||
const [collapsed, setCollapsed] = useState<boolean>(false);
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
const [curPaper, setCurPaper] = useState<Partial<hiprintConfig.PaperObject>>({ value: "A4", width: 220, height: 80 });
|
||||
useEffect(() => {
|
||||
getPanel();
|
||||
init();
|
||||
return () => {};
|
||||
}, [designType]);
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* Description: 设计器初始化
|
||||
* Params:
|
||||
* Date: 2025/1/27
|
||||
*/
|
||||
const init = () => {
|
||||
const f = _.find(provider, (o) => o.key === designType)?.f;
|
||||
const providerVal = _.find(provider, (o) => o.key === designType)?.value;
|
||||
store?.hiprint.init({ providers: f ? [f] : [] });
|
||||
// @ts-ignore
|
||||
$(".hiprintEpContainer").empty();
|
||||
store?.hiprint.PrintElementTypeManager.build(".hiprintEpContainer", providerVal);
|
||||
// @ts-ignore
|
||||
$("#hiprint-printTemplate").empty();
|
||||
store.setHiprintTemplate(
|
||||
new store.hiprint.PrintTemplate({
|
||||
template: {},
|
||||
settingContainer: "#PrintElementOptionSetting",
|
||||
paginationContainer: ".hiprint-printPagination"
|
||||
})
|
||||
);
|
||||
store?.hiprintTemplate.design("#hiprint-printTemplate", { grid: true });
|
||||
console.log(toJS(store?.hiprintTemplate));
|
||||
};
|
||||
/**
|
||||
* @description: 加载 panel
|
||||
*/
|
||||
const getPanel = () => {
|
||||
// 加载所有 panel
|
||||
const panels = (require as any).context("./", true, /panel.*\.js$/);
|
||||
console.log(panels.keys());
|
||||
};
|
||||
/*
|
||||
* Author: 黎永顺
|
||||
* Description: 设置纸张大小
|
||||
* Params:[A3, A4, A5, B3, B4, B5, other] value {width,height} mm
|
||||
* Date: 2025/2/5
|
||||
*/
|
||||
const paperType = useMemo(() => {
|
||||
const paperWidth = _.find(hiprintConfig.paperTypes, (o) => o.value === curPaper?.value)?.width,
|
||||
paperHeight = _.find(hiprintConfig.paperTypes, (o) => o.value === curPaper?.value)?.height;
|
||||
if (!_.isEmpty(_.find(hiprintConfig.paperTypes, (o) => o.value === curPaper?.value))) {
|
||||
store?.hiprintTemplate?.setPaper(paperWidth, paperHeight);
|
||||
} else {
|
||||
store?.hiprintTemplate?.setPaper(curPaper.width, curPaper.height);
|
||||
}
|
||||
return curPaper?.value;
|
||||
}, [curPaper]);
|
||||
return (
|
||||
<Layout className={styles.hiprintOuterLayout}>
|
||||
<Header className={styles.hiprintHeader}>
|
||||
<div className={styles.hiprintHeader_rightside}>
|
||||
<Space>
|
||||
{designType === "default" && (
|
||||
<Button type="ghost" icon={<RedoOutlined />} onClick={() => store?.hiprintTemplate?.rotatePaper()}>
|
||||
旋转
|
||||
</Button>
|
||||
)}
|
||||
<Button type="primary" icon={<EyeOutlined />} onClick={() => setOpen(true)}>
|
||||
预览
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</Header>
|
||||
<Layout className={styles.hiprintInnerLayout}>
|
||||
<Sider className={classnames(styles.hiprintSider, styles.hiprint_design_ls, {})}>
|
||||
<Tabs
|
||||
activeKey={designType}
|
||||
size="small"
|
||||
onChange={setDesignType}
|
||||
items={[
|
||||
{ label: "默认设计", key: "default" },
|
||||
{ label: "自定义设计", key: "custom" }
|
||||
]}
|
||||
/>
|
||||
<Radio.Group size="small" value={paperType} onChange={(e) => setCurPaper({ ...curPaper, value: e.target.value })}>
|
||||
{_.map(hiprintConfig.paperTypes, (o) => (
|
||||
<Radio.Button value={o.value} key={o.value.toString()}>
|
||||
{o.label}
|
||||
</Radio.Button>
|
||||
))}
|
||||
<Popover
|
||||
open={cusPaper}
|
||||
onOpenChange={setCusPaper}
|
||||
trigger="click"
|
||||
title="设置纸张宽高(mm)"
|
||||
content={
|
||||
<>
|
||||
<Input.Group compact style={{ marginBottom: 10 }}>
|
||||
<InputNumber placeholder="宽(mm)" value={curPaper.width} onChange={(val) => setCurPaper({ ...curPaper, width: val as number })} />
|
||||
<Input
|
||||
placeholder="~"
|
||||
disabled
|
||||
style={{
|
||||
width: 30,
|
||||
pointerEvents: "none"
|
||||
}}
|
||||
/>
|
||||
<InputNumber placeholder="高(mm)" value={curPaper.height} onChange={(val) => setCurPaper({ ...curPaper, height: val as number })} />
|
||||
</Input.Group>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<Radio.Button value="other" key="other">
|
||||
自定义纸张
|
||||
</Radio.Button>
|
||||
</Popover>
|
||||
</Radio.Group>
|
||||
<div className="rect-printElement-types hiprintEpContainer" />
|
||||
</Sider>
|
||||
<Content className={styles.hiprintContent}>
|
||||
<div id="hiprint-printTemplate" className="hiprint-printTemplate" />
|
||||
<Preview open={open} onClose={() => setOpen(false)} />
|
||||
</Content>
|
||||
<Sider
|
||||
className={classnames(styles.hiprintSider, styles.hiprint_design_rs, {})}
|
||||
width={249}
|
||||
collapsible
|
||||
collapsedWidth={0}
|
||||
onCollapse={setCollapsed}
|
||||
trigger={!collapsed ? <RightOutlined /> : <LeftOutlined />}
|
||||
>
|
||||
<div id="PrintElementOptionSetting" />
|
||||
</Sider>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
});
|
||||
|
||||
export default Design;
|
||||
@ -0,0 +1,14 @@
|
||||
import { action, makeObservable, observable } from "mobx";
|
||||
import * as reactPluginHiprint from "@/utils/hiprint";
|
||||
|
||||
export class HiprintStore {
|
||||
constructor() {
|
||||
makeObservable(this);
|
||||
}
|
||||
|
||||
@observable hiprint: any = reactPluginHiprint.hiprint;
|
||||
@observable hiprintTemplate: any = null;
|
||||
@action setHiprintTemplate = (hiprintTemplate: any) => (this.hiprintTemplate = hiprintTemplate);
|
||||
}
|
||||
|
||||
export const hiprintStore = new HiprintStore();
|
||||
@ -1,11 +1,13 @@
|
||||
import { appStore } from "./AppStore";
|
||||
import { calculateStore } from "./CalculateStore";
|
||||
import { baseLayoutStore } from "@/layouts/BaseLayout/Store";
|
||||
import { hiprintStore } from "@/store/HiprintStore";
|
||||
|
||||
export { baseLayoutStore, appStore, calculateStore };
|
||||
export { baseLayoutStore, appStore, calculateStore, hiprintStore };
|
||||
|
||||
export default {
|
||||
baseLayoutStore,
|
||||
calculateStore,
|
||||
appStore
|
||||
appStore,
|
||||
hiprintStore
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue