@hailin-zheng/editor-core 2.1.22 → 2.1.25

package/controls/ViewPaint.d.ts

@@ -1,10 +1,8 @@
 import { TextProps } from "../med_editor/framework/element-props";
 import { Position, Rect } from "../med_editor/framework/element-define";
 import { ISetCanvasPageProps, TextUnits } from "../med_editor/framework/render-context";
-import { OnceSubject } from "../med_editor/framework/event-subject";
 export declare class ViewPaint {
     ctx: CanvasRenderingContext2D;
-    onRenderCompleted: OnceSubject<ViewPaint>;
     pageSetting: ISetCanvasPageProps;
     pageRect: Rect;
     constructor(ctx: CanvasRenderingContext2D);

package/editor.css

@@ -0,0 +1,543 @@
+.svg-container {
+    background: #f2f4f7;
+    overflow: hidden;
+    flex: 1;
+    height: 100%;
+    position: relative;
+}
+
+.svg-container * {
+    white-space: pre;
+}
+
+.drop-container {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.data-list > div {
+    margin: 15px 10px;
+}
+
+@keyframes hover-color {
+    from {
+        border-color: #c0c0c0;
+    }
+    to {
+        border-color: #3e97eb;
+    }
+}
+
+.magic-radio,
+.magic-checkbox {
+    position: absolute;
+    display: none;
+}
+
+.magic-radio[disabled],
+.magic-checkbox[disabled] {
+    cursor: not-allowed;
+}
+
+.magic-radio + label,
+.magic-checkbox + label {
+    position: relative;
+    display: block;
+    padding-left: 30px;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+.magic-radio + label:hover:before,
+.magic-checkbox + label:hover:before {
+    animation-duration: 0.4s;
+    animation-fill-mode: both;
+    animation-name: hover-color;
+}
+
+.magic-radio + label:before,
+.magic-checkbox + label:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    content: "";
+    border: 1px solid #c0c0c0;
+}
+
+.magic-radio + label:after,
+.magic-checkbox + label:after {
+    position: absolute;
+    display: none;
+    content: "";
+}
+
+.magic-radio[disabled] + label,
+.magic-checkbox[disabled] + label {
+    cursor: not-allowed;
+    color: #e4e4e4;
+}
+
+.magic-radio[disabled] + label:hover,
+.magic-radio[disabled] + label:before,
+.magic-radio[disabled] + label:after,
+.magic-checkbox[disabled] + label:hover,
+.magic-checkbox[disabled] + label:before,
+.magic-checkbox[disabled] + label:after {
+    cursor: not-allowed;
+}
+
+.magic-radio[disabled] + label:hover:before,
+.magic-checkbox[disabled] + label:hover:before {
+    border: 1px solid #e4e4e4;
+    animation-name: none;
+}
+
+.magic-radio[disabled] + label:before,
+.magic-checkbox[disabled] + label:before {
+    border-color: #e4e4e4;
+}
+
+.magic-radio:checked + label:before,
+.magic-checkbox:checked + label:before {
+    animation-name: none;
+}
+
+.magic-radio:checked + label:after,
+.magic-checkbox:checked + label:after {
+    display: block;
+}
+
+.magic-radio + label:before {
+    border-radius: 50%;
+}
+
+.magic-radio + label:after {
+    top: 7px;
+    left: 7px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #3e97eb;
+}
+
+.magic-radio:checked + label:before {
+    border: 1px solid #3e97eb;
+}
+
+.magic-radio:checked[disabled] + label:before {
+    border: 1px solid #c9e2f9;
+}
+
+.magic-radio:checked[disabled] + label:after {
+    background: #c9e2f9;
+}
+
+.magic-checkbox + label:before {
+    border-radius: 3px;
+}
+
+.magic-checkbox + label:after {
+    top: 2px;
+    left: 7px;
+    box-sizing: border-box;
+    width: 6px;
+    height: 12px;
+    transform: rotate(45deg);
+    border-width: 2px;
+    border-style: solid;
+    border-color: #fff;
+    border-top: 0;
+    border-left: 0;
+}
+
+.magic-checkbox:checked + label:before {
+    border: #3e97eb;
+    background: #3e97eb;
+}
+
+.magic-checkbox:checked[disabled] + label:before {
+    border: #c9e2f9;
+    background: #c9e2f9;
+}
+
+.tip-container {
+    position: absolute;
+    cursor: default;
+}
+
+.tg-container {
+    border: 1px solid #ccc;
+    margin: 10px 0;
+    padding: 10px;
+    position: absolute;
+    width: 200px;
+    background: #fff;
+    box-shadow: rgba(158, 161, 165, 0.4) 0px 2px 12px 0px;
+}
+
+.tg-container--selected {
+    box-shadow: 0 2px 16px 0 rgb(0 0 0 / 20%);;
+}
+
+.tg-container > .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.tg-container > .content {
+    margin-top: 10px;
+    white-space: normal;
+    word-break: break-all;
+}
+
+.tg-container > .header > .header-user {
+    color: #3e97eb;
+}
+
+.tg-container > .header > .header-date {
+    color: #c0c0c0;
+    padding-right: 10px;
+}
+.tg-container > .bg{
+    position: absolute;
+    left: 0;
+    top:0;
+    width: 4px;
+    height: 100%;
+}
+
+.editor-calendar {
+    width: 212px;
+    height: 272px;
+    border: 1px solid #ccc;
+    background: #fff;
+    cursor: default;
+    user-select: none;
+}
+
+.editor-calendar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 30px;
+}
+
+.editor-calendar-header-left {
+    display: flex;
+    align-items: center;
+}
+
+.editor-calendar-header-left-year {
+    padding: 0 5px;
+}
+
+.editor-calendar-header-left-year:hover {
+    background: #ccc;
+}
+
+.editor-calendar-item:hover {
+    background: #ccc;
+}
+
+.editor-calendar-header-left-month {
+    padding: 0 5px;
+}
+
+.editor-calendar-header-left-month:hover {
+    background: #ccc;
+}
+
+.editor-calendar-header-right {
+    display: flex;
+    align-items: center;
+}
+
+.editor-calendar-header-right-prev {
+    padding: 0 5px;
+}
+
+.editor-calendar-header-right-prev:hover {
+    background-color: #ccc;
+}
+
+.editor-calendar-header-right-next {
+    padding: 0 5px;
+}
+
+.editor-calendar-header-right-next:hover {
+    background-color: #ccc;
+}
+
+.editor-calendar-body {
+    display: flex;
+    flex-direction: column;
+}
+
+.editor-calendar-body-week {
+    display: flex;
+}
+
+.editor-calendar-body-week-item {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+}
+
+.editor-calendar-body-day {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.editor-calendar-body-day-item {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    opacity: 0.6;
+}
+
+.editor-calendar-body-day-item--current-month {
+    opacity: 1;
+}
+
+.editor-calendar-body-day-item--today {
+    background: #2b88d8;
+    color: #fff;
+}
+
+.editor-calendar-body-day-item--selected {
+    outline: #2b88d8 1px solid;
+    font-weight: bold;
+}
+
+.editor-calendar-body-day-item:hover {
+    background-color: #ccc;
+}
+.editor-calendar-footer{
+    display: flex;
+    justify-content: space-between;
+}
+
+.editor-calendar-footer-right {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 30px;
+    font-size: 12px;
+}
+
+.editor-calendar-footer-right-btn {
+    padding: 2px 3px;
+    cursor: default;
+    user-select: none;
+}
+
+.editor-calendar-footer-right-btn:hover {
+    outline: 1px solid rgb(118, 142, 222);
+}
+
+.editor-calendar-footer-right-btn:active {
+    outline: 1px solid rgb(95, 19, 216);
+}
+.invert{
+    filter: invert(100%);
+}
+
+.editor-calendar-month {
+    width: 210px;
+    height: 180px;
+    border: 1px solid #ccc;
+    background: #fff;
+    cursor: default;
+}
+
+.editor-calendar-month-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 30px;
+}
+
+.editor-calendar-month-header-left {
+    display: flex;
+    align-items: center;
+}
+
+.editor-calendar-month-header-left-year {
+    padding-left: 10px;
+}
+
+.editor-calendar-month-header-right {
+    display: flex;
+    align-items: center;
+}
+
+.editor-calendar-month-header-right-prev {
+    padding: 0 5px;
+}
+
+.editor-calendar-month-header-right-next {
+    padding: 0 5px;
+}
+
+.editor-calendar-month-body {
+    display: flex;
+    flex-direction: column;
+}
+
+.editor-calendar-month-body-month {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.editor-calendar-month-body-month-item {
+    width: 52px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+}
+
+.editor-calendar-month-body-month-item--current {
+    outline: #2b88d8 1px solid;
+    font-weight: bold;
+}
+
+.editor-calendar-year {
+    width: 210px;
+    height: 210px;
+    border: 1px solid #ccc;
+    background: #fff;
+    cursor: default;
+}
+
+.editor-calendar-year-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 30px;
+}
+
+.editor-calendar-year-header-left {
+    display: flex;
+    align-items: center;
+}
+
+.editor-calendar-year-header-left-year {
+    padding: 0 5px;
+}
+
+.editor-calendar-year-header-right {
+    display: flex;
+    align-items: center;
+}
+
+.editor-calendar-year-header-right-prev {
+    padding: 0 5px;
+}
+
+.editor-calendar-year-header-right-next {
+    padding: 0 5px;
+}
+
+.editor-calendar-year-body {
+    display: flex;
+    flex-direction: column;
+}
+
+.editor-calendar-year-body-year {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.editor-calendar-year-body-year-item {
+    width: 52px;
+    height: 36px;
+    line-height: 36px;
+    text-align: center;
+}
+
+.editor-contextmenu{
+    z-index: 1000;
+    position: absolute;
+    background: white;
+    box-shadow: rgba(158, 161, 165, 0.4) 0px 2px 12px 0px;
+}
+.editor-overlays-menus {
+    font-size: 14px;
+    font-family: "微软雅黑", serif;
+    margin: 0;
+    cursor: pointer;
+    padding: 0;
+    list-style: none;
+    user-select: none;
+}
+.editor-overlays-menus {
+    padding: 3px;
+}
+.editor-overlays-menus > li {
+    padding: 6px 8px;
+    display: flex;
+    align-items: center;
+    word-break: keep-all;
+    border-bottom: 1px solid #ccc; /* 在每个列表项的底部添加一条边框线 */
+}
+
+.editor-overlays-menus > li:hover {
+    background-color: #ccc;
+}
+
+.editor-overlays-menus > li:last-child {
+    border-bottom: none; /* 去掉最后一个列表项的底部边框线 */
+}
+
+/*.scale-container > *{*/
+/*    transform-origin: center top;*/
+/*}*/
+.doc-rule{
+    position: absolute;
+    font-size: 0;
+    background: white;
+    box-shadow: rgba(158, 161, 165, 0.4) 0px 2px 12px 0px;
+    cursor: default;
+    left: 0;
+    top: 0;
+}
+.editor-calendar-footer-left{
+    display: flex;
+}
+.editor-calendar-footer-left-time{
+    outline: none;
+    width: 110px;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    font-size: 14px;
+}
+.editor-input-cursor{
+    position: absolute;
+    width: 2px;
+    padding: 0;
+    border: none;
+    outline: none;
+    background: black;
+    pointer-events: none;
+    opacity: 0;
+    animation: editor-cursor-blink 1s infinite steps(1, start);
+}
+@keyframes editor-cursor-blink {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}

package/index-cjs.d.ts

@@ -8,8 +8,7 @@ export * from './med_editor/framework/document-context';
 export * from './med_editor/framework/document-eval-func';
 export * from './med_editor/framework/document-event';
 export * from './med_editor/framework/document-input-cursor';
-export * from './med_editor/framework/document-paint';
-export * from './med_editor/framework/document-print';
+export * from './med_editor/framework/document-paginator';
 export * from './med_editor/framework/document-print-offscreen';
 export * from './med_editor/framework/document-segmenter';
 export * from './med_editor/framework/document-selection';
@@ -17,7 +16,6 @@ export * from './med_editor/framework/document-template';
 export * from './med_editor/framework/document-textline-mode';
 export * from './med_editor/framework/element-define';
 export * from './med_editor/framework/element-event-define';
-export * from './med_editor/framework/element-paint';
 export * from './med_editor/framework/element-props';
 export * from './med_editor/framework/element-reader';
 export * from './med_editor/framework/element-serialize';