butcherman /
Tech_Bench
| @@ 7011-7170 (lines=160) @@ | ||
| 7008 | }); |
|
| 7009 | ||
| 7010 | var FlexLayout = AbsoluteLayout.extend({ |
|
| 7011 | recalc: function (container) { |
|
| 7012 | var i, l, items, contLayoutRect, contPaddingBox, contSettings, align, pack, spacing, totalFlex, availableSpace, direction; |
|
| 7013 | var ctrl, ctrlLayoutRect, ctrlSettings, flex; |
|
| 7014 | var maxSizeItems = []; |
|
| 7015 | var size, maxSize, ratio, rect, pos, maxAlignEndPos; |
|
| 7016 | var sizeName, minSizeName, posName, maxSizeName, beforeName, innerSizeName, deltaSizeName, contentSizeName; |
|
| 7017 | var alignAxisName, alignInnerSizeName, alignSizeName, alignMinSizeName, alignBeforeName, alignAfterName; |
|
| 7018 | var alignDeltaSizeName, alignContentSizeName; |
|
| 7019 | var max = Math.max, min = Math.min; |
|
| 7020 | items = container.items().filter(':visible'); |
|
| 7021 | contLayoutRect = container.layoutRect(); |
|
| 7022 | contPaddingBox = container.paddingBox; |
|
| 7023 | contSettings = container.settings; |
|
| 7024 | direction = container.isRtl() ? contSettings.direction || 'row-reversed' : contSettings.direction; |
|
| 7025 | align = contSettings.align; |
|
| 7026 | pack = container.isRtl() ? contSettings.pack || 'end' : contSettings.pack; |
|
| 7027 | spacing = contSettings.spacing || 0; |
|
| 7028 | if (direction === 'row-reversed' || direction === 'column-reverse') { |
|
| 7029 | items = items.set(items.toArray().reverse()); |
|
| 7030 | direction = direction.split('-')[0]; |
|
| 7031 | } |
|
| 7032 | if (direction === 'column') { |
|
| 7033 | posName = 'y'; |
|
| 7034 | sizeName = 'h'; |
|
| 7035 | minSizeName = 'minH'; |
|
| 7036 | maxSizeName = 'maxH'; |
|
| 7037 | innerSizeName = 'innerH'; |
|
| 7038 | beforeName = 'top'; |
|
| 7039 | deltaSizeName = 'deltaH'; |
|
| 7040 | contentSizeName = 'contentH'; |
|
| 7041 | alignBeforeName = 'left'; |
|
| 7042 | alignSizeName = 'w'; |
|
| 7043 | alignAxisName = 'x'; |
|
| 7044 | alignInnerSizeName = 'innerW'; |
|
| 7045 | alignMinSizeName = 'minW'; |
|
| 7046 | alignAfterName = 'right'; |
|
| 7047 | alignDeltaSizeName = 'deltaW'; |
|
| 7048 | alignContentSizeName = 'contentW'; |
|
| 7049 | } else { |
|
| 7050 | posName = 'x'; |
|
| 7051 | sizeName = 'w'; |
|
| 7052 | minSizeName = 'minW'; |
|
| 7053 | maxSizeName = 'maxW'; |
|
| 7054 | innerSizeName = 'innerW'; |
|
| 7055 | beforeName = 'left'; |
|
| 7056 | deltaSizeName = 'deltaW'; |
|
| 7057 | contentSizeName = 'contentW'; |
|
| 7058 | alignBeforeName = 'top'; |
|
| 7059 | alignSizeName = 'h'; |
|
| 7060 | alignAxisName = 'y'; |
|
| 7061 | alignInnerSizeName = 'innerH'; |
|
| 7062 | alignMinSizeName = 'minH'; |
|
| 7063 | alignAfterName = 'bottom'; |
|
| 7064 | alignDeltaSizeName = 'deltaH'; |
|
| 7065 | alignContentSizeName = 'contentH'; |
|
| 7066 | } |
|
| 7067 | availableSpace = contLayoutRect[innerSizeName] - contPaddingBox[beforeName] - contPaddingBox[beforeName]; |
|
| 7068 | maxAlignEndPos = totalFlex = 0; |
|
| 7069 | for (i = 0, l = items.length; i < l; i++) { |
|
| 7070 | ctrl = items[i]; |
|
| 7071 | ctrlLayoutRect = ctrl.layoutRect(); |
|
| 7072 | ctrlSettings = ctrl.settings; |
|
| 7073 | flex = ctrlSettings.flex; |
|
| 7074 | availableSpace -= i < l - 1 ? spacing : 0; |
|
| 7075 | if (flex > 0) { |
|
| 7076 | totalFlex += flex; |
|
| 7077 | if (ctrlLayoutRect[maxSizeName]) { |
|
| 7078 | maxSizeItems.push(ctrl); |
|
| 7079 | } |
|
| 7080 | ctrlLayoutRect.flex = flex; |
|
| 7081 | } |
|
| 7082 | availableSpace -= ctrlLayoutRect[minSizeName]; |
|
| 7083 | size = contPaddingBox[alignBeforeName] + ctrlLayoutRect[alignMinSizeName] + contPaddingBox[alignAfterName]; |
|
| 7084 | if (size > maxAlignEndPos) { |
|
| 7085 | maxAlignEndPos = size; |
|
| 7086 | } |
|
| 7087 | } |
|
| 7088 | rect = {}; |
|
| 7089 | if (availableSpace < 0) { |
|
| 7090 | rect[minSizeName] = contLayoutRect[minSizeName] - availableSpace + contLayoutRect[deltaSizeName]; |
|
| 7091 | } else { |
|
| 7092 | rect[minSizeName] = contLayoutRect[innerSizeName] - availableSpace + contLayoutRect[deltaSizeName]; |
|
| 7093 | } |
|
| 7094 | rect[alignMinSizeName] = maxAlignEndPos + contLayoutRect[alignDeltaSizeName]; |
|
| 7095 | rect[contentSizeName] = contLayoutRect[innerSizeName] - availableSpace; |
|
| 7096 | rect[alignContentSizeName] = maxAlignEndPos; |
|
| 7097 | rect.minW = min(rect.minW, contLayoutRect.maxW); |
|
| 7098 | rect.minH = min(rect.minH, contLayoutRect.maxH); |
|
| 7099 | rect.minW = max(rect.minW, contLayoutRect.startMinWidth); |
|
| 7100 | rect.minH = max(rect.minH, contLayoutRect.startMinHeight); |
|
| 7101 | if (contLayoutRect.autoResize && (rect.minW !== contLayoutRect.minW || rect.minH !== contLayoutRect.minH)) { |
|
| 7102 | rect.w = rect.minW; |
|
| 7103 | rect.h = rect.minH; |
|
| 7104 | container.layoutRect(rect); |
|
| 7105 | this.recalc(container); |
|
| 7106 | if (container._lastRect === null) { |
|
| 7107 | var parentCtrl = container.parent(); |
|
| 7108 | if (parentCtrl) { |
|
| 7109 | parentCtrl._lastRect = null; |
|
| 7110 | parentCtrl.recalc(); |
|
| 7111 | } |
|
| 7112 | } |
|
| 7113 | return; |
|
| 7114 | } |
|
| 7115 | ratio = availableSpace / totalFlex; |
|
| 7116 | for (i = 0, l = maxSizeItems.length; i < l; i++) { |
|
| 7117 | ctrl = maxSizeItems[i]; |
|
| 7118 | ctrlLayoutRect = ctrl.layoutRect(); |
|
| 7119 | maxSize = ctrlLayoutRect[maxSizeName]; |
|
| 7120 | size = ctrlLayoutRect[minSizeName] + ctrlLayoutRect.flex * ratio; |
|
| 7121 | if (size > maxSize) { |
|
| 7122 | availableSpace -= ctrlLayoutRect[maxSizeName] - ctrlLayoutRect[minSizeName]; |
|
| 7123 | totalFlex -= ctrlLayoutRect.flex; |
|
| 7124 | ctrlLayoutRect.flex = 0; |
|
| 7125 | ctrlLayoutRect.maxFlexSize = maxSize; |
|
| 7126 | } else { |
|
| 7127 | ctrlLayoutRect.maxFlexSize = 0; |
|
| 7128 | } |
|
| 7129 | } |
|
| 7130 | ratio = availableSpace / totalFlex; |
|
| 7131 | pos = contPaddingBox[beforeName]; |
|
| 7132 | rect = {}; |
|
| 7133 | if (totalFlex === 0) { |
|
| 7134 | if (pack === 'end') { |
|
| 7135 | pos = availableSpace + contPaddingBox[beforeName]; |
|
| 7136 | } else if (pack === 'center') { |
|
| 7137 | pos = Math.round(contLayoutRect[innerSizeName] / 2 - (contLayoutRect[innerSizeName] - availableSpace) / 2) + contPaddingBox[beforeName]; |
|
| 7138 | if (pos < 0) { |
|
| 7139 | pos = contPaddingBox[beforeName]; |
|
| 7140 | } |
|
| 7141 | } else if (pack === 'justify') { |
|
| 7142 | pos = contPaddingBox[beforeName]; |
|
| 7143 | spacing = Math.floor(availableSpace / (items.length - 1)); |
|
| 7144 | } |
|
| 7145 | } |
|
| 7146 | rect[alignAxisName] = contPaddingBox[alignBeforeName]; |
|
| 7147 | for (i = 0, l = items.length; i < l; i++) { |
|
| 7148 | ctrl = items[i]; |
|
| 7149 | ctrlLayoutRect = ctrl.layoutRect(); |
|
| 7150 | size = ctrlLayoutRect.maxFlexSize || ctrlLayoutRect[minSizeName]; |
|
| 7151 | if (align === 'center') { |
|
| 7152 | rect[alignAxisName] = Math.round(contLayoutRect[alignInnerSizeName] / 2 - ctrlLayoutRect[alignSizeName] / 2); |
|
| 7153 | } else if (align === 'stretch') { |
|
| 7154 | rect[alignSizeName] = max(ctrlLayoutRect[alignMinSizeName] || 0, contLayoutRect[alignInnerSizeName] - contPaddingBox[alignBeforeName] - contPaddingBox[alignAfterName]); |
|
| 7155 | rect[alignAxisName] = contPaddingBox[alignBeforeName]; |
|
| 7156 | } else if (align === 'end') { |
|
| 7157 | rect[alignAxisName] = contLayoutRect[alignInnerSizeName] - ctrlLayoutRect[alignSizeName] - contPaddingBox.top; |
|
| 7158 | } |
|
| 7159 | if (ctrlLayoutRect.flex > 0) { |
|
| 7160 | size += ctrlLayoutRect.flex * ratio; |
|
| 7161 | } |
|
| 7162 | rect[sizeName] = size; |
|
| 7163 | rect[posName] = pos; |
|
| 7164 | ctrl.layoutRect(rect); |
|
| 7165 | if (ctrl.recalc) { |
|
| 7166 | ctrl.recalc(); |
|
| 7167 | } |
|
| 7168 | pos += size + spacing; |
|
| 7169 | } |
|
| 7170 | } |
|
| 7171 | }); |
|
| 7172 | ||
| 7173 | var FlowLayout = Layout$1.extend({ |
|
| @@ 6853-7012 (lines=160) @@ | ||
| 6850 | }); |
|
| 6851 | ||
| 6852 | var FlexLayout = AbsoluteLayout.extend({ |
|
| 6853 | recalc: function (container) { |
|
| 6854 | var i, l, items, contLayoutRect, contPaddingBox, contSettings, align, pack, spacing, totalFlex, availableSpace, direction; |
|
| 6855 | var ctrl, ctrlLayoutRect, ctrlSettings, flex; |
|
| 6856 | var maxSizeItems = []; |
|
| 6857 | var size, maxSize, ratio, rect, pos, maxAlignEndPos; |
|
| 6858 | var sizeName, minSizeName, posName, maxSizeName, beforeName, innerSizeName, deltaSizeName, contentSizeName; |
|
| 6859 | var alignAxisName, alignInnerSizeName, alignSizeName, alignMinSizeName, alignBeforeName, alignAfterName; |
|
| 6860 | var alignDeltaSizeName, alignContentSizeName; |
|
| 6861 | var max = Math.max, min = Math.min; |
|
| 6862 | items = container.items().filter(':visible'); |
|
| 6863 | contLayoutRect = container.layoutRect(); |
|
| 6864 | contPaddingBox = container.paddingBox; |
|
| 6865 | contSettings = container.settings; |
|
| 6866 | direction = container.isRtl() ? contSettings.direction || 'row-reversed' : contSettings.direction; |
|
| 6867 | align = contSettings.align; |
|
| 6868 | pack = container.isRtl() ? contSettings.pack || 'end' : contSettings.pack; |
|
| 6869 | spacing = contSettings.spacing || 0; |
|
| 6870 | if (direction === 'row-reversed' || direction === 'column-reverse') { |
|
| 6871 | items = items.set(items.toArray().reverse()); |
|
| 6872 | direction = direction.split('-')[0]; |
|
| 6873 | } |
|
| 6874 | if (direction === 'column') { |
|
| 6875 | posName = 'y'; |
|
| 6876 | sizeName = 'h'; |
|
| 6877 | minSizeName = 'minH'; |
|
| 6878 | maxSizeName = 'maxH'; |
|
| 6879 | innerSizeName = 'innerH'; |
|
| 6880 | beforeName = 'top'; |
|
| 6881 | deltaSizeName = 'deltaH'; |
|
| 6882 | contentSizeName = 'contentH'; |
|
| 6883 | alignBeforeName = 'left'; |
|
| 6884 | alignSizeName = 'w'; |
|
| 6885 | alignAxisName = 'x'; |
|
| 6886 | alignInnerSizeName = 'innerW'; |
|
| 6887 | alignMinSizeName = 'minW'; |
|
| 6888 | alignAfterName = 'right'; |
|
| 6889 | alignDeltaSizeName = 'deltaW'; |
|
| 6890 | alignContentSizeName = 'contentW'; |
|
| 6891 | } else { |
|
| 6892 | posName = 'x'; |
|
| 6893 | sizeName = 'w'; |
|
| 6894 | minSizeName = 'minW'; |
|
| 6895 | maxSizeName = 'maxW'; |
|
| 6896 | innerSizeName = 'innerW'; |
|
| 6897 | beforeName = 'left'; |
|
| 6898 | deltaSizeName = 'deltaW'; |
|
| 6899 | contentSizeName = 'contentW'; |
|
| 6900 | alignBeforeName = 'top'; |
|
| 6901 | alignSizeName = 'h'; |
|
| 6902 | alignAxisName = 'y'; |
|
| 6903 | alignInnerSizeName = 'innerH'; |
|
| 6904 | alignMinSizeName = 'minH'; |
|
| 6905 | alignAfterName = 'bottom'; |
|
| 6906 | alignDeltaSizeName = 'deltaH'; |
|
| 6907 | alignContentSizeName = 'contentH'; |
|
| 6908 | } |
|
| 6909 | availableSpace = contLayoutRect[innerSizeName] - contPaddingBox[beforeName] - contPaddingBox[beforeName]; |
|
| 6910 | maxAlignEndPos = totalFlex = 0; |
|
| 6911 | for (i = 0, l = items.length; i < l; i++) { |
|
| 6912 | ctrl = items[i]; |
|
| 6913 | ctrlLayoutRect = ctrl.layoutRect(); |
|
| 6914 | ctrlSettings = ctrl.settings; |
|
| 6915 | flex = ctrlSettings.flex; |
|
| 6916 | availableSpace -= i < l - 1 ? spacing : 0; |
|
| 6917 | if (flex > 0) { |
|
| 6918 | totalFlex += flex; |
|
| 6919 | if (ctrlLayoutRect[maxSizeName]) { |
|
| 6920 | maxSizeItems.push(ctrl); |
|
| 6921 | } |
|
| 6922 | ctrlLayoutRect.flex = flex; |
|
| 6923 | } |
|
| 6924 | availableSpace -= ctrlLayoutRect[minSizeName]; |
|
| 6925 | size = contPaddingBox[alignBeforeName] + ctrlLayoutRect[alignMinSizeName] + contPaddingBox[alignAfterName]; |
|
| 6926 | if (size > maxAlignEndPos) { |
|
| 6927 | maxAlignEndPos = size; |
|
| 6928 | } |
|
| 6929 | } |
|
| 6930 | rect = {}; |
|
| 6931 | if (availableSpace < 0) { |
|
| 6932 | rect[minSizeName] = contLayoutRect[minSizeName] - availableSpace + contLayoutRect[deltaSizeName]; |
|
| 6933 | } else { |
|
| 6934 | rect[minSizeName] = contLayoutRect[innerSizeName] - availableSpace + contLayoutRect[deltaSizeName]; |
|
| 6935 | } |
|
| 6936 | rect[alignMinSizeName] = maxAlignEndPos + contLayoutRect[alignDeltaSizeName]; |
|
| 6937 | rect[contentSizeName] = contLayoutRect[innerSizeName] - availableSpace; |
|
| 6938 | rect[alignContentSizeName] = maxAlignEndPos; |
|
| 6939 | rect.minW = min(rect.minW, contLayoutRect.maxW); |
|
| 6940 | rect.minH = min(rect.minH, contLayoutRect.maxH); |
|
| 6941 | rect.minW = max(rect.minW, contLayoutRect.startMinWidth); |
|
| 6942 | rect.minH = max(rect.minH, contLayoutRect.startMinHeight); |
|
| 6943 | if (contLayoutRect.autoResize && (rect.minW !== contLayoutRect.minW || rect.minH !== contLayoutRect.minH)) { |
|
| 6944 | rect.w = rect.minW; |
|
| 6945 | rect.h = rect.minH; |
|
| 6946 | container.layoutRect(rect); |
|
| 6947 | this.recalc(container); |
|
| 6948 | if (container._lastRect === null) { |
|
| 6949 | var parentCtrl = container.parent(); |
|
| 6950 | if (parentCtrl) { |
|
| 6951 | parentCtrl._lastRect = null; |
|
| 6952 | parentCtrl.recalc(); |
|
| 6953 | } |
|
| 6954 | } |
|
| 6955 | return; |
|
| 6956 | } |
|
| 6957 | ratio = availableSpace / totalFlex; |
|
| 6958 | for (i = 0, l = maxSizeItems.length; i < l; i++) { |
|
| 6959 | ctrl = maxSizeItems[i]; |
|
| 6960 | ctrlLayoutRect = ctrl.layoutRect(); |
|
| 6961 | maxSize = ctrlLayoutRect[maxSizeName]; |
|
| 6962 | size = ctrlLayoutRect[minSizeName] + ctrlLayoutRect.flex * ratio; |
|
| 6963 | if (size > maxSize) { |
|
| 6964 | availableSpace -= ctrlLayoutRect[maxSizeName] - ctrlLayoutRect[minSizeName]; |
|
| 6965 | totalFlex -= ctrlLayoutRect.flex; |
|
| 6966 | ctrlLayoutRect.flex = 0; |
|
| 6967 | ctrlLayoutRect.maxFlexSize = maxSize; |
|
| 6968 | } else { |
|
| 6969 | ctrlLayoutRect.maxFlexSize = 0; |
|
| 6970 | } |
|
| 6971 | } |
|
| 6972 | ratio = availableSpace / totalFlex; |
|
| 6973 | pos = contPaddingBox[beforeName]; |
|
| 6974 | rect = {}; |
|
| 6975 | if (totalFlex === 0) { |
|
| 6976 | if (pack === 'end') { |
|
| 6977 | pos = availableSpace + contPaddingBox[beforeName]; |
|
| 6978 | } else if (pack === 'center') { |
|
| 6979 | pos = Math.round(contLayoutRect[innerSizeName] / 2 - (contLayoutRect[innerSizeName] - availableSpace) / 2) + contPaddingBox[beforeName]; |
|
| 6980 | if (pos < 0) { |
|
| 6981 | pos = contPaddingBox[beforeName]; |
|
| 6982 | } |
|
| 6983 | } else if (pack === 'justify') { |
|
| 6984 | pos = contPaddingBox[beforeName]; |
|
| 6985 | spacing = Math.floor(availableSpace / (items.length - 1)); |
|
| 6986 | } |
|
| 6987 | } |
|
| 6988 | rect[alignAxisName] = contPaddingBox[alignBeforeName]; |
|
| 6989 | for (i = 0, l = items.length; i < l; i++) { |
|
| 6990 | ctrl = items[i]; |
|
| 6991 | ctrlLayoutRect = ctrl.layoutRect(); |
|
| 6992 | size = ctrlLayoutRect.maxFlexSize || ctrlLayoutRect[minSizeName]; |
|
| 6993 | if (align === 'center') { |
|
| 6994 | rect[alignAxisName] = Math.round(contLayoutRect[alignInnerSizeName] / 2 - ctrlLayoutRect[alignSizeName] / 2); |
|
| 6995 | } else if (align === 'stretch') { |
|
| 6996 | rect[alignSizeName] = max(ctrlLayoutRect[alignMinSizeName] || 0, contLayoutRect[alignInnerSizeName] - contPaddingBox[alignBeforeName] - contPaddingBox[alignAfterName]); |
|
| 6997 | rect[alignAxisName] = contPaddingBox[alignBeforeName]; |
|
| 6998 | } else if (align === 'end') { |
|
| 6999 | rect[alignAxisName] = contLayoutRect[alignInnerSizeName] - ctrlLayoutRect[alignSizeName] - contPaddingBox.top; |
|
| 7000 | } |
|
| 7001 | if (ctrlLayoutRect.flex > 0) { |
|
| 7002 | size += ctrlLayoutRect.flex * ratio; |
|
| 7003 | } |
|
| 7004 | rect[sizeName] = size; |
|
| 7005 | rect[posName] = pos; |
|
| 7006 | ctrl.layoutRect(rect); |
|
| 7007 | if (ctrl.recalc) { |
|
| 7008 | ctrl.recalc(); |
|
| 7009 | } |
|
| 7010 | pos += size + spacing; |
|
| 7011 | } |
|
| 7012 | } |
|
| 7013 | }); |
|
| 7014 | ||
| 7015 | var FlowLayout = Layout.extend({ |
|
