@lvce-editor/virtual-dom 3.6.0 → 4.1.0

package/dist/index.d.ts

@@ -1,16 +1,16 @@
 // Generated by dts-bundle-generator v9.5.1
 
 export interface VirtualDomNode {
-	readonly type: number;
 	readonly [key: string]: any;
+	readonly type: number;
 }
 export interface AddPatch {
-	readonly type: 6;
 	readonly nodes: readonly VirtualDomNode[];
+	readonly type: 6;
 }
 export interface AttributePatch {
-	readonly type: 3;
 	readonly key: string;
+	readonly type: 3;
 	readonly value: any;
 }
 export type NavigateChildPatch = {
@@ -25,21 +25,21 @@ export type NavigateSiblingPatch = {
 	readonly index: number;
 };
 export interface RemoveAttributePatch {
-	readonly type: 4;
 	readonly key: string;
+	readonly type: 4;
 }
 export interface RemoveChildPatch {
-	readonly type: 9;
 	readonly index: number;
+	readonly type: 9;
 }
 export interface RemovePatch {
-	readonly type: 5;
 	readonly index: number;
+	readonly type: 5;
 }
 export interface ReplacePatch {
-	readonly type: 2;
 	readonly index: number;
 	readonly node: VirtualDomNode;
+	readonly type: 2;
 }
 export interface TextPatch {
 	readonly type: 1;
@@ -50,8 +50,18 @@ export declare const applyPatch: ($Element: Node, patches: readonly Patch[]) =>
 export declare const setComponentUid: ($Element: any, uid: any) => void;
 export declare const getComponentUid: ($Element: any) => number;
 export declare const getComponentUidFromEvent: (event: any) => number;
-export declare const setDragInfo: (id: string | number, data: any) => void;
-export declare const getDragInfo: (id: string | number) => any;
+export interface DragInfoItem {
+	readonly data: string;
+	readonly type: string;
+}
+export interface IDragInfoNew {
+	readonly items: readonly DragInfoItem[];
+	readonly label?: string;
+}
+export type IDragInfoOld = readonly DragInfoItem[];
+export type IDragInfo = IDragInfoNew | IDragInfoOld;
+export declare const setDragInfo: (id: string | number, data: IDragInfo) => void;
+export declare const getDragInfo: (id: string | number) => IDragInfo;
 export declare const removeDragInfo: (id: string | number) => void;
 export declare const getFileHandles: (ids: readonly number[]) => Promise<readonly FileSystemHandle[]>;
 export declare const addFileHandle: (fileHandle: FileSystemHandle) => number;

package/dist/index.js

@@ -174,8 +174,44 @@ const VirtualDomElements = {
 
 const getElementTag$1 = type => {
   switch (type) {
+    case A:
+      return A$1;
+    case Article:
+      return Article$1;
+    case Aside:
+      return Aside$1;
     case Audio:
       return Audio$1;
+    case Br:
+      return Br$1;
+    case Button:
+      return Button$1;
+    case Cite:
+      return Cite$1;
+    case Code:
+      return Code$1;
+    case Col:
+      return Col$1;
+    case ColGroup:
+      return ColGroup$1;
+    case Data:
+      return Data$1;
+    case Dd:
+      return Dd$1;
+    case Del:
+      return Del$1;
+    case Div:
+      return Div$1;
+    case Dl:
+      return Dl$1;
+    case Dt:
+      return Dt$1;
+    case Figcaption:
+      return Figcaption$1;
+    case Figure:
+      return Figure$1;
+    case Footer:
+      return Footer$1;
     case H1:
       return H1$1;
     case H2:
@@ -188,100 +224,64 @@ const getElementTag$1 = type => {
       return H5$1;
     case H6:
       return H6$1;
-    case Div:
-      return Div$1;
-    case Kbd:
-      return Kbd$1;
-    case Table:
-      return Table$1;
-    case TBody:
-      return TBody$1;
-    case Th:
-      return Th$1;
-    case Td:
-      return Td$1;
-    case THead:
-      return THead$1;
-    case Tr:
-      return Tr$1;
-    case Input:
-      return Input$1;
-    case ColGroup:
-      return ColGroup$1;
-    case Col:
-      return Col$1;
-    case Button:
-      return Button$1;
-    case Span:
-      return Span$1;
+    case Header:
+      return Header$1;
+    case Hr:
+      return Hr$1;
     case I:
       return I$1;
     case Img:
       return Img$1;
+    case Input:
+      return Input$1;
     case Ins:
       return Ins$1;
-    case Del:
-      return Del$1;
-    case Article:
-      return Article$1;
-    case Aside:
-      return Aside$1;
-    case Footer:
-      return Footer$1;
-    case Header:
-      return Header$1;
-    case Nav:
-      return Nav$1;
-    case Section:
-      return Section$1;
-    case Search:
-      return Search$1;
-    case Dd:
-      return Dd$1;
-    case Dl:
-      return Dl$1;
-    case Figcaption:
-      return Figcaption$1;
-    case Figure:
-      return Figure$1;
-    case Hr:
-      return Hr$1;
+    case Kbd:
+      return Kbd$1;
+    case Label:
+      return Label$1;
     case Li:
       return Li$1;
+    case Nav:
+      return Nav$1;
     case Ol:
       return Ol$1;
+    case Option:
+      return Option$1;
     case P:
       return P$1;
     case Pre:
       return Pre$1;
-    case A:
-      return A$1;
-    case Br:
-      return Br$1;
-    case Cite:
-      return Cite$1;
-    case Data:
-      return Data$1;
-    case Time:
-      return Time$1;
+    case Search:
+      return Search$1;
+    case Section:
+      return Section$1;
+    case Select:
+      return Select$1;
+    case Span:
+      return Span$1;
+    case Table:
+      return Table$1;
+    case TBody:
+      return TBody$1;
+    case Td:
+      return Td$1;
+    case TextArea:
+      return TextArea$1;
     case Tfoot:
       return Tfoot$1;
+    case Th:
+      return Th$1;
+    case THead:
+      return THead$1;
+    case Time:
+      return Time$1;
+    case Tr:
+      return Tr$1;
     case Ul:
       return Ul$1;
     case Video:
       return Video$1;
-    case TextArea:
-      return TextArea$1;
-    case Select:
-      return Select$1;
-    case Option:
-      return Option$1;
-    case Code:
-      return Code$1;
-    case Label:
-      return Label$1;
-    case Dt:
-      return Dt$1;
     default:
       throw new Error(`element tag not found ${type}`);
   }
@@ -336,8 +336,8 @@ const getComponentUid = $Element => {
 };
 const getComponentUidFromEvent = event => {
   const {
-    target,
-    currentTarget
+    currentTarget,
+    target
   } = event;
   return getComponentUid(currentTarget || target);
 };
@@ -419,34 +419,18 @@ const attachEvent = ($Node, eventMap, key, value, newEventMap) => {
 
 const setProp = ($Element, key, value, eventMap, newEventMap) => {
   switch (key) {
-    case 'maskImage':
-      $Element.style.maskImage = `url('${value}')`;
-      $Element.style.webkitMaskImage = `url('${value}')`;
-      break;
-    case 'paddingLeft':
-    case 'paddingRight':
-    case 'top':
-    case 'left':
-    case 'marginTop':
-      $Element.style[key] = typeof value === 'number' ? `${value}px` : value;
-      break;
-    case 'translate':
-      $Element.style[key] = value;
-      break;
-    case 'width':
-    case 'height':
-      if ($Element instanceof HTMLImageElement) {
-        $Element[key] = value;
-      } else if (typeof value === 'number') {
-        $Element.style[key] = `${value}px`;
+    case 'ariaActivedescendant':
+      if (value) {
+        $Element.setAttribute('aria-activedescendant', value);
       } else {
-        $Element.style[key] = value;
+        $Element.removeAttribute('aria-activedescendant');
       }
       break;
-    case 'style':
-      throw new Error('style property is not supported');
-    case 'childCount':
-    case 'type':
+    case 'ariaControls':
+      $Element.setAttribute('aria-controls', value);
+      break;
+    case 'ariaLabelledBy':
+      $Element.setAttribute('aria-labelledby', value);
       break;
     case 'ariaOwns':
       // TODO remove this once idl is supported
@@ -456,22 +440,37 @@ const setProp = ($Element, key, value, eventMap, newEventMap) => {
         $Element.removeAttribute('aria-owns');
       }
       break;
-    case 'ariaActivedescendant':
-      if (value) {
-        $Element.setAttribute('aria-activedescendant', value);
+    case 'height':
+    case 'width':
+      if ($Element instanceof HTMLImageElement) {
+        $Element[key] = value;
+      } else if (typeof value === 'number') {
+        $Element.style[key] = `${value}px`;
       } else {
-        $Element.removeAttribute('aria-activedescendant');
+        $Element.style[key] = value;
       }
       break;
-    case 'ariaControls':
-      $Element.setAttribute('aria-controls', value);
+    case 'id':
+      if (value) {
+        $Element[key] = value;
+      } else {
+        $Element.removeAttribute(key);
+      }
       break;
     case 'inputType':
       // @ts-ignore
       $Element.type = value;
       break;
-    case 'ariaLabelledBy':
-      $Element.setAttribute('aria-labelledby', value);
+    case 'left':
+    case 'marginTop':
+    case 'paddingLeft':
+    case 'paddingRight':
+    case 'top':
+      $Element.style[key] = typeof value === 'number' ? `${value}px` : value;
+      break;
+    case 'maskImage':
+      $Element.style.maskImage = `url('${value}')`;
+      $Element.style.webkitMaskImage = `url('${value}')`;
       break;
     case 'onBlur':
     case 'onChange':
@@ -505,12 +504,13 @@ const setProp = ($Element, key, value, eventMap, newEventMap) => {
       }
       attachEvent($Element, eventMap, eventName, value, newEventMap);
       break;
-    case 'id':
-      if (value) {
-        $Element[key] = value;
-      } else {
-        $Element.removeAttribute(key);
-      }
+    case 'style':
+      throw new Error('style property is not supported');
+    case 'childCount':
+    case 'type':
+      break;
+    case 'translate':
+      $Element.style[key] = value;
       break;
     default:
       if (key.startsWith('data-')) {
@@ -594,30 +594,30 @@ const applyPatch = ($Element, patches) => {
   let $Current = $Element;
   for (const patch of patches) {
     switch (patch.type) {
-      case SetAttribute:
-        setAttribute($Current, patch.key, patch.value);
-        break;
-      case RemoveAttribute:
-        removeAttribute($Current, patch.key);
-        break;
-      case SetText:
-        setText($Current, patch.value);
-        break;
-      case RemoveChild:
-        removeChild($Current, patch.index);
-        break;
       case Add:
         add$1($Current, patch.nodes);
         break;
-      case NavigateSibling:
-        $Current = $Current.parentNode.childNodes[patch.index];
-        break;
       case NavigateChild:
         $Current = $Current.childNodes[patch.index];
         break;
       case NavigateParent:
         $Current = $Current.parentNode;
         break;
+      case NavigateSibling:
+        $Current = $Current.parentNode.childNodes[patch.index];
+        break;
+      case RemoveAttribute:
+        removeAttribute($Current, patch.key);
+        break;
+      case RemoveChild:
+        removeChild($Current, patch.index);
+        break;
+      case SetAttribute:
+        setAttribute($Current, patch.key, patch.value);
+        break;
+      case SetText:
+        setText($Current, patch.value);
+        break;
     }
   }
 };
@@ -632,6 +632,9 @@ const getDragInfo = id => {
 const removeDragInfo = id => {
   delete dragInfos[id];
 };
+const isDragInfoOld = data => {
+  return Array.isArray(data);
+};
 
 let id = 0;
 const create = () => {
@@ -673,8 +676,8 @@ const setDragImage = (dataTransfer, label) => {
 
 const applyDragInfoMaybe = event => {
   const {
-    target,
-    dataTransfer
+    dataTransfer,
+    target
   } = event;
   if (dataTransfer) {
     const uid = getComponentUid(target);
@@ -682,17 +685,23 @@ const applyDragInfoMaybe = event => {
     if (!dragInfo) {
       return;
     }
-    for (const item of dragInfo) {
-      dataTransfer.setData(item.type, item.data);
-    }
-    if (dragInfo.label) {
-      setDragImage(dataTransfer, dragInfo.label);
+    if (isDragInfoOld(dragInfo)) {
+      for (const item of dragInfo) {
+        dataTransfer.setData(item.type, item.data);
+      }
+    } else {
+      for (const item of dragInfo.items) {
+        dataTransfer.items.add(item.data, item.data);
+      }
+      if (dragInfo.label) {
+        setDragImage(dataTransfer, dragInfo.label);
+      }
     }
   }
 };
 
 const PointerMove = 'pointermove';
-const PointerUp = 'pointerup';
+const lostpointercapture = 'lostpointercapture';
 
 let ignore = false;
 const startIgnore = () => {
@@ -713,66 +722,66 @@ const handleDataTransferFiles = event => {
 };
 const getEventListenerArg = (param, event) => {
   switch (param) {
-    case 'event.dataTransfer.files2':
-      return handleDataTransferFiles(event);
+    case 'event.altKey':
+      return event.altKey;
+    case 'event.button':
+      return event.button;
     case 'event.clientX':
       return event.clientX;
-    case 'event.x':
-      return event.x;
     case 'event.clientY':
       return event.clientY;
-    case 'event.y':
-      return event.y;
-    case 'event.button':
-      return event.button;
-    case 'event.target.value':
-      return event.target.value;
-    case 'event.isTrusted':
-      return event.isTrusted;
-    case 'event.dataTransfer.files':
-      return event.dataTransfer.files;
-    case 'event.target.className':
-      return event.target.className;
+    case 'event.ctrlKey':
+      return event.ctrlKey;
     case 'event.data':
       return event.data;
+    case 'event.dataTransfer.files':
+      return event.dataTransfer.files;
+    case 'event.dataTransfer.files2':
+      return handleDataTransferFiles(event);
+    case 'event.defaultPrevented':
+      return event.defaultPrevented;
     case 'event.deltaMode':
       return event.deltaMode;
     case 'event.deltaX':
       return event.deltaX;
     case 'event.deltaY':
       return event.deltaY;
-    case 'event.target.scrollTop':
-      return event.target.scrollTop;
     case 'event.detail':
       return event.detail;
-    case 'event.target.name':
-      return event.target.name || '';
-    case 'event.target.href':
-      return event.target.href;
-    case 'event.target.src':
-      return event.target.src;
-    case 'event.altKey':
-      return event.altKey;
+    case 'event.inputType':
+      return event.inputType;
+    case 'event.isTrusted':
+      return event.isTrusted;
     case 'event.key':
       return event.key;
-    case 'event.ctrlKey':
-      return event.ctrlKey;
     case 'event.shiftKey':
       return event.shiftKey;
-    case 'event.inputType':
-      return event.inputType;
-    case 'event.defaultPrevented':
-      return event.defaultPrevented;
-    case 'event.target.dataset.name':
-      return event.target.dataset.name;
+    case 'event.target.className':
+      return event.target.className;
     case 'event.target.dataset.index':
       return event.target.dataset.index;
+    case 'event.target.dataset.name':
+      return event.target.dataset.name;
+    case 'event.target.href':
+      return event.target.href;
+    case 'event.target.name':
+      return event.target.name || '';
     case 'event.target.nodeName':
       return event.target.nodeName;
-    case 'event.target.selectionStart':
-      return event.target.selectionStart;
+    case 'event.target.scrollTop':
+      return event.target.scrollTop;
     case 'event.target.selectionEnd':
       return event.target.selectionEnd;
+    case 'event.target.selectionStart':
+      return event.target.selectionStart;
+    case 'event.target.src':
+      return event.target.src;
+    case 'event.target.value':
+      return event.target.value;
+    case 'event.x':
+      return event.x;
+    case 'event.y':
+      return event.y;
     default:
       return param;
   }
@@ -811,14 +820,13 @@ const applyPointerTrackMaybe = (info, map, event) => {
     return;
   }
   const {
-    target,
-    pointerId
+    pointerId,
+    target
   } = event;
   target.setPointerCapture(pointerId);
   const [pointerMoveKey, pointerUpKey] = trackPointerEvents;
   target.addEventListener(PointerMove, map[pointerMoveKey]);
-  // TODO use pointerlost event instead
-  target.addEventListener(PointerUp, map[pointerUpKey]);
+  target.addEventListener(lostpointercapture, map[pointerUpKey]);
 };
 const createFn = (info, map) => {
   const fn = event => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/virtual-dom",
-  "version": "3.6.0",
+  "version": "4.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lvce-editor/virtual-dom.git"